: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;
}


.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: 0.5625rem;
  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(1.5625rem, 2.2vw, 2.1875rem);
  letter-spacing: -0.02em;
}

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

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

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

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

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

.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: 0.8125rem;
  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: 0.75rem;
}

.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: 1.5rem;
  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(1rem, 1.55vw, 1.375rem);
  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: 0.6875rem;
  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: 0.625rem;
}


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

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


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


.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-title {
  position: relative;
  margin: 0 0 10px;
  color: #f0eceb;
  font-size: 1.1875rem;
  line-height: 1.25;
}

.card-summary {
  position: relative;
  display: -webkit-box;
  margin: 0 0 22px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.6875rem;
  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 {
  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: 0.5625rem;
  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: 0.5625rem;
}


.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); }


.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: 1rem;
  font-weight: 400;
}

.approval-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.6875rem;
  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: 0.5625rem 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: 0.625rem;
  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;
}


.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: 2.125rem;
}

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

.empty-state p {
  max-width: 390px;
  margin: 0;
  font-size: 0.75rem;
  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: 0.875rem;
}

/* 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;
}

/*
 * A DIALOG'S SURFACE SITS ABOVE ITS OWN SCRIM — DECLARED, NEVER INHERITED FROM DOM ORDER.
 *
 * `.overlay-scrim` is `position: absolute`, so inside an overlay it is a POSITIONED
 * descendant and paints in step 8 of the painting order (CSS 2.1 Appendix E). A surface
 * that declares no position at all is an in-flow block and paints in step 4 — under it.
 * That is not a near miss and not a subtle dimming: the scrim covers the surface
 * completely, takes every pointer event that was meant for it, and because the scrim
 * carries `backdrop-filter: blur(7px)`, the surface underneath is not merely darkened but
 * SMEARED. That is exactly how the phone's More sheet came to blur the page and show
 * nothing: `.more-sheet` was the one surface in this file that never stated a layer, and
 * every other dialog only looked correct because it happened to have said `position:
 * relative` for its own reasons.
 *
 * So it is said once, here, for every surface that lives inside an overlay. Nothing
 * visual changes for the six that were already positioned — they were already painting
 * above their scrim, and `z-index: 2` only writes down the layer DOM order was silently
 * giving them. `test/mobile-redesign.test.mjs` holds all seven to this rule, so a new
 * dialog cannot be added without one.
 */
.detail-panel,
.assistant-panel,
.settings-modal,
.combine-modal,
.names-modal,
.confirm-dialog,
.more-sheet {
  position: relative;
  z-index: 2;
}

@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; } }
/* The phone's More sheet (MAS-1) rises as it fades, the same distance the panel slides. */
@keyframes phone-sheet-in { from { opacity: 0; transform: translateY(10px); } }

.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(2rem, 5vw, 3.125rem);
  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: 0.875rem;
  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: 0.625rem;
}

.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: 0.6875rem;
}

.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: 1.125rem;
  font-weight: 400;
}

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

.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));
}


.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 {
  width: 100%;
  resize: vertical;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.75rem;
  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: 0.875rem;
  font-weight: 400;
}

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

.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: 1.25rem;
  font-weight: 400;
}

.analysis-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 0.6875rem;
  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: 0.625rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.analysis-card p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.75rem;
  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: 0.6875rem;
  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: 0.5625rem;
}

.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: 1.0625rem;
  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: 0.625rem;
}

.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: 0.6875rem; }
.activity-row time { color: var(--muted-2); font-size: 0.5625rem; }

.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: 1.5rem;
  font-weight: 400;
}

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

/* 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: 0.5625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}


.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: 0.6875rem;
  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: 0.5rem;
  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: 0.5625rem;
}

.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: 1.75rem;
  font-weight: 400;
}

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

.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: 0.625rem;
  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: 0.6875rem;
}

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

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

.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: 0.625rem;
  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: 0.6875rem;
}

.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) {

  
  .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: 1.5rem; }
  .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-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(3rem, 6vw, 5.125rem);
  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: 1.125rem;
}

.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(1rem, 1.45vw, 1.25rem);
}

.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 {
  align-items: center;
  margin-bottom: 20px;
}

.calm-home .section-title {
  flex: none;
  color: #252526;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}

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


.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: 0.5625rem;
  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: 0.5625rem;
}

.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;
  /* How far apart the stacked controls sit, top edge to top edge. Written as its own
     token rather than as arithmetic at each use, so a card size can restate it and the
     touch block below can open it wide enough that the fingertip reach around one
     control stops exactly where its neighbour's begins. */
  --control-step: 36px;
  --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-step)); }
.library-card-wrap > .idea-pin { top: calc(var(--card-inset) + var(--control-step) + var(--control-step)); }

@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. The
   drawn buttons keep the size they are drawn at; each gains a fingertip's worth of reach
   around it instead, exactly the way the checklist tick does. The step is set to 44px so
   two neighbouring reaches meet at their edges and no tap is ever ambiguous. */
@media (hover: none) {
  .library-card-wrap { --control-size: 34px; --control-step: 44px; }
  .library-card-wrap > .drag-handle::after,
  .library-card-wrap > .combine-pick::after,
  .library-card-wrap > .idea-pin::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
  }
}


.art-violet,
.art-indigo {
  background: linear-gradient(150deg, #e8e5f2, #a7add7);
}

.art-rose {
  background: linear-gradient(145deg, #e4d6c5, #efe9df);
}

.art-teal,
.art-sage {
  background: linear-gradient(155deg, #d8e2d6, #9eb4a0);
}

.art-amber {
  background: linear-gradient(145deg, #eadbc6, #caa47d);
}

.art-blue {
  background: linear-gradient(150deg, #e2e9f3, #9eb6d6);
}

.art-lilac {
  background: linear-gradient(150deg, #ebe4ec, #bfa9c4);
}

.art-slate {
  background: linear-gradient(150deg, #e5e4e0, #b9b7b0);
}

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

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

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

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

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


.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: 0.625rem;
  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: 0.9375rem;
}


.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,
.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 {
  color: #333438;
}

.relationship-note,
.relationship-mini span,
.analysis-hero p,
.clean-list li,
.step-list li {
  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));
}


.add-entry-form textarea,
.assistant-form textarea,
.prompt-output {
  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;
}

/* The way back, beside what was just announced. Shared by both runtimes — the desktop's
   toasts carry one too — so it is declared here rather than in the phone layer, which is
   for what only a hand gets. A toast holding one stays up for seven seconds rather than
   three, because it is asking to be read AND decided on. */
.toast:has(.toast-undo) { display: flex; align-items: center; gap: 12px; }
.toast-undo {
  flex: none;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}
.toast-undo:disabled { opacity: 0.5; }

.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));
  }


}

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

  .calm-home .wordmark h1 {
    font-size: 2.9375rem;
  }

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

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

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


}

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

.settings-kicker {
  display: block;
  margin-bottom: 6px;
  color: #3150b8;
  font-size: 0.5625rem;
  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: 1.125rem;
  font-weight: 500;
}

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

.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: 0.625rem;
  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: 0.625rem;
  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;
}

/*
 * A file field (the phone's "read a backup back in") is the one input whose CONTENT is a
 * control: the browser draws its own button and then the chosen file's name beside it, and
 * neither obeys the fixed height every other field here has. So it gets its own line box
 * and is allowed to grow, and the long name a phone gives a downloaded file wraps inside
 * the field instead of pushing the dialog wider than the screen.
 */
.settings-field input[type="file"] {
  height: auto;
  min-height: 42px;
  max-width: 100%;
  padding: 9px 12px;
  line-height: 1.5;
}

.settings-field small {
  min-height: 26px;
  color: #969088;
  font-size: 0.53125rem;
  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: 0.53125rem;
}

.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: 0.625rem;
  line-height: 1.55;
}

.lab-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4a5ec0;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.lab-muted { color: #8c877f; font-size: 0.625rem; 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: 0.6875rem; }
.lab-signal p,
.lab-signal small { margin-top: 3px; color: #8e8982; font-size: 0.5625rem; }
.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: 0.5rem; line-height: 1.35; }
.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: 0.5rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.next-move-heading h3 { margin: 8px 0 0; font-family: var(--serif); font-size: 1.4375rem; 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: 0.5rem; }
.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; }
/* The fields grow with their words (Herv, 2026-09-07): no fixed height and no scrollbar
   inside a two-line move — the browser sizes the box to its content where it can, and
   app.js does where it cannot. */
.next-move-form textarea { min-height: 42px; height: auto; overflow: hidden; resize: none; field-sizing: content; }
.next-move-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; }
.next-move-suggest { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; text-align: left; }
.next-move-suggest b { flex: none; white-space: nowrap; }
.next-move-suggest span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.next-move-done { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 12px; border: 1px solid rgba(63, 76, 153, .25); border-radius: 999px; background: rgba(255, 255, 255, .6); color: #2f3f8f; font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.card-next b { margin-right: 6px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* Every to-do on an idea, in one list with a box each (Herv, 2026-09-07): the same stage
   the "Mark done" pill sets, drawn as a checklist so a handful of to-dos can be ticked off
   in a row. Done ones stay, struck through, until they are put back. */
.todo-list-card { margin-bottom: 18px; padding: 18px 20px; border: 1px solid rgba(63, 76, 153, .17); border-radius: 20px; background: rgba(255, 253, 249, .8); }
.todo-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.todo-list-head small { color: #5263bb; font-size: 0.625rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.todo-list-head h3 { margin: 4px 0 0; font-size: 1rem; font-weight: 600; }
.todo-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.todo-item label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; padding: 8px 4px; cursor: pointer; }
.todo-item input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: #2e4fbf; cursor: pointer; }
.todo-item span { overflow-wrap: anywhere; line-height: 1.45; }
.todo-item.is-done span { color: var(--muted); text-decoration: line-through; }
.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: 0.5rem; text-transform: uppercase; }
.project-link-card strong { margin: 3px 0; color: #4a4946; font-size: 0.625rem; }
.project-link-card div > span { overflow: hidden; color: #aaa49c; font-size: 0.5rem; text-overflow: ellipsis; white-space: nowrap; }
.detail-signal > span { color: #4e62c0; font-size: 1.25rem; }

.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: 1.4375rem; }
.dna-intro p { margin: 0; color: #8d8780; font-size: 0.5625rem; }
.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: 0.5rem; text-transform: uppercase; }
.decision-capture strong { margin-top: 3px; font-size: 0.625rem; }
.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: 0.5rem; font-weight: 700; text-transform: uppercase; }
.receipt-card p { margin: 6px 0; color: #55524e; font-size: 0.625rem; }
.receipt-card time { color: #aaa49d; font-size: 0.5rem; }

.saved-thread { color: #aaa49d; font-size: 0.5rem; 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: 0.4375rem; cursor: pointer; }

.restore-label { cursor: pointer; }

@media (max-width: 900px) {
  .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: 0.625rem;
}


.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: 1.0625rem; font-weight: 500; }
.mode-cards small { margin-top: 4px; color: #979189; font-size: 0.5rem; }
.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: 620px) {


  


  


  


  
  
  .mode-cards { grid-template-columns: 1fr; }
}

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

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

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

.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: 0.625rem;
  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: 0.6875rem;
}

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

.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: 0.5625rem;
}

.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: 0.59375rem;
}

.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: 0.5rem;
}

.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: 0.59375rem;
  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: 0.75rem;
  --type-label: 0.8125rem;
  --type-control: 0.875rem;
  --type-body: 0.9375rem;
}

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

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

.page-subtitle,
.detail-summary { font-size: 1rem; 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,
.semantic-reason { font-size: var(--type-caption); line-height: 1.5; }

/* 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,
.activity-row span { font-size: var(--type-control); line-height: 1.55; }
.status-select,
.tab-button,
.context-chip { font-size: var(--type-label); }
.activity-row time { font-size: var(--type-caption); }
.add-entry-form textarea,
.assistant-form textarea,
.prompt-output { 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); }
.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; }

.lab-muted { font-size: var(--type-control); line-height: 1.55; }
.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); }


.mode-cards label > span { min-height: 78px; padding: 15px 16px; }
.mode-cards strong { font-size: 1.1875rem; }
.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: 1.3125rem; 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; }


@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;
}

/* The two groups inside the bar are invisible to the desktop's layout: the chips and the
   two actions stay direct flex items of the wrapping row, exactly as before they were
   grouped. Only the phone gives the groups a box of their own (see the phone layer). */
.combine-chips,
.combine-actions { display: contents; }

.combine-chip-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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: 1.6875rem;
  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: 1rem;
  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: 0.5625rem;
  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: 0.875rem; 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: 0.6875rem; 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: 0.5625rem; 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: 1.25rem; }
.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: 0.6875rem; 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); }

/* The handle is capability-gated: the desktop draws it, an editable phone does not (drag
   filing is a desktop flow), and a reading copy does not either. So this row arrives with
   two children or with one, and a fixed two-track grid could not say that — with the handle
   gone the text fell into the 26px HANDLE column and wrapped a character at a time while the
   rest of the card stood empty. A flex row states the real rule: the handle takes exactly its
   own width when it is there (26px, 34px under a fingertip), and the words own everything
   left over either way. min-width: 0 releases the min-content floor underneath, so a pasted
   URL wraps inside the card instead of widening it. */
.thought-card-main { display: flex; gap: 10px; align-items: flex-start; }
.thought-card-main > .drag-handle { flex: 0 0 auto; }
.thought-card-main > .thought-body { flex: 1 1 0%; min-width: 0; }
.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: 0.9375rem;
  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;
}


/* 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; }
/* Flex items default to min-width:auto, which made one long word widen the title column
   and push the close button outside a 200%-text phone dialog. */
.confirm-head > div { min-width: 0; }
.confirm-head h2 { margin: 5px 0 6px; font-family: var(--serif); font-size: 1.5625rem; font-weight: 400; line-height: 1.25; overflow-wrap: anywhere; }
.confirm-head p { margin: 0; max-width: 52ch; color: var(--muted); font-size: var(--type-label); line-height: 1.6; overflow-wrap: break-word; }

.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); }
/* What a privacy change does, place by place (thoughtPrivacyPlan): read by everyone, so it is
   ordinary text at the dialog's own size, not a footnote. */
.dialog-effects { display: grid; gap: 8px; margin: 12px 0 0; padding: 0 0 0 1.1em; color: var(--text-soft); font-size: var(--type-control); line-height: 1.5; }
.dialog-effects li::marker { color: var(--muted-2); }
.dialog-effects strong { color: var(--text); font-weight: 600; }
/* 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: 1.25rem; }

.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);
}

/* Review's cards carry the same handle, gated the same way, and so need the same rule as
   .thought-card-main above: the words own the row whether or not a handle is drawn. */
.inbox-card-head { display: flex; gap: 11px; align-items: flex-start; }
.inbox-card-head > .drag-handle { flex: 0 0 auto; }
.inbox-card-head > :not(.drag-handle) { flex: 1 1 0%; min-width: 0; }
.inbox-card-head p { margin: 0; color: var(--text-soft); font-size: 0.9375rem; 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: 1.1875rem; 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: 0.875rem; 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: 0.96875rem;
  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: 1rem; 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; }
}


@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: 1.1875rem; 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: 1rem; }

@media (max-width: 640px) {
  .clarify-card { padding: 14px; }
  .clarify-question { font-size: 1.0625rem; }
  .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: 0.9375rem;
  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: 0.84375rem;
  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: 0.78125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.capture-mode-hint { margin: 0; font-size: 0.8125rem; 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: 0.84375rem; color: var(--muted); }
.receipt-move select { max-width: 240px; }

/* The receipt's runner-up categories (the product critique of 2026-09-06): the other
   categories a capture's words touched, each a one-tap filing beside the studio's reading. */
.receipt-offers { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: 4px; }
.receipt-offers-lead { font-size: 0.8125rem; color: var(--muted); }
.receipt-offer { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--violet-soft); color: var(--violet); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.receipt-offer:hover { border-color: var(--violet); }


/* 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: 0.96875rem; line-height: 1.4; }

.audit-kind {
  flex-shrink: 0;
  font-size: 0.71875rem;
  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: 0.875rem; 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: 0.84375rem;
  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: 0.875rem; }
.audit-choice small { font-size: 0.78125rem; 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: 0.9375rem; }
.review-connection-kind { font-size: 0.78125rem; 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: 0.84375rem; 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: 0.9375rem;
  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: 0.875rem;
  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-main { display: grid; gap: 2px; min-width: 0; }

.row-title { font-weight: 600; font-size: 0.90625rem; 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: 0.6875rem; 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: 0.625rem; }
.row-dependency { color: var(--violet); font-style: normal; font-size: 0.8125rem; }

.row-summary {
  font-size: 0.8125rem;
  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: 0.75rem; 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: 0.71875rem; 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: 1.3125rem;
  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: 0.71875rem;
  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: 1rem; }
  .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: 1.5rem;
  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: 0.6875rem;
  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: 0.75rem;
  flex: none;
  margin-top: 1px;
}

.thought-search-main { display: grid; gap: 4px; min-width: 0; }
.thought-search-main p { margin: 0; font-size: 0.84375rem; 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: 1.09375rem;
  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: 1rem; }
}

@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: 0.625rem;
  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 gutter under a card exists to line its actions up with the text beside the drag
 * handle. Where no handle is drawn — an editable phone, a reading copy — it is an indent
 * aligned to nothing, so it is keyed on the handle itself rather than on a screen width:
 * a narrow desktop window still has its handle and still keeps its gutter. */
.thought-card:not(:has(.drag-handle)) .thought-controls,
.inbox-card:not(:has(.drag-handle)) .inbox-card-actions { padding-left: 0; }

/* The thought filters wrap instead of scrolling away. A sideways scroller hides whatever
 * does not fit behind a bar a touch screen never draws — five of the eight filters on a
 * phone, one of them on a tablet. Wrapping spends a row of height exactly where the width
 * is short, and changes nothing at any width where the whole strip already fits. */
.thought-toolbar .filter-strip { flex-wrap: wrap; }

/* 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; }
  /* A 44px control that is still allowed to shrink is not a 44px control. In a tight flex
   * row — a dialog's head beside a long idea name — the browser was squeezing these down
   * to 25–32px, so the close button on a confirmation was the hardest thing to hit on it. */
  .icon-button { flex: 0 0 auto; }
  /* The thought filters are pills, and on a phone they are the main way through a long
   * list, so they get the same floor as every other control in this block. */
  .pill-button { min-height: 44px; }
  /* The checklist tick keeps the small square it is drawn as — enlarging the box would
   * redraw the checklist — and gains a fingertip's worth of reach around it instead. The
   * rows are 8px apart and taller than the reach, so no two ticks can overlap. */
  .checklist-tick { position: relative; }
  .checklist-tick::after { content: ""; position: absolute; inset: -11px; border-radius: 12px; }
  .text-button {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .thought-controls .text-button,
  .thought-toolbar .form-row .text-button,
  .inbox-card-actions .text-button { min-height: 44px; }
  .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; }
  /* The select the floor above missed. It sits in a row whose buttons were already given
   * one, so a 31px filing menu was the one control in Review a thumb kept missing. */
  .inbox-card-actions select { min-height: 44px; }
  .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 Thoughts toolbar stacks. Side by side in a hand's width the two halves fought
   * over one line: the filter strip scrolled five of its eight filters out of sight
   * behind a bar no thumb can see, and the three actions beside it were wrung into
   * two- and three-line columns. Stacked, each half owns the width and wraps within
   * it — every filter on screen, every action at its own size, nothing scrolled away. */
  .thought-toolbar { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .thought-toolbar .filter-strip { flex-wrap: wrap; overflow-x: visible; }
  .thought-toolbar .form-row { flex-wrap: wrap; justify-content: flex-start; }

  /* 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 used to need a rule here, because it reserved a fixed grid column for
   its drag handle and the reading copy draws no handle. That correction was keyed on the
   reading copy alone, so an EDITABLE phone — which draws no handle either — kept falling
   into the handle's column. The card row is a flex row now (see .thought-card-main), which
   says the rule once for every runtime, so there is nothing left to correct here. */

/* 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; }

/* Card size (0.6) ----------------------------------------------------------------------
   The gallery's card is one size in three, chosen by the person and remembered on this
   device alone. `data-card-size` is written onto the grid itself, so the home page's own
   `.idea-card-grid` — a different list with a different job — is untouched by every rule
   below, and so a phone and a desktop can sit on different sizes at the same time without
   either of them syncing a preference the other never asked for.

   Medium is the size the studio has always drawn: every number in its block below is the
   number that was already in force, restated here so the three sizes read as one ladder
   instead of one default and two exceptions. A desktop with no saved preference gets
   Medium, so nothing about the desktop gallery changes.

   Column counts are explicit per band rather than auto-fill, because a column count is
   the thing being promised — two readable cards across a phone at Small — and a promise
   that is computed from whatever a browser makes of a minimum width is not one that can
   be checked. Every track is `minmax(0, 1fr)`, which cannot be pushed wider than its
   share, so no content inside a card can ever widen the page.

   The three bands are the ones the rest of this stylesheet already uses: the phone
   (≤620px), the tablet rail (621–1180px), and the desktop. They do not overlap, so the
   order they are written in decides nothing. */

.library-grid[data-card-size="small"] { gap: 10px; }
.library-grid[data-card-size="medium"] { gap: 20px; }
.library-grid[data-card-size="large"] { gap: 22px; }

@media (max-width: 620px) {
  .library-grid[data-card-size="small"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-grid[data-card-size="medium"] { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .library-grid[data-card-size="large"] { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

@media (min-width: 621px) and (max-width: 1180px) {
  .library-grid[data-card-size="small"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .library-grid[data-card-size="medium"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-grid[data-card-size="large"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1181px) {
  .library-grid[data-card-size="small"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .library-grid[data-card-size="medium"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .library-grid[data-card-size="large"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Small: two across a hand. The picture gives up height, the title gives up two points of
   size and takes two lines, and the card's own gutters close from 18px to 10px — but the
   title, the category, the Local Only lock, the pin, the combine badge and the whole card
   as a button to open the idea are all still drawn. Nothing is hidden to make it fit.
   The picture stays taller than the three stacked controls need (8 + 44 + 44 + 34 = 130),
   so no control is ever laid over the words. */
.library-grid[data-card-size="small"] .library-card-wrap { --card-inset: 8px; }
.library-grid[data-card-size="small"] .idea-card { min-height: 214px; }
.library-grid[data-card-size="small"] .idea-visual { height: 136px; }
.library-grid[data-card-size="small"] .idea-card .card-title {
  margin: 10px 10px 6px;
  font-size: 0.875rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* A pasted address is one word as far as wrapping is concerned; it may break anywhere
     rather than pushing the track wider than its share. */
  overflow-wrap: anywhere;
}
.library-grid[data-card-size="small"] .idea-card .card-footer {
  width: calc(100% - 20px);
  margin: auto 10px 0;
}
.library-grid[data-card-size="small"] .semantic-reason { margin: 5px 3px 0; }
.library-grid[data-card-size="small"] .combine-merged-flag { margin: 5px 3px 0; }

/* Medium: the gallery exactly as it has always been drawn. */
.library-grid[data-card-size="medium"] .idea-card { min-height: 288px; }
.library-grid[data-card-size="medium"] .idea-visual { height: 176px; }
.library-grid[data-card-size="medium"] .idea-card .card-title {
  margin: 16px 18px 8px;
  font-size: 1.1875rem;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

/* Large: one column to read down, on a phone. More picture, a larger name, more air. */
.library-grid[data-card-size="large"] .idea-card { min-height: 340px; }
.library-grid[data-card-size="large"] .idea-visual { height: 220px; }
.library-grid[data-card-size="large"] .idea-card .card-title {
  margin: 18px 20px 10px;
  font-size: 1.375rem;
  line-height: 1.24;
  overflow-wrap: anywhere;
}

/* The chooser itself. It only exists while the gallery is on screen — there is nothing to
   size in the compact list — and it sits in the toolbar beside the filter it resembles. */
.library-card-size {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.library-card-size > span {
  color: var(--muted-2);
  font-size: var(--type-label, 10px);
  white-space: nowrap;
}
.library-card-size select {
  min-width: 0;
  max-width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-solid, transparent);
  color: inherit;
  font: inherit;
}
@media (hover: none), (pointer: coarse) {
  .library-card-size select { min-height: 44px; }
}
@media (max-width: 620px) {
  .library-card-size { flex: 1 1 100%; }
  .library-card-size select { flex: 1 1 auto; }
}

/* Settings, rearranged (Productization Phase O1) --------------------------------------
 *
 * Five sections and two folds, in the order a person cares about them. Everything here is
 * the last word in the cascade on purpose, the way the mobile layer above is: these rules
 * describe the new containers and leave every existing control — .settings-field,
 * .ai-settings-form, .setting-row, .ai-connection-card — exactly as it was, because the
 * controls did not change, only where they live.
 *
 * Three promises this block keeps:
 *
 *   - nothing overflows sideways. Every section is min-width: 0 inside a grid, long
 *     values wrap, and the two things that genuinely cannot wrap (the conflict table and
 *     the preview lists) scroll inside their own box rather than widening the page.
 *   - every control is reachable by finger. On a coarse pointer the interactive rows
 *     hold a 44px floor, which is the same floor the library cards use.
 *   - focus is visible, and motion is optional.
 */

.settings-section {
  display: block;
  min-width: 0;
  margin-top: 18px;
  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);
}

/* The header already carries the space beneath it; the first section adds none. */
.settings-header + .settings-section { margin-top: 0; }

.settings-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 14px;
  padding-bottom: 15px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(55, 51, 45, .1);
}

.settings-section-head > div { min-width: 0; flex: 1 1 240px; }

.settings-section h3 {
  margin: 0 0 4px;
  color: #202123;
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 500;
}

.settings-section-note {
  margin: 0;
  color: #858179;
  font-size: var(--type-label, 10px);
  line-height: 1.5;
}

/* The one sentence a section leads with — who you are signed in as, above all. */
.settings-lead {
  margin: 14px 0 0;
  color: #3f3d39;
  font-size: var(--type-control, 12px);
  line-height: 1.55;
}
.settings-lead strong { color: #202123; overflow-wrap: anywhere; }

/* Something is wrong with the APPLICATION, not with the person's data. Stated in a box
   that looks like a statement rather than an error a click could have caused. */
.settings-alert {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(176, 96, 48, .3);
  border-radius: 12px;
  background: rgba(255, 246, 236, .9);
  color: #6d452a;
  font-size: var(--type-label, 10px);
  line-height: 1.6;
}
.settings-alert strong { display: block; margin-bottom: 4px; color: #59341c; }

.settings-note {
  margin: 0;
  color: #8b867e;
  font-size: var(--type-label, 10px);
  line-height: 1.55;
}

/* The one offer the account flow makes about a library: a real checkbox with a real
   label, never a styled div, so it is reachable and announced like the control it is. */
.settings-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  grid-column: 1 / -1;
  min-height: 44px;
  cursor: pointer;
}
.settings-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: #3150b8;
}
.settings-check > span { display: grid; gap: 3px; min-width: 0; }
.settings-check strong { color: #4a4844; font-size: var(--type-label, 10px); font-weight: 650; }
.settings-check small { color: #969088; font-size: var(--type-caption, 9px); line-height: 1.5; }

/* The two folds. <details> and <summary> — keyboard operable without a line of script. */
.settings-fold {
  margin-top: 18px;
  border: 1px solid rgba(55, 51, 45, .12);
  border-radius: 14px;
  background: rgba(250, 248, 243, .6);
}

.settings-fold > summary {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 56px;
  padding: 14px 16px;
  border-radius: 14px;
  cursor: pointer;
  list-style: none;
}
.settings-fold > summary::-webkit-details-marker { display: none; }

/* The disclosure triangle, drawn rather than borrowed, so it turns with the state. */
.settings-fold > summary::after {
  content: "";
  position: absolute;
  right: 18px;
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-right: 1.5px solid #8b867e;
  border-bottom: 1.5px solid #8b867e;
  transform: rotate(45deg);
  transition: transform 160ms ease;
}
.settings-fold[open] > summary::after { transform: rotate(-135deg); margin-top: 8px; }
.settings-fold > summary { position: relative; padding-right: 38px; }

.settings-fold-title {
  color: #4a4844;
  font-size: var(--type-control, 12px);
  font-weight: 650;
}
.settings-fold-note {
  color: #969088;
  font-size: var(--type-caption, 9px);
  line-height: 1.5;
}

.settings-fold > *:not(summary) { padding: 0 16px; }
.settings-fold > *:last-child:not(summary) { padding-bottom: 16px; }
.settings-fold .settings-group { margin-top: 4px; }
.settings-fold .ai-connection-card { margin-top: 12px; }

/* The sync word when it is asking for something. Distinct from "on", because "Needs
   attention" and "Up to date" must never look alike at a glance. */
.connection-state.needs-attention { color: #a8642f; }
.connection-state.needs-attention i {
  background: #d08a4a;
  box-shadow: 0 0 8px rgba(208, 138, 74, .5);
}

/* Nothing widens the page. The two elements that genuinely cannot wrap carry their own
   scroller instead of pushing the modal sideways. */
.settings-section,
.settings-fold { overflow-wrap: break-word; }
.everywhere-conflict-review,
.settings-section .everywhere-list { overflow-x: auto; }
.settings-section code { overflow-wrap: anywhere; }

/* Focus you can see, on everything focusable in here — including the folds' summaries,
   which are focusable elements the browser does not outline by default in every theme. */
.settings-modal :focus-visible,
.settings-fold > summary:focus-visible {
  outline: 2px solid #3150b8;
  outline-offset: 2px;
  border-radius: 8px;
}

/* Fingertips. The same 44px floor the library controls use. */
@media (hover: none), (pointer: coarse) {
  .settings-modal .secondary-button,
  .settings-modal .primary-button,
  .settings-modal .text-button,
  .settings-modal .icon-button,
  .settings-modal .restore-label { min-height: 44px; }
  .settings-fold > summary { min-height: 60px; }
}

/* Narrow phones: the modal fills the width it has, forms go to one column (the rule
   above at 620px already does that), and the section heading stacks its state chip under
   the title rather than squeezing both onto one line. */
@media (max-width: 620px) {
  .settings-section { padding: 16px 14px; }
  .settings-section-head { flex-direction: column; align-items: flex-start; }
  .settings-fold > summary { padding: 14px 34px 14px 14px; }
  .settings-fold > *:not(summary) { padding: 0 14px; }
  .settings-fold > *:last-child:not(summary) { padding-bottom: 14px; }
}

/* Motion is decoration here, and decoration is optional. */
@media (prefers-reduced-motion: reduce) {
  .settings-modal { animation: none; }
  .settings-fold > summary::after { transition: none; }
}

/* The Prompt Studio --------------------------------------------------------
   A form, not a control panel. Four quiet fieldsets, a list of things this idea
   knows, and the prompt itself underneath — everything selectable with the
   keyboard, everything labelled, nothing that needs a mouse to understand. */

.prompt-studio { display: grid; gap: 16px; }

.prompt-form { display: grid; gap: 14px; margin: 0; }

.prompt-fieldset {
  margin: 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-soft);
}

.prompt-fieldset > legend {
  padding: 0 6px;
  color: var(--text-soft);
  font-family: var(--serif);
  font-size: var(--type-control);
  font-weight: 400;
}

.prompt-choice-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}

.prompt-choice-grid.is-thirds { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.prompt-choice {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  cursor: pointer;
}

.prompt-choice:hover { border-color: var(--line-strong); }
.prompt-choice.is-chosen { border-color: var(--line-strong); background: var(--violet-soft); }
.prompt-choice input { margin-top: 2px; flex: none; accent-color: var(--violet); }
.prompt-choice > span { display: grid; gap: 2px; min-width: 0; }
.prompt-choice strong { color: var(--text-soft); font-size: var(--type-control); font-weight: 500; }
.prompt-choice small { color: var(--muted); font-size: var(--type-caption); line-height: 1.45; }

.prompt-field { display: grid; gap: 5px; margin-top: 12px; }
.prompt-field > span { color: var(--text-soft); font-size: var(--type-label); }
.prompt-field small { color: var(--muted); font-size: var(--type-caption); line-height: 1.45; }

.prompt-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: var(--type-control);
  line-height: 1.5;
  resize: vertical;
}

.prompt-source-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 10px 0 12px;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--violet-soft);
}

.prompt-source-toolbar > span { color: var(--text-soft); font-size: var(--type-label); }
.prompt-source-buttons { display: flex; flex-wrap: wrap; gap: 4px 12px; }

.prompt-group {
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
}

.prompt-group > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  color: var(--text-soft);
  font-size: var(--type-label);
  cursor: pointer;
  list-style: none;
}

.prompt-group > summary::-webkit-details-marker { display: none; }
.prompt-group > summary small { color: var(--muted); font-size: var(--type-caption); }
.prompt-group-hint { margin: 0 13px 8px; color: var(--muted); font-size: var(--type-caption); line-height: 1.45; }
.prompt-source-list { display: grid; gap: 4px; padding: 0 9px 10px; }

.prompt-source {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}

.prompt-source:hover { background: var(--violet-soft); }
.prompt-source input { margin-top: 3px; flex: none; accent-color: var(--violet); }
.prompt-source-body { display: grid; gap: 2px; min-width: 0; }
.prompt-source-text {
  color: var(--text-soft);
  font-size: var(--type-control);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.prompt-source small { color: var(--muted); font-size: var(--type-caption); }
.prompt-source.is-blocked { cursor: default; opacity: 0.62; }
.prompt-source.is-blocked:hover { background: none; }
.prompt-source.is-private .prompt-source-text { border-left: 2px solid var(--line-strong); padding-left: 8px; }

.prompt-advanced {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-soft);
}

.prompt-advanced > summary {
  padding: 11px 16px;
  color: var(--text-soft);
  font-size: var(--type-label);
  cursor: pointer;
}

.prompt-advanced > *:not(summary) { margin: 0 16px; }
.prompt-advanced > *:last-child:not(summary) { margin-bottom: 16px; }
.prompt-advanced .prompt-field:first-of-type { margin-top: 0; }

.prompt-toggle {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 12px;
  color: var(--text-soft);
  font-size: var(--type-label);
  line-height: 1.5;
  cursor: pointer;
}

.prompt-toggle input { margin-top: 2px; flex: none; accent-color: var(--violet); }

/* The consequence of ticking the box, under the box, in the quieter voice a caption
   uses — enough to read before deciding, not a warning dialogue in the way. */
.prompt-toggle small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--type-caption);
  line-height: 1.5;
}

.prompt-status { display: grid; gap: 6px; }
.prompt-status p { margin: 0; }
.prompt-mode { color: var(--text-soft); font-size: var(--type-label); line-height: 1.5; }
.prompt-mode strong { font-weight: 500; }
.prompt-context-used { color: var(--muted); font-size: var(--type-caption); line-height: 1.5; }

.prompt-stale {
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--violet-soft);
  color: var(--text-soft);
  font-size: var(--type-label);
  line-height: 1.5;
}

.prompt-warnings {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: var(--type-caption);
  line-height: 1.5;
}

.prompt-trace > summary { color: var(--muted); font-size: var(--type-caption); cursor: pointer; }
.prompt-trace-group { margin-top: 7px; }
.prompt-trace-group strong { color: var(--text-soft); font-size: var(--type-caption); font-weight: 500; }
.prompt-trace-group ul {
  margin: 3px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: var(--type-caption);
  line-height: 1.5;
}
.prompt-trace-group li { overflow-wrap: anywhere; }
.prompt-trace-group span { color: var(--text-soft); }

.prompt-result { display: grid; gap: 8px; }
.prompt-output-label { color: var(--muted); font-size: var(--type-caption); }
.prompt-result-actions { margin: 0; }
.prompt-empty { min-height: 130px; padding: 24px; }
.prompt-objective-note { margin: 0; color: var(--muted); font-size: var(--type-caption); }

/* The review notice after a refused generation, and the container the keyboard is handed
   back to. The container is focused programmatically, so its ring is declared on :focus
   rather than :focus-visible — the person did not click it, and still has to see where
   they were put. */
.prompt-refresh-notice {
  margin: 10px 0 0;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--violet-soft);
  color: var(--text-soft);
  font-size: var(--type-label);
  line-height: 1.5;
}

#prompt-context:focus {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}

/* Focus you can see, on every control in here — including the folds' summaries, which
   the browser does not outline by default. */
.prompt-studio :focus-visible,
.prompt-group > summary:focus-visible,
.prompt-advanced > summary:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Fingertips: the same 44px floor the rest of the studio uses. */
@media (hover: none), (pointer: coarse) {
  .prompt-studio .text-button,
  .prompt-studio .secondary-button,
  .prompt-studio .primary-button,
  .prompt-studio .ghost-button { min-height: 44px; }
  .prompt-choice,
  .prompt-source,
  .prompt-group > summary,
  .prompt-advanced > summary { min-height: 44px; }
}

/* Narrow screens: one column throughout, and the header stops fighting for one line. */
@media (max-width: 620px) {
  .prompt-fieldset { padding: 12px 12px 14px; }
  .prompt-choice-grid,
  .prompt-choice-grid.is-thirds { grid-template-columns: 1fr; }
  .prompt-source-toolbar { flex-direction: column; align-items: flex-start; }
  .prompt-studio .prompt-builder-header { flex-direction: column; align-items: flex-start; }
  .prompt-advanced > *:not(summary) { margin: 0 12px; }
  .prompt-advanced > *:last-child:not(summary) { margin-bottom: 12px; }
}

/* The sync dot's heartbeat while the phone is syncing. Declared here, before the phone layer,
   because every rule inside that layer is scoped to the phone runtime and a keyframe block
   has no selector to scope; the only rule that plays it is inside the layer. */
@keyframes phone-sync-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* The gate's shapes drift, very slowly, for somebody who has not asked for less motion. */
@keyframes gate-drift {
  from { transform: translate(0, 0) rotate(0deg); }
  to { transform: translate(-16px, 12px) rotate(4deg); }
}

/* The quote card's bulb, the moment it is lit (Home pass 5): one swell of brass light that
   settles into the glow it keeps. Played only inside the phone layer. */
@keyframes quote-light {
  0% { box-shadow: 0 0 0 0 rgba(226, 181, 107, 0.55), 0 4px 14px rgba(180, 130, 50, 0.25); }
  55% { box-shadow: 0 0 0 14px rgba(226, 181, 107, 0), 0 6px 22px rgba(180, 130, 50, 0.5); }
  100% { box-shadow: 0 0 0 6px rgba(226, 181, 107, 0.16), 0 6px 18px rgba(180, 130, 50, 0.4); }
}

/* The category and the description as doors, on the desktop (2026-09-06): the same chip
   and the same line, pressable, so the desk changes an idea's category or description from
   the panel exactly as the phone does from its hero. */
.category-chip.is-door { font: inherit; cursor: pointer; }
.category-chip.is-door::after { content: " ›"; opacity: 0.6; }
button.detail-summary.is-door { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.detail-summary.is-door.is-empty { color: var(--muted); font-style: italic; }
button.detail-summary.is-door .detail-summary-pen { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 6px; border-radius: 50%; background: var(--violet-soft); color: var(--violet); vertical-align: -5px; }
button.detail-summary.is-door .detail-summary-pen svg { width: 12px; height: 12px; }
.dialog-menu-row .dialog-menu-mark { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 10px; border-radius: 50%; background: var(--violet-soft); color: var(--violet); font-size: 0.8125rem; line-height: 1; }
.dialog-compose { display: grid; gap: 8px; margin: 0 0 6px; }
.dialog-compose small { color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }

/* The two cutouts, declared once for both runtimes: the contour field a poster wears, and
   the thinker's thought that hangs on a page's wall. The dark look redeclares the thought
   on its own scope, which is more specific and still wins there. */
body {
  --thought-cutout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cg fill='%23e7dcc3'%3E%3Ccircle cx='72' cy='30' r='22'/%3E%3Ccircle cx='50' cy='38' r='16'/%3E%3Ccircle cx='92' cy='42' r='15'/%3E%3Ccircle cx='70' cy='48' r='18'/%3E%3Ccircle cx='30' cy='68' r='7'/%3E%3Ccircle cx='14' cy='86' r='4.5'/%3E%3C/g%3E%3C/svg%3E");
}
body { --contour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath fill='none' stroke='%23fff' stroke-opacity='.11' stroke-width='1.6' d='M255.1 214.0C256.8 220.1 254.2 230.6 249.4 234.9C244.5 239.2 232.7 237.2 226.1 239.7C219.6 242.2 216.2 248.8 210.0 250.1C203.8 251.4 195.5 250.1 188.9 247.6C182.3 245.1 172.7 240.6 170.4 235.0C168.1 229.4 173.5 220.2 175.1 214.0C176.8 207.8 178.3 204.4 180.1 198.1C181.9 191.8 181.2 179.6 186.1 176.0C191.1 172.4 202.9 175.2 210.0 176.5C217.1 177.8 224.0 180.2 228.9 183.9C233.9 187.5 235.3 193.2 239.7 198.2C244.1 203.2 253.5 207.9 255.1 214.0ZM288.7 214.0C289.4 225.7 286.5 242.8 278.0 250.1C269.5 257.5 249.0 252.7 237.7 258.1C226.3 263.5 221.5 278.8 210.0 282.4C198.5 286.1 178.6 286.2 168.5 280.2C158.3 274.2 153.1 257.4 149.1 246.3C145.2 235.3 144.0 224.4 144.7 214.0C145.4 203.6 149.8 195.7 153.3 183.9C156.8 172.1 156.2 149.0 165.7 143.4C175.1 137.7 197.5 146.3 210.0 150.0C222.5 153.7 229.8 160.5 240.5 165.5C251.1 170.5 265.8 172.0 273.8 180.1C281.9 188.2 288.0 202.3 288.7 214.0ZM320.8 214.0C317.9 231.0 308.0 248.4 297.0 260.2C285.9 272.0 268.9 275.8 254.4 284.8C239.9 293.8 227.8 309.4 210.0 314.2C192.2 319.0 160.0 323.7 147.4 313.7C134.8 303.7 140.2 270.8 134.4 254.2C128.6 237.5 115.7 228.9 112.8 214.0C109.9 199.1 110.6 180.3 116.8 164.5C123.1 148.7 134.9 126.0 150.4 119.1C165.9 112.1 193.2 118.0 210.0 122.9C226.8 127.7 234.0 142.0 251.4 148.0C268.8 153.9 303.0 147.5 314.5 158.5C326.1 169.5 323.7 197.0 320.8 214.0ZM354.0 214.0C346.7 235.0 319.8 247.6 307.1 265.6C294.3 283.5 293.9 308.2 277.7 321.9C261.5 335.5 234.2 344.6 210.0 347.3C185.8 349.9 148.2 351.5 132.3 337.7C116.5 323.9 123.3 285.1 114.9 264.5C106.5 243.9 89.2 234.7 82.0 214.0C74.7 193.3 61.6 158.6 71.5 140.4C81.5 122.3 118.6 112.4 141.7 105.2C164.8 97.9 188.9 94.4 210.0 97.0C231.1 99.7 244.9 114.0 268.3 121.0C291.8 128.1 336.2 123.9 350.5 139.4C364.8 154.9 361.2 193.0 354.0 214.0ZM384.3 214.0C375.4 238.4 334.6 248.4 321.0 273.0C307.3 297.5 320.9 342.5 302.4 361.2C283.9 379.9 239.2 387.8 210.0 385.3C180.8 382.7 148.2 363.4 127.1 346.1C106.0 328.7 96.4 303.3 83.2 281.3C70.1 259.3 57.1 241.2 48.3 214.0C39.4 186.8 15.7 138.5 30.0 118.4C44.4 98.3 104.4 100.5 134.4 93.5C164.4 86.5 183.2 78.7 210.0 76.2C236.8 73.6 267.7 69.9 295.1 78.4C322.5 86.8 359.4 104.2 374.2 126.8C389.1 149.4 393.1 189.6 384.3 214.0ZM403.0 214.0C397.1 242.7 367.6 260.7 354.2 290.6C340.7 320.4 346.4 370.8 322.4 393.1C298.4 415.4 242.5 432.2 210.0 424.4C177.5 416.5 154.9 366.4 127.1 346.1C99.3 325.8 64.0 324.6 43.3 302.6C22.6 280.5 9.0 246.7 3.0 214.0C-2.9 181.3 -12.1 129.8 7.7 106.6C27.6 83.3 88.7 82.8 122.4 74.4C156.1 66.1 175.9 64.2 210.0 56.4C244.1 48.5 297.2 17.0 327.1 27.4C357.1 37.7 377.0 87.5 389.7 118.6C402.3 149.7 409.0 185.3 403.0 214.0Z'/%3E%3C/svg%3E"); }

/* The Gallery, on the desk (Desktop brand pass, 2026-09-07) ==================================
 *
 * The phone was redesigned around Herv's mark — a cream thinker on ultramarine with a gold
 * thought, cut like paper — and the desk was left on the calm editorial theme it shipped with.
 * Two products, one name. This layer answers that: the desktop takes the phone's material,
 * its palette, its cutouts and its cards, and keeps the one thing a desk has that a hand does
 * not — room. The bar stays a rail (with its destinations NAMED now, as they are on the
 * phone), the library stays a wide grid, the idea keeps its panel; what changes is what all
 * of that is made of.
 *
 * Every rule below is written under `body:not(.is-phone-studio)`, which is the exact
 * complement of the phone layer above. The two can never both match, so nothing here can
 * reach the phone at any width, and nothing there can reach the desk — the same safety
 * argument the phone layer makes, read the other way round. Some values are deliberately
 * repeated from that layer rather than shared: a token block scoped to one body cannot be
 * read by the other, and a shared block would have to sit above BOTH, where the phone's own
 * later declarations would silently win. The two exceptions are the two large data URIs (the
 * contour field and the thinker's thought), which are declared once on `body` above and
 * inherited by both.
 */

/* --- The material ----------------------------------------------------------------------
 *
 * The Gallery pass's palette, the same numbers the phone reads: ultramarine is the ink,
 * cream is the wall every page opens on, a warmer paper is the canvas under it, gold is the
 * one highlight. The older tokens (--ink-*, --panel*, --violet*) are redeclared in terms of
 * these so every rule written before this layer — and there are seven thousand lines of them
 * — lands on the new palette without being rewritten.
 */
body:not(.is-phone-studio) {
  --brand: #13287d;
  --brand-deep: #0d1c5c;
  --brand-soft: #34479f;
  --cream: #f4edde;
  --cream-deep: #e7dcc3;
  --paper: #faf7f0;
  --paper-2: #f3eee3;
  --gold: #d2a963;
  --gold-deep: #b08538;
  --gold-wash: rgba(210, 169, 99, 0.2);
  --text: #171c33;
  --text-soft: #3c4160;
  --muted: #686d85;
  --muted-2: #8a8fa6;
  --violet: var(--brand);
  --violet-bright: var(--brand-soft);
  --violet-soft: rgba(19, 40, 125, 0.08);
  --line: rgba(19, 40, 125, 0.13);
  --line-strong: rgba(19, 40, 125, 0.36);
  --panel: #fffdf8;
  --panel-solid: #fffdf8;
  --panel-soft: rgba(255, 253, 248, 0.72);
  --ink-0: var(--paper);
  --ink-1: var(--panel-solid);
  --ink-2: var(--paper-2);
  --ink-3: var(--cream-deep);
  --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);
  --serif: ui-serif, Georgia, "Times New Roman", serif;
  --shadow-lg: 0 26px 64px -30px rgba(19, 40, 125, 0.34);
  /* Corners, depth and rhythm — three of each, the phone's three, one step larger where a
     desk's surfaces are larger. */
  --desk-radius-sm: 12px;
  --desk-radius: 18px;
  --desk-radius-lg: 26px;
  --desk-shadow: 0 8px 22px -14px rgba(19, 40, 125, 0.22);
  --desk-shadow-lg: 0 22px 54px -28px rgba(19, 40, 125, 0.3);
  --hero-wall: var(--cream);
  --hero-ink: var(--brand);
  /* The rail is wide enough to name its destinations, as the phone's bar does. */
  --sidebar: 178px;
  background: var(--paper);
}

/* The canvas behind everything, so a rubber-band scroll shows paper rather than the old
   editorial beige. */
html:has(body:not(.is-phone-studio)) { background: #faf7f0; }

/* Focus, in the brand's ink rather than the old violet. */
body:not(.is-phone-studio) :is(button, textarea, input, select, summary, [role="button"]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* --- The rail: five named destinations, and the doors beneath them ---------------------
 *
 * The phone's bar names what it points at. So does this one now: the same five words, laid
 * down the side instead of across the bottom, on the same paper as everything else.
 */
body:not(.is-phone-studio) .sidebar {
  align-items: stretch;
  padding: 20px 14px 16px;
  border-right: 1px solid var(--line);
  background: var(--panel-solid);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body:not(.is-phone-studio) .brand-mark {
  width: 48px;
  height: 48px;
  margin: 0 auto 26px;
}

body:not(.is-phone-studio) .nav-stack { gap: 4px; }
body:not(.is-phone-studio) .sidebar-footer { gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }

body:not(.is-phone-studio) .nav-button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--desk-radius-sm);
  color: var(--text-soft);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
}

body:not(.is-phone-studio) .nav-button svg { flex: none; width: 21px; height: 21px; }

/* The label the phone's bar wears, worn here too. The base rule above hides it everywhere;
   both runtimes now turn it back on, each in its own layer. */
body:not(.is-phone-studio) .nav-label {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.15;
}

body:not(.is-phone-studio) .nav-button:hover { background: var(--violet-soft); color: var(--brand); }

body:not(.is-phone-studio) .nav-button.is-active {
  background: var(--cream);
  color: var(--brand);
  box-shadow: none;
}

/* The rail's marker is the seam between the destination and the page: a short brass rule at
   the button's left edge, where the phone draws it underneath. */
body:not(.is-phone-studio) .nav-button.is-active::after {
  content: "";
  position: absolute;
  top: 50%;
  right: auto;
  left: 0;
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--gold);
  box-shadow: none;
  transform: translateY(-50%);
}

/* The count rides the icon, not the corner of a named row. */
body:not(.is-phone-studio) .nav-badge {
  top: 6px;
  right: auto;
  left: 22px;
  border-color: var(--panel-solid);
  background: var(--brand);
}

/* The footer's three doors keep their icons and take the same row; Inky's mark is drawn by
   app.js and has no label of its own. */
body:not(.is-phone-studio) .sidebar-footer .nav-button { justify-content: flex-start; }
body:not(.is-phone-studio) .inky-door svg { width: 24px; height: 24px; }

/* The More door belongs to the phone's bar of five; the desk reaches all of it from the rail
   below. The base rule hides it, and the row rule above would otherwise show it. */
body:not(.is-phone-studio) .nav-more { display: none; }

/* --- The wall every page opens on ------------------------------------------------------
 *
 * The phone's heroes are a band of cream that bleeds to both edges, with ultramarine serif
 * words on it and the thinker's thought cut from a deeper cream at the right; the surface
 * that follows crosses the seam. The desk has one page header for every destination
 * (app.js pageHeader), so the wall is drawn once, here, and every page gets it.
 *
 * The band is as wide as the window and is clipped to the scrollport, which is the only
 * reason `.main-content` is told to clip sideways: nothing on the desk scrolls horizontally,
 * and the alternative — a band as wide as the page's own content box — leaves paper margins
 * beside the cream on a very wide screen.
 */
body:not(.is-phone-studio) .main-content { overflow-x: clip; }
body:not(.is-phone-studio) .page { position: relative; }
body:not(.is-phone-studio) .home-aura { display: none; }

body:not(.is-phone-studio) .page-header {
  position: relative;
  align-items: flex-end;
  padding: 8px 0 34px;
  margin-bottom: 34px;
}

body:not(.is-phone-studio) .page-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -40px;
  right: auto;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: var(--hero-wall);
  box-shadow: 0 16px 34px -22px rgba(19, 40, 125, 0.24);
}

/* His thought, hanging at the right of the wall — the phone hangs the same cutout on every
   page that is not Home, and Home gets the thinker himself. */
body:not(.is-phone-studio) .page-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 18px;
  width: 132px;
  height: 110px;
  background: var(--thought-cutout) no-repeat center / contain;
  pointer-events: none;
}
body:not(.is-phone-studio) .home-page .page-header::after { display: none; }

body:not(.is-phone-studio) .page-header > * { position: relative; }

body:not(.is-phone-studio) .page-title,
body:not(.is-phone-studio) .wordmark h1 {
  color: var(--hero-ink);
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.025em;
}

body:not(.is-phone-studio) .page-title { margin: 6px 0 10px; font-size: clamp(2.25rem, 3.4vw, 3.125rem); line-height: 1.04; }
body:not(.is-phone-studio) .eyebrow { color: var(--brand-soft); }
body:not(.is-phone-studio) .page-subtitle { color: var(--text-soft); font-size: 0.9375rem; }

/* The actions on the wall are paper with a hairline and ultramarine ink, never glass. */
body:not(.is-phone-studio) .page-header .page-actions :is(.secondary-button, .ghost-button, .icon-button) {
  border: 1px solid var(--line);
  background: var(--panel-solid);
  color: var(--brand);
  box-shadow: 0 4px 14px -6px rgba(19, 40, 125, 0.18);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* --- Home ------------------------------------------------------------------------------ */

/* The wall on Home is taller and holds three things: the count of ideas above the name, the
   name and its line, and the thinker at the right in ultramarine — the icon's own negative,
   exactly as the phone draws him. */
body:not(.is-phone-studio) .home-page .page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px 30px;
  padding-top: 12px;
  padding-bottom: 44px;
}

body:not(.is-phone-studio) .home-hero-lead { grid-column: 1; grid-row: 1; }
body:not(.is-phone-studio) .home-page .wordmark { grid-column: 1; grid-row: 2; display: block; }
body:not(.is-phone-studio) .home-actions { grid-column: 2; grid-row: 1; justify-self: end; }
body:not(.is-phone-studio) .home-hero-figure { grid-column: 2; grid-row: 2; justify-self: end; }

body:not(.is-phone-studio) .home-page .wordmark h1 {
  margin: 0 0 6px;
  font-size: clamp(2.75rem, 4.6vw, 4rem);
  line-height: 1.02;
}
body:not(.is-phone-studio) .home-page .wordmark span {
  display: block;
  color: var(--text-soft);
  font-size: 1.0625rem;
  letter-spacing: 0;
  text-transform: none;
}

/* The count: the phone's chip, in paper, on the wall. */
body:not(.is-phone-studio) .phone-home-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-solid);
  color: var(--brand);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px -6px rgba(19, 40, 125, 0.18);
}
body:not(.is-phone-studio) .phone-home-count svg { width: 16px; height: 16px; color: var(--gold); }
body:not(.is-phone-studio) .phone-home-count strong { font-size: 0.9375rem; }
body:not(.is-phone-studio) .phone-home-count span { color: var(--muted); font-weight: 500; }

body:not(.is-phone-studio) .home-hero-figure {
  display: block;
  width: clamp(120px, 13vw, 178px);
  color: var(--brand);
  pointer-events: none;
}
body:not(.is-phone-studio) .home-hero-figure .thinker-mark { display: block; width: 100%; height: auto; }

/* Inky's door on the wall is paper too. */
body:not(.is-phone-studio) .assistant-orb-button {
  border: 1px solid var(--line);
  background: var(--panel-solid);
  color: var(--brand);
  box-shadow: 0 4px 14px -6px rgba(19, 40, 125, 0.18);
}

/* The capture field crosses the seam, as the phone's pill does: paper standing a little off
   the wall, half on the cream and half on the page. */
body:not(.is-phone-studio) .home-page .capture-shell {
  position: relative;
  margin-top: -54px;
  border-radius: var(--desk-radius-lg);
  background: var(--panel-solid);
  box-shadow: var(--desk-shadow-lg);
}

body:not(.is-phone-studio) .home-columns { align-items: start; gap: 34px; margin-top: 30px; }

/* The quote, on a card of its own: a brass bulb, a kicker, and the line to think against. */
body:not(.is-phone-studio) .home-quote {
  display: block;
  max-width: none;
  margin: 0 0 20px;
  padding: 20px 24px 24px;
  border: 1px solid var(--line);
  border-radius: var(--desk-radius);
  background: var(--panel-solid);
  box-shadow: var(--desk-shadow);
  text-align: left;
}
body:not(.is-phone-studio) .home-quote::before,
body:not(.is-phone-studio) .home-quote::after { display: none; }
body:not(.is-phone-studio) .home-quote-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
body:not(.is-phone-studio) .home-quote-kicker { color: var(--brand); font-size: 0.8125rem; font-weight: 700; }
body:not(.is-phone-studio) .home-quote-bulb {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
/* The glyph is drawn, not filled: the bulb's own path carries no attributes, so without
   this it is a black blob rather than a lamp. Lit, its glass fills like the phone's. */
body:not(.is-phone-studio) .home-quote-bulb svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body:not(.is-phone-studio) .home-quote-bulb[aria-pressed="true"] svg .bulb-glass { fill: rgba(255, 255, 255, 0.7); }
body:not(.is-phone-studio) .home-quote-bulb[aria-pressed="true"] {
  border-color: transparent;
  background: var(--gold);
  color: #3a2a10;
  box-shadow: 0 0 0 6px var(--gold-wash);
}
body:not(.is-phone-studio) .home-quote-body { margin: 0; color: var(--text); font-family: var(--serif); font-size: 1.3125rem; line-height: 1.5; }
body:not(.is-phone-studio) .home-quote.is-off .home-quote-body { display: none; }

/* The cue toward Review, in the language of the card above it. */
body:not(.is-phone-studio) .phone-review-cue {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--desk-radius);
  background: var(--panel-solid);
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--desk-shadow);
}
body:not(.is-phone-studio) .phone-review-cue:hover { border-color: var(--line-strong); }
body:not(.is-phone-studio) .phone-review-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--cream);
  color: var(--brand);
}
body:not(.is-phone-studio) .phone-review-mark svg { width: 22px; height: 22px; }
body:not(.is-phone-studio) .phone-review-copy { display: grid; gap: 2px; min-width: 0; }
body:not(.is-phone-studio) .phone-review-kicker { color: var(--brand-soft); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
body:not(.is-phone-studio) .phone-review-copy strong { font-size: 1rem; }
body:not(.is-phone-studio) .phone-review-copy small { color: var(--muted); font-size: 0.8125rem; }
body:not(.is-phone-studio) .phone-review-trail { display: flex; align-items: center; gap: 10px; margin-left: auto; }
body:not(.is-phone-studio) .phone-review-count {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--gold);
  color: #33240b;
  font-size: 0.8125rem;
  font-weight: 700;
}
body:not(.is-phone-studio) .phone-review-chevron { color: var(--muted-2); }
body:not(.is-phone-studio) .phone-review-chevron svg { width: 18px; height: 18px; }

/* The ideas to pick back up: the same posters the library draws, in a grid rather than a
   rail — a desk has the width the phone had to swipe for. */
body:not(.is-phone-studio) .home-continue { margin-top: 38px; }
body:not(.is-phone-studio) .phone-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
body:not(.is-phone-studio) .phone-section-head h2 {
  margin: 0;
  color: var(--brand);
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
body:not(.is-phone-studio) .home-continue-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 1180px) {
  body:not(.is-phone-studio) .home-continue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- The idea card, as a poster --------------------------------------------------------
 *
 * The phone's card (Card pass, then Brand pass 2) with a desk's dimensions: one flat field
 * of the category's colour, the contour field low in its right, the category on a cream chip,
 * the name in bold sans, its facts as translucent pills, and the paper cutout in the corner.
 * The families and the cutout tones are the phone's exact numbers — a card is a card on both
 * devices, and only its size is a matter of which one you are holding.
 */
body:not(.is-phone-studio) .library-card-wrap { --card-inset: 14px; --control-size: 36px; --control-step: 42px; }

body:not(.is-phone-studio) .idea-card.poster {
  --poster-hi: color-mix(in oklab, var(--poster) 40%, white);
  --poster-face: color-mix(in oklab, var(--poster) 70%, white);
  --poster-shade: color-mix(in oklab, var(--poster-deep) 68%, black);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 326px;
  padding: 70px 20px 20px;
  border: 0;
  border-radius: 24px;
  background: var(--contour) no-repeat right -70px bottom -80px / 300px 300px, var(--poster);
  color: #fff;
  box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--poster-deep) 72%, transparent);
  isolation: isolate;
}

body:not(.is-phone-studio) .idea-card.poster:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 42px -20px color-mix(in srgb, var(--poster-deep) 78%, transparent);
}

/* The families, the same nine the phone reads. */
body:not(.is-phone-studio) :is(.idea-card, .row-tile, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-violet { --poster: #4f46c4; --poster-deep: #33298f; }
body:not(.is-phone-studio) :is(.idea-card, .row-tile, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-indigo { --poster: #2f52c9; --poster-deep: #1f3a96; }
body:not(.is-phone-studio) :is(.idea-card, .row-tile, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-blue { --poster: #2b79c2; --poster-deep: #1b528d; }
body:not(.is-phone-studio) :is(.idea-card, .row-tile, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-teal { --poster: #1e8078; --poster-deep: #125650; }
body:not(.is-phone-studio) :is(.idea-card, .row-tile, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-sage { --poster: #4a805a; --poster-deep: #2f573c; }
body:not(.is-phone-studio) :is(.idea-card, .row-tile, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-rose { --poster: #c4416a; --poster-deep: #86294a; }
body:not(.is-phone-studio) :is(.idea-card, .row-tile, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-amber { --poster: #c8571f; --poster-deep: #8e3a12; --ca-accent: #13287d; }
body:not(.is-phone-studio) :is(.idea-card, .row-tile, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-lilac { --poster: #8a4fae; --poster-deep: #5d3279; }
body:not(.is-phone-studio) :is(.idea-card, .row-tile, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-slate { --poster: #5b6479; --poster-deep: #3a4154; }

/* The cutout's four tones, filled from the family it sits on. */
body:not(.is-phone-studio) .ca-cream { fill: #f4edde; }
body:not(.is-phone-studio) .ca-gold { fill: var(--ca-accent, #d2a963); }
body:not(.is-phone-studio) .ca-tint { fill: color-mix(in oklab, var(--poster) 56%, white); }
body:not(.is-phone-studio) .ca-deep { fill: color-mix(in oklab, var(--poster-deep) 74%, black); }
body:not(.is-phone-studio) :is(.ca-line-cream, .ca-line-gold, .ca-line-tint, .ca-line-deep, .ca-line-deep-thin, .ca-stroke-cream, .ca-stroke-gold) { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 6; }
body:not(.is-phone-studio) .ca-line-cream { stroke: #f4edde; }
body:not(.is-phone-studio) .ca-line-gold { stroke: var(--ca-accent, #d2a963); }
body:not(.is-phone-studio) .ca-line-tint { stroke: color-mix(in oklab, var(--poster) 56%, white); }
body:not(.is-phone-studio) .ca-line-deep { stroke: color-mix(in oklab, var(--poster-deep) 74%, black); }
body:not(.is-phone-studio) .ca-line-deep-thin { stroke: color-mix(in oklab, var(--poster-deep) 74%, black); stroke-width: 3.5; }
body:not(.is-phone-studio) .ca-stroke-cream { stroke: #f4edde; stroke-width: 16; }
body:not(.is-phone-studio) .ca-stroke-gold { stroke: var(--ca-accent, #d2a963); stroke-width: 9; }

/* The visual is the whole card's backdrop: it holds the chips at the top and the cutout at
   the foot, and it takes no pointer of its own. */
body:not(.is-phone-studio) .idea-card.poster .idea-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: auto;
  overflow: visible;
  border: 0;
  background: none;
  pointer-events: none;
}
body:not(.is-phone-studio) .idea-card.poster .poster-art { position: absolute; right: 6px; bottom: 6px; width: 150px; height: 150px; }
body:not(.is-phone-studio) .idea-card.poster .poster-scene { display: block; width: 100%; height: 100%; overflow: visible; }
body:not(.is-phone-studio) .idea-card.poster .poster-scene.is-mirrored { transform: scaleX(-1); }

/* The chips: cream islands on the colour, the category's glyph in a disc of the family. */
body:not(.is-phone-studio) .idea-card.poster .visual-badges { z-index: 1; gap: 6px; }
body:not(.is-phone-studio) .idea-card.poster .visual-category {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 4px 12px 4px 5px;
  overflow: visible;
  border: 0;
  border-radius: 999px;
  background: var(--cream);
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: normal;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
body:not(.is-phone-studio) .idea-card.poster .visual-glyph {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--poster);
  color: var(--cream);
  font-size: 0.8125rem;
  line-height: 1;
}
body:not(.is-phone-studio) .idea-card.poster .visual-privacy {
  min-height: 30px;
  padding: 4px 11px;
  border: 0;
  background: var(--cream);
  color: #7a4a20;
  font-size: 0.75rem;
  font-weight: 600;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
body:not(.is-phone-studio) .idea-card.poster .visual-privacy svg { width: 13px; height: 13px; }

/* The words: a bold sans headline in place of the desk's old serif, the summary under it. */
body:not(.is-phone-studio) .idea-card.poster .card-title {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  color: #fffdf8;
  font-family: var(--sans);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
body:not(.is-phone-studio) .idea-card.poster .card-title.is-working-name { text-decoration-color: rgba(255, 253, 248, 0.55); }
body:not(.is-phone-studio) .idea-card.poster .card-summary {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  max-width: 100%;
  margin: 0 0 14px;
  overflow: hidden;
  overflow-wrap: anywhere;
  color: rgba(255, 253, 248, 0.84);
  font-size: 0.875rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* The facts: pills that keep to the left half, so the cutout keeps the right. The footer is
   as tall as the cutout stands, which is what keeps a long name from ever meeting it. */
body:not(.is-phone-studio) .idea-card.poster .card-footer {
  position: relative;
  z-index: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  width: auto;
  min-height: 138px;
  max-width: 54%;
  margin: auto 0 0;
}
body:not(.is-phone-studio) .idea-card.poster .card-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px 0 6px;
  border: 1px solid rgba(255, 253, 248, 0.26);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.14);
  color: #fffdf8;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
}
body:not(.is-phone-studio) .idea-card.poster .card-meta svg {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 2px;
  background: transparent;
  color: var(--cream);
  fill: none;
  stroke: currentColor;
}
body:not(.is-phone-studio) .idea-card.poster .card-more {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 2px 11px;
  border: 1px solid rgba(255, 253, 248, 0.26);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.14);
  color: #fffdf8;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
}

/* The card's own controls, on the colour: a frosted disc under a white glyph, solid white
   once the state is on — the pin top right, the pick bottom right, the drag handle beneath
   the pin where the rail already reserves its room. */
body:not(.is-phone-studio) .library-card-wrap > :is(.idea-pin, .combine-pick, .drag-handle) { color: #fff; }
/* The handle joins the rail. The rail's rules have always given it a top and a right (see
   "The card's control rail"), but nothing ever made it positioned, so on the gallery card it
   stayed a static flex item under the card — a 30px band of nothing at the foot of every
   wrapper. Stated here, where the poster needs it in the corner the rail describes. */
body:not(.is-phone-studio) .library-card-wrap > .drag-handle {
  position: absolute;
  z-index: var(--layer-control);
  top: calc(var(--card-inset) + var(--control-step));
  right: var(--card-inset);
  border-color: transparent;
  background: transparent;
}
body:not(.is-phone-studio) .library-card-wrap > :is(.idea-pin, .combine-pick, .drag-handle)::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.26);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body:not(.is-phone-studio) .library-card-wrap > .idea-pin { top: var(--card-inset); right: var(--card-inset); }
body:not(.is-phone-studio) .library-card-wrap > .idea-pin.is-pinned { color: #1d2130; }
body:not(.is-phone-studio) .library-card-wrap > .idea-pin.is-pinned::before { border-color: transparent; background: rgba(255, 255, 255, 0.96); }
body:not(.is-phone-studio) .library-card-wrap > .combine-pick { top: auto; right: var(--card-inset); bottom: var(--card-inset); color: #fff; font-size: 18px; font-weight: 600; }
body:not(.is-phone-studio) .library-card-wrap > .combine-pick.is-picked { color: #1d2130; }
body:not(.is-phone-studio) .library-card-wrap > .combine-pick.is-picked::before { border-color: transparent; background: rgba(255, 255, 255, 0.96); }

/* The three sizes, on the desk. Medium is the gallery as it is drawn above; Small gives the
   cutout a band of its own under the summary, as it does on a phone held in one hand, and
   Large simply has more of everything. Nothing is hidden at any size. */
body:not(.is-phone-studio) .library-grid[data-card-size="small"] .library-card-wrap { --card-inset: 10px; }
body:not(.is-phone-studio) .library-grid[data-card-size="small"] .idea-card.poster { min-height: 252px; padding: 60px 14px 14px; border-radius: 20px; }
body:not(.is-phone-studio) .library-grid[data-card-size="small"] .idea-card.poster .card-title { display: block; margin-bottom: 6px; overflow: visible; font-size: 1.0625rem; -webkit-line-clamp: none; }
body:not(.is-phone-studio) .library-grid[data-card-size="small"] .idea-card.poster .card-summary { margin-bottom: 10px; font-size: 0.75rem; line-height: 1.4; -webkit-line-clamp: 2; }
body:not(.is-phone-studio) .library-grid[data-card-size="small"] .idea-card.poster .poster-art { right: -6px; bottom: 54px; width: 104px; height: 104px; }
body:not(.is-phone-studio) .library-grid[data-card-size="small"] .idea-card.poster .card-footer { min-height: 0; max-width: 100%; padding-top: 96px; gap: 4px; }
body:not(.is-phone-studio) .library-grid[data-card-size="small"] .idea-card.poster .visual-category { min-height: 28px; padding: 3px 9px 3px 3px; font-size: 0.6875rem; }
body:not(.is-phone-studio) .library-grid[data-card-size="small"] .idea-card.poster .visual-glyph { width: 20px; height: 20px; font-size: 0.75rem; }

body:not(.is-phone-studio) .library-grid[data-card-size="large"] .idea-card.poster { min-height: 384px; padding: 76px 24px 22px; border-radius: 26px; }
body:not(.is-phone-studio) .library-grid[data-card-size="large"] .idea-card.poster .card-title { margin: 0 0 10px; font-size: 1.625rem; }
body:not(.is-phone-studio) .library-grid[data-card-size="large"] .idea-card.poster .card-summary { font-size: 0.9375rem; }
body:not(.is-phone-studio) .library-grid[data-card-size="large"] .idea-card.poster .poster-art { width: 178px; height: 178px; }
body:not(.is-phone-studio) .library-grid[data-card-size="large"] .idea-card.poster .card-footer { min-height: 162px; }

/* --- The wall, finished ----------------------------------------------------------------
 *
 * The header is tall enough that the actions can sit at the top of the wall and the thought
 * can hang at the bottom of it without the two ever meeting.
 */
body:not(.is-phone-studio) .page-header { min-height: 168px; }
body:not(.is-phone-studio) .page-header .page-actions { align-self: flex-start; padding-top: 4px; }
body:not(.is-phone-studio) .page-header::after { right: 4px; bottom: 6px; width: 116px; height: 96px; }

/* --- Buttons, in the brand's ink -------------------------------------------------------
 *
 * Three shapes, as the phone has them: the one that acts is a filled ultramarine pill; the
 * ones that offer are paper with a hairline; a text button is a word in the brand's ink.
 */
body:not(.is-phone-studio) .primary-button {
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: #fffdf8;
  font-weight: 650;
  box-shadow: 0 10px 22px -12px rgba(19, 40, 125, 0.5);
}
body:not(.is-phone-studio) .primary-button:hover { background: var(--brand-deep); }

body:not(.is-phone-studio) :is(.secondary-button, .pill-button) {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-solid);
  color: var(--brand);
  font-weight: 600;
  box-shadow: none;
}
body:not(.is-phone-studio) :is(.secondary-button, .pill-button):hover { border-color: var(--line-strong); background: var(--cream); }

body:not(.is-phone-studio) .ghost-button { border-radius: 999px; color: var(--text-soft); }
body:not(.is-phone-studio) .ghost-button:hover { background: var(--violet-soft); color: var(--brand); }
body:not(.is-phone-studio) .text-button { color: var(--brand-soft); font-weight: 600; }
body:not(.is-phone-studio) .text-button:hover { color: var(--brand); }
body:not(.is-phone-studio) .link-button { color: var(--brand-soft); }

body:not(.is-phone-studio) .icon-button {
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel-solid);
  color: var(--muted);
}
body:not(.is-phone-studio) .icon-button:hover { border-color: var(--line-strong); color: var(--brand); }

/* --- Fields ---------------------------------------------------------------------------- */

body:not(.is-phone-studio) :is(input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="url"], textarea, select) {
  border-color: var(--line);
  background: var(--panel-solid);
  color: var(--text);
}
body:not(.is-phone-studio) :is(input, textarea)::placeholder { color: var(--muted-2); }
body:not(.is-phone-studio) :is(.library-filter select, .connections-filterbar select, .status-select) {
  border-radius: 999px;
  background: var(--panel-solid);
  color: var(--text-soft);
}

/* --- The library's toolbar, as one instrument across the seam --------------------------
 *
 * The phone puts search, the filters and the display line in one block that overlaps the
 * wall it opens under (Library pass 1). The same block here, in paper, standing off the
 * cream by exactly the shadow the capture pill uses on Home.
 */
body:not(.is-phone-studio) #view-root[data-destination="library"] .library-toolbar,
body:not(.is-phone-studio) #view-root[data-destination="connections"] .connections-filterbar {
  position: relative;
  margin-top: -50px;
  margin-bottom: 26px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--desk-radius-lg);
  background: var(--panel-solid);
  box-shadow: var(--desk-shadow-lg);
}
body:not(.is-phone-studio) .library-toolbar .search-box input {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-2);
}
body:not(.is-phone-studio) .library-view-toggle {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-2);
}
body:not(.is-phone-studio) .library-view-toggle button { border-radius: 999px; color: var(--muted); }
body:not(.is-phone-studio) .library-view-toggle button.is-active { background: var(--brand); color: #fffdf8; }

/* --- The compact list: rows as slim posters --------------------------------------------
 *
 * The row leads with the idea's own tile — its family's colour, its cutout inside — where a
 * grey disc with a glyph used to be, and the row itself is paper with a hairline rather than
 * a card with a coloured left edge.
 */
body:not(.is-phone-studio) .library-row {
  align-items: center;
  gap: 14px;
  padding: 12px 78px 12px 12px;
  border: 1px solid var(--line);
  border-radius: var(--desk-radius);
  background: var(--panel-solid);
}
body:not(.is-phone-studio) .library-row:hover { border-color: var(--line-strong); }
body:not(.is-phone-studio) .row-tile {
  position: relative;
  display: block;
  flex: none;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--poster, var(--brand));
}
body:not(.is-phone-studio) .row-tile .poster-scene { position: absolute; inset: 4px; width: auto; height: auto; }
body:not(.is-phone-studio) .row-title { color: var(--text); font-size: 1rem; font-weight: 650; }
body:not(.is-phone-studio) .row-summary { color: var(--text-soft); }
body:not(.is-phone-studio) .library-row-wrap :is(.idea-pin, .combine-pick, .drag-handle) { color: var(--muted); }
body:not(.is-phone-studio) .library-row-wrap :is(.idea-pin, .combine-pick, .drag-handle)::before { display: none; }

/* --- Section headings ------------------------------------------------------------------ */

body:not(.is-phone-studio) .section-title {
  flex: none;
  color: var(--brand);
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.02em;
}
body:not(.is-phone-studio) .section-rule { background: var(--line); }
body:not(.is-phone-studio) .detail-section-heading h3 { color: var(--brand); font-family: var(--serif); font-weight: 700; }

/* --- One material across every other surface -------------------------------------------
 *
 * The same corners, the same hairline and the same one step of depth, on every card in the
 * studio — the phone's rule, read for a desk.
 */
body:not(.is-phone-studio) :is(.empty-state, .clarify-card, .audit-card, .inbox-card,
.receipt-card, .names-entry-bar, .reading-copy-note, .context-card, .thought-card,
.approval-card, .detail-section, .analysis-card, .first-run) {
  border: 1px solid var(--line);
  border-radius: var(--desk-radius);
  background: var(--panel-solid);
  box-shadow: var(--desk-shadow);
}

body:not(.is-phone-studio) :is(.detail-panel, .assistant-panel) {
  width: min(760px, calc(100vw - var(--sidebar)));
  border-left: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
}
body:not(.is-phone-studio) .assistant-panel { width: min(560px, calc(100vw - var(--sidebar))); }

body:not(.is-phone-studio) :is(.settings-modal, .combine-modal, .names-modal, .confirm-dialog, .more-sheet) {
  border: 1px solid var(--line);
  border-radius: var(--desk-radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
}

body:not(.is-phone-studio) .overlay-scrim { background: rgba(19, 40, 125, 0.16); }
body:not(.is-phone-studio) .toast { border: 1px solid var(--line); border-radius: var(--desk-radius); background: var(--panel-solid); box-shadow: var(--desk-shadow-lg); }
body:not(.is-phone-studio) .combine-dock { border: 1px solid var(--line); border-radius: 999px; background: var(--panel-solid); box-shadow: var(--desk-shadow-lg); }

/* --- The idea, opened ------------------------------------------------------------------
 *
 * The panel opens on the same cream wall the pages do, with the idea's cutout beside its
 * name in a tile of its family's colour; the tabs are the pill the phone wears; every
 * section below is paper.
 */
body:not(.is-phone-studio) .detail-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 22px;
  margin: 0 -34px 0;
  padding: 6px 34px 26px;
  background: var(--cream);
  box-shadow: 0 16px 34px -22px rgba(19, 40, 125, 0.24);
}
body:not(.is-phone-studio) .detail-header > :not(.detail-hero-art) { grid-column: 1; }
body:not(.is-phone-studio) .detail-hero-art {
  position: relative;
  display: block;
  grid-column: 2;
  grid-row: 1 / span 4;
  width: 116px;
  height: 116px;
  overflow: hidden;
  border-radius: 22px;
  background: var(--poster, var(--brand));
}
body:not(.is-phone-studio) .detail-hero-art .poster-scene { position: absolute; inset: 8px; display: block; width: auto; height: auto; }
body:not(.is-phone-studio) .detail-title { color: var(--brand); font-family: var(--serif); font-size: 2.125rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.06; }
body:not(.is-phone-studio) .detail-summary { color: var(--text-soft); }
body:not(.is-phone-studio) .detail-inner { padding-left: 34px; padding-right: 34px; }

body:not(.is-phone-studio) .detail-tabs {
  position: relative;
  gap: 4px;
  margin: 22px 0 24px;
  padding: 5px;
  border: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-solid);
  box-shadow: var(--desk-shadow);
}
body:not(.is-phone-studio) .detail-tabs .tab-button {
  flex: 1 1 auto;
  min-height: 38px;
  border-radius: 999px;
  color: var(--text-soft);
  font-weight: 600;
}
body:not(.is-phone-studio) .detail-tabs .tab-button.is-active { background: var(--brand); color: #fffdf8; }
body:not(.is-phone-studio) .detail-tabs .tab-button::after { display: none; }

/* The panel's own top row of actions is paper on paper. */
body:not(.is-phone-studio) .panel-topbar :is(.secondary-button, .ghost-button, .text-button) { border-radius: 999px; }

/* --- Inky, and the map ------------------------------------------------------------------ */

body:not(.is-phone-studio) .assistant-heading h2 { color: var(--brand); font-family: var(--serif); font-weight: 700; }
body:not(.is-phone-studio) .assistant-form { border: 1px solid var(--line); border-radius: var(--desk-radius-lg); background: var(--panel-solid); }
body:not(.is-phone-studio) .assistant-suggestions button { border-radius: 999px; }

body:not(.is-phone-studio) .cg-node .cg-soma { background: var(--poster, var(--brand)); box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--poster-deep, var(--brand)) 70%, transparent); }
body:not(.is-phone-studio) .cg-soma { background: var(--poster, var(--brand)); }
body:not(.is-phone-studio) .cg-dot { background: var(--poster, var(--brand)); }
body:not(.is-phone-studio) .cg-edge { color: rgba(19, 40, 125, 0.45); }
body:not(.is-phone-studio) .cg-node.is-lit .cg-soma { box-shadow: 0 0 0 3px rgba(19, 40, 125, 0.3); }
body:not(.is-phone-studio) .cg-plate { border: 1px solid var(--line); border-radius: var(--desk-radius-lg); background: var(--panel-solid); box-shadow: var(--desk-shadow); }

/* --- The capture surface ----------------------------------------------------------------
 *
 * One paper card, one field, and one filled pill to press — the phone's compact capture,
 * given a desk's width. The gradient rim and the tinted field the calm theme wrapped it in
 * are gone: on the brand's paper a card is a hairline and one step of shadow, nothing else.
 */
body:not(.is-phone-studio) .capture-shell {
  border: 1px solid var(--line);
  border-radius: var(--desk-radius-lg);
  background: var(--panel-solid);
  box-shadow: var(--desk-shadow);
}
body:not(.is-phone-studio) .capture-shell.is-local { border-color: var(--local-line); }
body:not(.is-phone-studio) .capture-form { border-radius: var(--desk-radius-lg); background: transparent; }
body:not(.is-phone-studio) .capture-input { background: transparent; }

body:not(.is-phone-studio) .capture-submit {
  border: 0;
  background: var(--brand);
  color: #fffdf8;
  font-weight: 650;
  box-shadow: 0 10px 22px -12px rgba(19, 40, 125, 0.5);
}
body:not(.is-phone-studio) .capture-submit:hover { background: var(--brand-deep); }

body:not(.is-phone-studio) .privacy-toggle {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-soft);
}
body:not(.is-phone-studio) .privacy-toggle:hover { border-color: var(--local-line); color: var(--local-strong); }
body:not(.is-phone-studio) .capture-more-toggle { color: var(--brand-soft); font-weight: 600; }

/* --- The panel's own top row is part of the wall ---------------------------------------- */

body:not(.is-phone-studio) .detail-panel .panel-topbar {
  margin: 0 -34px;
  padding: 14px 34px 4px;
  background: var(--cream);
}
body:not(.is-phone-studio) .detail-panel .panel-topbar .icon-button { background: transparent; }
body:not(.is-phone-studio) .detail-header { margin-top: 0; }

/* Inky opens on the wall too, so its panel begins the way every page does. */
body:not(.is-phone-studio) .assistant-panel .panel-topbar,
body:not(.is-phone-studio) .assistant-panel .assistant-heading {
  background: var(--cream);
}
body:not(.is-phone-studio) .assistant-panel .panel-topbar { padding-bottom: 4px; }

/* --- The orrery keeps its paper --------------------------------------------------------- */

body:not(.is-phone-studio) .home-rail .orrery-note { color: var(--muted); }

/* The fields that are not boxes. A name and a step are text a person edits in place — the
   rule above paints every field paper, and on these it drew a white box round words that are
   meant to read as the heading they are. */
body:not(.is-phone-studio) :is(textarea.detail-title, textarea.checklist-title, .capture-input) {
  background: transparent;
}
body:not(.is-phone-studio) textarea.detail-title:focus { border-bottom-color: var(--brand); }

/* --- Chips ------------------------------------------------------------------------------
 *
 * One chip, in three families: what an idea IS (its category, its tags, its projects) is the
 * brand's ink on its own wash; what is held back (Local Only) keeps the brass it has always
 * had; a quiet fact is a hairline round the muted ink.
 */
body:not(.is-phone-studio) :is(.category-chip) {
  min-height: 26px;
  border-color: var(--line);
  background: var(--violet-soft);
  color: var(--brand);
  font-weight: 600;
}
body:not(.is-phone-studio) .context-chip {
  border-color: var(--line);
  background: var(--violet-soft);
  color: var(--brand-soft);
}
body:not(.is-phone-studio) .thought-chip { background: var(--paper-2); color: var(--text-soft); }
body:not(.is-phone-studio) .privacy-badge {
  border-color: var(--local-line);
  background: var(--local-wash);
  color: var(--local-strong);
}
body:not(.is-phone-studio) .working-name-chip { border-color: var(--line); background: var(--gold-wash); color: #6b4a12; }

/* --- Filter strips ----------------------------------------------------------------------
 *
 * The thought filters and the review lenses: the phone's row of pressable chips, in paper.
 */
body:not(.is-phone-studio) .filter-strip button {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-solid);
  color: var(--text-soft);
}
body:not(.is-phone-studio) .filter-strip button.is-active {
  border-color: transparent;
  background: var(--brand);
  color: #fffdf8;
}

/* --- A desktop window dragged narrow --------------------------------------------------
 *
 * Below 620px the desk's own shell has always folded the rail into a bar along the bottom
 * (the Mobile M1 layer). That layer is written at one class of specificity and everything in
 * this one is written at two, so the rail rules above would have won there and left five
 * full-width rows stacked across a bar 66px tall. The bar gets its shape back here, and the
 * hero gives up the figure it has no room for. Nothing about the material changes: a narrow
 * window is still paper, cream and ultramarine.
 */
@media (max-width: 620px) {
  body:not(.is-phone-studio) .sidebar { align-items: center; padding: 0 4px; border-top: 1px solid var(--line); border-right: 0; }
  body:not(.is-phone-studio) .nav-label { display: none; }
  body:not(.is-phone-studio) .nav-button {
    display: grid;
    place-items: center;
    width: 44px;
    min-width: 36px;
    height: 44px;
    padding: 0;
  }
  /* The More door is still the phone's alone: the row rule above is written at the same
     weight as the one that hides it and would otherwise have shown it down here. */
  body:not(.is-phone-studio) .nav-more { display: none; }
  body:not(.is-phone-studio) .nav-button.is-active::after {
    top: auto;
    right: auto;
    bottom: -10px;
    left: 50%;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    transform: translateX(-50%);
  }
  body:not(.is-phone-studio) .nav-badge { top: 6px; right: 8px; left: auto; }
  body:not(.is-phone-studio) .sidebar-footer { padding-top: 0; border-top: 0; }
  body:not(.is-phone-studio) .page-header { min-height: 0; }
  body:not(.is-phone-studio) .page-header::after { display: none; }
  body:not(.is-phone-studio) .home-page .page-header { grid-template-columns: minmax(0, 1fr); }
  body:not(.is-phone-studio) .home-hero-figure { display: none; }
  body:not(.is-phone-studio) .home-actions { grid-column: 1; justify-self: start; }
  body:not(.is-phone-studio) #view-root[data-destination="library"] .library-toolbar,
  body:not(.is-phone-studio) #view-root[data-destination="connections"] .connections-filterbar { margin-top: 12px; }
  body:not(.is-phone-studio) .home-page .capture-shell { margin-top: 0; }
  body:not(.is-phone-studio) .home-continue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:not(.is-phone-studio) .detail-header { margin-left: -15px; margin-right: -15px; padding-left: 15px; padding-right: 15px; }
  body:not(.is-phone-studio) .detail-panel .panel-topbar { margin-left: -15px; margin-right: -15px; padding-left: 15px; padding-right: 15px; }
  body:not(.is-phone-studio) .detail-inner { padding-left: 15px; padding-right: 15px; }
  /* The panels are the screen down here, as the M1 layer has always had them. The width
     above is written at two classes and would otherwise have kept a 66px margin of nothing
     beside a thought's words on a 320px window. */
  body:not(.is-phone-studio) :is(.detail-panel, .assistant-panel) { width: 100%; }
}

/* The narrowest band the M1 bar trims for (seven doors on a 320px window). Restated at this
   layer's own specificity so the trim survives it. */
@media (max-width: 374px) {
  body:not(.is-phone-studio) .nav-button { width: 42px; }
}

/* --- The mark itself --------------------------------------------------------------------
 *
 * The icon IS the mark. The calm theme framed it: a 48px paper square with a warm-brown
 * hairline, holding a 47px tile — so the studio's own icon, which already has its corners and
 * its ultramarine field, wore a second border a pixel outside its first. On the brand's paper
 * that reads as a sticker on a card. The frame goes; the tile stands on the rail on its own,
 * at the icon's own radius, and lifts a little when it is pointed at.
 */
body:not(.is-phone-studio) .brand-mark {
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: transparent;
}
body:not(.is-phone-studio) .brand-icon {
  width: 46px;
  height: 46px;
  /* 230/1000 of the icon's own viewBox, which is where its corners actually are. */
  border-radius: 11px;
}
body:not(.is-phone-studio) .brand-mark:hover .brand-icon {
  transform: translateY(-1px);
  filter: drop-shadow(0 8px 14px rgba(19, 40, 125, 0.22));
}

/* The phone studio (Mobile Redesign) ================================================
 *
 * The last layer in the sheet, and the narrowest in scope: every rule below is written
 * under `body.is-phone-studio`, a class public/app.js sets from the CAPABILITY CONTRACT
 * and never from a window width. That is the whole safety argument for this layer. A
 * desktop window dragged down to 320px carries no such class, so it keeps exactly the
 * responsive layout the Mobile M1 layer above already gives it, rule for rule; nothing
 * here can reach the desktop even by accident, at any width, in any orientation.
 *
 * What it changes: the bar becomes five labelled destinations instead of seven unlabelled
 * icons, with everything else behind More; Home becomes calm; the library opens on
 * graphical cards and offers one display control instead of two; and a long idea keeps
 * its name on screen. Nothing here hides a capability - every door the seven-icon bar
 * held is still one or two taps away, and the ones that moved say where they went.
 *
 * The base rules for the two new pieces of markup sit first, OUTSIDE the phone scope, so
 * the desktop is explicit about not drawing them rather than accidentally not drawing
 * them: the nav labels and the More door are display:none everywhere until this layer
 * turns them on.
 */

.nav-label { display: none; }
.nav-more { display: none; }

/* The compact title bar's height before the notch, declared once on the phone's own
   scope so the bar's rule, the negative margin that gives that height back, and the
   tabs' scroll allowance all read the same number. app.js reads NONE of them: it
   measures the rendered bar, which is what makes the safe-area inset part of the
   threshold rather than something a second constant would have to guess at. */
body.is-phone-studio { --sticky-title-base: 56px; }

/* --- The phone's presentation tokens ---------------------------------------------
 *
 * One rhythm, one set of corners, one accent, one floor for a fingertip. Declared on the
 * phone's own scope so the desktop never sees them, and read by every rule this phase
 * added rather than by a fresh number each time — which is how a layer ends up with nine
 * radii and four greys that are each nearly the same as the one beside it.
 *
 * The older rules above and below keep the literal values they shipped with. They are
 * load-bearing in their own right (the bar's height, the page's padding, the compact
 * title's negative margin) and are held to those exact strings by tests; retyping them as
 * tokens would have been churn with a real risk of moving a safe-area calculation.
 */
body.is-phone-studio {
  /* Spacing rhythm: three steps, and nothing between them. */
  --phone-gap-sm: 8px;
  --phone-gap: 12px;
  --phone-gap-lg: 18px;
  /* The page's own side padding, repeated here so a full-bleed row can give it back. */
  --phone-page-x: 15px;
  /* Corners: a chip, a card, a surface. */
  --phone-radius-sm: 12px;
  --phone-radius: 16px;
  --phone-radius-lg: 22px;
  --phone-line: var(--line);
  --phone-surface: var(--panel-solid);
  --phone-surface-soft: rgba(255, 253, 249, 0.6);
  /* Depth, used sparingly: a card is lifted, a sheet is lifted further, nothing else is. */
  --phone-shadow: 0 6px 18px rgba(83, 67, 44, 0.06);
  --phone-shadow-lg: 0 18px 44px rgba(83, 67, 44, 0.18);
  --phone-shadow-float: 0 10px 30px rgba(83, 67, 44, 0.14);
  /* Serif display sizes, for the things a person reads. Written in rem (corrective pass
     2): a person's text-size preference moves the root, and these move with it; at the
     browser's default root of 16px they are the pixel sizes they always were. */
  --phone-display-xl: 1.875rem;
  --phone-display: 1.4375rem;
  --phone-display-sm: 1.1875rem;
  /* Sans control sizes, for the things a person presses. */
  --phone-control: 0.9375rem;
  --phone-label: 0.8125rem;
  --phone-caption: 0.75rem;
  /* The bottom bar: a fixed part for the icon and its breathing room, and a rem part for
     the label under it, so larger text makes the bar taller instead of clipping the word.
     64px at the default root. Everything that keeps clear of the bar reads this token. */
  --phone-nav: calc(44px + 1.25rem);
  /* How far the bar floats above the home indicator (Home pass 2). */
  --phone-nav-float: 10px;
  /* The indigo, and the wash it leaves behind it. */
  --phone-accent: var(--violet);
  --phone-accent-wash: rgba(41, 75, 193, 0.07);
  --phone-accent-line: rgba(41, 75, 193, 0.34);
  /* A fingertip, and the smaller floor a chip may use. */
  --phone-touch: 44px;
  --phone-chip: 36px;
}

@media (max-width: 359px) {
  body.is-phone-studio { --phone-page-x: 12px; --phone-display-xl: 1.6875rem; }
}

/* --- The bar: five labelled destinations ---------------------------------------- */

/* No `overflow-x: hidden` here, deliberately. Sideways overflow on this layer is
   PREVENTED — every grid track may reach zero and every long word may break — and hiding
   it would only make the next one invisible instead of absent. */
body.is-phone-studio .app-shell { display: block; }
/* What .main-content IS on a phone is decided once, in the app-shell layer at the foot of
   this sheet: it is the studio's one scrollport, with a definite height. It used to be
   given an automatic height here, which is what left the phone with no scrollport of its
   own and the document doing the scrolling instead. See Mobile App Shell Hardening MAS-1. */

body.is-phone-studio .sidebar {
  position: fixed;
  z-index: var(--layer-sticky);
  /* An island (Home pass 2): the bar stands a little above the home indicator and a little
     in from both edges, so the page is seen to continue beneath it. The device's own
     insets are in its position, not its box. */
  inset: auto max(12px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + var(--phone-nav-float)) max(12px, env(safe-area-inset-left, 0px));
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
  gap: 0;
  /* A floor, not a height (corrective pass 3): the bar is as tall as the token at the
     default text size and grows with its own rows when the labels reflow onto two. What
     the content must keep clear of is then MEASURED — paintNavBar in app.js writes the
     bar's real height to --phone-nav-height on the body — and every clearance below reads
     that measurement, falling back to the token where nothing has measured yet. */
  height: auto;
  min-height: var(--phone-nav);
  padding: 2px 4px;
  border: 1px solid var(--line);
  border-radius: 24px;
  /* Paper, lifted - not glass. A blurred translucent bar over a scrolling library is the
     one effect that reads as decoration on every phone at once, and it costs a compositor
     pass on the device least able to spare one; one soft shadow is what lifts the island. */
  background: var(--phone-surface);
  backdrop-filter: none;
  box-shadow: var(--phone-shadow-float);
}

/* The destination you are on is named by the studio's own indigo and by the marker under
   it — never by a filled tab the eye reads as a button waiting to be pressed. */
body.is-phone-studio .nav-button.is-active {
  background: transparent;
  color: var(--phone-accent);
  box-shadow: none;
}

body.is-phone-studio .nav-button:hover { background: transparent; }

body.is-phone-studio .brand-mark { display: none; }

/* Inky, Undo, Settings and the shell's own phone-copy door are not gone: they are in
   More. A bar that tries to hold every door holds none of them legibly. */
body.is-phone-studio .sidebar-footer { display: none; }

body.is-phone-studio .nav-stack {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  flex: 1 1 auto;
  gap: 0;
  min-width: 0;
  width: 100%;
}

/* Fewer columns when the labels are too wide for five (planNavFit, app-viewport.js): six
   tracks with every destination spanning two hold three above and two centred beneath;
   two columns hold two, two and one across the whole width. Nothing shrinks, nothing is
   hidden, no word is broken — the bar grows a row and the content keeps clear of it. */
body.is-phone-studio .nav-stack[data-nav-columns="3"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
body.is-phone-studio .nav-stack[data-nav-columns="3"] .nav-button { grid-column: span 2; }
body.is-phone-studio .nav-stack[data-nav-columns="3"] .nav-button:nth-child(4) { grid-column: 2 / span 2; }
body.is-phone-studio .nav-stack[data-nav-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.is-phone-studio .nav-stack[data-nav-columns="2"] .nav-button:last-child { grid-column: 1 / -1; }
body.is-phone-studio .nav-stack[data-nav-columns="1"] { grid-template-columns: minmax(0, 1fr); }
/* While the bar is being measured every label is one unbroken line, so its natural width
   can be read; the class is on for one synchronous measurement and off again. */
body.is-phone-studio .nav-stack.is-measuring .nav-label { white-space: nowrap; overflow-wrap: normal; }

body.is-phone-studio .nav-button {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 44px;
  padding: 4px 2px;
  border-radius: 12px;
}

body.is-phone-studio .nav-more { display: grid; }
body.is-phone-studio .nav-button svg { width: 21px; height: 21px; }

body.is-phone-studio .nav-label {
  display: block;
  max-width: 100%;
  font-size: 0.6875rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-align: center;
  overflow-wrap: anywhere;
}

/* The active marker underlines the destination from inside the bar. */
body.is-phone-studio .nav-button.is-active::after {
  right: auto;
  bottom: 3px;
  left: 50%;
  width: 20px;
  height: 2px;
  transform: translateX(-50%);
}

/* The badge rides the icon, not the corner of a labelled column. */
body.is-phone-studio .nav-badge { top: 6px; right: calc(50% - 20px); }

/* Content ends above the bar on every phone, in both orientations. Each clearance reads the
   measured bar (--phone-nav-height, set on the body by paintNavBar) and falls back to the
   token plus the safe area until something has measured. */
body.is-phone-studio .page { padding: 14px 15px calc(var(--phone-nav-height, calc(var(--phone-nav) + env(safe-area-inset-bottom, 0px) + var(--phone-nav-float))) + 28px); }
body.is-phone-studio .toast-stack { right: 12px; left: 12px; bottom: calc(var(--phone-nav-height, calc(var(--phone-nav) + env(safe-area-inset-bottom, 0px) + var(--phone-nav-float))) + 12px); align-items: flex-end; }
body.is-phone-studio .studio-notice { bottom: calc(var(--phone-nav-height, calc(var(--phone-nav) + env(safe-area-inset-bottom, 0px) + var(--phone-nav-float))) + 12px); }
body.is-phone-studio .combine-dock { bottom: calc(var(--phone-nav-height, calc(var(--phone-nav) + env(safe-area-inset-bottom, 0px) + var(--phone-nav-float))) + 8px); }

/* --- The top bar shared by Home and the library --------------------------------- */

body.is-phone-studio .phone-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  min-height: 48px;
  margin-bottom: 14px;
}

/* The name's share is written in rem (corrective pass 3): at the default text size it is
   the column it always was beside the sync chip and the Inky door; when a person's text
   preference makes the words wider than the room beside those two, the actions wrap onto
   a line of their own instead of squeezing "Idea Studio" into a column one letter wide.
   Its floor is its longest word, so no word is ever broken to make it fit. */
body.is-phone-studio .phone-topbar-name { min-width: min-content; flex: 1 1 6rem; }

/* On a page (anything with an eyebrow) the actions take the first line on their own and
   the name takes the whole of the next one. The reading order is unchanged: the name is
   still the first thing in the markup, and the only focusable things here are the two
   controls. */
body.is-phone-studio .phone-topbar.is-page { flex-wrap: wrap; }
body.is-phone-studio .phone-topbar.is-page .phone-topbar-name { flex: 1 1 100%; order: 2; }
body.is-phone-studio .phone-topbar.is-page .phone-topbar-actions { order: 1; margin-left: auto; }

/* The name wraps rather than clipping: a page title here is sometimes a sentence
   ("Nothing urgent - 3 optional tidy-ups"), and an ellipsis would eat the count. */
body.is-phone-studio .phone-topbar-name h1 {
  margin: 0;
  font-size: 1.4375rem;
  line-height: 1.16;
  letter-spacing: -0.02em;
  /* break-word, not anywhere: a word breaks only when it is wider than the whole line,
     and the name's minimum width above is measured from its longest whole word. */
  overflow-wrap: break-word;
}

body.is-phone-studio .phone-topbar-name .eyebrow { margin: 0 0 2px; }

body.is-phone-studio .phone-topbar-name span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.3;
}

body.is-phone-studio .phone-topbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

body.is-phone-studio .phone-back,
body.is-phone-studio .phone-more,
body.is-phone-studio .phone-sparkle {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

body.is-phone-studio .phone-back svg,
body.is-phone-studio .phone-more svg { width: 22px; height: 22px; }
body.is-phone-studio .phone-sparkle .inky-mark { width: 26px; height: 30px; }

/* --- The sync state, painted by the shell and placed here ----------------------- */

/* Away from a top bar (Review, Connections, the detail panel) the chip stays a floating
   pill - above the navigation bar, where it used to hide underneath it. */
.mobile-sync-chip {
  position: fixed;
  left: 50%;
  bottom: calc(var(--phone-nav-height, calc(var(--phone-nav, 64px) + env(safe-area-inset-bottom, 0px))) + 12px);
  z-index: var(--layer-sticky);
  min-height: 32px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-solid);
  color: var(--muted);
  font: inherit;
  font-size: 0.78125rem;
  box-shadow: 0 4px 14px rgba(83, 67, 44, 0.14);
  transform: translateX(-50%);
  cursor: pointer;
}

/* In a top bar it is an ordinary inline pill beside the studio's name. */
body.is-phone-studio .phone-sync-slot { display: inline-flex; align-items: center; }
body.is-phone-studio .phone-sync-slot .mobile-sync-chip {
  position: static;
  bottom: auto;
  left: auto;
  min-height: 30px;
  padding: 5px 10px 5px 9px;
  box-shadow: none;
  transform: none;
}

/* A dot says the state before the word does (Home pass): grey while the phone is on its
   own, gold while something is on its way, green when everything has travelled, and red
   only when a person has to act. The chip's own words are the shell's; this colours them. */
body.is-phone-studio .mobile-sync-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
body.is-phone-studio .mobile-sync-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted-2);
  box-shadow: 0 0 0 2px rgba(255, 253, 249, 0.9);
}
body.is-phone-studio .mobile-sync-chip[data-state="uptodate"] .mobile-sync-dot { background: #3d9a63; }
body.is-phone-studio .mobile-sync-chip:is([data-state="saved"], [data-state="waiting"], [data-state="syncing"]) .mobile-sync-dot { background: var(--gold); }
body.is-phone-studio .mobile-sync-chip:is([data-state="attention"], [data-state="trouble"]) .mobile-sync-dot { background: #c2453d; }
/* The heartbeat is added for somebody who has not asked for less motion, never drawn and
   taken back: outside this guard the dot simply holds its colour. */
@media (prefers-reduced-motion: no-preference) {
  body.is-phone-studio .mobile-sync-chip[data-state="syncing"] .mobile-sync-dot { animation: phone-sync-pulse 1.4s ease-in-out infinite; }
}

/* --- Home ----------------------------------------------------------------------- */

/* The field's own breathing room was sized for a desk, where the quote sits at the foot
   of a tall column; on a phone it left a screenful of nothing between them. */
body.is-phone-studio .phone-home .capture-shell { margin-bottom: 14px; }
body.is-phone-studio .phone-home .home-quote { padding: 8px 6px 0; text-align: center; }
body.is-phone-studio .phone-home .home-quote::before { margin-bottom: 14px; }
body.is-phone-studio .phone-home .home-quote-body { min-height: 0; }
body.is-phone-studio .phone-home .home-quote-body p { font-size: 1rem; }
body.is-phone-studio .phone-home .home-quote-cite { margin-top: 6px; }

body.is-phone-studio .phone-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 10px;
}

body.is-phone-studio .phone-section-head h2 { margin: 0; font-size: 1.25rem; }

/* A rail, swiped sideways (Home pass 2): the first card and the edge of the next are what
   a screen shows, and the rest are a thumb away. It bleeds to the page's edges so a card
   can be seen arriving. The scroller is its own: the page never scrolls sideways. */
body.is-phone-studio .phone-continue-rail {
  display: flex;
  gap: 12px;
  margin: 0 -15px;
  padding: 4px 15px 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 15px;
  scrollbar-width: none;
}
body.is-phone-studio .phone-continue-rail::-webkit-scrollbar { display: none; }
body.is-phone-studio .phone-continue-rail > .library-card-wrap { flex: 0 0 min(76%, 300px); scroll-snap-align: start; }
body.is-phone-studio .phone-continue-rail .card-title { overflow-wrap: break-word; }

/* The card itself is drawn once, for the rail and the library alike, at the foot of this
   sheet ("Idea cards, as posters"). The rail only says how the cards sit in it. */

body.is-phone-studio .phone-review-cue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  margin-top: 16px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-solid);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

body.is-phone-studio .phone-review-copy { min-width: 0; }
body.is-phone-studio .phone-review-copy strong { display: block; font-weight: 500; overflow-wrap: anywhere; }
body.is-phone-studio .phone-review-copy small { color: var(--muted); }

/* The count and a chevron travel together at the end of the row: the chevron is what says
   this is a door and not a notice (Home pass). */
body.is-phone-studio .phone-review-trail { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; }
body.is-phone-studio .phone-review-chevron { display: grid; place-items: center; width: 20px; height: 20px; color: var(--muted-2); }
body.is-phone-studio .phone-review-chevron svg { width: 18px; height: 18px; }

body.is-phone-studio .phone-review-count {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 24px;
  min-height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--gold);
  color: #fff;
  font-size: 0.75rem;
}

/* --- The library ---------------------------------------------------------------- */

body.is-phone-studio .phone-search { width: 100%; margin-bottom: 10px; }
body.is-phone-studio .phone-search input { width: 100%; }

body.is-phone-studio .phone-filter-row,
body.is-phone-studio .phone-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.is-phone-studio .phone-filter-row { margin-bottom: 10px; }
body.is-phone-studio .phone-mode-row { justify-content: flex-end; margin-bottom: 12px; }

body.is-phone-studio .phone-filter,
body.is-phone-studio .phone-mode {
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-solid);
  color: var(--text);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

body.is-phone-studio .phone-filter.is-active,
body.is-phone-studio .phone-mode.is-active {
  border-color: var(--violet);
  background: var(--violet-soft);
  color: var(--violet);
}

body.is-phone-studio .phone-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

/* A real title is not four short words. Every card and row lets one break rather than
   pushing the grid sideways. */
body.is-phone-studio .card-title,
body.is-phone-studio .row-title { overflow-wrap: break-word; }
body.is-phone-studio .library-grid,
body.is-phone-studio .phone-continue-rail { min-width: 0; }
/* Two cards across at the default text size, one across once the type is large enough that
   a name like "Craftspeople" no longer fits half a phone (corrective pass 3): the column's
   floor is in rem, so the grid reflows with the text instead of breaking words inside it.
   9.5rem, not 5 (Card pass, Library pass 1): a poster card narrower than that cannot hold a
   category's name beside its pin without breaking it over three lines, and at 150% text a
   summary word like "neighbourhood" needs the whole of a 320px phone to stay in one piece.
   So a 320px phone shows one poster across at the default size, and 360px and wider two. */
body.is-phone-studio .library-grid[data-card-size="small"] { grid-template-columns: repeat(auto-fit, minmax(max(9.5rem, 40%), 1fr)); }
body.is-phone-studio .library-card-wrap,
body.is-phone-studio .library-row-wrap { min-width: 0; }

/* --- The idea, and the name that stays ------------------------------------------ */

/* Full-bleed surfaces on a phone at ANY width, portrait or landscape. The M1 layer
   already does this below 620px for a narrow desktop window; a phone held sideways is
   wider than that and is still a phone. 100%, never 100vw, so no scrollbar sliver. */
body.is-phone-studio .detail-panel,
body.is-phone-studio .assistant-panel,
body.is-phone-studio .combine-modal { width: 100%; }

body.is-phone-studio .detail-inner,
body.is-phone-studio .assistant-inner {
  --phone-pad-x: 15px;
  --phone-pad-top: 14px;
  padding: var(--phone-pad-top) var(--phone-pad-x) 40px;
}

/* The compact title bar. It takes NO room in the flow - its negative bottom margin gives
   back exactly its own height - so the idea reads the same at the top of the page as it
   always has, and the bar floats over the words only once the real name has gone. It is
   `visibility: hidden` rather than aria-hidden while it is away, which is what keeps its
   two buttons out of the tab order and out of the accessibility tree at the same time. */
body.is-phone-studio .detail-sticky-title {
  position: sticky;
  top: 0;
  z-index: var(--layer-sticky);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 4px;
  height: calc(var(--sticky-title-base) + env(safe-area-inset-top, 0px));
  margin: calc(-1 * var(--phone-pad-top)) calc(-1 * var(--phone-pad-x)) calc(-1 * var(--sticky-title-base) - env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 8px 0;
  border-bottom: 1px solid var(--line);
  background: var(--panel-solid);
  box-shadow: 0 6px 18px rgba(83, 67, 44, 0.1);
  visibility: hidden;
  opacity: 0;
}

body.is-phone-studio .detail-sticky-title.is-visible {
  visibility: visible;
  opacity: 1;
}

/* The slide is added only for somebody who has not asked for less motion, rather than
   drawn for everybody and then taken back. Without it the bar simply is there or is not,
   which is the same feature with none of the movement. */
@media (prefers-reduced-motion: no-preference) {
  body.is-phone-studio .detail-sticky-title {
    transform: translateY(-100%);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  }
  body.is-phone-studio .detail-sticky-title.is-visible {
    transform: translateY(0);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
  }
}

body.is-phone-studio .detail-sticky-title strong {
  min-width: 0;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The idea's own top row on a phone: back, room, and the one door to everything else.
   The idea's actions are not in it — they are below the header, where the name gets the
   first screen instead of a three-line toolbar. */
body.is-phone-studio .panel-topbar.phone-detail-bar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

/* The idea's name is the hero of its own screen. The shared clamp is written for a panel
   beside a desktop's library; in a hand it settled to the size of the summary underneath
   it, and the screen read as a paragraph with a heading missing. */
body.is-phone-studio textarea.detail-title {
  margin: 6px 0 10px;
  font-size: 1.6875rem;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

body.is-phone-studio .detail-summary { font-size: 0.9375rem; }

/* A tab row reached by a programmatic scroll stops below the bar, never under it. */
body.is-phone-studio .detail-tabs { scroll-margin-top: calc(var(--sticky-title-base) + 8px + env(safe-area-inset-top, 0px)); }

/* --- Settings, on a phone -------------------------------------------------------
 *
 * The same modal, the same grouped visual language, laid out as a screen: near
 * full-bleed, a back chevron instead of a close cross, and rows that are comfortable
 * under a thumb. Every rule is still the desktop's cascade with a phone-only override on
 * top, so the desktop's Settings is untouched.
 */
body.is-phone-studio .settings-modal {
  width: 100%;
  max-width: none;
  max-height: 100%;
  height: 100%;
  padding: 0 15px calc(24px + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-radius: 0;
}

body.is-phone-studio .modal-overlay:has(> .settings-modal) { align-items: stretch; }

body.is-phone-studio .settings-header.phone-settings-head {
  position: sticky;
  top: 0;
  z-index: var(--layer-sticky);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  margin: 0 -15px 6px;
  padding: env(safe-area-inset-top, 0px) 8px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-solid);
}

body.is-phone-studio .phone-settings-head h2 {
  margin: 0;
  font-size: 1.3125rem;
}

body.is-phone-studio .settings-section { margin-top: 18px; }
body.is-phone-studio .settings-section-head { margin-bottom: 8px; }

/* `flex: 1 1 240px` was written for a head laid out as a ROW, where 240px is a width.
   Below 620px the head becomes a column and that basis becomes a HEIGHT, so every
   section heading reserved 240 empty pixels above its own rows. Reset on the phone's
   own scope: the narrow-window desktop keeps whatever it has today. */
body.is-phone-studio .settings-section-head > div { flex: 1 1 auto; }
body.is-phone-studio .settings-group { gap: 0; margin-top: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; }

/* One rounded group, hairlines between its rows — the calm grouped list the concept
   draws, built out of the rows Settings already had. */
body.is-phone-studio .settings-group .setting-row {
  width: 100%;
  min-height: 62px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: var(--text);
}

body.is-phone-studio .settings-group .setting-row:last-child { border-bottom: 0; }

/* Three columns: the mark, the words, and whatever the row ends in. The narrow-screen
   block above collapses these into two and drops the last child onto its own line, which
   is right for a desktop window squeezed narrow and wrong for a list of settings rows. */
/* A wrapping row, not a grid (corrective pass 3). Three columns — the mark, the words, and
   whatever the row ends in — held the words in a track that could be narrower than a word,
   so at a large text size "Anything" broke in the middle beside a chip that would not. The
   words' share is written in rem: at the default size the three sit on one line exactly as
   before; when the text grows, the chip or chevron drops beneath the words instead. */
body.is-phone-studio .settings-group .setting-row { display: flex; flex-wrap: wrap; align-items: center; }
body.is-phone-studio .settings-group .setting-row > .setting-icon { flex: 0 0 auto; }
body.is-phone-studio .settings-group .setting-row > .setting-copy { flex: 1 1 6rem; min-width: 0; }
/* `:not(.phone-mode-row)`: the chooser takes a full line of its own further down.
   `:not(.setting-copy)`: a state row with no chip ends in its own words, and those must
   not be pushed to the right edge as if they were the chip. */
body.is-phone-studio .settings-group .setting-row > :last-child:not(.phone-mode-row):not(.setting-copy) { flex: 0 0 auto; margin-left: auto; }
body.is-phone-studio .settings-group .setting-row.is-link { cursor: pointer; }
body.is-phone-studio .settings-group .setting-copy strong { display: block; font-weight: 500; }
body.is-phone-studio .settings-group .setting-copy span { display: block; color: var(--muted); overflow-wrap: break-word; }

/* A state chip is a label, not a column to be widened into: it keeps its own width and
   sits with the row's first line rather than centring beside a paragraph. */
body.is-phone-studio .settings-group .connection-state { flex: 0 0 auto; align-self: center; white-space: nowrap; }

/* The display chooser is three chips, so it takes a full line of its own rather than being
   squeezed in beside a two-line description. */
body.is-phone-studio .settings-group .phone-mode-row { flex: 1 1 100%; justify-content: flex-start; margin: 4px 0 0; }

/* --- More ------------------------------------------------------------------------ */

/*
 * The sheet's own surface. Its LAYER is declared with every other dialog's, up beside the
 * scrim they all share — this is only what it looks like once it is where it belongs.
 */
body.is-phone-studio .more-sheet {
  width: min(520px, calc(100% - 20px));
  max-height: min(86vh, calc(100% - 40px));
  padding: 6px 8px 10px;
  overflow-y: auto;
  border: 1px solid var(--phone-line);
  border-radius: var(--phone-radius-lg);
  background: var(--phone-surface);
  box-shadow: var(--phone-shadow-lg);
}

body.is-phone-studio .more-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px 4px;
}

body.is-phone-studio .more-head h2 {
  margin: 0;
  min-width: 0;
  font-family: var(--serif);
  font-size: var(--phone-display-sm);
  font-weight: 400;
  overflow-wrap: anywhere;
}
body.is-phone-studio .more-list { display: grid; }

/* One more class than the fingertip floor below, deliberately: 44px is the smallest a
   control may be, and a row carrying an icon, a title and a sentence is bigger than
   the smallest. Without this the floor - written later in the sheet, at the same
   specificity - silently won, and the row it was protecting got shorter. */
body.is-phone-studio .more-list .more-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

body.is-phone-studio .more-list .more-row:last-child { border-bottom: 0; }
body.is-phone-studio .more-copy { min-width: 0; }
body.is-phone-studio .more-copy strong { display: block; font-weight: 500; }
body.is-phone-studio .more-copy small { color: var(--muted); overflow-wrap: anywhere; }
body.is-phone-studio .more-icon { display: grid; place-items: center; color: var(--phone-accent); font-size: 1.125rem; }
body.is-phone-studio .more-icon .inky-mark { width: 24px; height: 28px; }
body.is-phone-studio .more-icon svg { width: 21px; height: 21px; }
body.is-phone-studio .more-chevron { display: grid; place-items: center; color: var(--muted-2); }
body.is-phone-studio .more-chevron svg { width: 18px; height: 18px; }

/* --- Home: one capture surface ----------------------------------------------------
 *
 * The approved design is a single outlined container: a spacious field, one rule across
 * it, and one row of three actions in the order a person decides them — how private is
 * this, does it need anything else, save it. What was there instead was a field with two
 * right-aligned buttons crowded beside it and a separate "More options" row hanging under
 * the box, which spent a whole row of a phone on a disclosure and still left the fold's
 * contents nowhere obvious to appear.
 */
body.is-phone-studio .phone-home .capture-shell {
  margin-bottom: var(--phone-gap-lg);
  border-radius: var(--phone-radius-lg);
  background: var(--phone-surface);
  box-shadow: var(--phone-shadow);
}

/* Stacked, not side by side: the field owns the width, the actions own the row below it. */
body.is-phone-studio .capture-form {
  display: block;
  min-height: 0;
  padding: 0;
  border-radius: var(--phone-radius-lg) var(--phone-radius-lg) 0 0;
  background: transparent;
}

body.is-phone-studio .capture-input {
  min-height: 104px;
  max-height: 190px;
  padding: 16px 16px 12px;
  font-size: 1.0625rem;
}

/* Local only · Options · Capture. Options takes the slack on either side, so the two ends
   stay put whatever the words in them become. A wrapping row rather than a three-column
   grid (corrective pass 3): a grid track can be narrower than the button in it, and at a
   200% text size on a 320px phone that put Options under Capture. A flex line never lays
   one item over another — when the three no longer fit, Capture takes the next line. */
body.is-phone-studio .capture-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--phone-gap-sm);
  padding: var(--phone-gap-sm);
  border-top: 1px solid var(--phone-line);
}

body.is-phone-studio .capture-actions .privacy-toggle {
  flex: 0 0 auto;
  order: 0;
  min-height: var(--phone-touch);
  padding: 0 14px;
  border-radius: 999px;
  font-size: var(--phone-label);
}

body.is-phone-studio .capture-actions .capture-more-toggle {
  flex: 0 0 auto;
  order: 2;
  margin-inline: auto;
  min-height: var(--phone-touch);
  padding: 0 10px;
  border-radius: 999px;
  color: var(--text-soft);
  font-size: var(--phone-control);
  font-weight: 500;
}

/* Open, the control says so in the studio's own accent. The chevron is not drawn here:
   the panel appears immediately underneath, which is the state, said larger. */
body.is-phone-studio .capture-actions .capture-more-toggle svg { display: none; }
body.is-phone-studio .capture-actions .capture-more-toggle[aria-expanded="true"] { color: var(--phone-accent); }

body.is-phone-studio .capture-submit {
  flex: 0 0 auto;
  order: 3;
  min-height: var(--phone-touch);
  padding: 0 20px;
  border: 1px solid var(--phone-accent);
  border-radius: 999px;
  background: var(--phone-accent);
  color: #fff;
  box-shadow: none;
}

body.is-phone-studio .capture-submit svg { display: none; }
body.is-phone-studio .capture-submit-label { font-size: var(--phone-control); }

/* The fold's contents belong to the same surface, directly under the row that opened it. */
body.is-phone-studio .capture-shell .capture-more { margin-top: 0; }

body.is-phone-studio .capture-shell .capture-options {
  margin-top: 0;
  padding: var(--phone-gap);
  border: 0;
  border-top: 1px solid var(--phone-line);
  border-radius: 0 0 var(--phone-radius-lg) var(--phone-radius-lg);
  background: transparent;
}

body.is-phone-studio .capture-shell .capture-local-note { border-radius: 0; }

/* --- The library's entrance --------------------------------------------------------
 *
 * A kicker, a name, one number, and then the library. Everything that used to stand
 * between the top of the screen and the first idea is still here — the search, all eleven
 * filters, the display chooser, every action — it is simply arranged as an entrance
 * instead of an admin toolbar.
 */
body.is-phone-studio .phone-topbar.is-chrome {
  min-height: 40px;
  margin-bottom: 2px;
}

body.is-phone-studio .phone-brand {
  font-family: var(--serif);
  font-size: 1.0625rem;
  color: var(--muted);
  letter-spacing: -0.01em;
}

body.is-phone-studio .phone-kicker {
  margin: 0 0 5px;
  color: var(--phone-accent);
  font-size: var(--phone-caption);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

body.is-phone-studio .phone-lib-head { margin: 0 0 var(--phone-gap); }

body.is-phone-studio .phone-lib-head h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--phone-display-xl);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

body.is-phone-studio .phone-lib-count {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--phone-caption);
}

/* Search, filters and the display line are one block, so a phone held sideways can put
   them on two rows instead of four without either of them learning a second layout. */
body.is-phone-studio .phone-lib-bar {
  display: grid;
  gap: 10px;
  margin-bottom: var(--phone-gap);
}

body.is-phone-studio .phone-search { width: 100%; margin-bottom: 0; }

body.is-phone-studio .phone-search .search-glyph {
  position: absolute;
  left: 14px;
  top: 15px;
  width: 18px;
  height: 18px;
  color: var(--muted-2);
  pointer-events: none;
}

body.is-phone-studio .phone-search input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px 0 42px;
  border-radius: var(--phone-radius);
  background: var(--phone-surface);
}

/*
 * ONE ROW OF FILTERS, NOT FOUR.
 *
 * Eleven chips wrapped into four stacked rows and pushed the library most of a screen
 * down. They scroll sideways now — inside their own box, which is why the PAGE still
 * cannot be pushed sideways by them. No `overflow-x: hidden` anywhere: sideways overflow
 * on this layer is prevented, and hiding it would only make the next one invisible.
 */
body.is-phone-studio .phone-filter-row {
  flex-wrap: nowrap;
  gap: 7px;
  margin-bottom: 0;
  padding-bottom: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

body.is-phone-studio .phone-filter { flex: 0 0 auto; }
/* A chip past the fold is gone, not merely off the edge: out of the tab order and the
   accessibility tree, whatever display the control rules above gave it. */
body.is-phone-studio .phone-filter[hidden] { display: none; }

body.is-phone-studio .phone-lib-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

/* Cards · Large · List, as one segmented control rather than three loose pills. */
body.is-phone-studio .phone-lib-controls .phone-mode-row {
  flex: 0 1 auto;
  flex-wrap: nowrap;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--phone-line);
  border-radius: 999px;
  background: var(--phone-surface);
  overflow-x: auto;
  scrollbar-width: none;
}

body.is-phone-studio .phone-lib-controls .phone-mode {
  flex: 0 0 auto;
  padding: 0 12px;
  border-color: transparent;
  background: transparent;
  font-size: var(--phone-label);
}

body.is-phone-studio .phone-lib-controls .phone-mode.is-active {
  border-color: transparent;
  background: var(--phone-accent-wash);
  color: var(--phone-accent);
  font-weight: 500;
}

body.is-phone-studio .phone-lib-controls .phone-page-actions {
  flex: 0 0 auto;
  margin-bottom: 0;
  gap: 6px;
}

body.is-phone-studio .phone-lib-controls .primary-button { min-height: var(--phone-touch); }

/* The overflow door is round and a fingertip across, like every other icon control on the
   phone - not a square that reads as an unfinished button. */
body.is-phone-studio .phone-lib-controls .library-overflow .secondary-button {
  display: grid;
  place-items: center;
  width: var(--phone-touch);
  min-height: var(--phone-touch);
  padding: 0;
  border-radius: 50%;
}

/* --- The idea: name, summary, chips, tabs ------------------------------------------
 *
 * In that order and no other. The category eyebrow above the name is gone from the phone
 * — it is the first chip now, with everything else that says what this idea IS — and the
 * four-button toolbar that stood between the chips and the tabs has moved into the idea's
 * own "..." sheet, where nothing is lost and the name gets the first screen.
 */
body.is-phone-studio .detail-header { margin-bottom: 0; }

body.is-phone-studio .detail-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: var(--phone-gap);
}

body.is-phone-studio .detail-chip-row .category-chip,
body.is-phone-studio .detail-chip-row .context-chip,
body.is-phone-studio .detail-chip-row .working-name-chip,
body.is-phone-studio .detail-chip-row .privacy-badge,
body.is-phone-studio .detail-chip-row .status-select {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: var(--phone-chip);
  margin: 0;
  padding: 0 12px;
  border-radius: 999px;
  font-size: var(--phone-caption);
  white-space: nowrap;
}

body.is-phone-studio .detail-chip-row .status-select { padding: 0 30px 0 12px; }

/* Tags are what the idea is ABOUT; the category, its status and its projects are what it
   IS. The second group leads, so the tags are drawn a shade quieter rather than in the
   same indigo wash as everything else in the row. */
body.is-phone-studio .detail-chip-row .category-chip {
  border-color: var(--phone-line);
  background: transparent;
  color: var(--muted);
}

body.is-phone-studio .detail-chip-row .category-chip.is-category {
  border-color: var(--phone-accent-line);
  background: var(--phone-accent-wash);
  color: var(--phone-accent);
  font-weight: 500;
}

/* The sections scroll sideways rather than wrapping onto a second and third line, and the
   one you are reading is a solid indigo pill. */
body.is-phone-studio .detail-tabs {
  flex-wrap: nowrap;
  gap: 6px;
  margin: var(--phone-gap-lg) calc(-1 * var(--phone-pad-x)) var(--phone-gap);
  padding: var(--phone-gap-sm) var(--phone-pad-x);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

body.is-phone-studio .detail-tabs .tab-button {
  flex: 0 0 auto;
  min-height: var(--phone-touch);
  padding: 0 14px;
  border-radius: 999px;
  font-size: var(--phone-label);
  white-space: nowrap;
}

body.is-phone-studio .detail-tabs .tab-button.is-active {
  background: var(--phone-accent);
  color: #fff;
  font-weight: 500;
}

/* --- The Prompt Studio, arranged for a hand ---------------------------------------- */
body.is-phone-studio .prompt-builder.is-phone-prompt {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.is-phone-studio .prompt-phone-head { margin: 0 0 var(--phone-gap); }

body.is-phone-studio .prompt-phone-head h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--phone-display);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.01em;
}

body.is-phone-studio .prompt-phone-sub {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: var(--phone-caption);
  line-height: 1.5;
}

body.is-phone-studio .prompt-panel {
  display: block;
  padding: var(--phone-gap);
  border: 1px solid var(--phone-line);
  border-radius: var(--phone-radius-lg);
  background: var(--phone-surface);
  box-shadow: var(--phone-shadow);
}

/* A label, not a box. Four nested boxes down a phone is a form nobody finishes. */
body.is-phone-studio .prompt-fieldset.is-plain {
  margin: 0 0 var(--phone-gap-lg);
  padding: 0;
  border: 0;
  background: transparent;
}

/* A legend with no border to notch is simply the first line of the group. It is left as
   the inline box the browser makes it - a `float` here reflowed the grid underneath it
   into the margin - and only its type is changed. */
body.is-phone-studio .prompt-fieldset.is-plain > legend {
  padding: 0;
  margin-bottom: var(--phone-gap-sm);
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--phone-caption);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* The three selection controls and the live count: a plain row on the phone, not a tinted
   panel competing with the sources it describes. */
body.is-phone-studio .is-phone-prompt .prompt-source-toolbar {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: var(--phone-gap-sm);
  padding: 0;
  border: 0;
  background: transparent;
}

body.is-phone-studio .is-phone-prompt .prompt-source-toolbar #prompt-count {
  color: var(--muted);
  font-size: var(--phone-caption);
}

body.is-phone-studio .is-phone-prompt .prompt-source-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

body.is-phone-studio .is-phone-prompt .prompt-source-buttons .text-button { min-height: var(--phone-touch); }

body.is-phone-studio .is-phone-prompt .prompt-choice-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--phone-gap-sm);
}

body.is-phone-studio .is-phone-prompt .prompt-choice-grid.is-thirds { grid-template-columns: minmax(0, 1fr); }

body.is-phone-studio .is-phone-prompt .prompt-choice {
  align-items: center;
  min-height: 54px;
  padding: 8px 12px;
  border-radius: var(--phone-radius-sm);
  background: transparent;
}

body.is-phone-studio .is-phone-prompt .prompt-choice.is-chosen {
  border-color: var(--phone-accent-line);
  background: var(--phone-accent-wash);
}

/*
 * In the compact grid the objective's own sentence is CLIPPED, never removed: it stays in
 * the accessibility tree for anybody reading the radio, and the chosen objective's full
 * sentence is printed under the grid where a sighted reader sees it as soon as they pick.
 */
body.is-phone-studio .is-phone-prompt .prompt-choice-grid:not(.is-thirds) .prompt-choice small {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body.is-phone-studio .is-phone-prompt .prompt-objective-note {
  margin: var(--phone-gap-sm) 0 0;
  color: var(--muted);
  font-size: var(--phone-caption);
  line-height: 1.45;
}

body.is-phone-studio .prompt-section {
  border-bottom: 1px solid var(--phone-line);
}

body.is-phone-studio .prompt-section:last-child { border-bottom: 0; }

body.is-phone-studio .prompt-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  color: var(--text-soft);
  font-size: var(--phone-control);
  list-style: none;
  cursor: pointer;
}

body.is-phone-studio .prompt-section > summary small {
  color: var(--muted);
  font-size: var(--phone-caption);
}

body.is-phone-studio .prompt-group.is-bare {
  margin: 0 0 var(--phone-gap-sm);
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.is-phone-studio .prompt-group-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 4px;
  color: var(--muted);
  font-size: var(--phone-caption);
}

body.is-phone-studio .prompt-group.is-bare .prompt-group-hint { margin: 0 0 6px; }
body.is-phone-studio .prompt-group.is-bare .prompt-source-list { padding: 0 0 6px; }

body.is-phone-studio .is-phone-prompt .prompt-advanced {
  margin-bottom: var(--phone-gap);
  border-radius: var(--phone-radius);
  background: transparent;
}

body.is-phone-studio .is-phone-prompt .prompt-advanced > summary {
  min-height: var(--phone-touch);
  padding: 11px 14px;
  font-size: var(--phone-control);
}

body.is-phone-studio .prompt-fold-field { margin: var(--phone-gap) 0 0; }

body.is-phone-studio .prompt-fold-label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-soft);
  font-size: var(--phone-label);
}

body.is-phone-studio .prompt-generate-full {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  border-radius: var(--phone-radius);
  font-size: var(--phone-control);
}

body.is-phone-studio .is-phone-prompt .prompt-status,
body.is-phone-studio .is-phone-prompt .prompt-result { margin-top: var(--phone-gap); }

/* --- One material across every other surface ---------------------------------------
 *
 * Nothing below changes what a screen offers. It gives the surfaces a person meets on the
 * rest of the phone the same corners, the same line and the same one step of depth the
 * capture box, the library header and the Prompt Studio panel now use, so the studio reads
 * as one product rather than as five screens that were each finished on a different day.
 */
body.is-phone-studio .idea-card,
body.is-phone-studio .empty-state,
body.is-phone-studio .clarify-card,
body.is-phone-studio .audit-card,
body.is-phone-studio .inbox-card,
body.is-phone-studio .receipt-card,
body.is-phone-studio .names-entry-bar,
body.is-phone-studio .reading-copy-note {
  border-radius: var(--phone-radius);
}

body.is-phone-studio .section-heading h2,
body.is-phone-studio .detail-section-heading h3 { overflow-wrap: anywhere; }

body.is-phone-studio .confirm-dialog {
  width: calc(100% - 20px);
  max-height: min(86vh, calc(100% - 40px));
  padding: 20px 18px 18px;
  border-radius: var(--phone-radius-lg);
  box-shadow: var(--phone-shadow-lg);
  /* Inline display:grid panels otherwise get an implicit auto track as wide as an
     unbreakable email address. minmax(0,1fr) keeps every control inside the phone. */
  grid-template-columns: minmax(0, 1fr);
  overflow-wrap: break-word;
}

body.is-phone-studio .confirm-dialog > * { min-width: 0; max-width: 100%; }
body.is-phone-studio .confirm-dialog :is(h2, h3) { overflow-wrap: anywhere; }
body.is-phone-studio .confirm-dialog :is(p, li, label, strong, span) { overflow-wrap: break-word; }
/* Let an address move to a fresh line as one unit before breaking it. If the address is
   wider than the whole panel, it can then wrap without widening the grid. */
body.is-phone-studio .confirm-dialog .mobile-account-email {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  vertical-align: top;
}
body.is-phone-studio .confirm-dialog :is(input, select, textarea) { min-width: 0; max-width: 100%; }
body.is-phone-studio .confirm-dialog .ai-settings-actions { flex-wrap: wrap; min-width: 0; }
body.is-phone-studio .confirm-dialog .ai-settings-actions > * { max-width: 100%; }
body.is-phone-studio .confirm-dialog :is(.primary-button, .secondary-button, .danger-button, .text-button, .dialog-search) {
  min-height: var(--phone-touch);
}

body.is-phone-studio .confirm-actions .primary-button,
body.is-phone-studio .confirm-actions .secondary-button,
body.is-phone-studio .confirm-actions .ghost-button,
body.is-phone-studio .confirm-actions .text-button { min-height: var(--phone-touch); }

/* A destructive choice is not shouted at rest. It is the calm one on the row until the
   moment it is confirmed, which is where the studio spells out what it would do. */
body.is-phone-studio .confirm-actions .danger-button {
  min-height: var(--phone-touch);
  box-shadow: none;
}

body.is-phone-studio .toast {
  border-radius: var(--phone-radius);
  box-shadow: var(--phone-shadow-lg);
}

body.is-phone-studio .toast-undo { min-height: var(--phone-touch); padding: 0 16px; }

/* A panel's own icon buttons are paper too. The shared rule paints them with the dark
   theme's slab, which on the phone's light paper is a grey block floating in the corner
   of Inky and of the idea. Corrected here only: the desktop keeps exactly what it had. */
body.is-phone-studio .panel-topbar .icon-button,
body.is-phone-studio .more-head .icon-button {
  min-width: var(--phone-touch);
  min-height: var(--phone-touch);
  border: 1px solid var(--phone-line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
}

/* Inky's composer and its suggestions sit on the same paper as everything else. */
body.is-phone-studio .assistant-form {
  border-radius: var(--phone-radius-lg);
  background: var(--phone-surface);
}

body.is-phone-studio .assistant-suggestions button { min-height: var(--phone-touch); border-radius: 999px; }

/* --- Fingertips, focus, and motion ---------------------------------------------- */

body.is-phone-studio :is(button, [role="button"], select, summary):focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

body.is-phone-studio :is(input, textarea, select) { font-size: max(1rem, 1em); }

body.is-phone-studio :is(.phone-filter, .phone-mode, .more-row, .phone-review-cue, .nav-button, .phone-back, .phone-more, .phone-sparkle) {
  min-height: 44px;
}

/* The narrowest supported hand. Five labelled columns still fit 320px: the label shrinks
   a point before anything is allowed to clip. */
@media (max-width: 359px) {
  /* The narrowest hand cannot hold three actions on one line without one of them touching
     the next. The lock takes the row above - it is a state, and it reads perfectly well
     as one - and Options and Capture keep the row a thumb actually aims at. */
  /* Three segments, a primary action and an overflow door do not fit one 320px line, and
     a segmented control that has to scroll to show which mode is on is worse than one on
     its own row. So the display chooser takes the line above the actions here. */
  body.is-phone-studio .phone-lib-controls { flex-wrap: wrap; }
  body.is-phone-studio .phone-lib-controls .phone-mode-row { flex: 0 0 auto; overflow-x: visible; }
  body.is-phone-studio .phone-lib-controls .phone-page-actions { flex: 1 1 auto; justify-content: flex-end; }
  /* The break after the lock is a flex item of its own: a full-width, zero-height line that
     nothing can be laid over. Options then starts the thumb row at its left edge. */
  body.is-phone-studio .capture-actions::before { content: ""; order: 1; flex: 1 0 100%; height: 0; }
  body.is-phone-studio .capture-actions .capture-more-toggle { margin-inline: 0 auto; }
  body.is-phone-studio .page { padding-inline: 12px; }
  body.is-phone-studio .nav-label { font-size: 0.625rem; }
  body.is-phone-studio .phone-topbar-name h1 { font-size: 1.4375rem; }
  body.is-phone-studio .phone-continue-rail { margin-inline: -12px; padding-inline: 12px; scroll-padding-inline: 12px; }
  body.is-phone-studio .phone-filter,
  body.is-phone-studio .phone-mode { padding: 0 11px; }
}

/* Landscape on a phone is short, not wide: the bar stays on the bottom edge and gives
   back a little height rather than becoming a rail no thumb can reach. */
@media (orientation: landscape) and (max-height: 460px) {
  /* Held sideways there is width and no height at all, so the library's entrance folds
     onto two rows instead of four: the search beside the display line, the filters
     underneath. Nothing is dropped — the same header, read across instead of down. */
  body.is-phone-studio .phone-lib-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--phone-gap-sm);
  }
  body.is-phone-studio .phone-lib-bar .phone-search { grid-column: 1; grid-row: 1; }
  body.is-phone-studio .phone-lib-bar .phone-lib-controls { grid-column: 2; grid-row: 1; }
  body.is-phone-studio .phone-lib-bar .phone-filter-row { grid-column: 1 / -1; grid-row: 2; }
  body.is-phone-studio .phone-lib-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: var(--phone-gap-sm);
  }
  body.is-phone-studio .phone-lib-head .phone-kicker { display: none; }
  body.is-phone-studio .phone-lib-head h1 { font-size: var(--phone-display); }
  body.is-phone-studio .phone-lib-count { margin: 0; }
  body.is-phone-studio .phone-topbar.is-chrome { min-height: 34px; margin-bottom: 0; }
  body.is-phone-studio .phone-search input { height: 44px; }
  body.is-phone-studio .phone-home .capture-input { min-height: 76px; }
  body.is-phone-studio .detail-tabs { margin-top: var(--phone-gap); }
  body.is-phone-studio .sidebar { --phone-nav: calc(34px + 1.25rem); }
  body.is-phone-studio .nav-button { gap: 1px; }
  body.is-phone-studio .nav-button svg { width: 18px; height: 18px; }
  body.is-phone-studio .nav-label { font-size: 0.625rem; }
  body.is-phone-studio .page { --phone-nav: calc(34px + 1.25rem); padding-bottom: calc(var(--phone-nav-height, calc(var(--phone-nav) + env(safe-area-inset-bottom, 0px) + var(--phone-nav-float))) + 26px); }
}

/* The phone app shell (Mobile App Shell Hardening MAS-1) ============================
 *
 * The layer above dressed the phone. This one gives it a SHELL - and it is the last word
 * in the sheet for the same reason every layer here is: it says only what changes, and it
 * says it under `body.is-phone-studio`, so a desktop window at any width, in any
 * orientation, on any pointer, still cannot see a rule of it.
 *
 * WHAT WAS WRONG, MEASURED RATHER THAN GUESSED AT.
 *
 * The phone had no viewport of its own. The base body rule declares overflow hidden, and
 * that PROPAGATES to the viewport - the root element declares no overflow, so the body's
 * is the one that counts. The only thing that ever gave scrolling back was the
 * max-width 620px media query re-declaring body overflow auto - a WIDTH, not a phone.
 * Held sideways, every phone is wider than 620px. So in landscape the document could not
 * scroll at all, while the phone layer had also taken away the studio's own scrollport by
 * giving .main-content an automatic height: the library had 440px of itself below the
 * fold and Review had 3,314px, and a real finger moved none of it. Held upright it worked,
 * but only by accident of width: the DOCUMENT was the scroller, the studio's own
 * scrollport was not a scrollport at all, and which surface a swipe reached was decided
 * by a media query.
 *
 * WHAT IT IS NOW. One frame, one scrollport, and nothing else that scrolls:
 *
 *   body            the frame. Exactly as tall as the app is, and it never scrolls.
 *   .app-shell      fills the frame, clips sideways. The bar is fixed and escapes it.
 *   .main-content   THE scrollport. Vertical only, momentum kept, chaining contained.
 *
 * `--app-height` is written by public/app.js from the visual viewport, so the frame
 * follows the keyboard on a browser that does not resize the layout for it - and
 * deliberately does NOT follow a pinch, which shrinks the visual viewport too and must
 * never shrink the app under the fingers doing the zooming. Where the property is never
 * written, `100dvh` is the answer, and `100vh` where even that is unknown.
 */

body.is-phone-studio {
  /* The frame. `height`, not `min-height`: a frame that may grow is a second scroller.
     And CLAMPED, not simply taken: --app-height is written by JavaScript, so it can be
     briefly stale - a rotation that arrives while the page is throttled, a resize that
     never fires. A stale value that is too SMALL costs a strip of unused screen for one
     frame; a stale value that is too LARGE would put the end of the library below a
     viewport that cannot scroll, which is the exact failure this layer exists to end. So
     the measured height may only ever make the frame shorter than the viewport. */
  height: min(var(--app-height, 100vh), 100vh);
  min-height: 0;
  overflow: hidden;
  /* Nothing behind the app to rubber-band into. */
  overscroll-behavior: none;
  /* The floor every field on this phone is held to, so iOS never zooms on focus. It is a
     token because it is a rule, not a size somebody chose: below 16px, focusing a field
     magnifies the whole layout mid-thought. */
  --phone-field: 1rem;
}

@supports (height: 100dvh) {
  body.is-phone-studio { height: min(var(--app-height, 100dvh), 100dvh); }
}

body.is-phone-studio .app-shell {
  height: 100%;
  min-height: 0;
  /* The shell boundary, as defense in depth. Every width on this layer is already
     prevented from exceeding it - that is what the min-width:0 tracks and the
     break-anywhere prose above are for, and the measured sideways overflow of every
     screen at every supported width is zero. This clips the NEXT one instead of letting
     it push the whole app sideways, and it clips nothing that is correct. The fixed bar
     is not affected: an ancestor's overflow does not clip a fixed descendant. */
  overflow: hidden;
}

body.is-phone-studio .main-content {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  /* The page's own bottom padding already stands clear of the bar; a second allowance
     here would end every view in a screenful of nothing. */
  padding-bottom: 0;
  /* A swipe that reaches the end of the library stops there instead of dragging whatever
     is behind it, and iOS keeps its momentum. */
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  /* Anything scrolled into view - a focused field, an anchor - stops above the bar. */
  scroll-padding-bottom: calc(var(--phone-nav-height, calc(var(--phone-nav) + env(safe-area-inset-bottom, 0px) + var(--phone-nav-float))) + 28px);
}

/* While a sheet, a panel or a confirmation owns the screen, the one scrollport is frozen.
   Nothing is moved to do it and nothing is measured: the element keeps its own scrollTop,
   so what comes back afterwards is exactly what was there - no width change, no jump. */
body.is-phone-studio.has-overlay .main-content { overflow: hidden; }

/* Every surface raised over the app contains its own overscroll, so dragging past the end
   of a sheet does not start dragging the library underneath it. */
body.is-phone-studio :is(.detail-panel, .assistant-panel, .settings-modal, .combine-modal,
  .names-modal, .confirm-dialog, .more-sheet) {
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* --- The notch, in both orientations ---------------------------------------------
 *
 * Held upright a phone reserves the bottom, and the bar already steps over it. Held
 * sideways it reserves a SIDE - 44px of it on a notched iPhone - and nothing here had ever
 * been told. The page and the two full-bleed panels give that width back; where there is
 * no inset (every phone in portrait, every phone without a notch) `max()` resolves to the
 * padding these surfaces already had, so nothing moves.
 */
body.is-phone-studio .page {
  padding-right: max(var(--phone-page-x), env(safe-area-inset-right, 0px));
  padding-left: max(var(--phone-page-x), env(safe-area-inset-left, 0px));
}

/* One token, not two rules: the inner padding and the sticky title's negative margin are
   written in terms of it, so widening the gutter for a notch keeps the title bleeding to
   exactly the panel's edge instead of stopping short of it. */
body.is-phone-studio .detail-inner,
body.is-phone-studio .assistant-inner {
  --phone-pad-x: max(15px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}

body.is-phone-studio .detail-sticky-title {
  padding-right: max(8px, env(safe-area-inset-right, 0px));
  padding-left: max(8px, env(safe-area-inset-left, 0px));
}

/* --- The touch grammar -------------------------------------------------------------
 *
 * The browser is better at deciding whether a finger meant to scroll, to pinch or to tap
 * than anything written here could be, so this layer's whole job is to stop taking those
 * decisions away from it.
 *
 * `manipulation` is exactly "pan, pinch, no double-tap zoom": a swipe that begins on a
 * card, a chip, a tab or a row scrolls, a two-finger pinch still magnifies, and two quick
 * taps on a control stay two taps instead of magnifying the page. It REPLACES the `pan-y`
 * the shared layer puts on cards for the desktop's drag engine - `pan-y` excludes
 * `pinch-zoom`, so on the phone that rule was quietly disabling deliberate zoom over most
 * of the library, and the drag engine it was protecting does not exist here: no phone
 * runtime carries `dnd.apply`, so no press on this device ever begins a drag.
 */
body.is-phone-studio :is(button, summary, label, a[href],
  .library-card-wrap, .library-row-wrap, .thought-card, .inbox-card,
  .phone-filter-row, .phone-mode-row, .detail-tabs, .filter-strip):not(.orrery) {
  touch-action: manipulation;
}

/* The one genuinely custom gesture surface in the studio, and the one exception the rule
   above allows. `touch-action: none` is what the desktop gives it, and it swallowed every
   vertical swipe that began anywhere on a 240px disc in the middle of Connect.
   `pan-y pinch-zoom` hands two things back to the browser and keeps only the rotational
   one for Inky:

     - PAN-Y, so an upward drag scrolls the page and the instrument is released (the engine
       already ends its drag on `pointercancel`);
     - PINCH-ZOOM, because `pan-y` ALONE excludes it — the same trap the shared layer's
       card rule fell into above — and a 240px disc that quietly refuses a two-finger
       magnify is a 240px hole in somebody's accessibility zoom.

   What is deliberately NOT named is `pan-x`: the horizontal direction stays with the
   pointer engine, so a sideways or circular drag turns the instrument exactly as before.
   The direction lock is the browser's, which is the only one that can be trusted to
   decide before the first frame is painted. */
body.is-phone-studio .orrery { touch-action: pan-y pinch-zoom; }

/* --- Fields a phone can focus without magnifying the page --------------------------
 *
 * iOS zooms the layout when a field under 16px takes focus, and the studio's floor for
 * that lived in `@media (hover: none), (pointer: coarse)` at selector `input, textarea,
 * select` - one tag's worth of specificity, which any class-level rule beats. One did:
 * the idea's status control computed to 12px and focusing it magnified the whole panel.
 *
 * The phone layer above already restates that floor on the phone's own scope, where it is
 * not a guess about a pointer. It is not restated a third time here - two rules saying one
 * thing is how they come to disagree - and what IS corrected is the single rule in the
 * whole sheet specific enough to beat it, now written in terms of the same number.
 */
body.is-phone-studio .detail-chip-row .status-select { font-size: var(--phone-field); }

/* --- A sideways row says when there is more of it ---------------------------------
 *
 * A fade at an edge is a promise that something is behind it, so it is drawn only where
 * something is. public/app-viewport.js decides that from the row's own scroll numbers and
 * app.js sets the two classes; neither edge is ever drawn on a row that fits.
 */
body.is-phone-studio :is(.phone-filter-row, .detail-tabs, .combine-chips) {
  --edge-fade: 24px;
  -webkit-mask-image: var(--edge-mask, none);
  mask-image: var(--edge-mask, none);
}

body.is-phone-studio :is(.phone-filter-row, .detail-tabs, .combine-chips).is-edge-end:not(.is-edge-start) {
  --edge-mask: linear-gradient(to right, #000 calc(100% - var(--edge-fade)), transparent);
}

body.is-phone-studio :is(.phone-filter-row, .detail-tabs, .combine-chips).is-edge-start:not(.is-edge-end) {
  --edge-mask: linear-gradient(to right, transparent, #000 var(--edge-fade));
}

body.is-phone-studio :is(.phone-filter-row, .detail-tabs, .combine-chips).is-edge-start.is-edge-end {
  --edge-mask: linear-gradient(to right, transparent, #000 var(--edge-fade),
    #000 calc(100% - var(--edge-fade)), transparent);
}

/* --- The press ---------------------------------------------------------------------
 *
 * A touch screen has no hover, so the only feedback a control can give is what it does
 * the instant it is pressed. The studio's answer is the smallest one that reads: the
 * surface settles a hair under the finger, in under a tenth of a second, and comes back.
 * The browser's own grey flash is turned off because this replaces it, not because
 * nothing should happen.
 */
body.is-phone-studio :is(button, .more-row, .idea-card, .library-row) {
  -webkit-tap-highlight-color: transparent;
}

body.is-phone-studio :is(.more-row, .idea-card, .library-row, .phone-review-cue,
  .phone-filter, .phone-mode, .tab-button, .primary-button, .secondary-button,
  .icon-button, .phone-back, .phone-more, .phone-sparkle):active {
  transform: scale(0.985);
}


/* Motion is ADDED for somebody who has not asked for less, never drawn and taken back:
   the press settles instantly either way, and only the return to rest is eased. */
@media (prefers-reduced-motion: no-preference) {
  body.is-phone-studio :is(.more-row, .idea-card, .library-row, .phone-review-cue,
    .phone-filter, .phone-mode, .tab-button, .primary-button, .secondary-button,
    .icon-button, .phone-back, .phone-more, .phone-sparkle) {
    transition: transform 140ms cubic-bezier(.2,.7,.2,1);
  }
  body.is-phone-studio .more-sheet { animation: phone-sheet-in 180ms cubic-bezier(.2,.7,.2,1); }
}

/* The phone product pass (Mobile Product Pass) =========================================
 *
 * The last layer: the first five minutes, Review as a queue, readable contrast, fingertip
 * targets, a composer that stays put, and cards a person can tell apart. Every rule is under
 * `body.is-phone-studio` or `body.is-phone-gate`, so the desktop cannot see any of it.
 */

/* --- The gate: no navigation bar until there is a studio to navigate ------------------ */

/* The phone's page starts with this class (scripts/build-mobile.mjs) and loses it the moment
   the studio opens. While it is set the sidebar is not drawn at all: six icons that do
   nothing are worse than none, and a sign-in screen is not a place to navigate from. */
body.is-phone-gate .sidebar { display: none; }
body.is-phone-gate .app-shell { display: block; }
body.is-phone-gate .main-content { min-height: 100vh; }

body.is-phone-gate .gate-values { display: grid; gap: 10px; margin: 0 0 18px; padding-left: 18px; }
body.is-phone-gate .gate-values li { line-height: 1.5; }
body.is-phone-gate .gate-create > summary,
body.is-phone-gate .gate-import > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 500; }
body.is-phone-gate .gate-fine-print { color: var(--muted); font-size: 0.8125rem; }
body.is-phone-gate .gate-empty h2 { font-size: 1.5rem; line-height: 1.2; }
body.is-phone-gate .gate-import { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
body.is-phone-gate .gate-import p { color: var(--text-soft); }
/* A summary laid out with `display: flex` loses the triangle the browser would have drawn,
   and this one carried no replacement — so on the first-run screen "Already use Idea Studio
   on a computer?" read as a heading with nothing under it, and the answer stayed folded away
   because nothing said it could be opened. It gets the accent it deserves and a chevron that
   turns, which is the same grammar every other fold in the studio uses. */
body.is-phone-gate .gate-import > summary {
  justify-content: space-between;
  gap: 12px;
  color: var(--brand);
}
body.is-phone-gate .gate-import > summary::-webkit-details-marker { display: none; }
body.is-phone-gate .gate-import > summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
body.is-phone-gate .gate-import[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
/* The turn is ADDED for whoever wants motion, never drawn and then taken back. */
@media (prefers-reduced-motion: no-preference) {
  body.is-phone-gate .gate-import > summary::after { transition: transform 160ms ease; }
}

/* --- The gate, dressed (Sign-in pass) ------------------------------------------------
 *
 * One frame for every gate screen: the studio's blue fills the page, carrying the soft
 * shapes its idea cards are drawn in and a warm gold glow; the wordmark sits at the top;
 * a screen's intro (sign-in's "what the app does") sits on the blue; and the sheet rises
 * from below on a wave and holds the form. The sheet is the cream the studio is made of,
 * so the form reads as the studio itself beginning, not as a box on a page. */
body.is-phone-gate .main-content { padding: 0; }
body.is-phone-gate #mobile-gate {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* The studio's own blue, top to bottom: --violet-bright, --violet, and the deep end of
     its primary button. Nothing here is a colour the app does not already wear. */
  background: linear-gradient(165deg, #3559d4 0%, #294bc1 42%, #1f3fa8 100%);
  color: #fff;
}

body.is-phone-gate .gate-hero {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  /* The same column the sheet uses, so on a tablet or a desktop window the words and the
     form line up in one phone-wide column while the blue and its shapes fill the page. */
  padding: calc(env(safe-area-inset-top, 0px) + 26px) max(26px, calc(50% - 254px)) 28px;
}
body.is-phone-gate .gate-hero .wordmark { flex-direction: column; align-items: flex-start; gap: 3px; }
body.is-phone-gate .gate-hero .wordmark h1 { color: #fff; font-size: 1.625rem; }
body.is-phone-gate .gate-hero .wordmark span { display: block; color: rgba(255, 255, 255, 0.72); font-size: 0.6875rem; letter-spacing: 0.16em; }

/* The intro sits on the blue: a serif line, and the three promises with a gold point each. */
body.is-phone-gate .gate-intro { position: relative; z-index: 1; padding: 6px max(26px, calc(50% - 254px)) 8px; }
body.is-phone-gate .gate-intro h2 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  overflow-wrap: break-word;
}
body.is-phone-gate .gate-intro .gate-values { margin: 0; padding: 0; list-style: none; gap: 9px; }
body.is-phone-gate .gate-intro .gate-values li { position: relative; padding-left: 16px; color: rgba(255, 255, 255, 0.86); font-size: 0.875rem; line-height: 1.45; }
body.is-phone-gate .gate-intro .gate-values li::before { content: ""; position: absolute; top: 0.5em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

body.is-phone-gate #mobile-gate > section:not(.gate-intro) {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  display: grid;
  align-content: start;
  gap: 14px;
  width: 100%;
  margin: -1px 0 0;
  padding: 4px max(26px, calc(50% - 254px)) calc(env(safe-area-inset-bottom, 0px) + 30px);
  border: 0;
  border-radius: 0;
  background: var(--panel-solid);
  color: var(--text);
}
body.is-phone-gate #mobile-gate > section:not(.gate-intro) h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.2; }
body.is-phone-gate .gate-kicker { margin: 0; font-family: var(--serif); font-size: 1.375rem; line-height: 1.2; color: var(--text); }

/* Fields: taller, rounder, a glyph inside the box, and 1rem so iOS never zooms the page. */
body.is-phone-gate #mobile-gate form { display: grid; gap: 14px; }
body.is-phone-gate .settings-field { gap: 6px; }
body.is-phone-gate .settings-field > span { font-size: 0.75rem; font-weight: 600; color: var(--text-soft); }
body.is-phone-gate .settings-field input { height: 50px; padding: 0 14px; border-radius: 14px; border-color: rgba(58, 52, 45, 0.14); font-size: 1rem; }
body.is-phone-gate .gate-input { position: relative; display: block; }
body.is-phone-gate .gate-input svg { position: absolute; top: 50%; left: 15px; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
body.is-phone-gate .gate-input input { padding-left: 44px; }

body.is-phone-gate .gate-forgot { display: flex; justify-content: flex-end; margin-top: -6px; }
body.is-phone-gate .gate-forgot .text-button { min-height: 40px; padding: 8px 2px; color: var(--violet); font-size: 0.875rem; font-weight: 500; }
body.is-phone-gate .gate-actions { display: block; padding: 0; }
body.is-phone-gate .gate-actions .primary-button { width: 100%; min-height: 50px; border-radius: 14px; font-size: 1rem; font-weight: 600; }
body.is-phone-gate .gate-or { display: flex; align-items: center; gap: 12px; margin: 2px 0; color: var(--muted); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; }
body.is-phone-gate .gate-or::before,
body.is-phone-gate .gate-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Creating an account is the second door, drawn as one: an outlined button that opens
   into its form. Its floor stays the fingertip declared above. */
body.is-phone-gate .gate-create > summary {
  justify-content: center;
  height: 50px;
  padding: 0 14px;
  border: 1.5px solid rgba(41, 75, 193, 0.34);
  border-radius: 14px;
  color: var(--violet);
  font-size: 0.9375rem;
  font-weight: 600;
  list-style: none;
}
body.is-phone-gate .gate-create > summary::-webkit-details-marker { display: none; }
body.is-phone-gate .gate-create[open] > summary { margin-bottom: 14px; }
body.is-phone-gate .gate-create form p { margin: 0; color: var(--text-soft); font-size: 0.8125rem; line-height: 1.5; }
body.is-phone-gate .gate-fine-print { margin: 4px 0 0; line-height: 1.5; text-align: center; }
body.is-phone-gate #mobile-signin-note { margin: 0; color: var(--text-soft); }

/* --- Readable, at 4.5:1 -------------------------------------------------------------
 *
 * The light theme's two greys measured 3.7:1 and 2.4:1 against the paper — below the line
 * for the 11–13px text they were used on. On the phone's own scope they are deepened until
 * every small word clears 4.5:1, and nothing else about the palette moves: the accent, the
 * washes and the lines are exactly as they were, so the interface stays as calm as it was.
 */
body.is-phone-studio {
  --muted: #64615b;
  --muted-2: #6f6c66;
  --text-soft: #2f2f34;
}

body.is-phone-studio .lab-muted { color: var(--muted); font-size: 0.75rem; }
body.is-phone-studio .card-age,
body.is-phone-studio .row-meta,
body.is-phone-studio .thought-meta time,
body.is-phone-studio .section-kicker,
body.is-phone-studio .combine-merged-flag { color: var(--muted); }
body.is-phone-studio .card-age { font-size: 0.6875rem; }
body.is-phone-studio .visual-category { font-size: 0.6875rem; color: #2b2d2b; }
body.is-phone-studio .category-chip { color: #35438a; font-size: 0.75rem; }
body.is-phone-studio .privacy-badge { color: #7a4a20; }
/* The count on the review cue: dark ink on the brass, rather than white on a mid tone. */
body.is-phone-studio .phone-review-count { background: rgba(184, 119, 66, 0.18); color: #6b3d13; font-weight: 600; }

/* --- Fingertips on every list control ---------------------------------------------- */

/* The list mode's pin and combine buttons were 26px squares: the glyph stays small, the
   button under the thumb does not. */
body.is-phone-studio .library-row-wrap { --control-size: 44px; --row-inset: 2px; }
body.is-phone-studio .library-row-wrap .idea-pin,
body.is-phone-studio .library-row-wrap .combine-pick,
body.is-phone-studio .library-card-wrap .idea-pin,
body.is-phone-studio .library-card-wrap .combine-pick {
  width: 44px;
  height: 44px;
  border-color: transparent;
  background: transparent;
  opacity: 1;
  /* The ＋ and ✓ are icons standing for an aria-labelled action, sized in px like the SVG
     icons beside them, so a large text size does not push the glyph past its 44px button. */
  font-size: 15px;
}
body.is-phone-studio .library-row-wrap .combine-pick { top: calc(var(--row-inset) + var(--control-size) + 2px); }
body.is-phone-studio .library-row { padding-right: 52px; }
body.is-phone-studio .idea-pin:not(.is-pinned) { color: var(--muted-2); }
body.is-phone-studio .link-button { min-height: 32px; }
body.is-phone-studio .pickup-drop,
body.is-phone-studio .chip-remove,
body.is-phone-studio .thread-picker-delete { min-width: 44px; min-height: 44px; }
/* The save row waited for a hover to become readable; a phone has none. Always legible, with
   the readable grey and the fingertip height. */
body.is-phone-studio .message-save-row { flex-wrap: wrap; gap: 6px; opacity: 1; }
body.is-phone-studio .message-save-row button { min-height: 40px; padding: 6px 12px; border-color: var(--phone-line); color: var(--muted); font-size: var(--phone-caption); }

/* --- Home: the first-run card --------------------------------------------------------- */

body.is-phone-studio .first-run {
  margin: 0 0 var(--phone-gap-lg);
  padding: 16px 16px 14px;
  border: 1px solid var(--phone-accent-line);
  border-radius: var(--phone-radius-lg);
  background: var(--phone-accent-wash);
}
body.is-phone-studio .first-run h2 {
  margin: 4px 0 8px;
  font-family: var(--serif);
  font-size: var(--phone-display-sm);
  font-weight: 400;
  line-height: 1.2;
}
body.is-phone-studio .first-run p { margin: 0 0 12px; color: var(--text-soft); line-height: 1.5; }
body.is-phone-studio .first-run-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body.is-phone-studio .first-run-actions .secondary-button { min-height: var(--phone-touch); }
body.is-phone-studio .first-run-secondary { display: flex; justify-content: flex-end; margin-top: 4px; }
body.is-phone-studio .first-run-secondary .text-button { min-height: 40px; color: var(--muted); }

/* The quote is a thing to look down at, not a second heading: quieter than the card above it. */
body.is-phone-studio .phone-home .home-quote-body p { font-size: 0.9375rem; color: var(--text-soft); }

/* --- Review as a queue --------------------------------------------------------------- */

body.is-phone-studio .review-segments {
  display: inline-flex;
  gap: 0;
  margin: 0 0 var(--phone-gap);
  padding: 3px;
  border: 1px solid var(--phone-line);
  border-radius: 999px;
  background: var(--phone-surface);
}
body.is-phone-studio .review-segments .phone-mode { border-color: transparent; background: transparent; font-size: var(--phone-label); }
body.is-phone-studio .review-segments .phone-mode.is-active { background: var(--phone-accent-wash); color: var(--phone-accent); font-weight: 500; }

body.is-phone-studio .review-progress {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: var(--phone-caption);
}
body.is-phone-studio .review-meter { height: 4px; overflow: hidden; border-radius: 999px; background: rgba(41, 75, 193, 0.12); }
body.is-phone-studio .review-meter i { display: block; height: 100%; border-radius: 999px; background: var(--phone-accent); }

body.is-phone-studio .review-decision {
  padding: 18px 16px 14px;
  border: 1px solid var(--phone-line);
  border-radius: var(--phone-radius-lg);
  background: var(--phone-surface);
  box-shadow: var(--phone-shadow);
}
body.is-phone-studio .review-decision h2 {
  margin: 2px 0 12px;
  font-family: var(--serif);
  font-size: var(--phone-display);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
body.is-phone-studio .review-decision h2:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; border-radius: 6px; }
body.is-phone-studio .review-subject {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 3px solid var(--phone-accent-line);
  border-radius: 6px;
  background: var(--phone-surface-soft);
  color: var(--text-soft);
  font-size: 0.9375rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
body.is-phone-studio .review-subject .thought-chip { margin-right: 6px; }
body.is-phone-studio .review-accept {
  display: block;
  width: 100%;
  min-height: 50px;
  border-radius: var(--phone-radius);
  font-size: var(--phone-control);
  text-align: center;
}
body.is-phone-studio .review-note { margin: 8px 0 0; color: var(--muted); font-size: var(--phone-caption); }
body.is-phone-studio .review-change { margin-top: 10px; }
body.is-phone-studio .review-change > summary,
body.is-phone-studio .review-why > summary {
  display: flex;
  align-items: center;
  min-height: var(--phone-touch);
  color: var(--phone-accent);
  font-size: var(--phone-label);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}
body.is-phone-studio .review-change > summary::before,
body.is-phone-studio .review-why > summary::before { content: "▸"; margin-right: 6px; font-size: 0.6875rem; }
body.is-phone-studio .review-change[open] > summary::before,
body.is-phone-studio .review-why[open] > summary::before { content: "▾"; }
body.is-phone-studio .review-choices { display: grid; gap: 8px; }
body.is-phone-studio .review-choices.is-open { margin-top: 4px; }
body.is-phone-studio .review-alt {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: var(--phone-touch);
  padding: 10px 12px;
  border: 1px solid var(--phone-line);
  border-radius: var(--phone-radius-sm);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
body.is-phone-studio .review-alt strong { font-weight: 500; overflow-wrap: anywhere; }
body.is-phone-studio .review-alt small { color: var(--muted); font-size: var(--phone-caption); line-height: 1.4; }
body.is-phone-studio .review-target { display: grid; gap: 6px; }
body.is-phone-studio .review-target span { color: var(--muted); font-size: var(--phone-caption); }
body.is-phone-studio .review-target select { min-height: var(--phone-touch); width: 100%; }
body.is-phone-studio .review-secondary { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
body.is-phone-studio .review-secondary .text-button { min-height: var(--phone-touch); color: var(--muted); }
body.is-phone-studio .review-why { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--phone-line); }
body.is-phone-studio .review-why p { margin: 6px 0; color: var(--text-soft); font-size: 0.875rem; line-height: 1.5; }
body.is-phone-studio .review-why .clarify-evidence { margin: 6px 0; }
body.is-phone-studio .review-up-next { margin: 14px 2px 0; color: var(--muted); }
body.is-phone-studio .review-up-next ul { margin: 6px 0 0; padding-left: 18px; font-size: var(--phone-label); line-height: 1.5; }
body.is-phone-studio .review-up-next li { overflow-wrap: anywhere; }
body.is-phone-studio .review-complete { text-align: center; }
body.is-phone-studio .review-complete .empty-star { margin: 0 auto 8px; }
body.is-phone-studio .review-complete .first-run-actions { justify-content: center; margin-top: 12px; }
body.is-phone-studio .review-later-note,
body.is-phone-studio .review-footnote { margin: 14px 2px 0; }
body.is-phone-studio .review-deferred { margin-top: 12px; }
body.is-phone-studio .review-deferred > summary { min-height: var(--phone-touch); display: flex; align-items: center; color: var(--muted); cursor: pointer; }

/* --- The idea: readable field labels, a plain privacy chip, and a quieter Develop note --- */

/* The next-move form's labels were 9px captions; on a phone a label a person reads to know
   what a field is for is body-small, and in the readable grey. */
body.is-phone-studio .next-move-form label > span,
body.is-phone-studio .dna-field > span,
body.is-phone-studio .dialog-field > span { font-size: var(--phone-caption); color: var(--muted); letter-spacing: 0.02em; }

body.is-phone-studio .privacy-fact { cursor: pointer; }
body.is-phone-studio .develop-analysis-note { margin-top: var(--phone-gap-lg); }
body.is-phone-studio .develop-analysis-note .analysis-hero { padding: 12px 14px; border-radius: var(--phone-radius); }
body.is-phone-studio .develop-analysis-note .analysis-hero h3 { font-size: 1rem; }
body.is-phone-studio .develop-analysis-note .analysis-hero p { font-size: 0.8125rem; }
body.is-phone-studio .detail-footnote { margin-top: 18px; }

/* --- The Prompt Studio: what it reads, said first ------------------------------------- */

body.is-phone-studio .prompt-context-line { margin: 0 0 8px; color: var(--text-soft); font-size: 0.875rem; line-height: 1.5; }
body.is-phone-studio .prompt-context-fold > summary small { margin-left: auto; }
/* The three depths share the pill equally; a segment is never narrower than its own word,
   so at a large text size the pill holds two segments and then the third on a second line
   rather than breaking "Standard" in the middle (corrective pass 3). */
body.is-phone-studio .prompt-depth-row { flex-wrap: wrap; gap: 0; padding: 3px; border: 1px solid var(--phone-line); border-radius: 999px; background: var(--phone-surface); }
body.is-phone-studio .prompt-depth-row .phone-mode { flex: 1 1 0; min-width: max-content; white-space: normal; overflow-wrap: normal; justify-content: center; border-color: transparent; background: transparent; font-size: var(--phone-label); }
body.is-phone-studio .prompt-depth-row .phone-mode.is-active { background: var(--phone-accent-wash); color: var(--phone-accent); font-weight: 500; }

/* --- Inky: the composer stays put, and the save card is one line ----------------------- */

/* The panel is the scroller; the form sticks to its bottom edge, above the home indicator,
   so the last message and the field are on screen together with a keyboard up. */
body.is-phone-studio .assistant-inner { display: flex; flex-direction: column; min-height: 100%; padding-bottom: 0; }
body.is-phone-studio .assistant-messages { flex: 1 1 auto; min-height: 200px; }
body.is-phone-studio .assistant-form {
  position: sticky;
  bottom: 0;
  z-index: var(--layer-sticky);
  margin: 0 calc(-1 * var(--phone-pad-x));
  padding: 10px var(--phone-pad-x) calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--phone-line);
  border-radius: 0;
  background: var(--panel-solid);
}
body.is-phone-studio .assistant-form .capture-submit { min-width: var(--phone-touch); min-height: var(--phone-touch); }
body.is-phone-studio .assistant-suggestions { padding-bottom: 8px; }
body.is-phone-studio .proposal-target { margin: 0 0 6px; font-weight: 500; }
body.is-phone-studio .proposal-line textarea { width: 100%; font-size: var(--phone-field); }
body.is-phone-studio .proposal-note { margin: 6px 0 0; color: var(--muted); font-size: var(--phone-caption); }
body.is-phone-studio .proposal-note .link-button { min-height: 32px; }

/* --- The combine tray, one line high -------------------------------------------------- */

/*
 * A grid of two columns: the chips, then the actions. The chips scroll INSIDE their own
 * column; Combine and Clear sit in the second column and are therefore in view at every
 * width the studio supports, however many ideas are picked and however long their names
 * are. The whole bar used to be the scrolling box (corrective pass): with two ordinary
 * titles picked on a 320px screen the primary action began at x=333 and Clear at x=456,
 * and nothing on the screen said so.
 */
body.is-phone-studio .combine-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  padding: 5px 6px 5px 8px;
  border-radius: 28px;
  overflow: visible;
}
body.is-phone-studio .combine-bar-label { display: none; }
body.is-phone-studio .combine-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 1px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}
body.is-phone-studio .combine-chips::-webkit-scrollbar { display: none; }
body.is-phone-studio .combine-chip {
  flex: 0 0 auto;
  max-width: min(170px, 100%);
  min-height: var(--phone-touch);
  padding: 0 0 0 10px;
  gap: 5px;
  scroll-snap-align: start;
}
/* The remove control is a fingertip tall and wide; the glyph inside stays small. */
body.is-phone-studio .combine-chip .pickup-drop {
  width: 36px;
  height: var(--phone-touch);
  border-radius: 0 999px 999px 0;
}
body.is-phone-studio .combine-bar .combine-add { display: none; }
body.is-phone-studio .combine-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
}
body.is-phone-studio .combine-bar .primary-button,
body.is-phone-studio .combine-bar .text-button {
  flex: 0 0 auto;
  min-height: var(--phone-touch);
  padding-inline: 10px;
  white-space: nowrap;
}
body.is-phone-studio .combine-bar .text-button { min-width: var(--phone-touch); padding-inline: 6px; }
body.is-phone-studio .combine-dock { padding: 0 4px; }
/* The chip row is never squeezed below a readable name: the first chip shows at least a
   word or two of it on the narrowest phone, and the actions take only what they need. */
body.is-phone-studio .combine-chips { min-width: 120px; }
body.is-phone-studio .combine-chip .combine-chip-index { flex: 0 0 auto; }
body.is-phone-studio .combine-chip .pickup-drop { width: 34px; }
body.is-phone-studio .combine-bar { padding-left: 6px; }

/* --- Cards a person can tell apart ---------------------------------------------------- */

body.is-phone-studio .phone-card-summary {
  display: -webkit-box;
  margin: 0 0 8px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* The category is a name, not a fragment: on a narrow card it wraps to a second line and is
   never cut mid-word. The pill grows with its words; the lock beside it keeps its own width. */
body.is-phone-studio .visual-category { flex: 0 1 auto; max-width: 100%; white-space: normal; line-height: 1.25; max-height: none; overflow: visible; text-overflow: clip; overflow-wrap: normal; word-break: normal; }
/* Two badges that cannot share one line stack, each keeping its whole words: the lock first,
   because "Local" is the fact a person checks before anything else on a card. */
body.is-phone-studio .visual-badges { flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 4px; }
body.is-phone-studio .visual-privacy { flex: 0 0 auto; order: -1; }

/* The narrowest hand: the studio's name stays on one line beside its sync state. The chip
   and the name each give up a point, and neither gives up a word. */
@media (max-width: 359px) {
  body.is-phone-studio .phone-topbar-name h1 { font-size: 1.25rem; }
  body.is-phone-studio .phone-topbar-name span { font-size: 0.71875rem; }
  body.is-phone-studio .phone-sync-slot .mobile-sync-chip { min-height: 28px; padding: 4px 8px; font-size: 0.6875rem; }
  body.is-phone-studio .phone-topbar-actions { gap: 2px; }
}

/* --- Sideways rows: the chosen chip stays in view -------------------------------------- */

body.is-phone-studio :is(.phone-filter-row, .detail-tabs) { scroll-snap-type: x proximity; scroll-padding-inline: 12px; }
body.is-phone-studio :is(.phone-filter, .detail-tabs .tab-button) { scroll-snap-align: start; }

/* Nothing on this layer moves: the progress meter is drawn at its new width, never eased,
   so there is no motion here to take back for somebody who asked for less. */

/* --- A long library, a page at a time ------------------------------------------------ */
body.is-phone-studio .library-more { display: flex; justify-content: center; margin: 14px 0 4px; }
body.is-phone-studio .library-more .secondary-button { min-height: var(--phone-touch); }

/* --- Corrective pass: reaching what scrolls sideways, without scrolling --------------
 *
 * The filter row still scrolls inside its own box (its fade says when more is behind the
 * edge); beside it, OUTSIDE the scroller, sits one native list of the same eleven filters
 * wearing a chip. A keyboard, a screen reader or a thumb that never found the fade reaches
 * every filter through it. The idea's section tabs, five of them, wrap onto a second line
 * on the narrowest phones instead of clipping their last word.
 */
body.is-phone-studio .phone-filter-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
body.is-phone-studio .phone-filter-strip .phone-filter-row { flex: 1 1 auto; min-width: 0; }
body.is-phone-studio .phone-filter-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 12px;
  cursor: pointer;
}
body.is-phone-studio .phone-filter-more > span { pointer-events: none; }
/* The list covers its chip exactly, invisibly, so the tap and the focus ring land where
   the chip is and the accessible control is the real <select>. */
body.is-phone-studio .phone-filter-more select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: var(--phone-field);
  cursor: pointer;
}
body.is-phone-studio .phone-filter-more:focus-within {
  outline: 2px solid var(--phone-accent);
  outline-offset: 2px;
}
@media (max-width: 359px) {
  body.is-phone-studio .detail-tabs { flex-wrap: wrap; row-gap: 6px; }
}

/* The prompt's other four objectives, one fold away; the same radio group inside. */
body.is-phone-studio .prompt-more-objectives {
  margin: var(--phone-gap-sm) 0 0;
  border: 1px solid var(--phone-line);
  border-radius: 14px;
  background: var(--phone-surface);
}
body.is-phone-studio .prompt-more-objectives > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-height: var(--phone-touch);
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
body.is-phone-studio .prompt-more-objectives > summary::-webkit-details-marker { display: none; }
body.is-phone-studio .prompt-more-objectives > summary::after { content: "▾"; margin-left: auto; color: var(--muted); }
body.is-phone-studio .prompt-more-objectives[open] > summary::after { content: "▴"; }
body.is-phone-studio .prompt-more-objectives > summary small { flex: 1 1 100%; color: var(--muted); font-weight: 400; font-size: var(--phone-caption); }
body.is-phone-studio .prompt-more-objectives > .prompt-choice-grid { padding: 0 10px 10px; }

/* Review's progress is words first: read by assistive technology as the card's own
   description, drawn for everyone; only the meter beneath it is decoration. */
body.is-phone-studio .review-progress-label { font-weight: 600; }


/* TEXT SIZE (corrective pass 2) --------------------------------------------------------
 * The phone's type is in rem, so a person's text-size preference scales it. What follows is
 * every row that used to hold its words on one line by force and, at 150% or 200%, pushed
 * its surface wider than the phone: each may now wrap, and grows downward instead. */
body.is-phone-studio .panel-topbar .thread-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
body.is-phone-studio .panel-topbar .thread-actions .text-button { white-space: normal; text-align: right; }
/* Corrective pass 3: the rows that still CLIPPED at 200% rather than growing wider. */
/* Inky's conversation name was held to 56% of the bar and cut with an ellipsis; beside a
   wrapped row of actions at a large text size that left it eleven pixels wide. It takes the
   whole line and wraps. */
body.is-phone-studio .panel-topbar .thread-identity { flex: 1 1 100%; flex-wrap: wrap; max-width: none; }
body.is-phone-studio .panel-topbar .saved-thread { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
/* The idea Inky is bound to, and the capture's context note: names, not decorations — they
   wrap rather than end in an ellipsis. */
body.is-phone-studio .context-strip .context-chip { white-space: normal; height: auto; min-height: 32px; }
body.is-phone-studio .context-strip .context-chip > .chip-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
body.is-phone-studio .capture-context-note { white-space: normal; overflow: visible; text-overflow: clip; }
body.is-phone-studio .card-footer { flex-wrap: wrap; row-gap: 2px; }
/* A native select is as wide as its longest option unless told otherwise; at a large text
   size that is wider than the phone. It takes the field's width and no more. */
body.is-phone-studio .prompt-field > .status-select { width: 100%; min-width: 0; max-width: 100%; }
/* The checklist's add row: the field shrinks to the room beside its button, and at a large
   text size the button drops under it rather than pushing the idea sideways. */
body.is-phone-studio .checklist-add { flex-wrap: wrap; }
body.is-phone-studio .checklist-add input { flex: 1 1 180px; min-width: 0; width: auto; }

/* Home, composed again (Home pass 2) ================================================
 *
 * Herv's brief, from a reference he chose as inspiration rather than as the page: the
 * count of ideas where the reference kept points; the studio's name and its line where it
 * said hello; the quote where it showed the day's numbers; the capture card where it
 * showed the session, with a soft orb of the studio's two colours; a rail of ideas to
 * swipe through; and a bar that floats on the page instead of touching its edges. Warm
 * and unhurried, in the colours the app already wears. Every rule is under the phone's
 * scope, and none of it is glass. */

/* A warm glow behind the card, the way the reference lit its session. It sits under the
   page's content and over the page's ground, and it is never a box anything can hit. */
body.is-phone-studio .phone-home { position: relative; z-index: 0; }
body.is-phone-studio .phone-home::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 110px;
  right: -40%;
  left: -40%;
  height: 560px;
  background: radial-gradient(ellipse at 55% 42%, rgba(214, 170, 110, 0.22), rgba(214, 170, 110, 0.09) 38%, rgba(214, 170, 110, 0) 66%);
  pointer-events: none;
}

/* The first line: the count on the left, the two doors on the right. The name and its
   line beneath, larger, as the page's own greeting. */
body.is-phone-studio .phone-topbar.is-home { flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
body.is-phone-studio .phone-topbar.is-home .phone-topbar-lead { order: 1; flex: 0 1 auto; min-width: 0; }
body.is-phone-studio .phone-topbar.is-home .phone-topbar-actions { order: 2; margin-left: auto; }
body.is-phone-studio .phone-topbar.is-home .phone-topbar-name { order: 3; flex: 1 1 100%; margin-top: 22px; }
body.is-phone-studio .phone-topbar.is-home .phone-topbar-name h1 { font-size: 2rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.025em; }
body.is-phone-studio .phone-topbar.is-home .phone-topbar-name span { margin-top: 6px; color: var(--text-soft); font-size: 1.0625rem; line-height: 1.35; }
body.is-phone-studio .phone-home-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--phone-surface);
  box-shadow: var(--phone-shadow);
  color: var(--text);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
}
body.is-phone-studio .phone-home-count svg { width: 16px; height: 16px; color: var(--gold); }
body.is-phone-studio .phone-home-count strong { font-weight: 650; font-variant-numeric: tabular-nums; }
body.is-phone-studio .phone-home-count span { color: var(--muted); font-size: 0.8125rem; }
body.is-phone-studio :is(.phone-topbar.is-home, .phone-lib-hero .phone-topbar) .phone-sparkle { border: 1px solid var(--line); background: var(--phone-surface); box-shadow: var(--phone-shadow); }

/* The quote where the reference showed the day's numbers: a line to read, left, and one
   round button to turn it, right. The attribution's paragraph is dissolved into the grid
   so the button can stand beside both lines without a change to the shared markup. */
body.is-phone-studio .phone-home .home-quote { width: auto; margin: 0 0 var(--phone-gap-lg); padding: 0 2px; text-align: left; }
body.is-phone-studio .phone-home .home-quote::before { display: none; }
body.is-phone-studio .phone-home .home-quote-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "text next" "cite next";
  column-gap: 14px;
  align-items: center;
}
body.is-phone-studio .phone-home .home-quote-body > p:first-child { grid-area: text; font-size: 1.0625rem; line-height: 1.45; color: var(--text); }
body.is-phone-studio .phone-home .home-quote-cite { display: contents; }
body.is-phone-studio .phone-home .home-quote-cite cite { grid-area: cite; margin-top: 8px; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
body.is-phone-studio .phone-home .home-quote-next {
  grid-area: next;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: var(--phone-surface);
  box-shadow: var(--phone-shadow);
  color: var(--text-soft);
  opacity: 1;
}
body.is-phone-studio .phone-home .home-quote-next svg { width: 17px; height: 17px; }

/* The capture card where the reference showed the session: the same surface, lifted a
   little more, with a soft orb of the studio's blue and gold in its corner. The orb is
   under everything that can be touched, and the field is clear so it shows through. */
body.is-phone-studio .phone-home .capture-shell {
  position: relative;
  border-radius: 24px;
  box-shadow: 0 14px 34px rgba(83, 67, 44, 0.10);
}
body.is-phone-studio .phone-home .capture-shell::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 10px;
  right: 12px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  /* Two of the studio's colours in one sphere, the blue to the upper left and the gold to
     the lower right, the way the reference lit its card. */
  background: linear-gradient(135deg, rgba(41, 75, 193, 0.40) 0%, rgba(120, 110, 200, 0.30) 48%, rgba(214, 150, 96, 0.42) 100%);
  filter: blur(14px);
  pointer-events: none;
}
body.is-phone-studio .phone-home .capture-form,
body.is-phone-studio .phone-home .capture-actions,
body.is-phone-studio .phone-home .capture-more,
body.is-phone-studio .phone-home .capture-local-note,
body.is-phone-studio .phone-home .capture-result { position: relative; z-index: 1; }
body.is-phone-studio .phone-home .capture-input { background: transparent; }

/* The heading of the rail, and the cue after it. */
body.is-phone-studio .phone-home .phone-section-head { margin: 4px 0 10px; }
body.is-phone-studio .phone-home .phone-review-cue { margin-top: 2px; border-radius: 18px; }

/* Idea cards, as posters (Card pass) ==================================================
 *
 * Herv's brief, from a reference he chose as inspiration rather than as the card: one
 * saturated field of colour with white type on it, the group on a white chip with its mark
 * in a tinted disc, the facts as short rows that each carry a glyph, and a rendered object
 * in the corner that gives the card its depth. The card here does all of that with the
 * studio's own material: the colour is the idea's category family, deepened until white
 * reads on it; the object is a still life of flat-lit solids (public/app.js POSTER_SCENES)
 * coloured from the same family with one brass piece, so the six variants of three scenes
 * stay one set; and the pin is a frosted disc on the colour, top right, where a thumb
 * expects it. Every rule is under body.is-phone-studio: the desk keeps its card.
 */
body.is-phone-studio .library-card-wrap { --card-inset: 14px; --control-size: 44px; --control-step: 48px; --card-rail: var(--control-size); }

body.is-phone-studio .idea-card.poster {
  --poster-hi: color-mix(in oklab, var(--poster) 40%, white);
  --poster-face: color-mix(in oklab, var(--poster) 70%, white);
  --poster-shade: color-mix(in oklab, var(--poster-deep) 68%, black);
  --poster-gold-hi: #f5dca6;
  --poster-gold: #e3b76b;
  --poster-gold-deep: #b1802f;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 312px;
  padding: 66px 16px 18px;
  border: 0;
  border-radius: 26px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.14), transparent 55%),
    linear-gradient(160deg, var(--poster) 0%, var(--poster-deep) 100%);
  color: #fff;
  /* A lit top edge inside the card, then the card's own colour as its shadow. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 16px 30px -14px color-mix(in srgb, var(--poster-deep) 62%, transparent);
  isolation: isolate;
}
/* The families. Each is the category's own hue from the desk's washes, taken deep enough
   that white body text clears 4.5:1 against the card's lower half. Business is orange, so
   its brass piece turns to ivory rather than vanishing into the field. */
body.is-phone-studio :is(.idea-card, .row-tile, .phone-category, .phone-category-toggle, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-violet { --poster: #5843d2; --poster-deep: #37299f; }
body.is-phone-studio :is(.idea-card, .row-tile, .phone-category, .phone-category-toggle, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-indigo { --poster: #3559d4; --poster-deep: #22409f; }
body.is-phone-studio :is(.idea-card, .row-tile, .phone-category, .phone-category-toggle, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-blue { --poster: #2a6fc4; --poster-deep: #184b90; }
body.is-phone-studio :is(.idea-card, .row-tile, .phone-category, .phone-category-toggle, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-teal { --poster: #1f7f78; --poster-deep: #125652; }
body.is-phone-studio :is(.idea-card, .row-tile, .phone-category, .phone-category-toggle, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-sage { --poster: #3f7d5c; --poster-deep: #25553d; }
body.is-phone-studio :is(.idea-card, .row-tile, .phone-category, .phone-category-toggle, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-rose { --poster: #b8446f; --poster-deep: #7e2a4c; }
body.is-phone-studio :is(.idea-card, .row-tile, .phone-category, .phone-category-toggle, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-amber { --poster: #b85a24; --poster-deep: #843b14; --poster-gold-hi: #f8efe1; --poster-gold: #ecdcc2; --poster-gold-deep: #c9b08c; }
body.is-phone-studio :is(.idea-card, .row-tile, .phone-category, .phone-category-toggle, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-lilac { --poster: #7a4aa8; --poster-deep: #502d77; }
body.is-phone-studio :is(.idea-card, .row-tile, .phone-category, .phone-category-toggle, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-slate { --poster: #566380; --poster-deep: #363f56; }

/* The visual is no longer a picture above the words: it is the whole card's backdrop, and
   it holds the chips at the top and the still life at the foot. */
body.is-phone-studio .idea-card.poster .idea-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: auto;
  overflow: visible;
  border: 0;
  background: none;
  pointer-events: none;
}
body.is-phone-studio .idea-card.poster .idea-visual::before {
  content: "";
  position: absolute;
  right: -44px;
  bottom: -56px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 62%);
}
/* The still life is a fixed size and lives in the lower right; the footer below reserves the
   same height on the left, so no line of the name or summary can ever run across it (Herv:
   "the text is always legible"). The object is drawn to bleed a little past the corner. */
body.is-phone-studio .idea-card.poster .poster-art { position: absolute; right: -14px; bottom: -16px; width: 156px; height: 156px; }
body.is-phone-studio .idea-card.poster .poster-scene { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.24)); }
body.is-phone-studio .idea-card.poster .poster-scene.is-mirrored { transform: scaleX(-1); }

/* The chips: white islands on the colour, the category's glyph in a disc of the same family. */
body.is-phone-studio .idea-card.poster .visual-badges { z-index: 1; gap: 6px; }
body.is-phone-studio .idea-card.poster .visual-category {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 4px 12px 4px 5px;
  border: 0;
  background: rgba(255, 255, 255, 0.95);
  color: #1d2130;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  backdrop-filter: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
}
body.is-phone-studio .idea-card.poster .visual-glyph {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--poster) 16%, white);
  color: var(--poster-deep);
  font-size: 0.8125rem;
  line-height: 1;
}
body.is-phone-studio .idea-card.poster .visual-privacy {
  min-height: 32px;
  padding: 4px 11px;
  border: 0;
  background: rgba(255, 255, 255, 0.95);
  color: #7a4a20;
  font-size: 0.75rem;
  font-weight: 600;
  backdrop-filter: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
}
body.is-phone-studio .idea-card.poster .visual-privacy svg { width: 13px; height: 13px; }

/* The words: a bold sans headline, as the reference set it, in place of the desk's serif;
   the summary two lines under it; both above the still life should a long name reach it. */
body.is-phone-studio .idea-card.poster .card-title {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  color: #fff;
  font-family: var(--sans);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: pretty;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
body.is-phone-studio .idea-card.poster .card-title.is-working-name { text-decoration-color: rgba(255, 255, 255, 0.55); }
body.is-phone-studio .idea-card.poster .card-summary {
  position: relative;
  z-index: 1;
  max-width: 100%;
  margin: 0 0 14px;
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, 0.86);
  /* 0.8125rem, not 0.875: at 200% text on a 320px phone the rail card's summary box is
     193px, and "neighbourhood" at 28px is 193px wide — one size down keeps whole words. */
  font-size: 0.8125rem;
  line-height: 1.45;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  -webkit-line-clamp: 2;
}

/* The facts, one to a row, each led by its mark in a white disc; they keep to the left half
   so the still life has the right. The footer is at least as tall as the object stands above
   the card's foot, which is what keeps the words above from ever meeting it. A status is a
   quiet pill after them. */
body.is-phone-studio .idea-card.poster .card-footer {
  position: relative;
  z-index: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  width: auto;
  min-height: 144px;
  max-width: 52%;
  margin: auto 0 0;
}
body.is-phone-studio .idea-card.poster .card-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
}
body.is-phone-studio .idea-card.poster .card-meta svg {
  flex: none;
  width: 24px;
  height: 24px;
  padding: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--poster-deep);
  fill: none;
  stroke: currentColor;
}
body.is-phone-studio .idea-card.poster .card-more {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
}

/* The pin: top right on the colour, a frosted disc under a white glyph; pinned, the disc
   turns solid white and the glyph dark, so the state reads at a glance from across the
   rail. The button keeps its 44px reach and the badge row stops before it (--card-rail). */
body.is-phone-studio .library-card-wrap > .idea-pin {
  top: var(--card-inset);
  right: var(--card-inset);
  color: #fff;
}
body.is-phone-studio .library-card-wrap > .idea-pin::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(8px);
}
body.is-phone-studio .library-card-wrap > .idea-pin.is-pinned { color: #1d2130; }
body.is-phone-studio .library-card-wrap > .idea-pin.is-pinned::before { border-color: transparent; background: rgba(255, 255, 255, 0.96); }
/* The combine pick is the pin's twin in the opposite corner: the same frosted disc with a
   white ＋, over the still life rather than over the name, and a solid white disc with a
   dark ✓ once the idea is in the tray. */
body.is-phone-studio .library-card-wrap > .combine-pick {
  top: auto;
  right: var(--card-inset);
  bottom: var(--card-inset);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}
body.is-phone-studio .library-card-wrap > .combine-pick::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(8px);
}
body.is-phone-studio .library-card-wrap > .combine-pick.is-picked { color: #1d2130; }
body.is-phone-studio .library-card-wrap > .combine-pick.is-picked::before { border-color: transparent; background: rgba(255, 255, 255, 0.96); }

/* Two across in the library: the same poster, smaller. Nothing is hidden to make it fit
   (card-density): the summary keeps its two lines at a smaller size, the chip keeps the
   category's whole name and may take two lines beside the pin, and the still life is
   tucked lower into its corner. */
body.is-phone-studio .library-grid[data-card-size="small"] .library-card-wrap { --card-inset: 10px; }
body.is-phone-studio .library-grid[data-card-size="small"] .idea-card.poster { min-height: 240px; padding: 62px 12px 14px; border-radius: 20px; }
body.is-phone-studio .library-grid[data-card-size="small"] .idea-card.poster .card-title { margin-bottom: 6px; font-size: 1.0625rem; }
body.is-phone-studio .library-grid[data-card-size="small"] .idea-card.poster .card-summary { margin-bottom: 10px; font-size: 0.75rem; line-height: 1.4; }
/* Half a phone is too narrow for facts beside an object, so here the object has a band of
   its own between the summary and the facts (the footer's top padding reserves it), and the
   two rows take the full width under it, each on one line. */
body.is-phone-studio .library-grid[data-card-size="small"] .idea-card.poster .idea-visual::before { right: -34px; bottom: 6px; width: 160px; height: 160px; }
body.is-phone-studio .library-grid[data-card-size="small"] .idea-card.poster .poster-art { right: -8px; bottom: 60px; width: 100px; height: 100px; }
body.is-phone-studio .library-grid[data-card-size="small"] .idea-card.poster .card-footer { min-height: 0; max-width: 100%; padding-top: 102px; gap: 4px; }
body.is-phone-studio .library-grid[data-card-size="small"] .idea-card.poster .card-meta { white-space: nowrap; }
body.is-phone-studio .library-grid[data-card-size="small"] .idea-card.poster .card-meta { font-size: 0.75rem; }
body.is-phone-studio .library-grid[data-card-size="small"] .idea-card.poster .card-meta svg { width: 20px; height: 20px; padding: 4px; }
body.is-phone-studio .library-grid[data-card-size="small"] .idea-card.poster .visual-category { min-height: 28px; padding: 3px 9px 3px 3px; font-size: 0.6875rem; }
body.is-phone-studio .library-grid[data-card-size="small"] .idea-card.poster .visual-glyph { width: 20px; height: 20px; font-size: 0.75rem; }
/* The name is whole on the phone (see "a long idea keeps its name on screen"): the desk's two-line
   clamp for Small is undone here, so a one-line name in a wide column is never a clipped box. */
body.is-phone-studio .library-grid[data-card-size="small"] .idea-card.poster .card-title { display: block; overflow: visible; -webkit-line-clamp: none; }

/* Home, the compact capture (Home pass 3) =============================================
 *
 * Herv's brief, from a reference he chose as inspiration: a greeting in large type, and
 * directly under it one quiet input pill with a single round button inside it. Here the
 * greeting is the studio's name and its line; the pill is the capture field at rest — one
 * line, the Local only lock as the round button in its right end — and the moment the
 * field holds attention or words, or its Options are open, it grows into the card it was
 * (a taller field, then Options and Capture on the row beneath). Local only keeps saying
 * what it is in every state: the lock turns to a brass pill with its word, the shell takes
 * a brass ring, and the note beneath still explains it. The quote moved under the field,
 * above the rail. Nothing in the markup changed but the order; the states are the
 * stylesheet's, read from :focus-within, the placeholder, and the open fold.
 */
body.is-phone-studio .phone-topbar.is-home { margin-bottom: 16px; }
body.is-phone-studio .phone-topbar.is-home .phone-topbar-name h1 { font-size: 2.125rem; font-weight: 650; letter-spacing: -0.03em; }

body.is-phone-studio .phone-home .capture-shell { margin-bottom: 18px; border-radius: 28px; overflow: clip; }
body.is-phone-studio .phone-home .capture-shell.is-local { box-shadow: 0 0 0 1.5px var(--local-line), 0 14px 34px rgba(120, 86, 40, 0.14); }
body.is-phone-studio .phone-home .capture-form { position: relative; border-radius: 28px 28px 0 0; }
/* At rest: one line, with room at its end for the lock. */
body.is-phone-studio .phone-home .capture-input {
  min-height: 56px;
  padding: 16px 64px 16px 20px;
  font-size: 1.0625rem;
  line-height: 1.4;
}
body.is-phone-studio .phone-home .capture-shell.is-local .capture-input { padding-right: 138px; }
/* The row is folded away until the field is in use: no height, no line above it, and
   nothing in it reachable — except the lock, which lives on the field itself. */
body.is-phone-studio .phone-home .capture-actions {
  /* Static, so the lock inside it is placed against the FIELD (the form is the nearest
     positioned ancestor) and is never clipped when the row folds to nothing; the two
     buttons keep their own place above the orb instead. */
  position: static;
  max-height: 0;
  overflow: hidden;
  padding-block: 0;
  border-top-color: transparent;
  visibility: hidden;
}
body.is-phone-studio .phone-home .capture-actions::before { display: none; }
/* The two buttons fade, not the row: an opacity on the row would take the lock with it. */
body.is-phone-studio .phone-home .capture-actions .capture-more-toggle,
body.is-phone-studio .phone-home .capture-actions .capture-submit { position: relative; z-index: 1; opacity: 0; }
body.is-phone-studio .phone-home .capture-actions .capture-more-toggle { margin-inline: 0 auto; padding-inline: 14px; }
/* In use: the field opens up and the row arrives beneath it — Options at the left,
   Capture at the right. */
body.is-phone-studio .phone-home .capture-shell:focus-within .capture-input,
body.is-phone-studio .phone-home .capture-shell:has(.capture-input:not(:placeholder-shown)) .capture-input,
body.is-phone-studio .phone-home .capture-shell:has(.capture-options) .capture-input { min-height: 116px; padding-top: 18px; }
body.is-phone-studio .phone-home .capture-shell:focus-within .capture-actions,
body.is-phone-studio .phone-home .capture-shell:has(.capture-input:not(:placeholder-shown)) .capture-actions,
body.is-phone-studio .phone-home .capture-shell:has(.capture-options) .capture-actions {
  max-height: 220px;
  padding-block: var(--phone-gap-sm);
  border-top-color: var(--phone-line);
  visibility: visible;
}
body.is-phone-studio .phone-home .capture-shell:focus-within .capture-actions :is(.capture-more-toggle, .capture-submit),
body.is-phone-studio .phone-home .capture-shell:has(.capture-input:not(:placeholder-shown)) .capture-actions :is(.capture-more-toggle, .capture-submit),
body.is-phone-studio .phone-home .capture-shell:has(.capture-options) .capture-actions :is(.capture-more-toggle, .capture-submit) { opacity: 1; }
/* The lock: a round button inside the field's right end. Off, it is the open padlock alone;
   on, it is a brass pill that says Local only, so the state is never a colour to guess at. */
body.is-phone-studio .phone-home .capture-actions .privacy-toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 44px;
  justify-content: center;
  gap: 6px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--phone-surface);
  color: var(--muted-2);
  visibility: visible;
  box-shadow: var(--phone-shadow);
}
body.is-phone-studio .phone-home .capture-actions .privacy-toggle > span { display: none; }
body.is-phone-studio .phone-home .capture-actions .privacy-toggle:has(input:checked) {
  width: auto;
  padding: 0 14px 0 11px;
  border-color: var(--local);
  background: var(--local);
  color: #fff;
  font-weight: 600;
}
body.is-phone-studio .phone-home .capture-actions .privacy-toggle:has(input:checked) > span { display: inline; }
body.is-phone-studio .phone-home .capture-actions .privacy-toggle:has(input:checked) svg { stroke: #fff; }
/* The orb behind the field sits where the lock is, so the pill has a little light in its end. */
body.is-phone-studio .phone-home .capture-shell::before { top: -22px; right: -14px; width: 104px; height: 104px; }
/* The fold and the note close the pill's own corners. */
body.is-phone-studio .phone-home .capture-shell .capture-options { border-radius: 0 0 28px 28px; }

/* The quote, under the field now: a thing to look down at, quieter than the field above it. */
body.is-phone-studio .phone-home .home-quote { margin: 0 0 24px; padding: 0 6px; }
body.is-phone-studio .phone-home .home-quote-body > p:first-child { font-size: 1rem; color: var(--text-soft); }

@media (prefers-reduced-motion: no-preference) {
  body.is-phone-studio .phone-home .capture-input { transition: min-height 220ms cubic-bezier(.2,.7,.2,1), padding-top 220ms cubic-bezier(.2,.7,.2,1); }
  body.is-phone-studio .phone-home .capture-actions { transition: max-height 240ms cubic-bezier(.2,.7,.2,1), padding 240ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 240ms; }
  body.is-phone-studio .phone-home .capture-actions :is(.capture-more-toggle, .capture-submit) { transition: opacity 160ms ease, transform 140ms cubic-bezier(.2,.7,.2,1); }
  body.is-phone-studio .phone-home .capture-shell:focus-within .capture-actions,
  body.is-phone-studio .phone-home .capture-shell:has(.capture-input:not(:placeholder-shown)) .capture-actions,
  body.is-phone-studio .phone-home .capture-shell:has(.capture-options) .capture-actions { transition: max-height 240ms cubic-bezier(.2,.7,.2,1), padding 240ms cubic-bezier(.2,.7,.2,1), visibility 0s; }
}
/* The field auto-sizes by writing an inline height; once it is empty again that height is
   stale, and only !important reaches past an inline style — so an empty field always falls
   back to its minimum, one line at rest and the open card in use. */
body.is-phone-studio .phone-home .capture-input:placeholder-shown { height: auto !important; }

/* Focus, on the capture field and the picker's search (Home pass 3). The sheet's last rule
   puts a 2px ring on every focused field, and inside a clipped pill that ring shows as one
   stray line where the field meets the row. The field is not a lone control here: the shell
   it sits in takes the ring instead, and the search box's own pill does the same. */
body.is-phone-studio .phone-home .capture-input:focus-visible,
body.is-phone-studio .capture-context-search input:focus-visible { outline: 0; }
body.is-phone-studio .phone-home .capture-shell:focus-within { box-shadow: 0 0 0 1px var(--phone-accent-line), 0 0 0 4px var(--phone-accent-wash), 0 14px 34px rgba(83, 67, 44, 0.10); }
body.is-phone-studio .phone-home .capture-shell.is-local:focus-within { box-shadow: 0 0 0 1.5px var(--local), 0 0 0 5px var(--local-halo), 0 14px 34px rgba(120, 86, 40, 0.14); }
body.is-phone-studio .capture-context-search:focus-within { border-color: var(--phone-accent-line); box-shadow: 0 0 0 3px var(--phone-accent-wash); }

/* Options, dressed (Home pass 3) =======================================================
 *
 * The fold under the capture field is where a person says how to save something and
 * where it belongs. It had the desk's chips and a bare row. Now: "Save as" is four tiles
 * in two columns, each with a mark in a tinted square and a short word, the chosen one in
 * the studio's accent; the shared hint reads under them; and "Business or project" is a
 * card of its own with a folder mark, its state in words, and the Choose control at its
 * end. Open, the picker's search is a pill and its rows are a fingertip tall.
 */
body.is-phone-studio .capture-shell .capture-options { display: grid; gap: 14px; padding: 16px 14px 14px; }
body.is-phone-studio .capture-option-row { gap: 10px; }
body.is-phone-studio .capture-option-label { color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; }
body.is-phone-studio .capture-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
body.is-phone-studio .capture-mode {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--phone-line);
  border-radius: 16px;
  background: var(--phone-surface);
  color: var(--text-soft);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  box-shadow: var(--phone-shadow);
}
body.is-phone-studio .capture-mode-glyph {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--phone-accent-wash);
  color: var(--phone-accent);
}
body.is-phone-studio .capture-mode-glyph svg { width: 17px; height: 17px; }
body.is-phone-studio .capture-mode.is-active { border-color: var(--phone-accent-line); background: var(--phone-accent-wash); color: var(--phone-accent); font-weight: 600; }
body.is-phone-studio .capture-mode.is-active .capture-mode-glyph { background: var(--phone-accent); color: #fff; }
body.is-phone-studio .capture-mode-hint { padding: 0 2px; color: var(--muted); font-size: 0.8125rem; line-height: 1.45; }
body.is-phone-studio .capture-target { margin-top: 0; }
body.is-phone-studio .capture-target select { min-height: 44px; padding: 0 12px; border-radius: 14px; }

/* Business or project: a card in the fold. */
body.is-phone-studio .capture-context-picker {
  padding: 12px 12px 12px 10px;
  border: 1px solid var(--phone-line);
  border-radius: 18px;
  background: var(--phone-surface);
  box-shadow: var(--phone-shadow);
}
body.is-phone-studio .capture-context-bar { align-items: center; gap: 10px; }
body.is-phone-studio .capture-context-copy {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
}
body.is-phone-studio .capture-context-glyph {
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--phone-accent-wash);
  color: var(--phone-accent);
}
body.is-phone-studio .capture-context-glyph svg { width: 17px; height: 17px; }
body.is-phone-studio .capture-context-label { grid-column: 2; color: var(--text); font-size: 0.875rem; font-weight: 500; }
body.is-phone-studio .capture-context-label small { font-size: 0.5625rem; }
body.is-phone-studio .capture-context-note,
body.is-phone-studio .capture-context-selection { grid-column: 2; font-size: 0.75rem; }
body.is-phone-studio .capture-context-toggle { min-height: 40px; padding: 0 12px 0 14px; font-size: 0.8125rem; }
body.is-phone-studio .capture-context-panel { margin-top: 12px; padding: 10px; border-radius: 16px; background: var(--phone-surface-soft); box-shadow: none; }
body.is-phone-studio .capture-context-search { min-height: 44px; padding: 0 14px; border-radius: 999px; }
body.is-phone-studio .capture-context-search input { padding: 10px 0; }
body.is-phone-studio .capture-context-search > span { display: none; }
body.is-phone-studio .capture-context-results { max-height: 260px; }
body.is-phone-studio .capture-context-option { min-height: 44px; padding: 8px 10px; border-radius: 12px; }
body.is-phone-studio .capture-context-check { width: 20px; height: 20px; border-radius: 7px; }
body.is-phone-studio .capture-context-name { font-size: 0.875rem; }
body.is-phone-studio .capture-context-empty { padding: 18px 10px 12px; }
body.is-phone-studio .capture-context-create { border-radius: 14px; }
body.is-phone-studio .capture-context-create .secondary-button.compact { min-height: 40px; border-radius: 999px; }
body.is-phone-studio .capture-context-footer { margin-top: 8px; font-size: 0.75rem; }
body.is-phone-studio .capture-context-footer .text-button { min-height: 40px; }
/* At a large text size on a narrow phone the Choose control drops under the words rather
   than squeezing them into a column narrower than "Automatic" (the text audit at 320×700/150%%). */
body.is-phone-studio .capture-context-bar { flex-wrap: wrap; }
body.is-phone-studio .capture-context-copy { flex: 1 1 140px; }
body.is-phone-studio .capture-context-toggle { margin-left: auto; }
/* Creating a name from the search: the sentence on its own line, the two kinds side by side. */
body.is-phone-studio .capture-context-create { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; }
body.is-phone-studio .capture-context-create-label { grid-column: 1 / -1; margin: 0; overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; font-size: 0.8125rem; }

/* Home, on the studio's blue (Home pass 4) =============================================
 *
 * Herv did not like the beige and its brown glow behind Home. The answer is the blue the
 * sign-in gate already wears: the top bar becomes a hero in the same gradient, bleeding to
 * the screen's edges and its top, carrying the count, the sync state, the door to Inky and
 * the greeting in white, with the gate's soft shapes behind them. The capture pill sits
 * across its lower edge, half on the blue and half on the page, so the one thing to do is
 * the one thing in the light. Beneath it the canvas is cooler and cleaner than the beige,
 * so the poster cards and the white pills stand off it. The warm glow is retired.
 */
body.is-phone-studio { background: #f4f4f8; }
body.is-phone-studio .phone-home::before { display: none; }
body.is-phone-studio .phone-home { --home-hero-overlap: 28px; }
body.is-phone-studio .phone-topbar.is-home {
  position: relative;
  z-index: 0;
  margin: calc(-14px - env(safe-area-inset-top, 0px)) calc(-1 * max(var(--phone-page-x), env(safe-area-inset-right, 0px))) 0 calc(-1 * max(var(--phone-page-x), env(safe-area-inset-left, 0px)));
  padding: calc(14px + env(safe-area-inset-top, 0px)) max(var(--phone-page-x), env(safe-area-inset-right, 0px)) calc(var(--home-hero-overlap) + 24px) max(var(--phone-page-x), env(safe-area-inset-left, 0px));
  overflow: clip;
  border-radius: 0 0 34px 34px;
  background: linear-gradient(168deg, #3b62dc 0%, #294bc1 52%, #1f3fa8 100%);
  color: #fff;
  box-shadow: 0 22px 44px -22px rgba(31, 63, 168, 0.55);
}
/* The gate's shapes, two of them: a pale form over the top right, a brass light low on the
   right where the pill's lock will sit. Under the content, over the blue. */
body.is-phone-studio .phone-topbar.is-home::before,
body.is-phone-studio .phone-topbar.is-home::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
body.is-phone-studio .phone-topbar.is-home::before { top: -120px; right: -90px; width: 320px; height: 280px; border-radius: 46% 54% 42% 58% / 52% 38% 62% 48%; background: rgba(255, 255, 255, 0.08); }
body.is-phone-studio .phone-topbar.is-home::after { right: 24px; bottom: -80px; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle, rgba(226, 181, 107, 0.5), rgba(226, 181, 107, 0) 68%); filter: blur(10px); }
body.is-phone-studio .phone-topbar.is-home .phone-topbar-name { margin-top: 26px; }
body.is-phone-studio .phone-topbar.is-home .phone-topbar-name h1 { color: #fff; }
body.is-phone-studio .phone-topbar.is-home .phone-topbar-name span { color: rgba(255, 255, 255, 0.78); }
/* The pills on the blue are glass: white at a low alpha, white words, the brass spark. */
body.is-phone-studio :is(.phone-home, .phone-lib-hero) .phone-home-count,
body.is-phone-studio :is(.phone-home, .phone-lib-hero) .phone-sync-slot .mobile-sync-chip {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body.is-phone-studio .phone-home .phone-home-count svg { color: #f3cf8e; }
body.is-phone-studio .phone-home .phone-home-count span { color: rgba(255, 255, 255, 0.76); }
body.is-phone-studio :is(.phone-home, .phone-lib-hero) .mobile-sync-dot { background: rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16); }
body.is-phone-studio :is(.phone-home, .phone-lib-hero) .mobile-sync-chip[data-state="uptodate"] .mobile-sync-dot { background: #7fe0a4; }
body.is-phone-studio :is(.phone-home, .phone-lib-hero) .mobile-sync-chip:is([data-state="saved"], [data-state="waiting"], [data-state="syncing"]) .mobile-sync-dot { background: #f3cf8e; }
body.is-phone-studio :is(.phone-home, .phone-lib-hero) .mobile-sync-chip:is([data-state="attention"], [data-state="trouble"]) .mobile-sync-dot { background: #ff8f86; }
body.is-phone-studio .phone-topbar.is-home .phone-sparkle { border: 0; background: #fff; box-shadow: 0 6px 16px rgba(20, 35, 90, 0.25); }
/* The pill across the seam, with a shadow for a blue ground rather than a beige one. */
body.is-phone-studio .phone-home .capture-shell { margin-top: calc(-1 * var(--home-hero-overlap)); box-shadow: 0 16px 34px -10px rgba(20, 35, 90, 0.28); }
/* At rest the placeholder is one line, whatever the saving mode calls the field. */
/* At rest the pill is one line and the placeholder sits on it whole — which is true because
   each mode's placeholder is short, not because the field refuses to wrap. It used to refuse
   (`white-space: nowrap`), and at a raised text size that turned the resting placeholder into
   a line too long for its own box: clipped at the padding edge, the tail of it printed
   underneath the lock. Wrapping is the honest fallback — at the sizes the pill was drawn for
   nothing wraps and the line is unchanged, and past them the field grows a line instead of
   hiding words under a button. */
body.is-phone-studio .phone-home .capture-input:placeholder-shown:not(:focus) {
  overflow: hidden;
  overflow-wrap: break-word;
  /* …and the box grows to whatever the placeholder needed. At the sizes the pill was drawn
     for that is the one line it has always been; at a raised text size it is two, and without
     this the second line is laid out and then cut off by a box still sized for one. Browsers
     that do not know the property keep exactly the behaviour they had. */
  field-sizing: content;
}
@media (max-width: 359px) {
  body.is-phone-studio .phone-home { --phone-page-x: 12px; }
}

/* The quote, on a card of its own (Home pass 5) ========================================
 *
 * Herv: a panel that fits the page and lifts it without taking it over, one size for every
 * quote, and a way on Home itself to show or put away the quotes — not a switch, a light.
 * The card is the page's own paper. Its head holds a round bulb, a kicker ("A little
 * motivation" — the quotes are there to motivate) and the turn button. Pressing the bulb
 * lights it in brass and the quote grows out of it, from the corner where the bulb is;
 * pressing it again puts the light out and the card folds back to its head. Lit, the quote
 * keeps a fixed measure — four lines of text and two of attribution at the default size,
 * five and two on the narrowest phones — so the card is one height whatever line it holds.
 */
body.is-phone-studio .phone-home .home-quote {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "bulb kicker next" "text text text" "cite cite cite";
  align-items: center;
  column-gap: 12px;
  margin: 0 0 22px;
  padding: 8px 12px 16px 12px;
  border: 1px solid var(--phone-line);
  border-radius: 22px;
  background: var(--phone-surface);
  box-shadow: var(--phone-shadow);
}
body.is-phone-studio .phone-home .home-quote.is-off { padding-bottom: 8px; }
body.is-phone-studio .phone-home .home-quote-head { display: contents; }
body.is-phone-studio .phone-home .home-quote-body { display: contents; }
/* The kicker wraps rather than being cut: at a large text size on a narrow phone the head
   row takes two lines and the card is a little taller, and every word is still there. */
body.is-phone-studio .phone-home .home-quote-kicker { grid-area: kicker; min-width: 0; color: var(--text-soft); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; }
body.is-phone-studio .phone-home .home-quote.is-off .home-quote-kicker { color: var(--muted); font-weight: 500; }
/* The words: a fixed measure when lit, and folded to nothing when not. Both are transitions
   from the bulb's corner, so the quote grows out of the light and shrinks back into it. */
body.is-phone-studio .phone-home .home-quote-body > p:first-child {
  grid-area: text;
  min-height: 6em;
  max-height: 9em;
  margin: 10px 4px 0 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-wrap: pretty;
  transform-origin: 6% 0;
}
body.is-phone-studio .phone-home .home-quote-cite cite {
  grid-area: cite;
  display: block;
  min-height: 2.8em;
  max-height: 4.5em;
  margin: 8px 4px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  transform-origin: 6% 0;
}
body.is-phone-studio .phone-home .home-quote.is-off .home-quote-body > p:first-child,
body.is-phone-studio .phone-home .home-quote.is-off .home-quote-cite cite {
  min-height: 0;
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  transform: scale(0.9);
  visibility: hidden;
}
/* The turn button, in the head: a round ghost the size of a fingertip; gone when the light is out. */
body.is-phone-studio .phone-home .home-quote-next {
  grid-area: next;
  position: static;
  width: 40px;
  height: 40px;
  min-height: 40px;
  margin: 0;
  border: 1px solid var(--phone-line);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--text-soft);
}
body.is-phone-studio .phone-home .home-quote.is-off .home-quote-next { display: none; }
/* The bulb: a fingertip of a button. Unlit, a hairline ring and a quiet glyph; lit, brass
   with a soft halo, the glass of the bulb filled with light. */
body.is-phone-studio .phone-home .home-quote-bulb {
  grid-area: bulb;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--phone-line);
  border-radius: 50%;
  background: var(--phone-surface);
  color: var(--muted-2);
  cursor: pointer;
}
body.is-phone-studio .phone-home .home-quote-bulb svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
body.is-phone-studio .phone-home .home-quote-bulb[aria-pressed="true"] {
  border-color: transparent;
  background: linear-gradient(160deg, #f4cf7d 0%, #e2b56b 55%, #cf9a44 100%);
  color: #5a3a08;
  box-shadow: 0 0 0 6px rgba(226, 181, 107, 0.16), 0 6px 18px rgba(180, 130, 50, 0.4);
}
body.is-phone-studio .phone-home .home-quote-bulb[aria-pressed="true"] svg .bulb-glass { fill: rgba(255, 255, 255, 0.7); }
@media (max-width: 359px) {
  body.is-phone-studio .phone-home .home-quote-body > p:first-child { min-height: 7.5em; max-height: 10.5em; }
}
@media (prefers-reduced-motion: no-preference) {
  body.is-phone-studio .phone-home .home-quote-body > p:first-child,
  body.is-phone-studio .phone-home .home-quote-cite cite {
    transition: max-height 320ms cubic-bezier(.2,.7,.2,1), min-height 320ms cubic-bezier(.2,.7,.2,1), margin-top 320ms cubic-bezier(.2,.7,.2,1), opacity 220ms ease 60ms, transform 320ms cubic-bezier(.2,.7,.2,1), visibility 0s;
  }
  body.is-phone-studio .phone-home .home-quote.is-off .home-quote-body > p:first-child,
  body.is-phone-studio .phone-home .home-quote.is-off .home-quote-cite cite {
    transition: max-height 260ms cubic-bezier(.2,.7,.2,1), min-height 260ms cubic-bezier(.2,.7,.2,1), margin-top 260ms cubic-bezier(.2,.7,.2,1), opacity 160ms ease, transform 260ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 260ms;
  }
  body.is-phone-studio .phone-home .home-quote-bulb { transition: background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }
  body.is-phone-studio .phone-home .home-quote-bulb.is-lighting { animation: quote-light 520ms ease-out; }
}

/* The Review cue, as a card (Home pass 6) ===============================================
 *
 * Herv: the panel at the foot of Home should fit the page. It now speaks the quote card's
 * language: the same paper, hairline and shadow, a tile at its left holding the Review mark
 * in the studio's accent, a small kicker, the first thing waiting as the title, the rest as
 * one quiet line, and at its end the count on brass and a chevron in a round ghost — the
 * head of the quote card, reprised as a door.
 */
body.is-phone-studio .phone-home .phone-review-cue {
  /* A wrapping row, not a grid: the words keep a floor of their own (8rem), so at a large
     text size the count and chevron drop under them rather than breaking "decisions". */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 72px;
  margin-top: 0;
  padding: 12px 12px 12px 12px;
  border: 1px solid var(--phone-line);
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(53, 89, 212, 0.06), rgba(53, 89, 212, 0) 55%),
    var(--phone-surface);
  box-shadow: var(--phone-shadow);
}
body.is-phone-studio .phone-home .phone-review-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--phone-accent-wash);
  color: var(--phone-accent);
}
body.is-phone-studio .phone-home .phone-review-mark svg { width: 22px; height: 22px; }
body.is-phone-studio .phone-home .phone-review-mark { flex: 0 0 auto; }
body.is-phone-studio .phone-home .phone-review-copy { display: grid; flex: 1 1 8rem; gap: 1px; }
body.is-phone-studio .phone-home .phone-review-copy strong { overflow-wrap: normal; }
body.is-phone-studio .phone-home .phone-review-trail { margin-left: auto; }
body.is-phone-studio .phone-home .phone-review-kicker { color: var(--phone-accent); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
body.is-phone-studio .phone-home .phone-review-copy strong { color: var(--text); font-size: 1.0625rem; font-weight: 600; line-height: 1.2; }
body.is-phone-studio .phone-home .phone-review-copy small { color: var(--muted); font-size: 0.8125rem; line-height: 1.35; }
body.is-phone-studio .phone-home .phone-review-trail { gap: 6px; }
body.is-phone-studio .phone-home .phone-review-count { min-width: 30px; min-height: 30px; background: linear-gradient(160deg, #f4cf7d, #d9a44d); color: #4a2e05; font-size: 0.875rem; font-weight: 700; box-shadow: 0 3px 10px rgba(180, 130, 50, 0.3); }
body.is-phone-studio .phone-home .phone-review-chevron { width: 36px; height: 36px; border: 1px solid var(--phone-line); border-radius: 50%; color: var(--text-soft); }

/* The Library's entrance (Library pass 1) ================================================
 *
 * The same page as Home, continued: the top bar and the editorial head ride one blue hero
 * (the bar's wordmark and sync chip in white and glass, the kicker in white, "Your ideas"
 * in the greeting's bold sans, the count as a glass pill beside it); the search field is
 * the pill across the hero's lower edge; the filters keep their one scrolling row; the
 * display chooser keeps its row with the overflow door at its end; and Capture leaves the
 * toolbar for a floating pill above the tab bar, where a thumb already is. The rows of
 * List mode lead with a tile of the idea's family colour holding its still life, so every
 * mode of the library shows the same objects.
 */
body.is-phone-studio .phone-library { --home-hero-overlap: 28px; }
body.is-phone-studio .phone-lib-hero {
  position: relative;
  z-index: 0;
  margin: calc(-14px - env(safe-area-inset-top, 0px)) calc(-1 * max(var(--phone-page-x), env(safe-area-inset-right, 0px))) 0 calc(-1 * max(var(--phone-page-x), env(safe-area-inset-left, 0px)));
  padding: calc(14px + env(safe-area-inset-top, 0px)) max(var(--phone-page-x), env(safe-area-inset-right, 0px)) calc(var(--home-hero-overlap) + 22px) max(var(--phone-page-x), env(safe-area-inset-left, 0px));
  overflow: clip;
  border-radius: 0 0 34px 34px;
  background: linear-gradient(168deg, #3b62dc 0%, #294bc1 52%, #1f3fa8 100%);
  color: #fff;
  box-shadow: 0 22px 44px -22px rgba(31, 63, 168, 0.55);
}
body.is-phone-studio .phone-lib-hero::before,
body.is-phone-studio .phone-lib-hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
body.is-phone-studio .phone-lib-hero::before { top: -140px; right: -80px; width: 300px; height: 260px; border-radius: 46% 54% 42% 58% / 52% 38% 62% 48%; background: rgba(255, 255, 255, 0.08); }
body.is-phone-studio .phone-lib-hero::after { right: 20px; bottom: -90px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(226, 181, 107, 0.45), rgba(226, 181, 107, 0) 68%); filter: blur(10px); }
body.is-phone-studio .phone-lib-hero .phone-topbar { margin-bottom: 6px; }
body.is-phone-studio .phone-lib-hero .phone-brand { color: rgba(255, 255, 255, 0.72); }
body.is-phone-studio .phone-lib-hero .phone-lib-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "kicker kicker" "title count";
  align-items: center;
  column-gap: 12px;
  margin: 6px 0 0;
}
body.is-phone-studio .phone-lib-hero .phone-kicker { grid-area: kicker; margin: 0 0 4px; color: rgba(255, 255, 255, 0.74); }
body.is-phone-studio .phone-lib-hero .phone-lib-head h1 { grid-area: title; color: #fff; font-family: var(--sans); font-size: 2.125rem; font-weight: 650; line-height: 1.1; letter-spacing: -0.03em; }
body.is-phone-studio .phone-lib-hero .phone-lib-count {
  grid-area: count;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* The search pill across the seam, then the filters and the display line beneath it. */
/* The bar lifts itself off the hero it overlaps, and it is also the box the floating Capture
   pill is written inside — so whatever stacking this bar sits at is the stacking that pill
   inherits. At z-index 1 the pill was sealed under every card control (the pin disc is
   layer-control, 3), and a fixed pill drawn UNDER the cards it floats over reads as a
   sliced-off shape rather than a button. The bar takes the sticky layer instead: nothing in
   normal flow sits beside it to be covered, and the pill it holds now floats over the
   library the way a floating action is supposed to. */
body.is-phone-studio .phone-library .phone-lib-bar { position: relative; z-index: var(--layer-sticky); margin-top: calc(-1 * var(--home-hero-overlap)); gap: 12px; }
body.is-phone-studio .phone-library .phone-search input {
  min-height: 56px;
  padding: 0 18px 0 48px;
  border: 1px solid var(--phone-line);
  border-radius: 28px;
  background: var(--phone-surface);
  box-shadow: 0 16px 34px -10px rgba(20, 35, 90, 0.28);
}
body.is-phone-studio .phone-library .phone-search .search-glyph { top: 19px; left: 18px; }
body.is-phone-studio .phone-library .phone-search:focus-within input { border-color: var(--phone-accent-line); box-shadow: 0 0 0 4px var(--phone-accent-wash), 0 16px 34px -10px rgba(20, 35, 90, 0.28); outline: 0; }
/* Capture floats: an extended pill above the tab bar, at the right where a thumb rests,
   above the page but under every sheet and scrim. The row it left keeps the overflow door. */
body.is-phone-studio .phone-library .phone-lib-controls .primary-button {
  position: fixed;
  z-index: var(--layer-sticky);
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(var(--phone-nav-height, calc(var(--phone-nav) + env(safe-area-inset-bottom, 0px) + var(--phone-nav-float))) + 14px);
  min-height: 52px;
  padding: 0 20px 0 16px;
  border-radius: 999px;
  box-shadow: 0 12px 28px -8px rgba(31, 63, 168, 0.6);
  font-size: 0.9375rem;
  font-weight: 600;
}
body.is-phone-studio .phone-library .phone-lib-controls .phone-page-actions { margin-left: auto; }
body.is-phone-studio .phone-library #library-results { padding-bottom: 72px; }

/* List rows as slim posters: the tile at the left, the words, the pin and pick as discs. */
body.is-phone-studio .library-rows { gap: 10px; }
body.is-phone-studio .library-row {
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 84px;
  padding: 12px 56px 12px 12px;
  border: 1px solid var(--phone-line);
  border-radius: 20px;
  background: var(--phone-surface);
  box-shadow: var(--phone-shadow);
}
body.is-phone-studio .row-tile {
  --poster-hi: color-mix(in oklab, var(--poster) 40%, white);
  --poster-face: color-mix(in oklab, var(--poster) 70%, white);
  --poster-shade: color-mix(in oklab, var(--poster-deep) 68%, black);
  --poster-gold-hi: #f5dca6;
  --poster-gold: #e3b76b;
  --poster-gold-deep: #b1802f;
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.16), transparent 55%),
    linear-gradient(160deg, var(--poster) 0%, var(--poster-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
body.is-phone-studio .row-tile .poster-scene { position: absolute; top: 5px; right: -3px; bottom: -3px; left: 3px; display: block; width: auto; height: auto; overflow: visible; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25)); }
body.is-phone-studio .row-tile .poster-scene.is-mirrored { transform: scaleX(-1); }
body.is-phone-studio .row-main { gap: 3px; }
body.is-phone-studio .row-title { font-family: var(--sans); font-size: 0.9375rem; font-weight: 650; letter-spacing: -0.01em; color: var(--text); }
body.is-phone-studio .row-summary { color: var(--muted); font-size: 0.8125rem; }
body.is-phone-studio .row-meta { font-size: 0.75rem; }
body.is-phone-studio .library-row-wrap > .idea-pin { top: 8px; right: 8px; color: var(--muted-2); }
body.is-phone-studio .library-row-wrap > .combine-pick { top: 40px; right: 8px; color: var(--muted-2); font-size: 18px; }
body.is-phone-studio .library-row-wrap > .idea-pin::before,
body.is-phone-studio .library-row-wrap > .combine-pick::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: -1;
  border: 1px solid var(--phone-line);
  border-radius: 50%;
  background: var(--phone-surface-soft);
}
body.is-phone-studio .library-row-wrap > .idea-pin.is-pinned { color: #1d2130; }
body.is-phone-studio .library-row-wrap > .idea-pin.is-pinned::before { border-color: var(--phone-accent-line); background: var(--phone-accent-wash); }
body.is-phone-studio .library-row-wrap > .combine-pick.is-picked { color: #1d2130; }
body.is-phone-studio .library-row-wrap > .combine-pick.is-picked::before { border-color: var(--phone-accent-line); background: var(--phone-accent-wash); }
@media (max-width: 359px) {
  body.is-phone-studio .phone-library { --phone-page-x: 12px; }
}

/* The Library's toolbar, filled (Library pass 2) ========================================
 *
 * Herv liked the entrance but not the empty space in its rows, and asked for categories.
 * So the toolbar is laid out as one grid with no half-empty row: the search pill with the
 * overflow door beside it; a row of category chips — one per category the library holds,
 * most-used first, each glyph on a disc of its family colour — that scrolls sideways edge to
 * edge; the status filters with More at their end; and the display chooser stretched across
 * the whole width, three equal segments. The controls block keeps its markup and its tests
 * and becomes `display: contents`, so its two children are placed by the grid like the rest.
 */
body.is-phone-studio .phone-library .phone-lib-bar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 12px; column-gap: 10px; }
body.is-phone-studio .phone-library .phone-lib-bar .phone-search { grid-column: 1; grid-row: 1; }
body.is-phone-studio .phone-library .phone-lib-controls { display: contents; }
body.is-phone-studio .phone-library .phone-lib-controls .phone-page-actions { grid-column: 2; grid-row: 1; margin: 0; }
body.is-phone-studio .phone-library .phone-lib-controls .library-overflow .secondary-button {
  width: 56px;
  min-height: 56px;
  border: 1px solid var(--phone-line);
  background: var(--phone-surface);
  color: var(--text-soft);
  box-shadow: 0 16px 34px -10px rgba(20, 35, 90, 0.28);
  font-size: 1.125rem;
}
body.is-phone-studio .phone-library .phone-filter-strip { grid-column: 1 / -1; }
body.is-phone-studio .phone-library .phone-lib-controls .phone-mode-row {
  grid-column: 1 / -1;
  display: flex;
  flex: none;
  width: 100%;
  overflow: visible;
}
body.is-phone-studio .phone-library .phone-lib-controls .phone-mode { flex: 1 1 0; justify-content: center; min-height: 40px; text-align: center; }

/* The category chips: a scrolling row that bleeds to the page's edges like the rail on Home. */
body.is-phone-studio .phone-category-row {
  display: flex;
  gap: 8px;
  margin-inline: calc(-1 * var(--phone-page-x));
  padding: 2px var(--phone-page-x) 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
body.is-phone-studio .phone-category-row::-webkit-scrollbar { display: none; }
body.is-phone-studio .phone-category {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px 0 6px;
  border: 1px solid var(--phone-line);
  border-radius: 999px;
  background: var(--phone-surface);
  color: var(--text);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.is-phone-studio .phone-category-glyph {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--poster, var(--phone-accent)), var(--poster-deep, var(--phone-accent)));
  color: #fff;
  font-size: 0.875rem;
  line-height: 1;
}
body.is-phone-studio .phone-category-glyph svg { width: 15px; height: 15px; }
body.is-phone-studio .phone-category-count { margin-left: -2px; color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
/* Chosen, the whole chip takes its family's colour; the glyph disc turns white to hold it. */
body.is-phone-studio .phone-category.is-active {
  border-color: transparent;
  background: linear-gradient(160deg, var(--poster, var(--phone-accent)), var(--poster-deep, #22409f));
  color: #fff;
  font-weight: 600;
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--poster-deep, #22409f) 70%, transparent);
}
body.is-phone-studio .phone-category.is-active .phone-category-glyph { background: rgba(255, 255, 255, 0.96); color: var(--poster-deep, var(--phone-accent)); }
body.is-phone-studio .phone-category.is-active .phone-category-count { color: rgba(255, 255, 255, 0.78); }
body.is-phone-studio .phone-category:active { transform: scale(0.985); }
@media (prefers-reduced-motion: no-preference) {
  body.is-phone-studio .phone-category { transition: transform 140ms cubic-bezier(.2,.7,.2,1), background 160ms ease, color 160ms ease; }
}

/* The toolbar, as one instrument (Library pass 5) ========================================
 *
 * Herv: the search should run the whole width, the gap before the category door has to go,
 * and the tab-and-panel expansion was not it — "full creative rights". So: the search pill
 * spans the seam alone; the status chips that fit stretch evenly across to the door, so the
 * row is one bar with no slack in it; the overflow door closes the display row instead,
 * where the chooser stretches up to it; and Categories open IN PLACE — the status chips
 * give way to the category list sliding in where they stood, the door becomes the way
 * back, and a choice returns the row to its chips with the door in that category's colour.
 * Nothing moves below the toolbar when the list opens, so the first card stays where it is.
 */
body.is-phone-studio .phone-library .phone-lib-bar .phone-search { grid-column: 1 / -1; grid-row: 1; }
body.is-phone-studio .phone-library .phone-lib-controls .phone-mode-row { grid-column: 1; }
body.is-phone-studio .phone-library .phone-lib-controls .phone-page-actions { grid-column: 2; grid-row: auto; margin: 0; }
body.is-phone-studio .phone-library .phone-lib-controls .library-overflow .secondary-button {
  width: 48px;
  min-height: 48px;
  border: 1px solid var(--phone-line);
  background: var(--phone-surface);
  color: var(--text-soft);
  box-shadow: var(--phone-shadow);
  font-size: 1.125rem;
}
/* The status row: the chips that fit share the width equally, edge to door, no slack. The
   fold still measures them at their natural width — every chip is one unbroken word, so a
   crowded row cannot shrink one below what it measured. */
body.is-phone-studio .phone-library .phone-filter-row { flex: 1 1 auto; min-width: 0; }
body.is-phone-studio .phone-library .phone-filter-row .phone-filter { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; white-space: nowrap; }
/* The door: round, on the accent, the four-tile mark; a chosen category lends its colour and
   glyph; open, it is the way back — paper, an accent ring, a ×. */
body.is-phone-studio .phone-category-toggle {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-size: 1.0625rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(31, 63, 168, 0.6);
  -webkit-tap-highlight-color: transparent;
}
body.is-phone-studio .phone-category-toggle svg { width: 20px; height: 20px; }
body.is-phone-studio .phone-category-toggle.is-chosen {
  background: linear-gradient(160deg, var(--poster), var(--poster-deep));
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--poster-deep) 70%, transparent);
}
body.is-phone-studio .phone-category-toggle.is-open {
  border-color: var(--phone-accent-line);
  background: var(--phone-surface);
  color: var(--phone-accent);
  box-shadow: none;
}
body.is-phone-studio .phone-category-toggle.is-open svg { width: 18px; height: 18px; }
/* Open: the status chips and More step aside; the category list takes their room and scrolls
   sideways inside it. */
body.is-phone-studio .phone-filter-strip.is-categories .phone-filter-row,
body.is-phone-studio .phone-filter-strip.is-categories .phone-filter-more { display: none; }
body.is-phone-studio .phone-filter-strip .phone-category-row {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 2px 0 2px;
  border: 0;
  background: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  body.is-phone-studio .phone-filter-strip .phone-category-row { animation: phone-sheet-in 180ms cubic-bezier(.2,.7,.2,1); }
  body.is-phone-studio .phone-category-toggle { transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
}

/* The idea, opened (Detail pass 1) ========================================================
 *
 * The poster a person tapped, unfolded. The top of the idea is a hero in its own family
 * colour — back and the ⋯ door as glass discs, the category on a white chip with its glyph,
 * the name in the greeting's bold sans, the summary, and the idea's still life beside them
 * in a column of its own so no word ever crosses it. The section tabs are the pill across
 * the hero's lower edge. Below, on the canvas: the status, projects, tags and privacy as
 * one chip row; One next move, the thoughts and Related ideas as paper cards in the same
 * language as Home and the Library; each thought with a stage mark, comfortable type, one
 * meta line and fingertip actions; the composer as the compact pill from Home.
 */
body.is-phone-studio .detail-inner { padding-top: 0; }
body.is-phone-studio .detail-hero {
  --poster-hi: color-mix(in oklab, var(--poster) 40%, white);
  --poster-face: color-mix(in oklab, var(--poster) 70%, white);
  --poster-shade: color-mix(in oklab, var(--poster-deep) 68%, black);
  --poster-gold-hi: #f5dca6;
  --poster-gold: #e3b76b;
  --poster-gold-deep: #b1802f;
  position: relative;
  z-index: 0;
  overflow: clip;
  margin: 0 calc(-1 * var(--phone-pad-x)) 0;
  padding: calc(var(--phone-pad-top) + env(safe-area-inset-top, 0px)) var(--phone-pad-x) 46px;
  border-radius: 0 0 34px 34px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.14), transparent 55%),
    linear-gradient(160deg, var(--poster) 0%, var(--poster-deep) 100%);
  color: #fff;
  box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--poster-deep) 62%, transparent);
}
body.is-phone-studio .detail-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -40px;
  bottom: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 62%);
  pointer-events: none;
}
body.is-phone-studio .detail-hero .phone-detail-bar { margin-bottom: 10px; }
body.is-phone-studio .detail-hero .phone-back,
body.is-phone-studio .detail-hero .phone-more {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* The header is two columns: the words, and the still life. */
body.is-phone-studio .detail-hero .detail-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  column-gap: 12px;
  align-items: start;
  margin: 0;
}
body.is-phone-studio .detail-hero .detail-header > * { grid-column: 1; }
body.is-phone-studio .detail-hero-art {
  grid-column: 2;
  grid-row: 1 / span 6;
  align-self: center;
  justify-self: end;
  width: 156px;
  height: 156px;
  margin-right: -40px;
}
body.is-phone-studio .detail-hero-art .poster-scene { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.24)); }
body.is-phone-studio .detail-hero-art .poster-scene.is-mirrored { transform: scaleX(-1); }
body.is-phone-studio .detail-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-self: start;
  min-height: 32px;
  margin: 2px 0 12px;
  padding: 4px 12px 4px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: #1d2130;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
}
body.is-phone-studio .detail-hero-glyph {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--poster) 16%, white);
  color: var(--poster-deep);
  font-size: 0.8125rem;
  line-height: 1;
}
body.is-phone-studio .detail-hero-kicker .category-chip { border: 0; margin: 0; padding: 0; min-height: 0; background: transparent; color: #1d2130; font-size: 0.75rem; font-weight: 600; }
body.is-phone-studio .detail-hero-kicker .working-name-chip { margin-left: 4px; }
body.is-phone-studio .detail-hero textarea.detail-title {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
}
body.is-phone-studio .detail-hero textarea.detail-title:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.75); outline-offset: 4px; border-radius: 6px; }
body.is-phone-studio .detail-hero .detail-summary { margin: 0; color: rgba(255, 255, 255, 0.86); line-height: 1.5; }
/* The section tabs: the pill across the seam when nothing stands between it and the hero. */
body.is-phone-studio .detail-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0;
  margin: 18px 0 14px;
  padding: 4px;
  border: 1px solid var(--phone-line);
  border-radius: 999px;
  background: var(--phone-surface);
  box-shadow: 0 16px 34px -10px rgba(20, 35, 90, 0.28);
}
body.is-phone-studio .detail-hero + .detail-tabs { margin-top: -28px; }
body.is-phone-studio .detail-tabs .tab-button { flex: 1 1 0; justify-content: center; min-height: var(--phone-touch); padding: 0 10px; text-align: center; }
body.is-phone-studio .detail-chip-row { margin: 0 0 18px; }

/* Paper cards for the rest: one radius, one hairline, one shadow. */
body.is-phone-studio .next-move-card,
body.is-phone-studio .add-entry-form,
body.is-phone-studio .relationship-mini,
body.is-phone-studio .thought-card {
  border: 1px solid var(--phone-line);
  border-radius: 20px;
  background: var(--phone-surface);
  box-shadow: var(--phone-shadow);
}
body.is-phone-studio .next-move-card { padding: 16px; }
body.is-phone-studio .next-move-heading small { color: var(--phone-accent); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; }
body.is-phone-studio .next-move-heading h3 { margin-top: 6px; font-family: var(--sans); font-size: 1.125rem; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; }
body.is-phone-studio .next-move-form { grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
body.is-phone-studio .next-move-form textarea,
body.is-phone-studio .next-move-form input { min-height: 44px; border-radius: 14px; }
body.is-phone-studio .next-move-form button { min-height: 44px; border-radius: 999px; }
body.is-phone-studio .detail-section-heading h3 { font-family: var(--sans); font-size: 1.125rem; font-weight: 650; letter-spacing: -0.01em; }
body.is-phone-studio .detail-section-heading span { color: var(--muted); font-size: 0.75rem; }

/* Thoughts: the filters as one row that scrolls, the cards with a stage mark. */
body.is-phone-studio .thought-toolbar .filter-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  margin: 0 calc(-1 * var(--phone-pad-x)) 8px;
  padding: 2px var(--phone-pad-x) 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
body.is-phone-studio .thought-toolbar .filter-strip::-webkit-scrollbar { display: none; }
body.is-phone-studio .thought-toolbar .filter-strip .pill-button { flex: 0 0 auto; min-height: 40px; padding: 0 14px; border-radius: 999px; white-space: nowrap; }
body.is-phone-studio .thought-toolbar .filter-strip .pill-button.is-active { border-color: var(--phone-accent-line); background: var(--phone-accent-wash); color: var(--phone-accent); font-weight: 600; }
body.is-phone-studio .thought-toolbar .form-row { gap: 4px 12px; margin-bottom: 4px; }
body.is-phone-studio .thought-toolbar .text-button { min-height: 40px; }
body.is-phone-studio .thought-list { display: grid; gap: 10px; }
body.is-phone-studio .thought-card { position: relative; gap: 10px; padding: 14px 14px 12px 20px; border-left-width: 1px; }
body.is-phone-studio .thought-card::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--phone-accent-line);
}
body.is-phone-studio .thought-card.is-pinned::before { background: var(--phone-accent); }
body.is-phone-studio .thought-card.is-settled::before { background: #5cac7a; }
body.is-phone-studio .thought-card.is-excluded::before { background: var(--muted-2); }
body.is-phone-studio .thought-card.is-pinned { background: var(--phone-surface); }
body.is-phone-studio .thought-body p { color: var(--text); font-size: 1rem; line-height: 1.6; }
body.is-phone-studio .thought-meta { gap: 6px 8px; margin-top: 8px; }
body.is-phone-studio .thought-chip { min-height: 24px; padding: 0 9px; font-size: 0.6875rem; }
body.is-phone-studio .thought-meta time { font-size: 0.6875rem; }
/* The actions: fingertip pills in one wrapping row, the stage press leading, Delete quiet. */
body.is-phone-studio .thought-controls { gap: 6px; padding-left: 0; }
body.is-phone-studio .thought-controls .text-button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--phone-line);
  border-radius: 999px;
  color: var(--text-soft);
  font-size: 0.8125rem;
  font-weight: 500;
}
body.is-phone-studio .thought-controls .stage-toggle.is-on { border-color: rgba(92, 172, 122, 0.4); background: rgba(92, 172, 122, 0.14); color: #2f6d47; }
body.is-phone-studio .thought-controls .danger-text { margin-left: auto; border-color: transparent; color: var(--danger); }
/* The composer: the compact pill from Home — one line at rest with the Add button in its
   end, a taller field with the button beneath once it holds attention or words. */
body.is-phone-studio .add-entry-form {
  position: relative;
  gap: 0;
  margin-top: 14px;
  padding: 0;
  border-radius: 28px;
  overflow: clip;
}
body.is-phone-studio .add-entry-form textarea {
  min-height: 56px;
  padding: 16px 140px 16px 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 1.0625rem;
  line-height: 1.4;
  resize: none;
}
body.is-phone-studio .add-entry-form textarea:placeholder-shown { height: auto !important; }
body.is-phone-studio .add-entry-form textarea:placeholder-shown:not(:focus) { overflow: hidden; white-space: nowrap; }
body.is-phone-studio .add-entry-form textarea:focus-visible { outline: 0; }
body.is-phone-studio .add-entry-form:focus-within { border-color: var(--phone-accent-line); box-shadow: 0 0 0 4px var(--phone-accent-wash), var(--phone-shadow); }
body.is-phone-studio .add-entry-form .form-row { position: absolute; top: 6px; right: 6px; margin: 0; }
body.is-phone-studio .add-entry-form .form-row .secondary-button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--phone-accent);
  border-radius: 999px;
  background: var(--phone-accent);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
}
body.is-phone-studio .add-entry-form:focus-within textarea,
body.is-phone-studio .add-entry-form:has(textarea:not(:placeholder-shown)) textarea { min-height: 116px; padding: 18px 20px 62px; }
body.is-phone-studio .add-entry-form:focus-within .form-row,
body.is-phone-studio .add-entry-form:has(textarea:not(:placeholder-shown)) .form-row { top: auto; bottom: 8px; right: 8px; }

/* Related ideas: one column of paper rows, each a door with a chevron. */
body.is-phone-studio .relationship-mini-grid { grid-template-columns: 1fr; gap: 8px; }
body.is-phone-studio .relationship-mini {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: center;
  column-gap: 10px;
  padding: 12px 14px;
  text-align: left;
}
body.is-phone-studio .relationship-mini::after { content: "›"; grid-column: 2; grid-row: 1 / span 2; color: var(--muted-2); font-size: 1.25rem; text-align: center; }
body.is-phone-studio .relationship-mini strong { display: block; color: var(--text); font-family: var(--sans); font-size: 0.9375rem; font-weight: 650; }
body.is-phone-studio .relationship-mini span { display: block; margin-top: 2px; color: var(--muted); font-size: 0.8125rem; line-height: 1.4; }
@media (prefers-reduced-motion: no-preference) {
  body.is-phone-studio .add-entry-form textarea { transition: min-height 220ms cubic-bezier(.2,.7,.2,1), padding 220ms cubic-bezier(.2,.7,.2,1); }
}

/* Detail pass 1, corrected: the still life takes its own column (the header's blanket
   column rule outranked it), and the status, projects, tags and privacy chips stay in the
   hero — after the summary, before the tabs, the reading order MUI-1 pinned — as glass
   pills on the colour, spanning both columns beneath the words and the object. */
body.is-phone-studio .detail-hero .detail-header > .detail-hero-art { grid-column: 2; }
body.is-phone-studio .detail-hero .detail-header > .detail-chip-row { grid-column: 1 / -1; margin: 16px 0 0; }
/* The names tray takes the whole width, like the chips do. Left in the words column it was a
   list of names squeezed into a little over half the screen, standing beside the idea's own
   artwork with "Built on this device" wrapping onto three lines inside each row — it read as
   a popover that had come up in the wrong place rather than as the studio offering a choice. */
body.is-phone-studio .detail-hero .detail-header > .pickup-tray { grid-column: 1 / -1; margin: 14px 0 0; }
body.is-phone-studio .detail-hero .detail-chip-row .category-chip,
body.is-phone-studio .detail-hero .detail-chip-row .context-chip,
body.is-phone-studio .detail-hero .detail-chip-row .working-name-chip,
body.is-phone-studio .detail-hero .detail-chip-row .privacy-badge,
body.is-phone-studio .detail-hero .detail-chip-row .status-select {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-weight: 500;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body.is-phone-studio .detail-hero .detail-chip-row .status-select {
  border-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.22);
  font-weight: 600;
}
body.is-phone-studio .detail-hero .detail-chip-row .privacy-badge { border-color: rgba(245, 220, 166, 0.6); background: rgba(226, 181, 107, 0.28); color: #fff; }
body.is-phone-studio .detail-hero .detail-chip-row svg { stroke: currentColor; }
body.is-phone-studio .detail-hero .detail-chip-row option { color: var(--text); }
/* The row of doors under the thought filters wraps; a long label breaks between its words
   rather than running past the panel at a large text size. */
body.is-phone-studio .thought-toolbar .form-row { display: flex; flex-wrap: wrap; align-items: center; }
body.is-phone-studio .thought-toolbar .form-row .text-button { max-width: 100%; white-space: normal; text-align: left; }

/* Detail pass 1, corrected again: the category leads the chip row (nothing is drawn above
   the name — MUI-1), so the white kicker pill sits among the glass chips; and the thought
   toolbar is a one-column grid whose track cannot be widened by the non-wrapping filter
   strip inside it, so its doors never run past the panel at a large text size. */
body.is-phone-studio .detail-hero .detail-chip-row .detail-hero-kicker { margin: 0; min-height: var(--phone-chip); }
body.is-phone-studio .detail-hero .detail-chip-row .detail-hero-kicker .category-chip { border: 0; background: transparent; color: #1d2130; font-weight: 600; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; min-height: 0; }
body.is-phone-studio .thought-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
body.is-phone-studio .thought-toolbar .filter-strip { min-width: 0; }
body.is-phone-studio .thought-toolbar .form-row { min-width: 0; justify-content: flex-start; }

/* The idea's rooms (Detail pass 2) ========================================================
 *
 * Herv's brief: the whole page under an idea — the Overview, the Checklist, the Brief and the
 * Develop tab — and the thought cards themselves, creative, premium and of a piece with Home
 * and the Library. The one device that ties the rooms together: the colour the idea's poster
 * wore follows it inside. `.detail-inner` carries the same art-<family> class the hero does,
 * so every surface beneath the hero borrows the idea's own colour for its accents — the mark
 * on each thought, the checklist's ring and ticks, the brief's progress, the Prompt Studio's
 * chosen tiles and its one big button — and no second palette is invented for the page.
 */
body.is-phone-studio :is(.detail-inner, .confirm-dialog) {
  --idea: var(--poster, var(--phone-accent));
  --idea-deep: var(--poster-deep, var(--phone-accent));
  --idea-wash: color-mix(in srgb, var(--idea) 8%, white);
  --idea-wash-2: color-mix(in srgb, var(--idea) 16%, white);
  --idea-line: color-mix(in srgb, var(--idea) 34%, white);
  --idea-ink: color-mix(in oklab, var(--idea-deep) 82%, black);
  --idea-gradient: linear-gradient(135deg, var(--idea), var(--idea-deep));
  --idea-glow: 0 12px 26px -12px color-mix(in srgb, var(--idea-deep) 70%, transparent);
}

/* --- Overview: the direction, and the way into the checklist ----------------------- */
body.is-phone-studio .next-move-card {
  position: relative;
  overflow: clip;
  padding: 18px 16px 16px;
  border-radius: 22px;
  background:
    radial-gradient(90% 80% at 100% 0%, var(--idea-wash-2), transparent 62%),
    var(--phone-surface);
}
body.is-phone-studio .next-move-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 22px;
  left: 22px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--idea-gradient);
}
body.is-phone-studio .next-move-heading small { display: inline-flex; align-items: center; gap: 8px; color: var(--idea-ink); }
body.is-phone-studio .next-move-heading small::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--idea-gradient); }
body.is-phone-studio .next-move-form textarea,
body.is-phone-studio .next-move-form input { border: 1px solid var(--phone-line); background: color-mix(in srgb, var(--idea) 3%, white); color: var(--text); font-size: 1rem; }
body.is-phone-studio .next-move-form textarea:focus-visible,
body.is-phone-studio .next-move-form input:focus-visible { outline: 0; border-color: var(--idea-line); box-shadow: 0 0 0 4px var(--idea-wash); }
body.is-phone-studio .next-move-form button { border: 1px solid var(--idea-line); background: var(--phone-surface); color: var(--idea-ink); font-weight: 600; }
body.is-phone-studio .checklist-teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--phone-line);
  border-radius: 20px;
  background: var(--phone-surface);
  box-shadow: var(--phone-shadow);
}
body.is-phone-studio .checklist-teaser > div:first-child { grid-column: 1; grid-row: 1; min-width: 0; }
body.is-phone-studio .checklist-teaser small { color: var(--idea-ink); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; }
body.is-phone-studio .checklist-teaser strong { display: block; margin-top: 2px; color: var(--text); font-family: var(--sans); font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.01em; }
body.is-phone-studio .checklist-teaser .checklist-meter { grid-column: 1 / -1; grid-row: 2; height: 6px; background: var(--idea-wash-2); }
body.is-phone-studio .checklist-teaser .checklist-meter i { background: var(--idea-gradient); }
body.is-phone-studio .checklist-teaser-go { grid-column: 2; grid-row: 1; color: var(--idea-ink); font-size: 0.875rem; font-weight: 600; white-space: nowrap; }

/* --- Thoughts: the tools ----------------------------------------------------------- */
body.is-phone-studio .detail-section-heading { align-items: baseline; margin-bottom: 10px; }
body.is-phone-studio .thought-toolbar .filter-strip .pill-button { min-height: var(--phone-touch); padding: 0 15px; border-color: var(--phone-line); background: var(--phone-surface); color: var(--text-soft); font-size: 0.8125rem; font-weight: 500; }
body.is-phone-studio .thought-toolbar .filter-strip .pill-button.is-active { border-color: var(--idea-line); background: var(--idea-wash-2); color: var(--idea-ink); font-weight: 600; }
body.is-phone-studio .thought-toolbar .form-row { gap: 8px; margin-bottom: 8px; }
body.is-phone-studio .thought-toolbar .form-row .text-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--phone-touch);
  padding: 0 14px;
  border: 1px dashed var(--idea-line);
  border-radius: 999px;
  background: transparent;
  color: var(--idea-ink);
  font-size: 0.8125rem;
  font-weight: 500;
}
body.is-phone-studio .thought-toolbar .form-row .thought-order { border-style: solid; border-color: var(--phone-line); background: var(--phone-surface); color: var(--text-soft); }
body.is-phone-studio .thought-toolbar .form-row .thought-order i { color: var(--idea-ink); font-style: normal; }
body.is-phone-studio .entry-filter {
  width: 100%;
  min-height: 48px;
  margin: 2px 0 12px;
  padding: 0 18px;
  border: 1px solid var(--phone-line);
  border-radius: 999px;
  background: var(--phone-surface);
  color: var(--text);
  font-size: 1rem;
  box-shadow: var(--phone-shadow);
}
body.is-phone-studio .entry-filter:focus { outline: 0; border-color: var(--idea-line); box-shadow: 0 0 0 4px var(--idea-wash), var(--phone-shadow); }

/* --- Thoughts: the cards ------------------------------------------------------------ */
body.is-phone-studio .thought-card {
  gap: 12px;
  padding: 16px 16px 12px;
  border: 1px solid var(--phone-line);
  border-radius: 22px;
  background: var(--phone-surface);
  box-shadow: var(--phone-shadow);
  overflow: clip;
}
body.is-phone-studio .thought-card::before { content: none; }
body.is-phone-studio .thought-card.is-pinned { border-color: rgba(217, 176, 106, 0.6); background: linear-gradient(180deg, rgba(245, 220, 166, 0.18), transparent 46%), var(--phone-surface); }
body.is-phone-studio .thought-card.is-settled { opacity: 1; background: color-mix(in srgb, var(--phone-surface) 96%, #5cac7a); }
body.is-phone-studio .thought-card.is-settled .thought-body p { color: var(--text-soft); }
body.is-phone-studio .thought-card.is-excluded { opacity: 1; border-style: dashed; }
body.is-phone-studio .thought-card.is-excluded .thought-body p { color: var(--muted); }
body.is-phone-studio .thought-card-main { gap: 12px; }
body.is-phone-studio .thought-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--idea-line);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--idea-wash-2), var(--idea-wash));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  color: var(--idea-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}
body.is-phone-studio .thought-card.is-pinned .thought-mark { border-color: #d9b06a; background: linear-gradient(145deg, #f8e6bd, #e3b76b); color: #6b4a12; }
body.is-phone-studio .thought-card.is-settled .thought-mark { border-color: rgba(92, 172, 122, 0.5); background: linear-gradient(145deg, #e4f3e9, #c9e7d3); color: #2f6d47; }
body.is-phone-studio .thought-card.is-excluded .thought-mark,
body.is-phone-studio .thought-card.is-inactive .thought-mark { border-style: dashed; border-color: var(--phone-line); background: #f1f2f6; box-shadow: none; color: var(--muted); }
body.is-phone-studio .thought-body p { color: var(--text); font-size: 1rem; line-height: 1.6; }
body.is-phone-studio .thought-meta { gap: 6px 8px; margin-top: 8px; }
body.is-phone-studio .thought-meta .thought-chip:where(:not(.is-local):not(.is-shared):not(.is-stage):not(.is-archived)) { background: var(--idea-wash); color: var(--idea-ink); }
body.is-phone-studio .thought-meta time { color: var(--muted); font-size: 0.75rem; }
body.is-phone-studio .thought-controls { gap: 8px; padding: 10px 0 0; border-top: 1px solid color-mix(in srgb, var(--phone-line) 70%, transparent); }
body.is-phone-studio .thought-controls .text-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--phone-touch);
  padding: 0 14px;
  border: 1px solid var(--phone-line);
  border-radius: 999px;
  background: var(--phone-surface);
  color: var(--text-soft);
  font-size: 0.8125rem;
  font-weight: 500;
}
body.is-phone-studio .thought-controls .stage-toggle { border-color: var(--idea-line); background: var(--idea-wash); color: var(--idea-ink); font-weight: 600; }
body.is-phone-studio .thought-controls .stage-toggle.is-on { border-color: rgba(92, 172, 122, 0.45); background: rgba(92, 172, 122, 0.16); color: #2f6d47; }
body.is-phone-studio .thought-controls .danger-text { margin-left: auto; border-color: transparent; background: transparent; color: var(--danger); }
body.is-phone-studio .add-entry-form:focus-within { border-color: var(--idea-line); box-shadow: 0 0 0 4px var(--idea-wash), var(--phone-shadow); }
body.is-phone-studio .add-entry-form .form-row .secondary-button { border-color: transparent; background: var(--idea-gradient); box-shadow: var(--idea-glow); }

/* --- Related ideas: each with its own still life --------------------------------------- */
body.is-phone-studio .relationship-mini.has-tile { grid-template-columns: 48px minmax(0, 1fr) 20px; padding: 10px 14px 10px 10px; }
body.is-phone-studio .relationship-mini .row-tile { grid-column: 1; grid-row: 1 / span 2; width: 48px; height: 48px; border-radius: 14px; }
body.is-phone-studio .relationship-mini.has-tile strong,
body.is-phone-studio .relationship-mini.has-tile span { grid-column: 2; }
body.is-phone-studio .relationship-mini.has-tile::after { grid-column: 3; }

/* --- Checklist ----------------------------------------------------------------------- */
body.is-phone-studio .checklist-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  row-gap: 14px;
  margin-bottom: 12px;
  padding: 16px;
  border: 1px solid var(--phone-line);
  border-radius: 22px;
  background:
    radial-gradient(90% 80% at 100% 0%, var(--idea-wash), transparent 62%),
    var(--phone-surface);
  box-shadow: var(--phone-shadow);
}
body.is-phone-studio .checklist-head > div { grid-column: 2; min-width: 0; }
body.is-phone-studio .checklist-head:not(:has(.checklist-ring)) > div { grid-column: 1 / -1; }
body.is-phone-studio .checklist-head h3 { margin: 0 0 3px; color: var(--text); font-family: var(--sans); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
body.is-phone-studio .checklist-head p { color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
body.is-phone-studio .checklist-head > .secondary-button {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: var(--phone-touch);
  padding: 0 16px;
  border: 1px dashed var(--idea-line);
  border-radius: 999px;
  background: transparent;
  color: var(--idea-ink);
  font-size: 0.8125rem;
  font-weight: 600;
}
body.is-phone-studio .checklist-ring { position: relative; grid-column: 1; display: grid; place-items: center; width: 64px; height: 64px; }
body.is-phone-studio .checklist-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; transform: rotate(-90deg); }
body.is-phone-studio .checklist-ring .ring-track { stroke: var(--idea-wash-2); stroke-width: 4; }
body.is-phone-studio .checklist-ring .ring-fill { stroke: var(--idea); stroke-width: 4; stroke-linecap: round; }
body.is-phone-studio .checklist-ring b { position: relative; color: var(--text); font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
body.is-phone-studio .checklist-ring b i { color: var(--muted); font-size: 0.75rem; font-style: normal; font-weight: 600; }
body.is-phone-studio .checklist-ring.is-empty {
  width: 56px;
  height: 56px;
  border: 1px solid var(--idea-line);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--idea-wash-2), var(--idea-wash));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
body.is-phone-studio .checklist-ring.is-empty svg { position: static; width: 26px; height: 26px; stroke: var(--idea-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform: none; }
body.is-phone-studio .stale-banner {
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(217, 176, 106, 0.55);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(245, 220, 166, 0.3), rgba(245, 220, 166, 0.12));
  color: #6b4a12;
  font-size: 0.8125rem;
  line-height: 1.5;
}
body.is-phone-studio .stale-banner .secondary-button,
body.is-phone-studio .stale-banner .text-button { min-height: var(--phone-touch); border-radius: 999px; }
body.is-phone-studio .checklist-add {
  gap: 6px;
  margin-bottom: 12px;
  padding: 5px;
  border: 1px solid var(--phone-line);
  border-radius: 28px;
  background: var(--phone-surface);
  box-shadow: var(--phone-shadow);
}
body.is-phone-studio .checklist-add input { min-height: 46px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--text); font-size: 1rem; }
body.is-phone-studio .checklist-add input:focus { border: 0; outline: 0; }
body.is-phone-studio .checklist-add:focus-within { border-color: var(--idea-line); box-shadow: 0 0 0 4px var(--idea-wash), var(--phone-shadow); }
body.is-phone-studio .checklist-add .secondary-button {
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--idea-gradient);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  box-shadow: var(--idea-glow);
}
body.is-phone-studio .pickup-tray { margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--phone-line); border-radius: 20px; background: var(--phone-surface); box-shadow: var(--phone-shadow); }
body.is-phone-studio .pickup-head > div > span { color: var(--idea-ink); }
body.is-phone-studio .pickup-list li { grid-template-columns: auto minmax(0, 1fr) auto; padding: 10px 8px 10px 10px; border-color: transparent; border-radius: 14px; background: var(--idea-wash); }
body.is-phone-studio .pickup-add { border-color: var(--idea-line); background: var(--phone-surface); color: var(--idea-ink); }
body.is-phone-studio .checklist-list { gap: 10px; }
body.is-phone-studio .checklist-row {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: start;
  padding: 14px 12px 8px 16px;
  border: 1px solid var(--phone-line);
  border-radius: 20px;
  background: var(--phone-surface);
  box-shadow: var(--phone-shadow);
}
body.is-phone-studio .checklist-row.is-done { background: color-mix(in srgb, var(--phone-surface) 94%, var(--idea)); }
body.is-phone-studio .checklist-tick { width: 28px; height: 28px; margin-top: 4px; border: 2px solid var(--idea-line); border-radius: 50%; background: var(--phone-surface); color: #fff; font-size: 0.875rem; font-weight: 700; }
body.is-phone-studio .checklist-row.is-done .checklist-tick { border-color: transparent; background: var(--idea-gradient); }
body.is-phone-studio .checklist-body { grid-column: 2; }
body.is-phone-studio .checklist-title { padding: 5px 0 3px; color: var(--text); font-size: 1rem; line-height: 1.45; }
body.is-phone-studio .checklist-row.is-done .checklist-title { color: var(--muted); }
body.is-phone-studio .checklist-body small { margin-top: 2px; color: var(--muted); font-size: 0.75rem; }
body.is-phone-studio .checklist-row-actions { grid-column: 2; justify-content: flex-end; gap: 2px; margin-right: -4px; }
body.is-phone-studio .checklist-row-actions .icon-button { border-color: transparent; background: transparent; color: var(--muted); }
body.is-phone-studio .detail-inner .empty-state { border: 1px dashed var(--idea-line); border-radius: 20px; background: var(--idea-wash); }
body.is-phone-studio .detail-inner .empty-state p { color: var(--text-soft); }

/* --- The brief ------------------------------------------------------------------------ */
body.is-phone-studio .dna-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 4px 14px;
  margin-bottom: 14px;
  padding: 18px 16px 16px;
  border: 1px solid var(--phone-line);
  border-radius: 22px;
  background:
    radial-gradient(90% 80% at 100% 0%, var(--idea-wash), transparent 62%),
    var(--phone-surface);
  box-shadow: var(--phone-shadow);
}
body.is-phone-studio .dna-orbit {
  width: 48px;
  height: 48px;
  border: 1px solid var(--idea-line);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--idea-wash-2), var(--idea-wash));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  color: var(--idea-ink);
  font-size: 1.125rem;
}
body.is-phone-studio .dna-intro > div { min-width: 0; }
body.is-phone-studio .dna-intro h3 { margin: 0 0 4px; color: var(--text); font-family: var(--sans); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
body.is-phone-studio .dna-intro p { color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
body.is-phone-studio .dna-dots { display: flex; gap: 5px; margin: 12px 0 6px; }
body.is-phone-studio .dna-dots i { flex: 1 1 0; height: 6px; border-radius: 3px; background: var(--idea-wash-2); }
body.is-phone-studio .dna-dots i.is-on { background: var(--idea-gradient); }
body.is-phone-studio .dna-intro .dna-status { margin: 0; color: var(--idea-ink); font-size: 0.75rem; font-weight: 600; }
body.is-phone-studio .dna-form { grid-template-columns: 1fr; gap: 14px; }
body.is-phone-studio .dna-group {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--phone-line);
  border-radius: 22px;
  background: var(--phone-surface);
  box-shadow: var(--phone-shadow);
}
body.is-phone-studio .dna-group-name { margin: 0 0 -2px; color: var(--idea-ink); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
body.is-phone-studio .dna-field { gap: 4px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--phone-line) 70%, transparent); }
body.is-phone-studio .dna-group .dna-field:first-of-type { padding-top: 0; border-top: 0; }
body.is-phone-studio .dna-field > span { display: flex; align-items: center; gap: 8px; color: var(--text); font-family: var(--sans); font-size: 0.9375rem; font-weight: 650; letter-spacing: -0.005em; }
body.is-phone-studio .dna-field.is-written > span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--idea); }
body.is-phone-studio .dna-field > .dna-hint { order: 1; margin: 0 0 6px; color: var(--muted); font-size: 0.8125rem; line-height: 1.45; }
body.is-phone-studio .dna-field > textarea {
  order: 2;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid var(--phone-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--idea) 3%, white);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.5;
}
body.is-phone-studio .dna-field > textarea:focus-visible { outline: 0; border-color: var(--idea-line); box-shadow: 0 0 0 4px var(--idea-wash); }
body.is-phone-studio .dna-actions { display: grid; gap: 10px; margin-top: 2px; }
body.is-phone-studio .dna-actions .primary-button {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 999px;
  background: var(--idea-gradient);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: var(--idea-glow);
}
body.is-phone-studio .dna-note { color: var(--muted); font-size: 0.75rem; line-height: 1.5; text-align: center; }

/* --- Develop: the Prompt Studio in the idea's colour ---------------------------------- */
body.is-phone-studio .prompt-phone-head { margin: 0 0 14px; }
body.is-phone-studio .prompt-phone-head .phone-kicker { color: var(--idea-ink); }
body.is-phone-studio .prompt-phone-head h3 { color: var(--text); font-family: var(--sans); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; }
body.is-phone-studio .prompt-panel { padding: 16px; border-radius: 22px; }
body.is-phone-studio .prompt-fieldset.is-plain > legend { color: var(--idea-ink); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
body.is-phone-studio .is-phone-prompt .prompt-choice {
  position: relative;
  min-height: 56px;
  padding: 10px 14px 10px 40px;
  border: 1px solid var(--phone-line);
  border-radius: 16px;
  background: var(--phone-surface);
}
body.is-phone-studio .is-phone-prompt .prompt-choice::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 13px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border: 2px solid var(--phone-line);
  border-radius: 50%;
  background: #fff;
}
body.is-phone-studio .is-phone-prompt .prompt-choice input { position: absolute; top: 50%; left: 13px; width: 18px; height: 18px; margin: -9px 0 0; opacity: 0; }
body.is-phone-studio .is-phone-prompt .prompt-choice:has(input:focus-visible) { border-color: var(--idea-line); box-shadow: 0 0 0 3px var(--idea-wash-2); }
body.is-phone-studio .is-phone-prompt .prompt-choice.is-chosen { border-color: var(--idea-line); background: var(--idea-wash); }
body.is-phone-studio .is-phone-prompt .prompt-choice.is-chosen::before { border-color: var(--idea); background: radial-gradient(circle, var(--idea) 0 4px, #fff 5px); }
body.is-phone-studio .is-phone-prompt .prompt-choice strong { color: var(--text); font-weight: 600; }
body.is-phone-studio .is-phone-prompt .prompt-choice.is-chosen strong { color: var(--idea-ink); }
body.is-phone-studio .prompt-more-objectives { border: 1px solid var(--phone-line); border-radius: 16px; background: var(--phone-surface); }
body.is-phone-studio .prompt-depth-row .phone-mode.is-active { background: var(--idea-wash-2); color: var(--idea-ink); font-weight: 600; }
body.is-phone-studio .prompt-section > summary::-webkit-details-marker { display: none; }
body.is-phone-studio .prompt-section > summary::after { content: "▾"; margin-left: 6px; color: var(--muted); }
body.is-phone-studio .prompt-section[open] > summary::after { content: "▴"; }
body.is-phone-studio .is-phone-prompt .prompt-advanced { border: 1px solid var(--phone-line); border-radius: 16px; background: var(--phone-surface); }
body.is-phone-studio .is-phone-prompt .prompt-advanced > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text); font-weight: 600; list-style: none; }
body.is-phone-studio .is-phone-prompt .prompt-advanced > summary::-webkit-details-marker { display: none; }
body.is-phone-studio .is-phone-prompt .prompt-advanced > summary::after { content: "▾"; color: var(--muted); font-weight: 400; }
body.is-phone-studio .is-phone-prompt .prompt-advanced[open] > summary::after { content: "▴"; }
body.is-phone-studio .prompt-generate-full {
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  background: var(--idea-gradient);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--idea-glow);
}
body.is-phone-studio .is-phone-prompt .prompt-mode { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--idea-wash); color: var(--text-soft); font-size: 0.8125rem; line-height: 1.5; }
body.is-phone-studio .is-phone-prompt .prompt-mode strong { color: var(--idea-ink); }
body.is-phone-studio .is-phone-prompt .prompt-output-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 0.8125rem; }
/* The prompt this panel writes runs to a couple of thousand characters, and 220px of a phone
   showed about a seventh of one — a document read and edited through a porthole. The window
   takes the better part of the screen instead, which is what the thing inside it is worth,
   while staying short enough that the Copy button below stays within reach of a scroll. */
body.is-phone-studio .is-phone-prompt .prompt-output {
  min-height: min(58vh, 560px);
  padding: 14px 16px;
  border: 1px solid var(--phone-line);
  border-radius: 18px;
  background: var(--phone-surface);
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.55;
  box-shadow: var(--phone-shadow);
}
body.is-phone-studio .is-phone-prompt .prompt-result-actions { gap: 8px; margin-top: 10px; }
body.is-phone-studio .is-phone-prompt .prompt-result-actions .secondary-button { min-height: var(--phone-touch); border: 0; border-radius: 999px; background: var(--idea-gradient); color: #fff; font-weight: 600; }
body.is-phone-studio .is-phone-prompt .prompt-result-actions .ghost-button { min-height: var(--phone-touch); border: 1px solid var(--phone-line); border-radius: 999px; }

/* --- Timeline ------------------------------------------------------------------------ */
body.is-phone-studio .receipt-card {
  padding: 14px 16px 12px 18px;
  border: 1px solid var(--phone-line);
  border-left: 3px solid #e3b76b;
  border-radius: 6px 18px 18px 6px;
  background: var(--phone-surface);
  box-shadow: var(--phone-shadow);
}
body.is-phone-studio .receipt-card span { color: #8a6b46; font-size: 0.6875rem; letter-spacing: 0.1em; }
body.is-phone-studio .receipt-card p { color: var(--text); font-size: 0.9375rem; line-height: 1.5; }
body.is-phone-studio .receipt-card time { font-size: 0.75rem; }
body.is-phone-studio .activity-list { padding: 4px 16px; border: 1px solid var(--phone-line); border-radius: 18px; background: var(--phone-surface); box-shadow: var(--phone-shadow); }
body.is-phone-studio .activity-row span { font-size: 0.875rem; }
body.is-phone-studio .activity-row time { font-size: 0.75rem; }
@media (prefers-reduced-motion: no-preference) {
  body.is-phone-studio .checklist-ring .ring-fill { transition: stroke-dasharray 420ms cubic-bezier(.2,.7,.2,1); }
  body.is-phone-studio .checklist-tick { transition: background 160ms ease, border-color 160ms ease; }
  body.is-phone-studio .is-phone-prompt .prompt-choice { transition: border-color 160ms ease, background 160ms ease; }
  body.is-phone-studio .thought-controls .text-button { transition: background 140ms ease, border-color 140ms ease; }
}

/* Detail pass 2, corrected: the desktop's card art paints a gradient on ANY element wearing
   an art-<family> class, so the page body that now carries the idea's family for its tokens
   paints none; the related idea's tile is a <span> too, so the rule that sends the row's
   words to the second column names the words and not the tile; the next move's top ribbon
   read as a heavy bar in the darker families and goes; the thought mark's glyph is larger;
   a step's title wraps in a box that grows to it; and a source section's summary keeps its
   name and count on their own lines rather than wrapping the count around the chevron. */
body.is-phone-studio .detail-inner { background: none; }
body.is-phone-studio .next-move-card::before { content: none; }
body.is-phone-studio .thought-mark { font-size: 1.125rem; }
body.is-phone-studio .relationship-mini.has-tile > .row-tile { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
body.is-phone-studio .relationship-mini.has-tile > span:not(.row-tile) { grid-column: 2; }
body.is-phone-studio textarea.checklist-title {
  display: block;
  width: 100%;
  min-height: 2.25rem;
  padding: 5px 0 3px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
  resize: none;
  overflow: hidden;
  field-sizing: content;
}
body.is-phone-studio textarea.checklist-title:focus-visible { outline: 0; border-bottom-color: var(--idea-line); }
body.is-phone-studio .checklist-row.is-done textarea.checklist-title { color: var(--muted); text-decoration: line-through; }
body.is-phone-studio .prompt-section > summary { flex-wrap: wrap; row-gap: 2px; padding: 8px 0; }
body.is-phone-studio .prompt-section > summary > span { flex: 1 1 auto; color: var(--text); font-weight: 600; }
body.is-phone-studio .prompt-section > summary > small { flex: 1 1 100%; order: 3; margin-left: 0; }
body.is-phone-studio .prompt-section > summary::after { order: 2; }

/* Detail pass 2, the card's footer: the stage press stays a pill on the left; Copy, Manage
   and Delete are quiet text doors gathered at the right, separated by dots, so a thought's
   card ends in one line instead of a row of four pills with Delete stranded beneath them.
   The group wraps whole to a second line, right-aligned, when the row is too narrow. */
body.is-phone-studio .thought-controls { justify-content: space-between; }
body.is-phone-studio .thought-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 2px; margin-left: auto; }
body.is-phone-studio .thought-tools .text-button { padding: 0 8px; border-color: transparent; background: transparent; color: var(--text-soft); }
body.is-phone-studio .thought-tools .text-button + .text-button::before { content: "·"; margin-right: 8px; color: var(--muted-2); }
body.is-phone-studio .thought-tools .danger-text { margin-left: 0; }
body.is-phone-studio .thought-mark { font-size: 1.25rem; }
body.is-phone-studio .checklist-row-actions .icon-button { font-size: 1.125rem; }
/* The next move's field shows its two-line placeholder whole at a large text size. */
body.is-phone-studio .next-move-form textarea { min-height: 64px; }

/* Detail pass 2, the Develop tab's empty spaces: the More objectives summary is a grid — the
   name and the chevron on the first line, the list of names beneath them — rather than a
   wrapping flex row that pushed the chevron onto a third line below an empty band; and when
   the objective tiles are an odd number, the last one takes the whole row instead of leaving
   an empty cell beside a label broken over two lines. */
body.is-phone-studio .prompt-more-objectives > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 2px; }
body.is-phone-studio .prompt-more-objectives > summary::after { grid-column: 2; grid-row: 1; margin-left: 0; }
body.is-phone-studio .prompt-more-objectives > summary small { grid-column: 1 / -1; }
body.is-phone-studio .is-phone-prompt .prompt-choice-grid:not(.is-thirds) > .prompt-choice:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Detail pass 2, the privacy status (Herv): "Syncs across devices" left the chip row, which
   now ends on the tags, and the idea's privacy stands between Back and More as a glass pill
   the height of the two discs — a lock and "Local only", or a cloud and "Cloud". It is the
   same button, so a tap still opens the confirmation for either direction. */
body.is-phone-studio .phone-detail-status { display: flex; justify-content: center; min-width: 0; }
body.is-phone-studio .phone-detail-status > button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-height: var(--phone-touch);
  margin: 0;
  padding: 0 15px 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body.is-phone-studio .phone-detail-status > button.privacy-badge { border-color: rgba(245, 220, 166, 0.6); background: rgba(226, 181, 107, 0.3); }
body.is-phone-studio .phone-detail-status > button svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.is-phone-studio .phone-detail-status > button:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.8); outline-offset: 2px; }

/* The Thoughts lens (Detail pass 2, Herv: "the sorting goes off the page… the empty space…
   boring"). One door names the filter in force and how many thoughts it shows, with the
   reading-order pill beside it; opened, it lays every filter out beneath with its own count,
   wrapping — nothing scrolls sideways. Link and Split are two equal dashed doors on one row.
   Everything borrows the idea's colour. */
body.is-phone-studio .thought-lens { display: grid; gap: 8px; margin-bottom: 12px; }
body.is-phone-studio .thought-lens-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
body.is-phone-studio .thought-lens-door {
  display: flex;
  flex: 1 1 200px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 54px;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--phone-line);
  border-radius: 18px;
  background: var(--phone-surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  box-shadow: var(--phone-shadow);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.is-phone-studio .thought-lens-door:focus-visible { outline: 2px solid var(--idea-line); outline-offset: 2px; }
body.is-phone-studio .thought-lens.is-open .thought-lens-door { border-color: var(--idea-line); background: var(--idea-wash); }
body.is-phone-studio .thought-lens-glyph {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: var(--idea-gradient);
  color: #fff;
  box-shadow: var(--idea-glow);
}
body.is-phone-studio .thought-lens-glyph svg { width: 19px; height: 19px; }
body.is-phone-studio .thought-lens-words { display: grid; flex: 1 1 auto; gap: 1px; min-width: 0; }
body.is-phone-studio .thought-lens-words small { color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
body.is-phone-studio .thought-lens-words strong { color: var(--text); font-family: var(--sans); font-size: 0.9375rem; font-weight: 650; letter-spacing: -0.01em; overflow-wrap: anywhere; }
body.is-phone-studio .thought-lens-count {
  flex: none;
  min-width: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--idea-wash-2);
  color: var(--idea-ink);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 28px;
  text-align: center;
}
body.is-phone-studio .thought-lens-chevron { display: grid; flex: none; place-items: center; width: 22px; height: 22px; color: var(--muted); }
body.is-phone-studio .thought-lens-chevron svg { width: 16px; height: 16px; transform: rotate(90deg); }
body.is-phone-studio .thought-lens.is-open .thought-lens-chevron svg { transform: rotate(-90deg); }
body.is-phone-studio .thought-lens-row .thought-order {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 6px;
  min-height: 54px;
  padding: 0 14px;
  border: 1px solid var(--phone-line);
  border-radius: 18px;
  background: var(--phone-surface);
  color: var(--text-soft);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: normal;
  box-shadow: var(--phone-shadow);
}
body.is-phone-studio .thought-lens-row .thought-order i { color: var(--idea-ink); font-style: normal; font-weight: 700; }
body.is-phone-studio .thought-lens-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--idea-line);
  border-radius: 18px;
  background: var(--phone-surface);
  box-shadow: var(--phone-shadow);
  overflow: visible;
}
body.is-phone-studio .thought-lens-panel[hidden] { display: none; }
body.is-phone-studio .thought-lens-panel .pill-button {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 8px;
  min-height: var(--phone-touch);
  padding: 0 6px 0 14px;
  border: 1px solid var(--phone-line);
  border-radius: 999px;
  background: var(--phone-surface);
  color: var(--text-soft);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: normal;
}
body.is-phone-studio .thought-lens-panel .pill-button b {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--idea-wash);
  color: var(--idea-ink);
  font-size: 0.75rem;
  font-weight: 700;
}
body.is-phone-studio .thought-lens-panel .pill-button.is-active { border-color: var(--idea-line); background: var(--idea-wash-2); color: var(--idea-ink); font-weight: 600; }
body.is-phone-studio .thought-lens-panel .pill-button.is-active b { background: var(--idea-gradient); color: #fff; }
body.is-phone-studio .thought-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0; }
body.is-phone-studio .thought-doors .text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--phone-touch);
  padding: 8px 12px;
  border: 1px dashed var(--idea-line);
  border-radius: 16px;
  background: transparent;
  color: var(--idea-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  white-space: normal;
}
@media (prefers-reduced-motion: no-preference) {
  body.is-phone-studio .thought-lens-door { transition: background 160ms ease, border-color 160ms ease; }
  body.is-phone-studio .thought-lens-chevron svg { transition: transform 200ms cubic-bezier(.2,.7,.2,1); }
  body.is-phone-studio .thought-lens-panel { animation: phone-sheet-in 180ms cubic-bezier(.2,.7,.2,1); }
}

/* Thought cards, after Herv's planner reference (Detail pass 2f) ==========================
   A ring to tick at the top left with the word beside it, the time at the right; the words
   with the kind's disc beside them — the reference's big tinted circle; the chips beneath
   only when something is not the default; the doors as quiet text at the foot. */
body.is-phone-studio .thought-card { padding: 10px 16px 10px; }
body.is-phone-studio .thought-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px -8px; }
body.is-phone-studio .thought-top .stage-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--phone-touch);
  padding: 0 10px 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
body.is-phone-studio .thought-top .stage-toggle.is-on { padding: 0 10px 0 8px; background: transparent; color: var(--idea-ink); }
body.is-phone-studio .thought-top .stage-ring {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--idea-line);
  border-radius: 50%;
  background: var(--phone-surface);
  color: transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
}
body.is-phone-studio .thought-top .stage-toggle.is-on .stage-ring { border-color: transparent; background: var(--idea-gradient); color: #fff; box-shadow: var(--idea-glow); }
body.is-phone-studio .thought-top .stage-toggle:focus-visible { outline: 2px solid var(--idea-line); outline-offset: 0; }
body.is-phone-studio .thought-top time { color: var(--muted); font-size: 0.75rem; text-align: right; }
body.is-phone-studio .thought-read { display: flex; align-items: flex-start; gap: 14px; }
body.is-phone-studio .thought-read p { flex: 1 1 0; min-width: 0; }
body.is-phone-studio .thought-read .thought-mark { width: 50px; height: 50px; font-size: 1.5rem; }
body.is-phone-studio .thought-card .thought-meta { margin-top: 10px; }
body.is-phone-studio .thought-controls { justify-content: flex-end; margin-top: 8px; padding-top: 6px; }

/* Dialogs over an idea (Detail pass 2f): the sheet wears the idea's family; the thought it is
   about leads with its disc; decisions are pill groups; the fates are rows that say what they
   do; a destructive dialog's kicker is the one red word on the sheet. */
body.is-phone-studio .confirm-dialog { background: var(--phone-surface); }
body.is-phone-studio .confirm-head { margin-bottom: 14px; }
body.is-phone-studio .confirm-head .lab-kicker { color: var(--idea-ink); }
body.is-phone-studio .confirm-head.is-danger .lab-kicker { color: #b3434a; }
body.is-phone-studio .confirm-head h2 { font-family: var(--sans); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
body.is-phone-studio .confirm-head p { color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
body.is-phone-studio .confirm-head .icon-button { border-color: transparent; background: var(--idea-wash); color: var(--idea-ink); }
body.is-phone-studio .dialog-thought {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--phone-line);
  border-radius: 18px;
  background: var(--phone-surface);
  box-shadow: var(--phone-shadow);
}
body.is-phone-studio .dialog-thought .thought-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--idea-line);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--idea-wash-2), var(--idea-wash));
  color: var(--idea-ink);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
}
body.is-phone-studio .dialog-thought .dialog-quote { flex: 1 1 0; min-width: 0; margin: 0; padding: 4px 0 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font-size: 0.9375rem; line-height: 1.55; }
body.is-phone-studio .confirm-dialog > .dialog-quote {
  margin: 0 0 14px;
  padding: 12px 14px 12px 16px;
  border-left: 3px solid var(--idea);
  border-radius: 6px 16px 16px 6px;
  background: var(--idea-wash);
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.55;
}
body.is-phone-studio .dialog-section { margin: 0 0 12px; padding: 14px 14px 6px; border: 1px solid var(--phone-line); border-radius: 18px; background: var(--phone-surface); }
body.is-phone-studio .dialog-section-name { margin: 0 0 12px; color: var(--idea-ink); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
body.is-phone-studio .dialog-pills { min-width: 0; margin: 0 0 12px; padding: 0; border: 0; }
body.is-phone-studio .dialog-pills > legend { padding: 0; margin-bottom: 8px; color: var(--muted); font-size: 0.75rem; font-weight: 500; }
body.is-phone-studio .dialog-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
body.is-phone-studio .dialog-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--phone-line);
  border-radius: 999px;
  background: var(--phone-surface);
  color: var(--text-soft);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}
body.is-phone-studio .dialog-pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
body.is-phone-studio .dialog-pill:has(input:checked) { border-color: var(--idea-line); background: var(--idea-wash-2); color: var(--idea-ink); font-weight: 600; }
body.is-phone-studio .dialog-pill:has(input:focus-visible) { outline: 2px solid var(--idea-line); outline-offset: 2px; }
body.is-phone-studio .dialog-section .dialog-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
body.is-phone-studio .dialog-section .dialog-field { margin-bottom: 8px; }
body.is-phone-studio .dialog-field select { min-height: 46px; border-radius: 14px; }
body.is-phone-studio .dialog-section .dialog-note { margin: 4px 0 8px; }
body.is-phone-studio .dialog-note { color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
body.is-phone-studio .confirm-actions.is-menu { display: grid; gap: 8px; margin-top: 12px; }
body.is-phone-studio .dialog-menu-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: 2px 12px;
  width: 100%;
  min-height: 52px;
  padding: 10px 12px 10px 16px;
  border: 1px solid var(--phone-line);
  border-radius: 16px;
  background: var(--phone-surface);
  color: var(--text);
  font: inherit;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: left;
  box-shadow: var(--phone-shadow);
  cursor: pointer;
}
body.is-phone-studio .dialog-menu-row:focus-visible { outline: 2px solid var(--idea-line); outline-offset: 2px; }
body.is-phone-studio .dialog-menu-row[disabled] { opacity: 0.5; cursor: default; }
/* The label is the button's own text (the tests read it straight after the tag); the detail
   is a small beneath it in the first column; the chevron spans both rows in the second. */
body.is-phone-studio .dialog-menu-row > small { grid-column: 1; color: var(--muted); font-size: 0.75rem; font-weight: 400; letter-spacing: 0; line-height: 1.4; }
body.is-phone-studio .dialog-menu-go { display: grid; grid-column: 2; grid-row: 1 / span 2; place-items: center; width: 24px; height: 24px; color: var(--muted-2); }
body.is-phone-studio .dialog-menu-go svg { width: 16px; height: 16px; }
body.is-phone-studio .dialog-menu-row.is-destructive { border-color: rgba(179, 67, 74, 0.3); background: rgba(239, 124, 145, 0.08); color: #8f3038; }
body.is-phone-studio .dialog-menu-row.is-destructive small { color: #a6555c; }
body.is-phone-studio .dialog-menu-row.is-destructive .dialog-menu-go { color: #b3434a; }
body.is-phone-studio .confirm-actions.is-menu .secondary-button { justify-content: center; width: 100%; min-height: var(--phone-touch); margin-top: 4px; border-radius: 999px; }
body.is-phone-studio .drop-effects { display: grid; gap: 8px; margin: 0 0 4px; padding: 0; list-style: none; }
body.is-phone-studio .drop-effects li { position: relative; padding-left: 18px; color: var(--text-soft); font-size: 0.8125rem; line-height: 1.5; }
body.is-phone-studio .drop-effects li::before { content: ""; position: absolute; top: 0.55em; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--idea-line); }
body.is-phone-studio .confirm-actions .primary-button,
body.is-phone-studio .confirm-actions .secondary-button,
body.is-phone-studio .confirm-actions .danger-button { border-radius: 999px; }
body.is-phone-studio .confirm-actions .primary-button { border: 0; background: var(--idea-gradient); color: #fff; box-shadow: var(--idea-glow); }
@media (prefers-reduced-motion: no-preference) {
  body.is-phone-studio .thought-top .stage-ring { transition: background 160ms ease, border-color 160ms ease, color 160ms ease; }
  body.is-phone-studio .dialog-pill { transition: background 140ms ease, border-color 140ms ease, color 140ms ease; }
  body.is-phone-studio .dialog-menu-row { transition: border-color 140ms ease, background 140ms ease; }
}
/* The dialog opens with its question focused so it is announced first; the heading is not a
   control, so it wears no focus ring for that programmatic focus (Detail pass 2f). */
body.is-phone-studio #dialog-title:focus-visible { outline: 0; }

/* The reading-order pill is one width for all three of its words (Herv: the buttons resized
   with every choice). Sized in rem so "Arranged order" still fits at any text size; the door
   beside it no longer moves when the order changes. */
body.is-phone-studio .thought-lens-door { flex: 1 1 180px; }
body.is-phone-studio .thought-lens-row .thought-order { flex: 0 0 9.25rem; width: 9.25rem; justify-content: center; text-align: center; }
/* …and it may shrink to the row when it has wrapped onto a line of its own at a large text
   size, rather than reaching past the panel by the few pixels 9.25rem then exceeds it. */
body.is-phone-studio .thought-lens-row .thought-order { flex: 0 1 9.25rem; width: auto; min-width: 0; max-width: 100%; }

/* The Thoughts block, simplified (Herv: "make the page look a lot better"). The lens door
   is one line — glyph, the filter's name, its count, the chevron — so the name never breaks;
   the order pill beside it is one word, one width, and no taller than the door; the two doors
   beneath say less. The card follows the reference more closely: the ring on the top row with
   the chips beside it, the words with the disc centred on them, and a foot that carries the
   date on the left and the doors on the right. */
body.is-phone-studio .thought-lens-row { align-items: center; }
body.is-phone-studio .thought-lens-door { flex: 1 1 200px; gap: 10px; min-height: 50px; padding: 5px 12px 5px 6px; }
body.is-phone-studio .thought-lens-glyph { width: 36px; height: 36px; border-radius: 12px; }
body.is-phone-studio .thought-lens-glyph svg { width: 18px; height: 18px; }
body.is-phone-studio .thought-lens-label { flex: 1 1 auto; min-width: 0; color: var(--text); font-family: var(--sans); font-size: 0.9375rem; font-weight: 650; letter-spacing: -0.01em; overflow-wrap: normal; }
body.is-phone-studio .thought-lens-count { min-width: 26px; line-height: 26px; }
body.is-phone-studio .thought-lens-row .thought-order { flex: 0 1 7rem; width: auto; min-width: 0; max-width: 100%; min-height: 50px; padding: 0 12px; border-radius: 16px; justify-content: center; font-weight: 600; }
body.is-phone-studio .thought-doors .text-button { min-height: 46px; padding: 6px 12px; }
body.is-phone-studio .thought-card { padding: 12px 16px 10px; }
body.is-phone-studio .thought-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px -6px; }
body.is-phone-studio .thought-top .stage-toggle { gap: 8px; min-height: 40px; padding: 0 8px 0 6px; }
body.is-phone-studio .thought-top .stage-toggle.is-on { padding: 0 10px 0 6px; }
body.is-phone-studio .thought-top .stage-ring { width: 24px; height: 24px; font-size: 0.75rem; }
body.is-phone-studio .thought-top .thought-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
body.is-phone-studio .thought-read { align-items: center; gap: 14px; }
body.is-phone-studio .thought-read .thought-mark { width: 52px; height: 52px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 20px -12px color-mix(in srgb, var(--idea-deep) 55%, transparent); }
body.is-phone-studio .thought-controls { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; margin-top: 10px; padding-top: 8px; }
body.is-phone-studio .thought-controls > time { color: var(--muted); font-size: 0.75rem; }
body.is-phone-studio .thought-controls .thought-tools { margin-left: auto; }

/* The thought timeline (Herv's second reference) ==========================================
   A rail of dots down the left of the list, a line through them; each card a soft panel with
   its chips on the left of the top row and the time with a time-of-day tile in the corner —
   sunrise, sun, sunset or moon by the hour it was written; the words; and a foot with the one
   decision as a real button (Mark implemented / Implemented) and the tools as quiet text. A
   pinned thought is the lifted card in the idea's own colour, its dot the larger ring. */
body.is-phone-studio .thought-list { position: relative; gap: 12px; padding-left: 26px; }
body.is-phone-studio .thought-list::before { content: ""; position: absolute; top: 20px; bottom: 20px; left: 6px; width: 2px; border-radius: 1px; background: var(--idea-line); }
body.is-phone-studio .thought-card { position: relative; overflow: visible; padding: 12px 16px 10px; border-radius: 20px; }
body.is-phone-studio .thought-card::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: auto;
  left: -26px;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 2px solid var(--idea);
  border-radius: 50%;
  background: var(--phone-surface);
}
body.is-phone-studio .thought-card.is-settled::before { border-color: transparent; background: var(--idea-gradient); }
body.is-phone-studio .thought-card.is-excluded::before,
body.is-phone-studio .thought-card.is-inactive::before { border-style: dashed; border-color: var(--muted-2); background: var(--phone-surface); }
body.is-phone-studio .thought-card.is-pinned::before { top: 13px; left: -28px; width: 18px; height: 18px; border-width: 4px; border-color: var(--idea); background: var(--phone-surface); box-shadow: 0 0 0 3px var(--idea-wash-2); }
body.is-phone-studio .thought-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin: 0 0 8px; }
body.is-phone-studio .thought-top .thought-meta { margin: 0; }
body.is-phone-studio .thought-when { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
body.is-phone-studio .thought-when time { color: var(--muted); font-size: 0.75rem; font-weight: 500; }
body.is-phone-studio .thought-daypart { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--idea-wash); color: var(--idea-ink); }
body.is-phone-studio .thought-daypart svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.is-phone-studio .thought-card.is-morning .thought-daypart { background: #fbf1dc; color: #a8761f; }
body.is-phone-studio .thought-card.is-day .thought-daypart { background: #fff1c9; color: #b8860b; }
body.is-phone-studio .thought-card.is-evening .thought-daypart { background: #fde6dc; color: #c05a2e; }
body.is-phone-studio .thought-card.is-night .thought-daypart { background: #e6e8fb; color: #4653a4; }
body.is-phone-studio .thought-body > p { margin: 0; color: var(--text); font-size: 1rem; line-height: 1.6; }
body.is-phone-studio .thought-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; margin-top: 10px; padding-top: 10px; }
body.is-phone-studio .thought-controls .stage-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--phone-touch);
  padding: 0 14px 0 8px;
  border: 1px solid var(--idea-line);
  border-radius: 999px;
  background: var(--idea-wash);
  color: var(--idea-ink);
  font-size: 0.8125rem;
  font-weight: 600;
}
body.is-phone-studio .thought-controls .stage-toggle .stage-ring {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--idea-line);
  border-radius: 50%;
  background: var(--phone-surface);
  color: transparent;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}
body.is-phone-studio .thought-controls .stage-toggle.is-on { border-color: rgba(92, 172, 122, 0.45); background: rgba(92, 172, 122, 0.16); color: #2f6d47; }
body.is-phone-studio .thought-controls .stage-toggle.is-on .stage-ring { border-color: transparent; background: #3f9a63; color: #fff; }
body.is-phone-studio .thought-controls .thought-tools { margin-left: auto; }
/* The pinned thought, lifted in the idea's colour. */
body.is-phone-studio .thought-card.is-pinned { border-color: transparent; background: var(--idea-gradient); color: #fff; box-shadow: var(--idea-glow); }
body.is-phone-studio .thought-card.is-pinned .thought-body > p { color: #fff; }
body.is-phone-studio .thought-card.is-pinned .thought-meta .thought-chip { border: 1px solid rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.16); color: #fff; }
body.is-phone-studio .thought-card.is-pinned .thought-meta .thought-chip svg { stroke: currentColor; }
body.is-phone-studio .thought-card.is-pinned .thought-when time { color: rgba(255, 255, 255, 0.85); }
body.is-phone-studio .thought-card.is-pinned .thought-daypart { background: rgba(255, 255, 255, 0.2); color: #fff; }
body.is-phone-studio .thought-card.is-pinned .thought-controls { border-top-color: rgba(255, 255, 255, 0.26); }
body.is-phone-studio .thought-card.is-pinned .thought-controls .text-button { color: rgba(255, 255, 255, 0.92); }
body.is-phone-studio .thought-card.is-pinned .thought-tools .text-button + .text-button::before { color: rgba(255, 255, 255, 0.6); }
body.is-phone-studio .thought-card.is-pinned .thought-controls .danger-text { color: #ffd6dc; }
body.is-phone-studio .thought-card.is-pinned .thought-controls .stage-toggle { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.16); color: #fff; }
body.is-phone-studio .thought-card.is-pinned .thought-controls .stage-toggle .stage-ring { border-color: rgba(255, 255, 255, 0.75); background: transparent; }
body.is-phone-studio .thought-card.is-pinned .thought-controls .stage-toggle.is-on .stage-ring { border-color: transparent; background: #fff; color: var(--idea-deep); }

/* The thought card, informed (Herv: more of what makes sense, less white; and no rail) =====
   The rail is gone. The top line is the kind and the exact time; the corner keeps the time-of-
   day tile. Under the words, notes appear only when there is something true to say, then the
   chips. The foot is one line: the decision button and three labelled icon tools. A few words
   are set as a line of display type, a long passage as a page — the cards vary with them. */
body.is-phone-studio .thought-list { padding-left: 0; }
body.is-phone-studio .thought-list::before { content: none; }
body.is-phone-studio .thought-card::before { content: none; }
body.is-phone-studio .thought-card { padding: 12px 16px 8px; }
body.is-phone-studio .thought-top { flex-wrap: nowrap; gap: 8px 10px; margin: 0 0 8px; }
body.is-phone-studio .thought-kind { display: inline-flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; color: var(--text-soft); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; }
body.is-phone-studio .thought-kind i { display: grid; flex: none; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--idea-wash); color: var(--idea-ink); font-size: 0.75rem; font-style: normal; font-weight: 700; line-height: 1; }
body.is-phone-studio .thought-kind time { color: var(--muted); font-weight: 500; }
body.is-phone-studio .thought-kind time::before { content: "·"; margin-right: 6px; color: var(--muted-2); }
body.is-phone-studio .thought-when { display: none; }
body.is-phone-studio .thought-top > .thought-daypart { flex: none; margin-left: auto; }
body.is-phone-studio .thought-body > p { margin: 0; }
body.is-phone-studio .thought-card.is-brief .thought-body > p { font-family: var(--sans); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.4; }
body.is-phone-studio .thought-card.is-long .thought-body > p { font-size: 0.9375rem; line-height: 1.55; }
body.is-phone-studio .thought-notes { display: grid; gap: 5px; margin: 10px 0 0; padding: 0; list-style: none; }
body.is-phone-studio .thought-notes li { display: flex; gap: 8px; color: var(--muted); font-size: 0.8125rem; line-height: 1.45; }
body.is-phone-studio .thought-notes li i { flex: none; width: 1.2em; color: var(--idea-ink); font-style: normal; font-weight: 700; text-align: center; }
body.is-phone-studio .thought-notes li.is-done i { color: #3f9a63; }
body.is-phone-studio .thought-notes li span { min-width: 0; }
body.is-phone-studio .thought-body > .thought-meta { margin-top: 10px; }
body.is-phone-studio .thought-controls { margin-top: 8px; padding-top: 6px; }
body.is-phone-studio .thought-tools { gap: 0; }
body.is-phone-studio .thought-tools > .text-button:not(.thought-nudge) { display: grid; place-items: center; width: var(--phone-touch); min-height: var(--phone-touch); padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--text-soft); }
body.is-phone-studio .thought-tools > .text-button:not(.thought-nudge) svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.is-phone-studio .thought-tools > [data-action="thought-menu"] svg { fill: currentColor; stroke: none; }
body.is-phone-studio .thought-tools > .text-button + .text-button::before { content: none; }
body.is-phone-studio .thought-tools > .danger-text { color: var(--danger); }
body.is-phone-studio .thought-tools > .thought-nudge { padding: 0 10px; color: var(--idea-ink); font-weight: 600; }
body.is-phone-studio .thought-card.is-pinned .thought-kind { color: rgba(255, 255, 255, 0.9); }
body.is-phone-studio .thought-card.is-pinned .thought-kind i { background: rgba(255, 255, 255, 0.2); color: #fff; }
body.is-phone-studio .thought-card.is-pinned .thought-kind time { color: rgba(255, 255, 255, 0.78); }
body.is-phone-studio .thought-card.is-pinned .thought-kind time::before { color: rgba(255, 255, 255, 0.5); }
body.is-phone-studio .thought-card.is-pinned .thought-notes li { color: rgba(255, 255, 255, 0.85); }
body.is-phone-studio .thought-card.is-pinned .thought-notes li i,
body.is-phone-studio .thought-card.is-pinned .thought-notes li.is-done i { color: #fff; }
body.is-phone-studio .thought-card.is-pinned .thought-tools > .text-button { color: rgba(255, 255, 255, 0.92); }
body.is-phone-studio .thought-card.is-pinned .thought-tools > .danger-text { color: #ffd6dc; }
/* The foot fits one line on a 390px phone: a closer pill, 40px-wide tools that borrow the
   card's own padding. On a narrower phone the tools still drop beneath the button. */
body.is-phone-studio .thought-controls .stage-toggle { gap: 7px; padding: 0 12px 0 6px; }
body.is-phone-studio .thought-tools { margin-right: -8px; }
body.is-phone-studio .thought-tools > .text-button:not(.thought-nudge) { width: 40px; }

/* The hero's chip row, in two tidy rows (Herv: "ensure that this area always looks nice").
   The category kicker and the status select lead on one line, the select taking the room
   that is left; the projects and the tags follow as a compact cloud of smaller glass chips,
   wrapping among themselves and never beside a control. An idea with no tags shows no cloud. */
body.is-phone-studio .detail-hero .detail-header > .detail-chip-row { display: grid; gap: 10px; }
body.is-phone-studio .detail-chip-lead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
body.is-phone-studio .detail-chip-lead .status-select { flex: 1 1 auto; min-width: 0; max-width: 100%; }
body.is-phone-studio .detail-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
body.is-phone-studio .detail-tag-cloud:empty { display: none; }
body.is-phone-studio .detail-hero .detail-tag-cloud .category-chip,
body.is-phone-studio .detail-hero .detail-tag-cloud .context-chip { min-height: 30px; padding: 0 11px; font-size: 0.75rem; font-weight: 500; }
/* The section tabs at a large text size: each tab is never narrower than its own word, the
   padding is what the four words leave, and when even that will not fit on one line the pill
   wraps rather than letting "Develop" run out of its end. Measured: at 150% one line; at
   200% the fourth tab drops to a second row of the same pill. */
body.is-phone-studio .detail-tabs { flex-wrap: wrap; }
body.is-phone-studio .detail-tabs .tab-button { min-width: max-content; padding: 0 6px; }
/* The status select keeps its own width beside the kicker (Herv: stretched, it was a bar). */
body.is-phone-studio .detail-chip-lead .status-select { flex: 0 1 auto; width: auto; }

/* Review, the entrance (Review pass 1) ====================================================
 *
 * The same blue hero the Library opens on: the bar turned down to its wordmark, the kicker,
 * the summary as the heading, one sentence beneath it, and the door to writing a thought as
 * a glass pill. The Decide / Tidy up segments are the pill across the hero's lower edge, as
 * the sections are on an idea. Below, on the canvas: the progress as a kicker and a meter, the
 * decision on a paper card that sits on the deck of the ones still to come, its choices as
 * rows, and what is up next as quiet rows beneath the deck.
 */
body.is-phone-studio :is(.phone-review-hero, .phone-connect-hero) {
  position: relative;
  z-index: 0;
  margin: calc(-14px - env(safe-area-inset-top, 0px)) calc(-1 * max(var(--phone-page-x), env(safe-area-inset-right, 0px))) 0 calc(-1 * max(var(--phone-page-x), env(safe-area-inset-left, 0px)));
  padding: calc(14px + env(safe-area-inset-top, 0px)) max(var(--phone-page-x), env(safe-area-inset-right, 0px)) calc(var(--home-hero-overlap) + 22px) max(var(--phone-page-x), env(safe-area-inset-left, 0px));
  overflow: clip;
  border-radius: 0 0 34px 34px;
  background: linear-gradient(168deg, #3b62dc 0%, #294bc1 52%, #1f3fa8 100%);
  color: #fff;
  box-shadow: 0 22px 44px -22px rgba(31, 63, 168, 0.55);
}
body.is-phone-studio .phone-review:not(:has(.review-segments)) .phone-review-hero { padding-bottom: 24px; margin-bottom: 14px; }
body.is-phone-studio :is(.phone-review-hero, .phone-connect-hero)::before,
body.is-phone-studio :is(.phone-review-hero, .phone-connect-hero)::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
body.is-phone-studio :is(.phone-review-hero, .phone-connect-hero)::before { top: -140px; right: -80px; width: 300px; height: 260px; border-radius: 46% 54% 42% 58% / 52% 38% 62% 48%; background: rgba(255, 255, 255, 0.08); }
body.is-phone-studio :is(.phone-review-hero, .phone-connect-hero)::after { right: 20px; bottom: -90px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(226, 181, 107, 0.45), rgba(226, 181, 107, 0) 68%); filter: blur(10px); }
body.is-phone-studio :is(.phone-review-hero, .phone-connect-hero) .phone-topbar { margin-bottom: 6px; }
body.is-phone-studio :is(.phone-review-hero, .phone-connect-hero) .phone-brand { color: rgba(255, 255, 255, 0.72); }
body.is-phone-studio :is(.phone-review-head, .phone-connect-head) { margin: 6px 0 0; }
body.is-phone-studio :is(.phone-review-head, .phone-connect-head) .phone-kicker { margin: 0 0 4px; color: rgba(255, 255, 255, 0.74); }
body.is-phone-studio :is(.phone-review-head, .phone-connect-head) h1 { margin: 0; color: #fff; font-family: var(--sans); font-size: 1.75rem; font-weight: 650; line-height: 1.12; letter-spacing: -0.03em; overflow-wrap: normal; }
body.is-phone-studio :is(.phone-review-sub, .phone-connect-sub) { margin: 8px 0 0; color: rgba(255, 255, 255, 0.8); font-size: 0.875rem; line-height: 1.45; }
body.is-phone-studio :is(.phone-review-hero, .phone-connect-hero) .phone-page-actions { margin: 14px 0 0; }
body.is-phone-studio :is(.phone-review-hero, .phone-connect-hero) .phone-page-actions .secondary-button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* The two segments, as the pill across the seam. */
body.is-phone-studio .phone-review .review-segments {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  margin: calc(-1 * var(--home-hero-overlap)) 0 14px;
  padding: 4px;
  border: 1px solid var(--phone-line);
  border-radius: 999px;
  background: var(--phone-surface);
  box-shadow: 0 16px 34px -10px rgba(20, 35, 90, 0.28);
}
body.is-phone-studio .phone-review .review-segments .phone-mode { flex: 1 1 0; justify-content: center; min-height: var(--phone-touch); padding: 0 10px; border-radius: 999px; font-size: 0.875rem; font-weight: 500; white-space: normal; }
body.is-phone-studio .phone-review .review-segments .phone-mode.is-active { background: var(--phone-accent); color: #fff; font-weight: 600; box-shadow: 0 6px 16px -8px rgba(31, 63, 168, 0.6); }
/* The progress: a kicker and a meter. */
body.is-phone-studio .review-progress { gap: 12px; margin: 0 4px 10px; }
body.is-phone-studio .review-progress-label { color: var(--phone-accent); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
body.is-phone-studio .review-meter { height: 6px; background: rgba(41, 75, 193, 0.12); }
body.is-phone-studio .review-meter i { background: var(--brand); }
/* The decision, on the deck of the ones still to come. */
body.is-phone-studio .review-decision { position: relative; z-index: 0; padding: 18px 16px 12px; border-radius: 22px; }
body.is-phone-studio .review-decision:has(+ .review-up-next)::before,
body.is-phone-studio .review-decision:has(+ .review-up-next)::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 12px;
  bottom: -8px;
  left: 12px;
  height: 40px;
  border: 1px solid var(--phone-line);
  border-radius: 22px;
  background: var(--phone-surface);
  box-shadow: var(--phone-shadow);
}
body.is-phone-studio .review-decision:has(+ .review-up-next)::after { right: 24px; bottom: -15px; left: 24px; opacity: 0.7; }
body.is-phone-studio .review-decision .phone-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin: 0 0 10px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--phone-accent-wash);
  color: var(--phone-accent);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.is-phone-studio .review-decision h2 { margin: 0 0 12px; font-family: var(--sans); font-size: 1.25rem; font-weight: 650; line-height: 1.25; letter-spacing: -0.02em; }
body.is-phone-studio .review-decision h2:focus-visible { outline: 0; }
body.is-phone-studio .review-subject { padding: 12px 14px; border-left: 3px solid var(--phone-accent); border-radius: 6px 14px 14px 6px; background: var(--phone-accent-wash); color: var(--text); }
body.is-phone-studio .review-target { gap: 6px; margin-bottom: 10px; }
body.is-phone-studio .review-target span { color: var(--muted); font-size: 0.75rem; font-weight: 500; }
body.is-phone-studio .review-target select { min-height: 48px; padding: 0 14px; border: 1px solid var(--phone-line); border-radius: 14px; background: var(--phone-surface); font-size: 1rem; }
body.is-phone-studio .review-accept { border: 0; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 600; box-shadow: 0 12px 26px -12px rgba(31, 63, 168, 0.7); }
body.is-phone-studio .review-choices { gap: 8px; }
body.is-phone-studio .review-alt { position: relative; padding: 12px 40px 12px 14px; border-radius: 16px; background: var(--phone-surface); box-shadow: var(--phone-shadow); }
body.is-phone-studio .review-alt::after { content: "›"; position: absolute; top: 50%; right: 14px; color: var(--muted-2); font-size: 1.25rem; line-height: 1; transform: translateY(-50%); }
body.is-phone-studio .review-alt strong { font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em; }
body.is-phone-studio .review-change > summary,
body.is-phone-studio .review-why > summary { justify-content: space-between; color: var(--text-soft); font-weight: 600; }
body.is-phone-studio .review-change > summary::before,
body.is-phone-studio .review-why > summary::before { content: none; }
body.is-phone-studio .review-change > summary::after,
body.is-phone-studio .review-why > summary::after { content: "▾"; color: var(--muted); }
body.is-phone-studio .review-change[open] > summary::after,
body.is-phone-studio .review-why[open] > summary::after { content: "▴"; }
body.is-phone-studio .review-secondary { gap: 4px 18px; margin-top: 6px; }
body.is-phone-studio .review-secondary .text-button { padding: 0 2px; color: var(--text-soft); font-size: 0.8125rem; font-weight: 500; }
body.is-phone-studio .review-why p { color: var(--text-soft); }
/* Up next: quiet rows beneath the deck. */
body.is-phone-studio .review-up-next { margin: 26px 2px 0; }
body.is-phone-studio .review-up-next .lab-kicker { color: var(--muted); font-size: 0.6875rem; letter-spacing: 0.1em; }
body.is-phone-studio .review-up-next ul { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
body.is-phone-studio .review-up-next li { padding: 10px 14px; border: 1px solid var(--phone-line); border-radius: 14px; background: rgba(255, 255, 255, 0.55); color: var(--text-soft); font-size: 0.8125rem; line-height: 1.45; }
body.is-phone-studio .review-up-next li.lab-muted { padding: 4px 2px 0; border: 0; background: transparent; color: var(--muted); }
body.is-phone-studio .review-later-note,
body.is-phone-studio .review-computing-note { margin: 12px 4px 0; font-size: 0.8125rem; line-height: 1.5; }
/* When Review last looked — one quiet line above the card, never louder than the question. */
body.is-phone-studio .review-checked { margin: 0 4px 10px; font-size: 0.75rem; letter-spacing: 0.01em; }
body.is-phone-studio .review-footnote { margin: 18px 4px 0; color: var(--muted); font-size: 0.75rem; line-height: 1.5; }
body.is-phone-studio .review-deferred { margin-top: 14px; padding: 2px 14px; border: 1px solid var(--phone-line); border-radius: 16px; background: var(--phone-surface); }
/* Done, and nothing waiting: the brass tick on a paper card. */
body.is-phone-studio .phone-review .empty-state { border: 1px solid var(--phone-line); border-radius: 22px; background: var(--phone-surface); box-shadow: var(--phone-shadow); }
body.is-phone-studio .phone-review .empty-state p { color: var(--text-soft); }
body.is-phone-studio .review-complete { padding: 26px 18px 20px; }
body.is-phone-studio .phone-review .empty-star {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, #f8e6bd, #e3b76b);
  color: #6b4a12;
  font-size: 1.5rem;
  box-shadow: 0 10px 20px -12px rgba(177, 128, 47, 0.7);
}
body.is-phone-studio .review-complete h2 { font-family: var(--sans); font-size: 1.25rem; font-weight: 650; letter-spacing: -0.02em; }
body.is-phone-studio .review-complete p { color: var(--text-soft); font-size: 0.875rem; line-height: 1.5; }
/* Review declares the overlap Home and the Library declare, or the hero's padding — which
   is written in terms of it — falls to nothing and the words touch the screen's edge. */
body.is-phone-studio .phone-review { --home-hero-overlap: 28px; }
/* No deck beneath the decision (Herv: it read as broken edges); Up next already says what
   is still to come. The card closes cleanly and the rows follow at a short distance. */
body.is-phone-studio .review-decision:has(+ .review-up-next)::before,
body.is-phone-studio .review-decision:has(+ .review-up-next)::after { content: none; }
body.is-phone-studio .review-decision { padding-bottom: 14px; }
body.is-phone-studio .review-up-next { margin-top: 18px; }
/* A placement question quotes the thought it is about: where it was captured as a small
   label above its words, and what the organizer noticed as the note beneath the quote. */
body.is-phone-studio .review-subject-label { display: block; margin: 0 0 4px; color: var(--phone-accent); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
body.is-phone-studio .review-context { margin: -6px 0 14px; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
/* Two subjects compared sit close together. */
body.is-phone-studio .review-subject + .review-subject { margin-top: -6px; }
/* Review's counts as two glass tiles (Herv: the summary sentence broke mid-word as a heading). */
body.is-phone-studio :is(.phone-review-head, .phone-connect-head) h1 { font-size: 1.625rem; }
body.is-phone-studio .phone-review-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; }
body.is-phone-studio .phone-review-stat {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body.is-phone-studio .phone-review-stat strong { color: #fff; font-family: var(--sans); font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
body.is-phone-studio .phone-review-stat span { color: rgba(255, 255, 255, 0.82); font-size: 0.8125rem; font-weight: 500; line-height: 1.3; }
body.is-phone-studio :is(.phone-review-sub, .phone-connect-sub) { margin-top: 12px; }

/* Connect, the entrance and the map (Connect pass 1) =======================================
 *
 * The same blue hero the Library and Review open on; the three filters as one paper card
 * across its lower edge. The map is drawn on the phone: the discs wear their ideas' family
 * colours with the category glyph inside, the lines join them, and no name is printed on the
 * plate — a tap on a disc opens the idea, and every name is written in the list beneath, where
 * each connection is a paper card with its two ideas' colours as dots.
 */
body.is-phone-studio .connections-page { --home-hero-overlap: 28px; }
body.is-phone-studio .connections-filterbar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: calc(-1 * var(--home-hero-overlap)) 0 14px;
  padding: 12px;
  border: 1px solid var(--phone-line);
  border-radius: 22px;
  background: var(--phone-surface);
  box-shadow: 0 16px 34px -10px rgba(20, 35, 90, 0.28);
}
body.is-phone-studio .connections-filterbar label { display: grid; gap: 4px; min-width: 0; margin: 0; }
body.is-phone-studio .connections-filterbar label:first-child { grid-column: 1 / -1; }
body.is-phone-studio .connections-filterbar label > span { color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
body.is-phone-studio .connections-filterbar select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--phone-line); border-radius: 14px; background: var(--phone-surface); color: var(--text); font-size: 0.9375rem; }
/* The plate: a paper card; discs in their families; the names kept for the list. */
body.is-phone-studio .cg-plate {
  padding: 14px 0 0;
  border: 1px solid var(--phone-line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 40%, rgba(59, 98, 220, 0.08), transparent 55%),
    var(--phone-surface);
  box-shadow: var(--phone-shadow);
  overflow: clip;
}
body.is-phone-studio .cg-field { max-width: 100%; }
/* The name beneath each disc (Herv): a small paper chip, up to three lines wrapped between
   words, in the sans the rest of the phone reads. */
body.is-phone-studio .cg-node .cg-label {
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid var(--phone-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: normal;
  -webkit-line-clamp: 3;
  box-shadow: 0 2px 6px rgba(20, 35, 90, 0.12);
}
body.is-phone-studio .cg-node { gap: 6px; }
body.is-phone-studio .cg-node .cg-soma {
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: linear-gradient(160deg, var(--poster, #3b62dc), var(--poster-deep, #294bc1));
  color: #fff;
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--poster-deep, #294bc1) 70%, transparent);
}
body.is-phone-studio .cg-node.is-candidate .cg-soma { border-style: dashed; border-color: rgba(255, 255, 255, 0.9); opacity: 0.86; }
body.is-phone-studio .cg-glyph { position: relative; font-size: calc(var(--r) * 0.85); line-height: 1; color: rgba(255, 255, 255, 0.96); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
body.is-phone-studio .cg-rings circle { stroke: rgba(255, 255, 255, 0.45); }
body.is-phone-studio .cg-edge { color: rgba(59, 98, 220, 0.6); }
body.is-phone-studio .cg-edge.is-candidate { color: rgba(90, 86, 80, 0.5); }
body.is-phone-studio .cg-node.is-lit .cg-soma { border-color: #fff; box-shadow: 0 0 0 3px rgba(59, 98, 220, 0.35); }
body.is-phone-studio .cg-band { margin: 6px 12px 0; padding: 12px 0 0; border-top: 1px solid var(--phone-line); }
body.is-phone-studio .cg-band-heading { margin: 0 0 8px; color: var(--muted); font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
body.is-phone-studio .cg-band-row { display: flex; flex-wrap: wrap; gap: 6px; }
body.is-phone-studio .cg-quiet { min-height: 36px; padding: 0 12px 0 6px; border: 1px solid var(--phone-line); border-radius: 999px; background: var(--phone-surface); color: var(--text-soft); font-size: 0.8125rem; }
body.is-phone-studio .cg-quiet .cg-soma { width: 22px; height: 22px; border: 0; background: linear-gradient(160deg, var(--poster, #566380), var(--poster-deep, #363f56)); }
body.is-phone-studio .cg-quiet-name { overflow: visible; text-overflow: clip; white-space: normal; }
body.is-phone-studio .cg-caption { padding: 12px 14px 14px; color: var(--muted); font-size: 0.75rem; line-height: 1.5; text-align: center; }
body.is-phone-studio .cg-fallback { margin: 0; padding: 22px 18px; color: var(--muted); font-size: 0.875rem; line-height: 1.5; text-align: center; }
/* Every connection, in words: paper cards with the two ideas' colours. */
body.is-phone-studio .relationship-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 20px 2px 10px; }
body.is-phone-studio .relationship-head h2 { margin: 0; color: var(--text); font-family: var(--sans); font-size: 1.125rem; font-weight: 650; letter-spacing: -0.01em; }
body.is-phone-studio .relationship-list { display: grid; gap: 10px; }
body.is-phone-studio .relationship-row-wrap { border: 1px solid var(--phone-line); border-radius: 20px; background: var(--phone-surface); box-shadow: var(--phone-shadow); overflow: clip; }
body.is-phone-studio .relationship-row-wrap.is-selected { border-color: var(--phone-accent-line); }
body.is-phone-studio .relationship-row { display: grid; gap: 8px; width: 100%; padding: 14px 16px; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; }
body.is-phone-studio .relationship-kind { display: inline-flex; align-items: center; justify-self: start; min-height: 24px; padding: 0 9px; border-radius: 999px; background: var(--phone-accent-wash); color: var(--phone-accent); font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
body.is-phone-studio .relationship-kind.is-confirmed { background: rgba(92, 172, 122, 0.16); color: #2f6d47; }
body.is-phone-studio .relationship-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--text); font-family: var(--sans); font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; line-height: 1.3; }
body.is-phone-studio .relationship-pair i { color: var(--muted-2); font-style: normal; }
body.is-phone-studio .cg-dot { display: inline-block; width: 10px; height: 10px; margin: 0 7px 0 0; border-radius: 50%; background: linear-gradient(160deg, var(--poster, #3b62dc), var(--poster-deep, #294bc1)); vertical-align: 1px; }
body.is-phone-studio .relationship-note { color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
body.is-phone-studio .relationship-note em { font-style: normal; color: var(--text-soft); }
body.is-phone-studio .relationship-evidence { padding: 0 16px 14px; }
body.is-phone-studio .relationship-evidence > small { display: block; margin-bottom: 6px; color: var(--phone-accent); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
body.is-phone-studio .relationship-evidence .audit-evidence { display: grid; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
body.is-phone-studio .relationship-evidence .audit-evidence li { padding: 10px 12px; border-left: 3px solid var(--phone-accent); border-radius: 6px 12px 12px 6px; background: var(--phone-accent-wash); color: var(--text); font-size: 0.875rem; line-height: 1.5; }
body.is-phone-studio .relationship-evidence .form-row { display: flex; flex-wrap: wrap; gap: 6px 8px; }
body.is-phone-studio .relationship-evidence .form-row .text-button,
body.is-phone-studio .relationship-evidence .form-row .secondary-button { display: inline-flex; align-items: center; min-height: var(--phone-touch); padding: 0 14px; border: 1px solid var(--phone-line); border-radius: 999px; background: var(--phone-surface); color: var(--text-soft); font-size: 0.8125rem; font-weight: 500; white-space: normal; text-align: left; }
body.is-phone-studio .relationship-evidence .form-row .secondary-button { border: 0; background: var(--brand); color: #fff; font-weight: 600; }
body.is-phone-studio .relationship-evidence .form-row .danger-text { border-color: transparent; color: var(--danger); }
body.is-phone-studio .relationship-dismissed-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 10px 14px; border: 1px solid var(--phone-line); border-radius: 16px; background: var(--phone-surface); font-size: 0.8125rem; }
body.is-phone-studio .connections-page .empty-state { border: 1px dashed var(--phone-accent-line); border-radius: 20px; background: var(--phone-accent-wash); }
/* The glyph is a sibling of the disc (the disc holds only its rings, as the tests pin), laid
   over the disc's centre and taking no taps; and a phone's field is never under 16px. */
body.is-phone-studio .cg-node .cg-glyph { position: absolute; top: var(--r); left: 50%; transform: translate(-50%, -50%); pointer-events: none; }
body.is-phone-studio .connections-filterbar select { font-size: 1rem; }
/* A candidate disc keeps its solid rim and wears a dashed halo outside it (the dashed rim read
   as a cog); a quiet idea's name wraps from the left, beside its dot. */
body.is-phone-studio .cg-node.is-candidate .cg-soma { border-style: solid; opacity: 1; outline: 2px dashed rgba(59, 98, 220, 0.45); outline-offset: 3px; }
body.is-phone-studio .cg-quiet { justify-content: flex-start; text-align: left; }

/* Inky, the entrance and the conversation (Inky pass 1) ====================================
 *
 * The bar, the conversation picker and the heading on the studio's blue: the thread's name
 * turned down to a kicker, New and Conversations as glass pills, the close as a glass disc,
 * the squid in a glass orb beside its name and the privacy line. The scope strip is the pill
 * across the seam. The conversation itself: the person's words in the blue, Inky's on paper,
 * the save row as chips, the starters as pills, and the composer as the pill from Home.
 */
body.is-phone-studio .assistant-inner { padding-top: 0; }
body.is-phone-studio .phone-inky-hero {
  position: relative;
  z-index: 0;
  margin: 0 calc(-1 * var(--phone-pad-x)) 0;
  padding: calc(var(--phone-pad-top) + env(safe-area-inset-top, 0px)) var(--phone-pad-x) 48px;
  overflow: clip;
  border-radius: 0 0 34px 34px;
  background: linear-gradient(168deg, #3b62dc 0%, #294bc1 52%, #1f3fa8 100%);
  color: #fff;
  box-shadow: 0 22px 44px -22px rgba(31, 63, 168, 0.55);
}
body.is-phone-studio .phone-inky-hero::before,
body.is-phone-studio .phone-inky-hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
body.is-phone-studio .phone-inky-hero::before { top: -140px; right: -80px; width: 300px; height: 260px; border-radius: 46% 54% 42% 58% / 52% 38% 62% 48%; background: rgba(255, 255, 255, 0.08); }
body.is-phone-studio .phone-inky-hero::after { right: 20px; bottom: -90px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(226, 181, 107, 0.45), rgba(226, 181, 107, 0) 68%); filter: blur(10px); }
body.is-phone-studio .phone-inky-hero .panel-topbar { margin-bottom: 10px; }
body.is-phone-studio .phone-inky-hero .thread-identity { color: rgba(255, 255, 255, 0.78); }
body.is-phone-studio .phone-inky-hero .saved-thread { color: rgba(255, 255, 255, 0.78); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
body.is-phone-studio .phone-inky-hero .thread-actions { gap: 6px; }
body.is-phone-studio .phone-inky-hero .thread-actions .text-button {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body.is-phone-studio .phone-inky-hero .thread-actions .icon-button {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body.is-phone-studio .phone-inky-hero .assistant-heading { align-items: center; gap: 14px; margin: 6px 0 0; }
body.is-phone-studio .phone-inky-hero .think-orb {
  display: grid;
  flex: none;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body.is-phone-studio .phone-inky-hero .think-orb .inky-mark { width: 30px; }
body.is-phone-studio .phone-inky-hero .assistant-heading h2 { margin: 0 0 2px; color: #fff; font-family: var(--sans); font-size: 1.625rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
body.is-phone-studio .phone-inky-hero .assistant-heading p { color: rgba(255, 255, 255, 0.8); font-size: 0.8125rem; line-height: 1.45; }
/* The scope strip, as the pill across the seam. */
body.is-phone-studio .premium-assistant .context-strip {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: -28px 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--phone-line);
  border-radius: 20px;
  background: var(--phone-surface);
  box-shadow: 0 16px 34px -10px rgba(20, 35, 90, 0.28);
}
body.is-phone-studio .premium-assistant .context-strip > span:first-child { color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
body.is-phone-studio .premium-assistant .context-strip .context-chip { min-height: 32px; padding: 0 12px; border: 1px solid var(--phone-accent-line); border-radius: 999px; background: var(--phone-accent-wash); color: var(--phone-accent); font-size: 0.8125rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
/* The conversation. */
body.is-phone-studio .assistant-messages { gap: 12px; padding: 4px 0 18px; }
body.is-phone-studio .message { max-width: 88%; padding: 12px 15px; font-size: 0.9375rem; line-height: 1.55; }
body.is-phone-studio .message.assistant { border: 1px solid var(--phone-line); border-radius: 18px 18px 18px 6px; background: var(--phone-surface); color: var(--text); box-shadow: var(--phone-shadow); }
body.is-phone-studio .message.user { border-radius: 18px 18px 6px 18px; background: var(--brand); color: #fff; box-shadow: 0 10px 22px -12px rgba(31, 63, 168, 0.7); }
body.is-phone-studio .inky-busy { color: var(--muted); }
body.is-phone-studio .message-save-row { margin-top: 6px; }
body.is-phone-studio .message-save-row button { border: 1px solid var(--phone-line); border-radius: 999px; background: var(--phone-surface); color: var(--text-soft); font-size: 0.75rem; font-weight: 600; }
body.is-phone-studio .inky-empty { display: grid; justify-items: center; gap: 12px; padding: 28px 12px 16px; text-align: center; }
body.is-phone-studio .inky-empty .inky-mark { width: 52px; opacity: 1; color: var(--phone-accent); }
body.is-phone-studio .inky-empty p { max-width: 30ch; margin: 0; color: var(--text-soft); font-size: 0.9375rem; line-height: 1.55; }
body.is-phone-studio .assistant-placement { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0; }
body.is-phone-studio .assistant-placement > span { flex: 1 1 100%; color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
body.is-phone-studio .assistant-placement .context-chip { min-height: 36px; padding: 0 12px; border: 1px solid var(--phone-line); border-radius: 999px; background: var(--phone-surface); color: var(--text); font-size: 0.8125rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
body.is-phone-studio .inky-proposal { padding: 14px 16px; border: 1px solid var(--phone-accent-line); border-radius: 20px; background: var(--phone-surface); box-shadow: var(--phone-shadow); }
body.is-phone-studio .proposal-head strong { color: var(--phone-accent); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
body.is-phone-studio .proposal-head span { color: var(--muted); font-size: 0.8125rem; }
body.is-phone-studio .proposal-actions .primary-button { border: 0; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 600; }
/* The starters and the composer. */
body.is-phone-studio .assistant-suggestions { gap: 8px; margin: 0; padding-bottom: 10px; }
body.is-phone-studio .assistant-suggestions button { padding: 0 14px; border: 1px dashed var(--phone-accent-line); background: transparent; color: var(--phone-accent); font-size: 0.8125rem; font-weight: 600; }
body.is-phone-studio .assistant-form { gap: 8px; align-items: center; padding: 10px var(--phone-pad-x) calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--phone-line); background: var(--phone-surface); }
body.is-phone-studio .assistant-form textarea {
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--phone-line);
  border-radius: 24px;
  background: var(--bg, #f4f4f8);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.4;
}
body.is-phone-studio .assistant-form textarea:focus-visible { outline: 0; border-color: var(--phone-accent-line); box-shadow: 0 0 0 4px var(--phone-accent-wash); }
body.is-phone-studio .assistant-form .capture-submit { width: var(--phone-touch); height: var(--phone-touch); border: 0; border-radius: 50%; background: var(--brand); color: #fff; font-size: 1.125rem; box-shadow: 0 10px 22px -12px rgba(31, 63, 168, 0.8); }
/* The conversation picker, on the blue: a paper sheet. */
body.is-phone-studio .phone-inky-hero .thread-picker { border: 1px solid var(--phone-line); border-radius: 18px; background: var(--phone-surface); color: var(--text); box-shadow: var(--phone-shadow-lg); }
/* Inky without the blue (Herv): the same top, on the canvas — muted kicker, paper pills and
   disc, the squid in a soft accent disc, the name in ink; the scope strip a paper card that
   simply follows. Inky is a room to think in, not a page to arrive on. */
body.is-phone-studio .phone-inky-hero { margin: 0; padding: calc(var(--phone-pad-top) + env(safe-area-inset-top, 0px)) 0 4px; overflow: visible; border-radius: 0; background: none; color: var(--text); box-shadow: none; }
body.is-phone-studio .phone-inky-hero::before,
body.is-phone-studio .phone-inky-hero::after { content: none; }
body.is-phone-studio .phone-inky-hero .thread-identity,
body.is-phone-studio .phone-inky-hero .saved-thread { color: var(--muted); }
body.is-phone-studio .phone-inky-hero .thread-actions .text-button { border-color: var(--phone-line); background: var(--phone-surface); color: var(--text-soft); box-shadow: var(--phone-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.is-phone-studio .phone-inky-hero .thread-actions .icon-button { border-color: var(--phone-line); background: var(--phone-surface); color: var(--text-soft); box-shadow: var(--phone-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.is-phone-studio .phone-inky-hero .think-orb { border-color: var(--phone-accent-line); background: var(--phone-accent-wash); color: var(--phone-accent); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.is-phone-studio .phone-inky-hero .assistant-heading h2 { color: var(--text); }
body.is-phone-studio .phone-inky-hero .assistant-heading p { color: var(--muted); }
body.is-phone-studio .premium-assistant .context-strip { margin: 14px 0; box-shadow: var(--phone-shadow); }
body.is-phone-studio .phone-inky-hero .thread-picker { box-shadow: var(--phone-shadow); }
/* Inky's scope card and starters, tidied (Herv). The card is one line: the kicker, the chips,
   and "Add idea" as a solid pill at the right; the three starters are equal paper pills with
   a spark, sharing one row and growing to fill it, two and one when the row is narrow. */
body.is-phone-studio .premium-assistant .context-strip { gap: 8px; padding: 10px 10px 10px 14px; }
body.is-phone-studio .premium-assistant .context-strip .context-add {
  flex: 0 0 auto;
  min-height: 34px;
  margin-left: auto;
  padding: 0 12px;
  border: 1px solid var(--phone-line);
  border-radius: 999px;
  background: var(--phone-surface);
  color: var(--text-soft);
  font-size: 0.8125rem;
  font-weight: 600;
}
body.is-phone-studio .assistant-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
body.is-phone-studio .assistant-suggestions button {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--phone-touch);
  padding: 0 12px;
  border: 1px solid var(--phone-line);
  border-radius: 999px;
  background: var(--phone-surface);
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  box-shadow: var(--phone-shadow);
}
body.is-phone-studio .assistant-suggestions button::before { content: "✦"; color: var(--phone-accent); font-size: 0.75rem; }
/* A native select is as wide as its longest option; closed, this one only ever says
   "+ Add idea…", so it takes that width and stays on the card's one line. */
body.is-phone-studio .premium-assistant .context-strip .context-add { width: 7.75rem; max-width: 100%; }
/* The card is two clean lines: the kicker on its own, then the chips with "Add idea" at the
   right end of their line — never a chip left on one line and the select stranded on the next. */
body.is-phone-studio .premium-assistant .context-strip > span:first-child { flex: 1 1 100%; margin-bottom: -2px; }

/* The Gallery (Brand pass 1) ===============================================================
 *
 * Herv's mark: a cream thinker on ultramarine with a gold thought, cut like paper. The phone
 * now takes everything from it. Ultramarine is the ink — the headings, the tab you are on,
 * every primary button; cream is the wall every page opens on, where the blue gradient was;
 * a warmer paper is the canvas under the wall; gold is the one highlight, spent on the
 * thought alone. On Home the thinker himself sits on the capture pill in ultramarine — the
 * icon's own negative; the other pages hang his thought, cut from a deeper cream. Flat, like
 * a cutout: no glass, no gradients, no glow.
 */
body.is-phone-studio {
  --brand: #13287d;
  --brand-deep: #0d1c5c;
  --brand-soft: #34479f;
  --cream: #f4edde;
  --cream-deep: #e7dcc3;
  --paper: #faf7f0;
  --paper-2: #f3eee3;
  --gold: #d2a963;
  --gold-deep: #b08538;
  --gold-wash: rgba(210, 169, 99, 0.2);
  --text: #171c33;
  --text-soft: #3c4160;
  --muted: #686d85;
  --violet: var(--brand);
  --violet-bright: var(--brand-soft);
  --violet-soft: rgba(19, 40, 125, 0.08);
  --line: rgba(19, 40, 125, 0.13);
  --line-strong: rgba(19, 40, 125, 0.36);
  --panel-solid: #fffdf8;
  --phone-surface: #fffdf8;
  --phone-line: rgba(19, 40, 125, 0.12);
  --phone-accent: #13287d;
  --phone-accent-wash: rgba(19, 40, 125, 0.07);
  --phone-accent-line: rgba(19, 40, 125, 0.3);
  --phone-shadow: 0 6px 18px rgba(19, 40, 125, 0.06);
  --phone-shadow-lg: 0 18px 44px rgba(19, 40, 125, 0.16);
  --phone-shadow-float: 0 10px 30px rgba(19, 40, 125, 0.12);
  /* The system's own serif where there is one (New York on an iPhone), Georgia elsewhere. */
  --serif: ui-serif, Georgia, "Times New Roman", serif;
  --hero-wall: var(--cream);
  --hero-ink: var(--brand);
  --hero-seam-shadow: 0 16px 34px -14px rgba(19, 40, 125, 0.24);
  /* His thought, cut from the deeper cream, for the pages that hang it. */
  background: var(--paper);
}

/* The wall. Every hero is the cream with ultramarine words on it; the shapes that floated
   on the blue are gone. */
body.is-phone-studio :is(.phone-topbar.is-home, .phone-lib-hero, .phone-review-hero, .phone-connect-hero, .phone-inky-hero) {
  background: var(--hero-wall);
  color: var(--hero-ink);
  box-shadow: var(--hero-seam-shadow);
}
body.is-phone-studio :is(.phone-topbar.is-home, .phone-lib-hero, .phone-review-hero, .phone-connect-hero, .phone-inky-hero)::before { display: none; }
body.is-phone-studio .phone-topbar.is-home::after { display: none; }
body.is-phone-studio :is(.phone-lib-hero, .phone-review-hero, .phone-connect-hero, .phone-inky-hero)::after {
  top: auto;
  right: 18px;
  bottom: calc(var(--home-hero-overlap, 28px) + 10px);
  width: 96px;
  height: 80px;
  border-radius: 0;
  background: var(--thought-cutout) no-repeat center / contain;
  filter: none;
}
body.is-phone-studio .phone-inky-hero::after { bottom: 34px; }

/* The words on the wall: serif headings in ultramarine, the rest in the studio's ink. */
body.is-phone-studio .phone-topbar.is-home .phone-topbar-name h1,
body.is-phone-studio .phone-lib-hero .phone-lib-head h1,
body.is-phone-studio :is(.phone-review-head, .phone-connect-head) h1,
body.is-phone-studio .phone-inky-hero .assistant-heading h2 {
  color: var(--brand);
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.02em;
}
body.is-phone-studio .phone-topbar.is-home .phone-topbar-name h1 { font-size: 2.25rem; line-height: 1.04; }
body.is-phone-studio .phone-lib-hero .phone-lib-head h1 { font-size: 2.125rem; line-height: 1.06; }
body.is-phone-studio :is(.phone-review-head, .phone-connect-head) h1 { font-size: 1.875rem; line-height: 1.08; }
body.is-phone-studio .phone-inky-hero .assistant-heading h2 { font-size: 1.75rem; }
body.is-phone-studio .phone-topbar.is-home .phone-topbar-name span,
body.is-phone-studio :is(.phone-review-sub, .phone-connect-sub),
body.is-phone-studio .phone-inky-hero .assistant-heading p { color: var(--text-soft); }
body.is-phone-studio :is(.phone-lib-hero, .phone-review-hero, .phone-connect-hero) .phone-brand,
body.is-phone-studio .phone-lib-hero .phone-kicker,
body.is-phone-studio :is(.phone-review-head, .phone-connect-head) .phone-kicker,
body.is-phone-studio .phone-inky-hero :is(.thread-identity, .saved-thread) { color: var(--brand-soft); }

/* The pills on the wall are paper with a hairline and ultramarine ink, not glass. */
body.is-phone-studio :is(.phone-home, .phone-lib-hero) .phone-home-count,
body.is-phone-studio :is(.phone-home, .phone-lib-hero) .phone-sync-slot .mobile-sync-chip,
body.is-phone-studio .phone-lib-hero .phone-lib-count,
body.is-phone-studio :is(.phone-review-hero, .phone-connect-hero) .phone-page-actions .secondary-button,
body.is-phone-studio .phone-inky-hero .thread-actions .text-button,
body.is-phone-studio .phone-inky-hero .thread-actions .icon-button,
body.is-phone-studio .phone-inky-hero .think-orb,
body.is-phone-studio .phone-review-stat {
  border: 1px solid var(--line);
  background: var(--phone-surface);
  color: var(--brand);
  box-shadow: 0 4px 14px -6px rgba(19, 40, 125, 0.18);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.is-phone-studio .phone-topbar.is-home .phone-sparkle { border: 1px solid var(--line); background: var(--phone-surface); color: var(--brand); box-shadow: 0 4px 14px -6px rgba(19, 40, 125, 0.18); }
body.is-phone-studio .phone-home .phone-home-count svg { color: var(--gold); }
body.is-phone-studio .phone-home .phone-home-count strong { color: var(--brand); }
body.is-phone-studio .phone-home .phone-home-count span { color: var(--muted); }
body.is-phone-studio :is(.phone-home, .phone-lib-hero) .phone-sync-slot .mobile-sync-chip { color: var(--text-soft); }
body.is-phone-studio :is(.phone-home, .phone-lib-hero) .mobile-sync-dot { background: var(--muted-2); box-shadow: 0 0 0 2px rgba(19, 40, 125, 0.08); }
body.is-phone-studio :is(.phone-home, .phone-lib-hero) .mobile-sync-chip[data-state="uptodate"] .mobile-sync-dot { background: #3d9a63; }
body.is-phone-studio :is(.phone-home, .phone-lib-hero) .mobile-sync-chip:is([data-state="saved"], [data-state="waiting"], [data-state="syncing"]) .mobile-sync-dot { background: var(--gold); }
body.is-phone-studio :is(.phone-home, .phone-lib-hero) .mobile-sync-chip:is([data-state="attention"], [data-state="trouble"]) .mobile-sync-dot { background: #c2453d; }
body.is-phone-studio .phone-review-stat strong { color: var(--brand); }
body.is-phone-studio .phone-review-stat span { color: var(--text-soft); }
body.is-phone-studio .phone-inky-hero .think-orb { box-shadow: 0 4px 14px -6px rgba(19, 40, 125, 0.18); }
body.is-phone-studio .phone-inky-hero .thread-picker { border-color: var(--line); }

/* The thinker on Home. He sits on the capture pill at the right, in ultramarine, with his
   gold thought; the greeting keeps to the left of him. When a person's text size makes the
   greeting need the whole wall — the wall is narrower than 18rem — he steps out of the frame
   entirely (the clamp folds his width to nothing) and the greeting takes the width back. */
body.is-phone-studio .phone-topbar.is-home .phone-topbar-name { max-width: calc(100% - clamp(0px, calc((100vw - 18rem) * 100), 8.5rem)); }
body.is-phone-studio .phone-hero-figure {
  position: absolute;
  right: 4px;
  bottom: calc(var(--home-hero-overlap) - 3px);
  z-index: -1;
  width: clamp(0px, calc((100vw - 18rem) * 100), 132px);
  color: var(--brand);
  line-height: 0;
  pointer-events: none;
}
body.is-phone-studio .phone-hero-figure svg { display: block; width: 100%; height: auto; }

/* The seam: the pills that cross it cast a shadow for a cream wall. */
body.is-phone-studio .phone-home .capture-shell,
body.is-phone-studio .phone-library .phone-search input,
body.is-phone-studio .phone-review .review-segments { box-shadow: 0 16px 34px -12px rgba(19, 40, 125, 0.26); }
/* The capture pill is paper, flat: the blurred sphere behind its lock belonged to the blue. */
body.is-phone-studio .phone-home .capture-shell::before { display: none; }
/* His thought hangs small and gold after the wordmark on every page that turns its name
   down, rather than large on the wall behind the page's own controls. */
body.is-phone-studio :is(.phone-lib-hero, .phone-review-hero, .phone-connect-hero, .phone-inky-hero)::after { display: none; }
body.is-phone-studio :is(.phone-lib-hero, .phone-review-hero, .phone-connect-hero) .phone-brand { display: inline-flex; align-items: center; gap: 6px; }
body.is-phone-studio :is(.phone-lib-hero, .phone-review-hero, .phone-connect-hero) .phone-brand::after {
  content: "";
  display: inline-block;
  width: 19px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cg fill='%23d2a963'%3E%3Ccircle cx='72' cy='30' r='22'/%3E%3Ccircle cx='50' cy='38' r='16'/%3E%3Ccircle cx='92' cy='42' r='15'/%3E%3Ccircle cx='70' cy='48' r='18'/%3E%3Ccircle cx='30' cy='68' r='7'/%3E%3Ccircle cx='14' cy='86' r='4.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

/* The gate on the wall (The Gallery pass) ==================================================
 *
 * The sign-in is the first thing a person sees after the icon, so it is the icon, opened:
 * the cream wall, the thinker in ultramarine at the top right with his gold thought, the
 * name in the studio's serif, the one promise beside him, and a sheet of paper below that
 * holds the form. Ultramarine ink, one gold point per promise, nothing else coloured.
 */
body.is-phone-gate {
  --brand: #13287d;
  --brand-deep: #0d1c5c;
  --brand-soft: #34479f;
  --cream: #f4edde;
  --cream-deep: #e7dcc3;
  --paper: #faf7f0;
  --gold: #d2a963;
  --text: #171c33;
  --text-soft: #3c4160;
  --muted: #686d85;
  --line: rgba(19, 40, 125, 0.13);
  --panel-solid: #fffdf8;
  --violet: var(--brand);
  --serif: ui-serif, Georgia, "Times New Roman", serif;
  background: var(--cream);
}
body.is-phone-gate #mobile-gate { background: var(--cream); color: var(--text); }
body.is-phone-gate .gate-hero { padding-bottom: 18px; }
/* The figure: he sits at the top right, above the sheet, and the words keep to his left.
   Should the text size make the wall narrower than 18rem he steps out (the clamp folds him
   to nothing) and the words take the whole wall. */
body.is-phone-gate .gate-figure {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 22px);
  right: max(10px, calc(50% - 254px));
  width: clamp(0px, calc((100vw - 18rem) * 100), 156px);
  color: var(--brand);
  line-height: 0;
  pointer-events: none;
}
body.is-phone-gate .gate-figure svg { display: block; width: 100%; height: auto; }
body.is-phone-gate #mobile-gate:not(:has(.gate-intro)) .gate-hero { min-height: calc(env(safe-area-inset-top, 0px) + 214px); }
body.is-phone-gate .gate-hero .wordmark { max-width: calc(100% - clamp(0px, calc((100vw - 18rem) * 100), 10rem)); }
body.is-phone-gate .gate-hero .wordmark h1 { color: var(--brand); font-family: var(--serif); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
body.is-phone-gate .gate-hero .wordmark span { color: var(--brand-soft); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
/* The promise, beside him; the three points beneath, each with a gold point. */
body.is-phone-gate .gate-intro { padding-top: 0; padding-bottom: 22px; }
body.is-phone-gate .gate-intro h2 {
  max-width: calc(100% - clamp(0px, calc((100vw - 18rem) * 100), 10rem));
  min-height: clamp(0px, calc((100vw - 18rem) * 100), 6.75rem);
  margin: 0 0 18px;
  color: var(--brand);
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
body.is-phone-gate .gate-intro .gate-values li { color: var(--text-soft); }
body.is-phone-gate .gate-intro .gate-values li::before { background: var(--gold); }
/* On a phone of ordinary height the wall, the promise and the three points used up so much
   of the first screen that the sheet's own button — Sign in, the single thing this page is
   asking anybody to do — landed just below the fold, and signing in began with a scroll.
   Nothing is removed and nothing is resized out of proportion; the slack around the words
   comes back, and the button comes up with it. */
/* The legacy note is a fold now, and its summary is a quiet line rather than a control
   shouting for the attention the two real doors above it want. */
body.is-phone-gate .gate-legacy { margin-top: 14px; }
body.is-phone-gate .gate-legacy > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.8125rem;
}
body.is-phone-gate .gate-legacy > summary::-webkit-details-marker { display: none; }
body.is-phone-gate .gate-legacy > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
body.is-phone-gate .gate-legacy[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
body.is-phone-gate .gate-legacy p { margin: 0 0 4px; }
body.is-phone-gate #mobile-gate > section:not(.gate-intro) {
  margin: auto 0 0;
  padding-top: 26px;
  border-radius: 30px 30px 0 0;
  background: var(--panel-solid);
  box-shadow: 0 -14px 40px rgba(19, 40, 125, 0.1);
}
body.is-phone-gate #mobile-gate > section:not(.gate-intro) h2,
body.is-phone-gate .gate-kicker { color: var(--brand); font-family: var(--serif); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; }
body.is-phone-gate .settings-field > span { color: var(--text-soft); }
body.is-phone-gate .settings-field input { border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--text); }
body.is-phone-gate .settings-field input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(19, 40, 125, 0.1); }
body.is-phone-gate .gate-input svg { color: var(--brand-soft); }
body.is-phone-gate .gate-forgot .text-button { color: var(--brand); font-weight: 600; }
body.is-phone-gate .gate-actions .primary-button { border: 0; border-radius: 999px; background: var(--brand); color: var(--cream); box-shadow: 0 12px 26px -12px rgba(19, 40, 125, 0.7); }
body.is-phone-gate .gate-or { color: var(--muted); }
body.is-phone-gate .gate-or::before,
body.is-phone-gate .gate-or::after { background: var(--line); }
body.is-phone-gate .gate-create > summary { min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--brand); font-weight: 600; justify-content: center; }
body.is-phone-gate .gate-create[open] > summary { background: var(--cream); }
body.is-phone-gate .gate-fine-print,
body.is-phone-gate .gate-create form p { color: var(--muted); }
body.is-phone-gate #mobile-signin-note { color: var(--text-soft); }

/* The Gallery (Brand pass 2): the cards =====================================================
 *
 * The poster is flat now, as the reference deck is: one field of the family's colour, contour
 * lines in its lower right like a relief map, the category on a cream chip, the name in bold
 * sans, its facts as translucent pills, and the cutout in the corner with no shadow — paper
 * laid on paper. The families are retuned a shade flatter and warmer so the cream and gold
 * sit on them. The same flat colour, and the same cutouts, on the library's row tiles, the
 * category chips, the idea's own hero and the map's discs; and the idea page's one big
 * button is the idea's colour, flat, where it was a gradient.
 */
body.is-phone-studio :is(.idea-card, .row-tile, .phone-category, .phone-category-toggle, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-violet { --poster: #4f46c4; --poster-deep: #33298f; }
body.is-phone-studio :is(.idea-card, .row-tile, .phone-category, .phone-category-toggle, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-indigo { --poster: #2f52c9; --poster-deep: #1f3a96; }
body.is-phone-studio :is(.idea-card, .row-tile, .phone-category, .phone-category-toggle, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-blue { --poster: #2b79c2; --poster-deep: #1b528d; }
body.is-phone-studio :is(.idea-card, .row-tile, .phone-category, .phone-category-toggle, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-teal { --poster: #1e8078; --poster-deep: #125650; }
body.is-phone-studio :is(.idea-card, .row-tile, .phone-category, .phone-category-toggle, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-sage { --poster: #4a805a; --poster-deep: #2f573c; }
body.is-phone-studio :is(.idea-card, .row-tile, .phone-category, .phone-category-toggle, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-rose { --poster: #c4416a; --poster-deep: #86294a; }
body.is-phone-studio :is(.idea-card, .row-tile, .phone-category, .phone-category-toggle, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-amber { --poster: #c8571f; --poster-deep: #8e3a12; --ca-accent: #13287d; }
body.is-phone-studio :is(.idea-card, .row-tile, .phone-category, .phone-category-toggle, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-lilac { --poster: #8a4fae; --poster-deep: #5d3279; }
body.is-phone-studio :is(.idea-card, .row-tile, .phone-category, .phone-category-toggle, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-slate { --poster: #5b6479; --poster-deep: #3a4154; }

/* The cutout's four tones, filled from the family it sits on. */
body.is-phone-studio .ca-cream { fill: #f4edde; }
body.is-phone-studio .ca-gold { fill: var(--ca-accent, #d2a963); }
body.is-phone-studio .ca-tint { fill: color-mix(in oklab, var(--poster) 56%, white); }
body.is-phone-studio .ca-deep { fill: color-mix(in oklab, var(--poster-deep) 74%, black); }
body.is-phone-studio :is(.ca-line-cream, .ca-line-gold, .ca-line-tint, .ca-line-deep, .ca-line-deep-thin, .ca-stroke-cream, .ca-stroke-gold) { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 6; }
body.is-phone-studio .ca-line-cream { stroke: #f4edde; }
body.is-phone-studio .ca-line-gold { stroke: var(--ca-accent, #d2a963); }
body.is-phone-studio .ca-line-tint { stroke: color-mix(in oklab, var(--poster) 56%, white); }
body.is-phone-studio .ca-line-deep { stroke: color-mix(in oklab, var(--poster-deep) 74%, black); }
body.is-phone-studio .ca-line-deep-thin { stroke: color-mix(in oklab, var(--poster-deep) 74%, black); stroke-width: 3.5; }
body.is-phone-studio .ca-stroke-cream { stroke: #f4edde; stroke-width: 16; }
body.is-phone-studio .ca-stroke-gold { stroke: var(--ca-accent, #d2a963); stroke-width: 9; }

/* The poster. */
body.is-phone-studio .idea-card.poster {
  background: var(--contour) no-repeat right -70px bottom -80px / 300px 300px, var(--poster);
  box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--poster-deep) 72%, transparent);
}
body.is-phone-studio .idea-card.poster .idea-visual::before { display: none; }
body.is-phone-studio .idea-card.poster .poster-art { right: 6px; bottom: 6px; width: 132px; height: 132px; }
body.is-phone-studio .idea-card.poster .poster-scene { filter: none; }
body.is-phone-studio .idea-card.poster .visual-category { background: var(--cream); color: var(--brand); box-shadow: none; }
body.is-phone-studio .idea-card.poster .visual-glyph { background: var(--poster); color: var(--cream); }
body.is-phone-studio .idea-card.poster .visual-privacy { background: var(--cream); color: #7a4a20; box-shadow: none; }
body.is-phone-studio .idea-card.poster .card-title { color: #fffdf8; text-shadow: none; }
body.is-phone-studio .idea-card.poster .card-title.is-working-name { text-decoration-color: rgba(255, 253, 248, 0.55); }
body.is-phone-studio .idea-card.poster .card-summary { color: rgba(255, 253, 248, 0.84); text-shadow: none; }
body.is-phone-studio .idea-card.poster .card-footer { min-height: 132px; }
body.is-phone-studio .idea-card.poster .card-meta {
  gap: 6px;
  min-height: 28px;
  padding: 0 10px 0 6px;
  border: 1px solid rgba(255, 253, 248, 0.26);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.14);
  color: #fffdf8;
  font-size: 0.75rem;
  font-weight: 600;
}
body.is-phone-studio .idea-card.poster .card-meta svg { width: 18px; height: 18px; padding: 2px; background: transparent; color: var(--cream); }
body.is-phone-studio .idea-card.poster .card-more { border: 1px solid rgba(255, 253, 248, 0.26); background: rgba(255, 253, 248, 0.14); color: #fffdf8; }

/* The same colour, flat, everywhere else the family shows. */
body.is-phone-studio .row-tile { background: var(--poster); box-shadow: none; }
body.is-phone-studio .row-tile .poster-scene { inset: 4px; filter: none; }
body.is-phone-studio .phone-category-glyph { background: var(--poster, var(--brand)); color: var(--cream); }
body.is-phone-studio .phone-category.is-active { background: var(--poster, var(--brand)); box-shadow: none; }
body.is-phone-studio .phone-category.is-active .phone-category-glyph { background: var(--cream); }
body.is-phone-studio .detail-hero {
  background: var(--contour) no-repeat right -90px bottom -100px / 380px 380px, var(--poster);
  box-shadow: 0 18px 40px -26px color-mix(in srgb, var(--poster-deep) 72%, transparent);
}
body.is-phone-studio .detail-hero::after { display: none; }
body.is-phone-studio .detail-hero-art .poster-scene { filter: none; }
body.is-phone-studio .cg-node .cg-soma { background: var(--poster, var(--brand)); box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--poster-deep, var(--brand)) 70%, transparent); }
body.is-phone-studio .cg-dot { background: var(--poster, var(--brand)); }
body.is-phone-studio .cg-edge { color: rgba(19, 40, 125, 0.45); }
body.is-phone-studio .cg-node.is-lit .cg-soma { box-shadow: 0 0 0 3px rgba(19, 40, 125, 0.3); }
body.is-phone-studio :is(.detail-inner, .confirm-dialog) {
  --idea-gradient: var(--idea);
  --idea-glow: 0 10px 22px -14px color-mix(in srgb, var(--idea-deep) 70%, transparent);
}

/* Thought cards: the time-of-day tile is the idea's colour cut in paper with a cream glyph;
   the kind's small tile likewise; a pinned thought is the flat poster with its contours. */
body.is-phone-studio .thought-daypart,
body.is-phone-studio .thought-card:is(.is-morning, .is-day, .is-evening, .is-night) .thought-daypart { background: var(--idea); color: var(--cream); }
body.is-phone-studio .thought-kind i { background: var(--idea); color: var(--cream); }
body.is-phone-studio .thought-card.is-pinned {
  background: var(--contour) no-repeat right -110px bottom -130px / 300px 300px, var(--idea);
  color: #fffdf8;
  box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--idea-deep) 72%, transparent);
}
body.is-phone-studio .thought-card.is-pinned .thought-daypart { background: rgba(255, 253, 248, 0.18); color: var(--cream); }
body.is-phone-studio .thought-card.is-pinned .thought-kind i { background: rgba(255, 253, 248, 0.18); color: var(--cream); }
/* The gate's hero holds the figure's height, so the wordmark sits beside him and the promise
   runs the whole wall beneath them both. */
body.is-phone-gate .gate-hero { display: flex; align-items: center; min-height: calc(env(safe-area-inset-top, 0px) + 178px); padding-bottom: 8px; }
body.is-phone-gate .gate-figure { top: calc(env(safe-area-inset-top, 0px) + 18px); width: clamp(0px, calc((100vw - 18rem) * 100), 152px); }
body.is-phone-gate .gate-intro h2 { max-width: none; min-height: 0; font-size: 2.125rem; }
body.is-phone-gate #mobile-gate:not(:has(.gate-intro)) .gate-hero { min-height: calc(env(safe-area-inset-top, 0px) + 190px); }
/* The idea's cutout stands whole inside its hero rather than bleeding off the edge. */
body.is-phone-studio .detail-hero-art { width: 138px; height: 138px; margin-right: -6px; }
/* The Library's head is a row that wraps: the name never breaks inside a word (its floor is
   its longest word), and when a person's text size leaves no room beside it the count steps
   down onto the next line instead. */
body.is-phone-studio .phone-lib-hero .phone-lib-head { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 6px; }
body.is-phone-studio .phone-lib-hero .phone-lib-head .phone-kicker { flex: 1 1 100%; }
body.is-phone-studio .phone-lib-hero .phone-lib-head h1 { flex: 1 1 auto; min-width: min-content; overflow-wrap: normal; }
body.is-phone-studio .phone-lib-hero .phone-lib-count { flex: 0 0 auto; margin-left: auto; }
/* The gate's hero is tall enough for the whole figure, the wordmark keeps to the left edge
   beside him with its line on one row, and the promise starts beneath his feet. */
body.is-phone-gate .gate-hero { min-height: calc(env(safe-area-inset-top, 0px) + 204px); }
body.is-phone-gate .gate-hero .wordmark { flex: 0 1 auto; align-items: flex-start; justify-content: flex-start; margin: 0; text-align: left; }
body.is-phone-gate .gate-hero .wordmark span { font-size: 0.625rem; letter-spacing: 0.12em; }
body.is-phone-gate .gate-intro { padding-top: 6px; }
body.is-phone-gate .gate-hero { justify-content: flex-start; }
body.is-phone-gate .gate-hero { flex-direction: row; }
/* The promise on the wall, written to bring a person in: a headline that names the fear, three
   points that each lead with the benefit in ultramarine and follow with how. */
body.is-phone-gate .gate-intro h2 { font-size: 2.25rem; line-height: 1.06; margin-bottom: 20px; }
body.is-phone-gate .gate-intro .gate-values { gap: 12px; }
body.is-phone-gate .gate-intro .gate-values li { font-size: 0.9375rem; line-height: 1.5; }
body.is-phone-gate .gate-intro .gate-values li strong { color: var(--brand); font-weight: 700; }

/* THE ONE THING THIS PAGE IS ASKING FOR, ON THE FIRST SCREEN.
 *
 * The wall, the promise and its three points are sized for a tall phone, and on an ordinary
 * one they pushed the sheet down far enough that "Sign in" — the single action the page
 * exists to offer — began below the fold, so signing in started with a scroll every time.
 * Nothing is removed and nothing is reproportioned: the figure keeps his room, the headline
 * keeps its weight, and the slack around them comes back. Written here, after the pass that
 * set these values, because at equal specificity the last rule is the one that counts.
 */
@media (max-height: 880px) {
  /* The hero's height is NOT one of the things that gives: it is measured to clear the whole
     figure, and shortening it walked the headline into his leg. The room comes from the space
     around the words instead. */
  body.is-phone-gate .gate-hero { padding-bottom: 4px; }
  body.is-phone-gate .gate-intro { padding-top: 2px; padding-bottom: 8px; }
  body.is-phone-gate .gate-intro h2 { font-size: 1.9375rem; margin-bottom: 14px; }
  body.is-phone-gate .gate-intro .gate-values { gap: 9px; }
}

/* Six more categories, and the doors on an idea (2026-09-06) ================================
 *
 * Herv: cooking, fitness, travel "etc"; change the category and the description of an idea;
 * a Review lane for the ideas still unsorted; the thought card's details folded until tapped;
 * and no fill behind the time-of-day mark. The six new families are colours the nine did not
 * already own — a brick clay, a leaf moss, a lagoon, an ochre, a plum and a cocoa — each deep
 * enough for cream words; ochre swaps its gold for ultramarine as Business does.
 */
body.is-phone-studio :is(.idea-card, .row-tile, .phone-category, .phone-category-toggle, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-clay { --poster: #b5442f; --poster-deep: #7d2c1d; }
body.is-phone-studio :is(.idea-card, .row-tile, .phone-category, .phone-category-toggle, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-moss { --poster: #5f8a2f; --poster-deep: #3d5d1c; }
body.is-phone-studio :is(.idea-card, .row-tile, .phone-category, .phone-category-toggle, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-lagoon { --poster: #1c7fa0; --poster-deep: #11566e; }
body.is-phone-studio :is(.idea-card, .row-tile, .phone-category, .phone-category-toggle, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-ochre { --poster: #8f5f10; --poster-deep: #5f3f08; --ca-accent: #13287d; }
body.is-phone-studio :is(.idea-card, .row-tile, .phone-category, .phone-category-toggle, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-plum { --poster: #9b3d8a; --poster-deep: #66265b; }
body.is-phone-studio :is(.idea-card, .row-tile, .phone-category, .phone-category-toggle, .detail-hero, .detail-inner, .confirm-dialog, .cg-node, .cg-soma, .cg-dot).art-cocoa { --poster: #7a4a2e; --poster-deep: #52301c; }

/* The category chip on the idea's hero is a door: the same chip, pressable, with a chevron. */
body.is-phone-studio .detail-hero-kicker .category-chip.is-door {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 4px 0 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #1d2130;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.is-phone-studio .detail-hero-kicker .category-chip.is-door::after { content: "›"; color: rgba(29, 33, 48, 0.55); font-size: 0.9375rem; line-height: 1; }

/* The description is a door too: the same line, pressable, with a pencil at its end. */
body.is-phone-studio .detail-hero .detail-summary.is-door {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 253, 248, 0.9);
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.is-phone-studio .detail-hero .detail-summary.is-door.is-empty { color: rgba(255, 253, 248, 0.68); font-style: italic; }
body.is-phone-studio .detail-hero .detail-summary-pen { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 6px; border-radius: 50%; background: rgba(255, 253, 248, 0.18); color: #fffdf8; vertical-align: -6px; }
body.is-phone-studio .detail-hero .detail-summary-pen svg { width: 13px; height: 13px; }
body.is-phone-studio .dialog-compose { display: grid; gap: 8px; margin: 0 0 6px; }
body.is-phone-studio .dialog-compose .secondary-button { justify-self: start; min-height: var(--phone-touch); border-radius: 999px; border-color: var(--idea-line, var(--phone-accent-line)); color: var(--idea-ink, var(--phone-accent)); font-weight: 600; }
body.is-phone-studio .dialog-compose small { color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }

/* A menu row may carry a mark: the category's glyph in its family colour, before the word. */
body.is-phone-studio .dialog-menu-row.has-mark { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
body.is-phone-studio .dialog-menu-row.has-mark small { grid-column: 2; }
body.is-phone-studio .dialog-menu-row.has-mark .dialog-menu-go { grid-column: 3; grid-row: 1 / span 2; }
body.is-phone-studio .dialog-menu-row .dialog-menu-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--poster, var(--brand));
  color: var(--cream);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  grid-row: 1 / span 2;
}
body.is-phone-studio .dialog-menu-row.is-current { background: var(--phone-accent-wash); }
body.is-phone-studio .dialog-menu-row.is-current small { color: var(--brand); font-weight: 600; }
body.is-phone-studio .dialog-menu-row.has-mark.art-clay .dialog-menu-mark { background: #b5442f; }
body.is-phone-studio .dialog-menu-row.has-mark.art-moss .dialog-menu-mark { background: #5f8a2f; }
body.is-phone-studio .dialog-menu-row.has-mark.art-lagoon .dialog-menu-mark { background: #1c7fa0; }
body.is-phone-studio .dialog-menu-row.has-mark.art-ochre .dialog-menu-mark { background: #8f5f10; }
body.is-phone-studio .dialog-menu-row.has-mark.art-plum .dialog-menu-mark { background: #9b3d8a; }
body.is-phone-studio .dialog-menu-row.has-mark.art-cocoa .dialog-menu-mark { background: #7a4a2e; }
body.is-phone-studio .dialog-menu-row.has-mark.art-violet .dialog-menu-mark { background: #4f46c4; }
body.is-phone-studio .dialog-menu-row.has-mark.art-indigo .dialog-menu-mark { background: #2f52c9; }
body.is-phone-studio .dialog-menu-row.has-mark.art-blue .dialog-menu-mark { background: #2b79c2; }
body.is-phone-studio .dialog-menu-row.has-mark.art-teal .dialog-menu-mark { background: #1e8078; }
body.is-phone-studio .dialog-menu-row.has-mark.art-sage .dialog-menu-mark { background: #4a805a; }
body.is-phone-studio .dialog-menu-row.has-mark.art-rose .dialog-menu-mark { background: #c4416a; }
body.is-phone-studio .dialog-menu-row.has-mark.art-amber .dialog-menu-mark { background: #c8571f; }
body.is-phone-studio .dialog-menu-row.has-mark.art-lilac .dialog-menu-mark { background: #8a4fae; }
body.is-phone-studio .dialog-menu-row.has-mark.art-slate .dialog-menu-mark { background: #5b6479; }

/* The thought card, folded: the time-of-day mark has no fill (Herv), and the chevron beside
   it opens the details; the body is the same door for a thumb. */
body.is-phone-studio .thought-daypart,
body.is-phone-studio .thought-card:is(.is-morning, .is-day, .is-evening, .is-night) .thought-daypart { width: 26px; height: 26px; background: transparent; color: var(--idea-ink); }
body.is-phone-studio .thought-daypart svg { width: 19px; height: 19px; stroke-width: 1.7; }
body.is-phone-studio .thought-card.is-pinned .thought-daypart { background: transparent; color: var(--cream); }
body.is-phone-studio .thought-when { gap: 2px; }
body.is-phone-studio .thought-reveal {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -2px -6px -2px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
body.is-phone-studio .thought-reveal svg { width: 18px; height: 18px; }
body.is-phone-studio .thought-card.is-open .thought-reveal svg { transform: rotate(180deg); }
body.is-phone-studio .thought-card.is-pinned .thought-reveal { color: rgba(255, 253, 248, 0.8); }
body.is-phone-studio .thought-body[data-action] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  body.is-phone-studio .thought-reveal svg { transition: transform 160ms ease; }
}

/* Review's third pill, and a third tile when it is needed. */
body.is-phone-studio .phone-review .review-segments .phone-mode { padding: 0 6px; font-size: 0.8125rem; }
body.is-phone-studio .phone-review-stats { grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); }
/* The corner of the thought card holds the time-of-day mark and the details chevron again. */
body.is-phone-studio .thought-top .thought-when { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
/* A menu row with a mark keeps the row's full width and its left-set words. */
body.is-phone-studio .dialog-menu-row.has-mark { width: 100%; text-align: left; }
/* A menu's rows fill the sheet's width whatever the container's alignment says of buttons. */
body.is-phone-studio .confirm-actions.is-menu { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }

/* The receipt's runner-up categories, as fingertip chips on the phone (the product critique
   of 2026-09-06): the lead on its own line, the chips wrapping beneath it. */
body.is-phone-studio .receipt-offers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; }
body.is-phone-studio .receipt-offers-lead { flex: 1 1 100%; font-size: 0.8125rem; color: var(--muted); }
body.is-phone-studio .receipt-offer { min-height: 36px; padding: 0 14px; border-color: var(--phone-accent-line); background: var(--phone-accent-wash); color: var(--phone-accent); font-size: 0.875rem; }

/* The name's pen (the product critique of 2026-09-06): the same disc the description
   wears, beside the name, so the name reads as yours to change. The row already wraps. */
body.is-phone-studio .detail-hero .detail-title-row { display: flex; align-items: flex-start; gap: 8px; }
body.is-phone-studio .detail-hero .detail-title-row textarea.detail-title { flex: 1 1 auto; min-width: 0; }
body.is-phone-studio .detail-hero .detail-title-pen {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  margin-top: 4px;
  padding: 0;
  border: 1px solid rgba(255, 253, 248, 0.34);
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.18);
  color: #fffdf8;
  cursor: pointer;
}
body.is-phone-studio .detail-hero .detail-title-pen svg { width: 16px; height: 16px; }
body.is-phone-studio .detail-hero .detail-title-pen:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.75); outline-offset: 2px; }


/* Less chrome above the ideas (the product critique of 2026-09-06: about 41% of the Library
   screen showed ideas). The hero is one compact head; the display chooser left its strip
   for the ⋯ menu; the first card arrives a hundred pixels sooner. */
body.is-phone-studio .phone-lib-hero { padding-bottom: calc(var(--home-hero-overlap) + 8px); }
body.is-phone-studio .phone-lib-hero .phone-topbar { margin-bottom: 0; }
body.is-phone-studio .phone-lib-hero .phone-lib-head { margin-top: 0; }
body.is-phone-studio .phone-lib-hero .phone-lib-head h1 { font-size: 1.625rem; line-height: 1.1; }
body.is-phone-studio .phone-lib-hero .phone-kicker { margin-bottom: 2px; }
body.is-phone-studio .phone-library .phone-lib-controls .phone-mode-row { display: none; }
body.is-phone-studio .library-overflow-modes { display: grid; gap: 2px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--phone-line); }
body.is-phone-studio .library-overflow-kicker { padding: 2px 12px 6px; color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
body.is-phone-studio .library-overflow-modes button { display: grid; justify-items: start; gap: 1px; width: 100%; min-height: var(--phone-touch); padding: 8px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--text); font: inherit; text-align: left; }
body.is-phone-studio .library-overflow-modes button small { color: var(--muted); font-size: 0.75rem; }
body.is-phone-studio .library-overflow-modes button[aria-checked="true"] { background: var(--phone-accent-wash); color: var(--phone-accent); }
body.is-phone-studio .library-overflow-modes button[aria-checked="true"]::before { content: "✓ "; }
/* Review's entrance, tightened the same way. */
body.is-phone-studio .phone-review-hero { padding-bottom: calc(var(--home-hero-overlap) + 8px); }
body.is-phone-studio .phone-review-hero .phone-topbar { margin-bottom: 0; }
body.is-phone-studio .phone-review-head { margin-top: 0; }
body.is-phone-studio .phone-review-head h1 { font-size: 1.625rem; line-height: 1.1; }
body.is-phone-studio .phone-review-sub { margin-top: 4px; }

/* The three words, on the welcome card (the product critique of 2026-09-06). */
body.is-phone-studio .first-run-words { display: grid; gap: 6px; margin: 10px 0 2px; padding: 0; }
body.is-phone-studio .first-run-words > div { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: 8px; align-items: baseline; }
body.is-phone-studio .first-run-words dt { margin: 0; color: var(--phone-accent); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; }
body.is-phone-studio .first-run-words dd { margin: 0; color: var(--text-soft); font-size: 0.8125rem; line-height: 1.4; }


/* The gate's three pages, under the form; and "Not you? Sign out" beneath the empty
   screen's fold rather than beside its first button (the product critique of 2026-09-06). */
body.is-phone-gate .gate-legal { margin: 18px 0 0; color: var(--muted); font-size: 0.8125rem; text-align: center; }
body.is-phone-gate .gate-legal a { color: var(--phone-accent, #13287d); font-weight: 600; text-decoration: none; }
body.is-phone-gate .gate-legal a:focus-visible { outline: 2px solid var(--phone-accent, #13287d); outline-offset: 2px; border-radius: 4px; }
body.is-phone-gate .gate-not-you { margin: 16px 0 0; color: var(--muted); font-size: 0.8125rem; }
body.is-phone-gate .gate-not-you .text-button { min-height: 44px; padding: 0 6px; }
body.is-phone-studio a.setting-row.is-link { text-decoration: none; color: inherit; }


/* The capture pill at rest (the product critique of 2026-09-06): the welcome says "press
   Capture", so a Capture button is on screen — dimmed until there are words — and the lock
   waits with the row until the field is in use, where it wears its name ("Local only")
   instead of being the one unexplained glyph on the page. Local only still shows at rest
   when it is on: the shell keeps its brass ring and the note beneath says so in words. */
body.is-phone-studio .phone-home .capture-input { padding-right: 116px; }
body.is-phone-studio .phone-home .capture-shell.is-local .capture-input { padding-right: 116px; }
body.is-phone-studio .phone-home .capture-actions .privacy-toggle {
  position: static;
  width: auto;
  margin-right: auto;
  padding: 0 12px 0 10px;
  visibility: inherit;
  box-shadow: none;
}
body.is-phone-studio .phone-home .capture-actions .privacy-toggle > span { display: inline; }
body.is-phone-studio .phone-home .capture-actions .capture-more-toggle { margin-inline: 0; }
body.is-phone-studio .phone-home .capture-actions .capture-submit { margin-left: auto; }
body.is-phone-studio .phone-home .capture-shell:not(:focus-within):not(:has(.capture-input:not(:placeholder-shown))):not(:has(.capture-options)) .capture-actions .capture-submit {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 14px 0 16px;
  opacity: 0.6;
  visibility: visible;
  transform: none;
}

/* With the display chooser gone from the strip, the ⋯ door goes back beside the search pill
   on the bar's first row, and nothing sits on a row of its own. */
body.is-phone-studio .phone-library .phone-lib-bar .phone-search { grid-column: 1; grid-row: 1; }
body.is-phone-studio .phone-library .phone-lib-bar .phone-page-actions { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
body.is-phone-studio .phone-library .phone-lib-bar :is(.phone-filter-strip, .phone-category-row) { grid-column: 1 / -1; }
/* The folded row clips nothing: its own children are hidden by visibility while it is shut,
   and the Capture button sitting in the field's corner at rest is outside its box by design.
   The room the field leaves for that button grows with the text. */
body.is-phone-studio .phone-home .capture-shell:not(:focus-within):not(:has(.capture-input:not(:placeholder-shown))):not(:has(.capture-options)) .capture-actions { overflow: visible; }
body.is-phone-studio .phone-home .capture-input { padding-right: calc(6.25rem + 16px); }
body.is-phone-studio .phone-home .capture-shell.is-local .capture-input { padding-right: calc(6.25rem + 16px); }


/* The dark look (2026-09-06) ================================================================
 *
 * The product critique of 2026-09-06: "No dark mode — in an app that sells capturing at
 * 2 a.m." The phone was deliberately light-only until now (docs/mobile-dark-scheme.md);
 * what makes a second look honest rather than half-there is that it is the SAME tokens,
 * every one of them declared again for a dark paper, proved for contrast in
 * test/mobile-accessibility.test.mjs the way the light ones are. public/theme.js decides
 * which look is on and writes it as data-theme on <body>; this sheet holds no media query,
 * so there is one place the answer comes from. The poster families keep their colours —
 * they were saturated fields with white type already — and the brass stays brass.
 */
body.is-phone-studio[data-theme="dark"],
body.is-phone-gate[data-theme="dark"] {
  color-scheme: dark;
  --brand: #b3c0ff;
  --brand-deep: #c9d2ff;
  --brand-soft: #8f9de0;
  --brand-fill: #3452c2;
  --cream: #1a2040;
  --cream-deep: #232b55;
  --paper: #111426;
  --paper-2: #171b31;
  --gold: #d9b26a;
  --gold-deep: #e7c98a;
  --gold-wash: rgba(217, 178, 106, 0.18);
  --text: #eef0fa;
  --text-soft: #c9cde6;
  --muted: #a3a9ca;
  --muted-2: #a3a9ca;
  --violet: #b3c0ff;
  --violet-bright: #c9d2ff;
  --violet-soft: rgba(179, 192, 255, 0.12);
  --line: rgba(179, 192, 255, 0.16);
  --line-strong: rgba(179, 192, 255, 0.42);
  --panel-solid: #1a1e35;
  --panel: #1a1e35;
  --ink-0: #111426;
  --phone-surface: #1a1e35;
  --phone-surface-soft: rgba(26, 30, 53, 0.7);
  --panel-soft: rgba(26, 30, 53, 0.82);
  --phone-line: rgba(179, 192, 255, 0.14);
  --phone-accent: #b3c0ff;
  --phone-accent-wash: rgba(179, 192, 255, 0.12);
  --phone-accent-line: rgba(179, 192, 255, 0.42);
  --phone-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  --phone-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.5);
  --phone-shadow-float: 0 10px 30px rgba(0, 0, 0, 0.45);
  --hero-wall: #171c38;
  --hero-ink: #dfe4ff;
  --hero-seam-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.6);
  --local: #b08538;
  --local-line: rgba(217, 178, 106, 0.55);
  --local-halo: rgba(217, 178, 106, 0.2);
  --thought-cutout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cg fill='%23283264'%3E%3Ccircle cx='72' cy='30' r='22'/%3E%3Ccircle cx='50' cy='38' r='16'/%3E%3Ccircle cx='92' cy='42' r='15'/%3E%3Ccircle cx='70' cy='48' r='18'/%3E%3Ccircle cx='30' cy='68' r='7'/%3E%3Ccircle cx='14' cy='86' r='4.5'/%3E%3C/g%3E%3C/svg%3E");
  background: var(--paper);
  color: var(--text);
}
/* Fills that were the brand's deep blue keep a blue a person can read white on; the brand
   token itself is the ink now, so headings and links read on the dark paper. */
body.is-phone-studio[data-theme="dark"] .primary-button,
body.is-phone-studio[data-theme="dark"] .capture-submit,
body.is-phone-gate[data-theme="dark"] .gate-actions .primary-button { background: var(--brand-fill); color: #fff; }
body.is-phone-studio[data-theme="dark"] .nav-button.is-active { color: var(--phone-accent); }
body.is-phone-studio[data-theme="dark"] .sidebar { background: var(--phone-surface); border-color: var(--phone-line); }
/* Paper cards that were painted white by hand. */
body.is-phone-studio[data-theme="dark"] :is(.capture-shell, .capture-form, .first-run, .home-quote, .phone-review-cue, .phone-todos, .library-row, .review-decision, .review-up-next, .context-strip, .message.assistant, .capture-receipt, .more-sheet, .settings-modal, .confirm-dialog, .thought-card, .next-move-card, .checklist-teaser, .relationship-row, .connections-filterbar, .capture-options, .capture-context-picker, .thread-picker, .library-overflow-menu, .setting-row, .settings-group, .phone-category, .phone-search, .phone-filter, .phone-mode-row, .prompt-panel, .prompt-choice, .dna-field, .checklist-row, .receipt-offer, .phone-todo-tick > span) {
  background-color: var(--phone-surface);
  border-color: var(--phone-line);
  color: var(--text);
}
body.is-phone-studio[data-theme="dark"] :is(.capture-input, .assistant-form textarea, .add-entry-form textarea, input, textarea, select) { background-color: var(--phone-surface); color: var(--text); border-color: var(--phone-line); }
body.is-phone-studio[data-theme="dark"] :is(.capture-input, textarea, input)::placeholder { color: var(--muted); }
/* The Library's search pill IS its input: the form around it is a square box, and painting
   that box showed as a squared corner behind the rounded field (Herv, 2026-09-07). Scoped to the
   Library's bar, where the pill lives, so it outranks the paper-card list above. */
body.is-phone-studio[data-theme="dark"] .phone-lib-bar .phone-search { background-color: transparent; border-color: transparent; }
body.is-phone-studio[data-theme="dark"] .capture-shell { box-shadow: var(--phone-shadow); }
body.is-phone-studio[data-theme="dark"] .capture-shell::before { opacity: 0.35; }
body.is-phone-studio[data-theme="dark"] :is(.category-chip, .context-chip, .thought-chip, .row-status, .phone-home-count, .mobile-sync-chip, .phone-sparkle, .phone-lib-count, .phone-review-count) { background-color: var(--phone-accent-wash); border-color: var(--phone-line); color: var(--text); }
body.is-phone-studio[data-theme="dark"] .detail-hero-kicker .category-chip { color: #1d2130; }
body.is-phone-studio[data-theme="dark"] .phone-mode.is-active,
body.is-phone-studio[data-theme="dark"] .phone-filter.is-active,
body.is-phone-studio[data-theme="dark"] .tab-button.is-active { background-color: var(--phone-accent-wash); color: var(--phone-accent); border-color: var(--phone-accent-line); }
body.is-phone-studio[data-theme="dark"] .message.user { background: var(--brand-fill); color: #fff; }
body.is-phone-studio[data-theme="dark"] .overlay-scrim { background: rgba(0, 0, 0, 0.55); }
body.is-phone-studio[data-theme="dark"] .assistant-panel,
body.is-phone-studio[data-theme="dark"] .detail-panel { background: var(--paper); }
body.is-phone-studio[data-theme="dark"] .phone-inky-hero { background: var(--paper); }
body.is-phone-studio[data-theme="dark"] .home-quote-bulb { color: var(--gold); }
body.is-phone-studio[data-theme="dark"] .phone-hero-figure,
body.is-phone-gate[data-theme="dark"] .gate-figure { opacity: 0.82; }
body.is-phone-studio[data-theme="dark"] :is(.phone-kicker, .lab-kicker, .capture-option-label, .library-overflow-kicker) { color: var(--brand-soft); }
body.is-phone-studio[data-theme="dark"] :is(.lab-muted, .capture-mode-hint, small, .row-summary, .row-meta) { color: var(--muted); }
/* The gate's sheet, fields and figure on the same dark paper. */
body.is-phone-gate[data-theme="dark"] { background: var(--paper); color: var(--text); }
body.is-phone-gate[data-theme="dark"] .gate-hero { background: var(--hero-wall); }
body.is-phone-gate[data-theme="dark"] #mobile-gate > section:not(.gate-intro) { background: var(--panel-solid); box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.5); }
body.is-phone-gate[data-theme="dark"] .gate-create > summary { background: var(--paper-2); color: var(--brand); border-color: var(--line); }
body.is-phone-gate[data-theme="dark"] .settings-field input { background: var(--paper-2); color: var(--text); border-color: var(--line); }
body.is-phone-gate[data-theme="dark"] .gate-intro h2,
body.is-phone-gate[data-theme="dark"] .gate-intro .gate-values li { color: var(--text); }
body.is-phone-gate[data-theme="dark"] .gate-intro .gate-values li strong { color: var(--brand); }
/* The bar's resting doors and the ghost buttons read on the dark paper. */
body.is-phone-studio[data-theme="dark"] .nav-button { color: var(--muted); }
body.is-phone-studio[data-theme="dark"] .nav-button.is-active { color: var(--phone-accent); }
body.is-phone-studio[data-theme="dark"] :is(.secondary-button, .text-button, .ghost-button, .link-button) { color: var(--phone-accent); }
body.is-phone-studio[data-theme="dark"] :is(.secondary-button, .ghost-button) { background: var(--phone-accent-wash); border-color: var(--phone-accent-line); }
body.is-phone-studio[data-theme="dark"] .icon-button { color: var(--text); background: var(--phone-accent-wash); }
body.is-phone-studio[data-theme="dark"] .toast { background: var(--phone-surface); color: var(--text); border-color: var(--phone-line); box-shadow: var(--phone-shadow-float); }
/* The idea page in the dark look: its washes mix the family colour with the dark paper, its
   ink is the family colour lifted, the name's field stays transparent on the hero. */
body.is-phone-studio[data-theme="dark"] :is(.detail-inner, .confirm-dialog) {
  --idea-wash: color-mix(in srgb, var(--idea) 18%, var(--paper));
  --idea-wash-2: color-mix(in srgb, var(--idea) 28%, var(--paper));
  --idea-line: color-mix(in srgb, var(--idea) 45%, var(--paper));
  --idea-ink: color-mix(in oklab, var(--idea) 55%, white);
}
body.is-phone-studio[data-theme="dark"] .detail-hero textarea.detail-title { background: transparent; color: #fff; }
body.is-phone-studio[data-theme="dark"] .detail-inner :is(h3, h4) { color: var(--text); }
body.is-phone-studio[data-theme="dark"] .settings-modal :is(h2, h3, strong),
body.is-phone-studio[data-theme="dark"] .more-sheet :is(h2, strong) { color: var(--text); }
body.is-phone-studio[data-theme="dark"] :is(.setting-copy > span, .more-copy small) { color: var(--text-soft); }
body.is-phone-studio[data-theme="dark"] .settings-group h3 { color: var(--brand); }

/* The second dark pass (Herv, 2026-09-07: "assess all UI pages in dark mode"): every page
   walked with the seeded library, and every surface the first pass missed. Each rule names
   a thing that was still light-look-only — a paper wash, an editorial grey, the cream token
   used as an ink on a coloured disc (cream IS the dark paper now) — and gives it its dark
   reading. Each is one attribute more specific than the phone rule it corrects, so order
   alone never decides. */
/* Doors and segments that were the pale accent with white type on it: the filled blue. */
body.is-phone-studio[data-theme="dark"] .phone-category-toggle { background: var(--brand-fill); color: #fff; box-shadow: none; }
body.is-phone-studio[data-theme="dark"] .phone-category-toggle.is-chosen { background: linear-gradient(160deg, var(--poster), var(--poster-deep)); }
body.is-phone-studio[data-theme="dark"] .phone-category-toggle.is-open { background: var(--phone-surface); color: var(--phone-accent); }
body.is-phone-studio[data-theme="dark"] .phone-review .review-segments .phone-mode.is-active { background: var(--brand-fill); color: #fff; box-shadow: none; }
body.is-phone-studio[data-theme="dark"] .detail-tabs .tab-button { color: var(--muted); }
body.is-phone-studio[data-theme="dark"] .detail-tabs .tab-button.is-active { color: var(--phone-accent); }
/* Review's Up Next rows and the map's name chips were paper. */
body.is-phone-studio[data-theme="dark"] .review-up-next li { border-color: var(--phone-line); background: var(--paper-2); color: var(--text-soft); }
body.is-phone-studio[data-theme="dark"] .review-up-next li.lab-muted { background: transparent; color: var(--muted); }
body.is-phone-studio[data-theme="dark"] .cg-node .cg-label { border-color: var(--phone-accent-line); background: var(--phone-surface); color: var(--text); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); }
body.is-phone-studio[data-theme="dark"] .cg-edge.is-candidate { color: rgba(179, 192, 255, 0.45); }
/* A destructive choice in a red that reads on dark paper. */
body.is-phone-studio[data-theme="dark"] :is(.danger-button, .danger-text) { color: #ff9c9c; }
body.is-phone-studio[data-theme="dark"] .danger-button { border-color: rgba(255, 140, 140, 0.45); background: rgba(190, 66, 66, 0.2); }
/* Glyphs drawn in the cream token on a category's colour: white, as the poster's type is. */
body.is-phone-studio[data-theme="dark"] :is(.idea-card.poster .visual-glyph, .idea-card.poster .card-meta svg, .phone-category-glyph, .thought-daypart, .thought-kind i, .thought-card.is-pinned .thought-daypart, .thought-card.is-pinned .thought-kind i, .dialog-menu-row .dialog-menu-mark, .dialog-thought .thought-mark) { color: #fff; }
/* Settings' sections were paper cards with the brand's ink on them; the marks beside the
   rows were the light look's deep blue; a field's label was an editorial grey. */
body.is-phone-studio[data-theme="dark"] .settings-section { border-color: var(--phone-line); background: var(--paper-2); box-shadow: none; }
body.is-phone-studio[data-theme="dark"] .settings-section-head { border-bottom-color: var(--phone-line); }
body.is-phone-studio[data-theme="dark"] .settings-section h3 { color: var(--brand); }
body.is-phone-studio[data-theme="dark"] :is(.settings-section-note, .settings-lead) { color: var(--muted); }
body.is-phone-studio[data-theme="dark"] .setting-icon { background: var(--phone-accent-wash); color: var(--phone-accent); }
body.is-phone-studio[data-theme="dark"] .settings-field > span { color: var(--text-soft); }
/* Pages that kept the editorial greys: eyebrows, section titles, empty states, search rows. */
body.is-phone-studio[data-theme="dark"] .eyebrow { color: var(--brand-soft); }
body.is-phone-studio[data-theme="dark"] :is(.section-title, .page-title, .relationship-head h2) { color: var(--text); }
body.is-phone-studio[data-theme="dark"] .empty-state { border-color: var(--phone-line); color: var(--muted); }
body.is-phone-studio[data-theme="dark"] .empty-state h3 { color: var(--text-soft); }
body.is-phone-studio[data-theme="dark"] .thought-search-row { border-color: var(--phone-line); background: var(--phone-surface); }
body.is-phone-studio[data-theme="dark"] .thought-search-kind { background: var(--phone-accent-wash); color: var(--phone-accent); }
body.is-phone-studio[data-theme="dark"] .thought-search-main p { color: var(--text-soft); }
/* A disabled secondary button, and the doors under the empty account's welcome. */
body.is-phone-studio[data-theme="dark"] .secondary-button:disabled,
body.is-phone-gate[data-theme="dark"] .secondary-button:disabled { border-color: var(--phone-line); background: transparent; color: var(--muted); }
body.is-phone-gate[data-theme="dark"] :is(.text-button, .link-button) { color: var(--phone-accent); }
body.is-phone-gate[data-theme="dark"] .secondary-button { border-color: var(--phone-accent-line); background: var(--phone-accent-wash); color: var(--phone-accent); }
/* Found on the rebuilt bundle: a done to-do's pill, a section heading outside the idea panel,
   and the search's "Mentions" line. */
body.is-phone-studio[data-theme="dark"] .stage-toggle.is-on { border-color: rgba(143, 213, 168, 0.5); background: rgba(92, 172, 122, 0.18); color: #9fdcb5; }
body.is-phone-studio[data-theme="dark"] .detail-section-heading h3 { color: var(--text); }
body.is-phone-studio[data-theme="dark"] .semantic-reason { color: var(--muted); }
/* The Options fold (Herv, 2026-09-07, from the phone in dark): the Choose control and the
   picker's search pill were paper with the dark look's ink on them, and the active Save-as
   glyph was the pale accent under white. */
body.is-phone-studio[data-theme="dark"] .capture-context-toggle { border-color: var(--phone-accent-line); background: var(--phone-accent-wash); color: var(--phone-accent); }
body.is-phone-studio[data-theme="dark"] .capture-context-picker.is-open .capture-context-toggle { border-color: var(--phone-accent-line); background: var(--brand-fill); color: #fff; }
body.is-phone-studio[data-theme="dark"] .capture-context-toggle:disabled { border-color: var(--phone-line); background: transparent; color: var(--muted); }
body.is-phone-studio[data-theme="dark"] .capture-context-search { border-color: var(--phone-line); background: var(--paper-2); }
body.is-phone-studio[data-theme="dark"] .capture-context-search:focus-within { border-color: var(--phone-accent-line); box-shadow: 0 0 0 3px var(--phone-accent-wash); }
body.is-phone-studio[data-theme="dark"] .capture-context-search input { background: transparent; }
body.is-phone-studio[data-theme="dark"] .capture-context-search svg { stroke: var(--muted); }
body.is-phone-studio[data-theme="dark"] .capture-context-panel { background: var(--paper-2); }
body.is-phone-studio[data-theme="dark"] .capture-mode.is-active .capture-mode-glyph { background: var(--brand-fill); color: #fff; }
/* The picker's choices (Herv, 2026-09-07, from the phone): the chosen chips, the result rows
   and their ticks, the kind labels, and the "Create as" card were the light look's washes. */
body.is-phone-studio[data-theme="dark"] .capture-context-chip { border-color: var(--phone-accent-line); background: var(--phone-accent-wash); color: var(--phone-accent); }
body.is-phone-studio[data-theme="dark"] .capture-context-option { border-color: var(--phone-line); background: var(--phone-surface); color: var(--text-soft); }
body.is-phone-studio[data-theme="dark"] .capture-context-option.is-active { border-color: var(--phone-accent-line); background: var(--phone-accent-wash); color: var(--phone-accent); }
body.is-phone-studio[data-theme="dark"] .capture-context-check { border-color: var(--phone-accent-line); color: #fff; }
body.is-phone-studio[data-theme="dark"] .capture-context-option.is-active .capture-context-check { border-color: var(--brand-fill); background: var(--brand-fill); }
body.is-phone-studio[data-theme="dark"] .capture-context-option small { color: var(--muted); }
body.is-phone-studio[data-theme="dark"] .capture-context-overflow { background: var(--paper-2); color: var(--muted); }
body.is-phone-studio[data-theme="dark"] .capture-context-create { border-color: var(--phone-accent-line); background: var(--paper-2); }
body.is-phone-studio[data-theme="dark"] .capture-context-create-label { color: var(--text-soft); }
body.is-phone-studio[data-theme="dark"] .capture-context-footer { color: var(--muted); }
/* Settings (Herv, 2026-09-07, from the phone): the page behind its dark sections was cream. The
   modal wears a paper gradient as its background IMAGE, and the dark look had only replaced
   the colour beneath it. */
body.is-phone-studio[data-theme="dark"] .settings-modal { background-image: none; }
/* Clarify & Connect, whole (Herv, 2026-09-07, from the phone in dark: "when it tells you
   what will happen, it looks a little weird — there's like a little white box… and under the
   Why section there are elements that did not transition to dark mode"). This family was
   written before the phone had a second look and every one of its surfaces was a literal:
   a pale lavender card, white washes for the evidence lines and the answer buttons, and
   three editorial greys for the words on them. Three of those surfaces are on the phone's
   Review — `.clarify-preview` is the "What will happen" box in EVERY Review confirmation,
   `.clarify-evidence` is each line under a card's "Why?", and the whole card is drawn again
   on an idea's own page — so they take their dark reading together, here, rather than one
   at a time as each is found. */
body.is-phone-studio[data-theme="dark"] .clarify-card { border-color: var(--phone-line); background: var(--paper-2); }
body.is-phone-studio[data-theme="dark"] .clarify-mark { border-color: var(--phone-accent-line); color: var(--phone-accent); }
body.is-phone-studio[data-theme="dark"] .clarify-noticed small { color: var(--phone-accent); }
body.is-phone-studio[data-theme="dark"] .clarify-noticed p { color: var(--text-soft); }
body.is-phone-studio[data-theme="dark"] .clarify-question { color: var(--text); }
body.is-phone-studio[data-theme="dark"] .clarify-evidence li { border-left-color: var(--phone-accent-line); background: var(--phone-surface); }
body.is-phone-studio[data-theme="dark"] .clarify-evidence q { color: var(--text-soft); }
body.is-phone-studio[data-theme="dark"] .clarify-choice { border-color: var(--phone-line); background: var(--phone-surface); }
body.is-phone-studio[data-theme="dark"] .clarify-choice:hover:not(:disabled),
body.is-phone-studio[data-theme="dark"] .clarify-choice:focus-visible { border-color: var(--phone-accent-line); background: var(--phone-accent-wash); }
body.is-phone-studio[data-theme="dark"] .clarify-choice strong { color: var(--text); }
body.is-phone-studio[data-theme="dark"] .clarify-preview { border-color: var(--phone-accent-line); background: var(--phone-accent-wash); }
body.is-phone-studio[data-theme="dark"] .clarify-preview small { color: var(--phone-accent); }
body.is-phone-studio[data-theme="dark"] .clarify-preview p { color: var(--text); }
/* And Review's own progress track, a light-look blue at twelve per cent — on dark paper it
   was a bar with no bar behind it. */
body.is-phone-studio[data-theme="dark"] .review-meter { background: var(--phone-accent-wash); }


/* The thought's words, editable on the Manage sheet (2026-09-07). The quote is a field: the
   same type as the quote it replaces, a dashed line beneath to say it can be changed, the
   idea's colour when it has the caret. 16px, so a phone does not zoom on focus. */
body.is-phone-studio .dialog-thought .dialog-quote-field { display: block; flex: 1 1 0; min-width: 0; }
body.is-phone-studio .dialog-thought textarea.dialog-quote-edit {
  display: block;
  width: 100%;
  min-height: 4.5em;
  margin: 0;
  padding: 4px 0 6px;
  border: 0;
  border-bottom: 1px dashed var(--idea-line);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  resize: none;
  overflow: hidden;
  field-sizing: content;
}
body.is-phone-studio .dialog-thought textarea.dialog-quote-edit:focus-visible { outline: 0; border-bottom-style: solid; border-bottom-color: var(--idea); box-shadow: 0 1px 0 0 var(--idea); }
body.is-phone-studio .dialog-thought .dialog-edit-hint { display: block; margin-top: 6px; color: var(--muted); font-size: 0.75rem; }
body.is-phone-studio .dialog-thought textarea.dialog-quote-edit:focus-visible + .dialog-edit-hint { color: var(--idea-ink); }
body.is-phone-studio[data-theme="dark"] .dialog-thought textarea.dialog-quote-edit { background: transparent; }


/* A to-do on its idea (Herv, 2026-09-07): the same thought card, its kind drawn as the box
   it is, and its one decision reading "Mark done". */
body.is-phone-studio .thought-card.is-todo .thought-kind i { font-size: 1rem; }
body.is-phone-studio .thought-card.is-todo.is-settled p[data-selectable-text] { text-decoration: line-through; text-decoration-color: var(--idea-line); text-decoration-thickness: 1.5px; }


/* The Save / Cancel bar under an edited thought (Herv, 2026-09-07): fixed to the foot of the
   screen over the sheet, present exactly while the words differ. The sheet keeps room for it. */
body.is-phone-studio .dialog-edit-bar[hidden] { display: none; }
body.is-phone-studio .dialog-edit-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--phone-line);
  background: var(--phone-surface);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.12);
}
body.is-phone-studio .dialog-edit-bar-note { flex: 1 1 auto; min-width: 0; color: var(--text-soft); font-size: 0.875rem; }
body.is-phone-studio .dialog-edit-bar .primary-button,
body.is-phone-studio .dialog-edit-bar .secondary-button { flex: 0 0 auto; min-height: var(--phone-touch); }
body.is-phone-studio .confirm-dialog.has-edit-bar { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }


/* One next move, made useful (Herv, 2026-09-07) ==========================================
   The fields grow with their words — the move reads as the card's statement, in a heavier
   hand, and "In the way" is a field of the same kind rather than a one-line input. A
   suggestion the idea's own words already contain sits under them as one tap, and a
   recorded move wears a Done button in the heading. */
body.is-phone-studio .next-move-card.has-move .next-move-heading { align-items: center; }
body.is-phone-studio .next-move-form textarea.next-move-field { min-height: 44px; height: auto; overflow: hidden; resize: none; field-sizing: content; line-height: 1.45; }
body.is-phone-studio .next-move-form textarea[name="nextAction"] { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
body.is-phone-studio .next-move-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
body.is-phone-studio .next-move-actions .next-move-suggest { flex: 1 1 100%; justify-content: flex-start; min-height: var(--phone-touch); padding: 8px 12px; border: 1px dashed var(--idea-line); border-radius: 14px; background: var(--idea-wash); color: var(--text); font-weight: 500; text-align: left; overflow-wrap: anywhere; }
body.is-phone-studio .next-move-actions .next-move-suggest { gap: 8px; }
body.is-phone-studio .next-move-actions .next-move-suggest b { flex: none; color: var(--idea-ink); font-weight: 700; white-space: nowrap; }
body.is-phone-studio .next-move-actions .next-move-suggest span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
body.is-phone-studio .next-move-done { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 36px; padding: 0 12px; border: 1px solid var(--idea-line); border-radius: 999px; background: var(--phone-surface); color: var(--idea-ink); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body.is-phone-studio .idea-card.poster .card-next b { margin-right: 6px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
body.is-phone-studio[data-theme="dark"] .next-move-form textarea.next-move-field { background-color: var(--phone-surface); }

/* Every to-do on the idea, in one list (Herv, 2026-09-07). */
body.is-phone-studio .todo-list-card { padding: 16px; border-color: var(--idea-line); border-radius: 22px; background: var(--phone-surface); }
body.is-phone-studio .todo-list-head small { display: inline-flex; align-items: center; gap: 8px; color: var(--idea-ink); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; }
body.is-phone-studio .todo-list-head small::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--idea-gradient); }
body.is-phone-studio .todo-list-head h3 { color: var(--text); font-size: 1.0625rem; font-weight: 650; }
body.is-phone-studio .todo-list-all { flex: none; min-height: 36px; color: var(--idea-ink); }
body.is-phone-studio .todo-item label { min-height: var(--phone-touch); padding: 10px 4px; border-top: 1px solid var(--phone-line); }
body.is-phone-studio .todo-item:first-child label { border-top: 0; }
body.is-phone-studio .todo-item input { width: 22px; height: 22px; accent-color: var(--idea); }
body.is-phone-studio .todo-item span { color: var(--text); font-size: 1rem; }
body.is-phone-studio .todo-item.is-done span { color: var(--muted); text-decoration-color: var(--idea-line); }

/* The receipt's "Move it to" row (Herv, 2026-09-07: "it goes off the page"): the select was
   as wide as its longest idea name and left the receipt. The label stands above the control,
   and the control takes exactly the row's width. */
body.is-phone-studio .capture-receipt-controls { min-width: 0; }
body.is-phone-studio .receipt-move { display: grid; gap: 6px; flex: 1 1 100%; min-width: 0; }
body.is-phone-studio .receipt-move select { width: 100%; min-width: 0; max-width: 100%; }

/* The brief's Save / Cancel bar (Herv, 2026-09-07): the thought sheet's bar, on the idea
   panel, present exactly while a field differs from what was saved. The panel keeps room
   for it beneath the last field. */
body.is-phone-studio .brief-edit-bar { z-index: 4; }
body.is-phone-studio .detail-panel.has-edit-bar .detail-inner { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
body.is-phone-studio .dna-form p.dna-note { margin: 4px 0 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }

/* While the capture field holds the keyboard (Herv, 2026-09-07: "white boxes above my phone
   keyboard"): the bar steps out of the way. With the keyboard up the frame is a few hundred
   pixels tall, the Local only / Options / Capture row beneath the field sat UNDER the bar,
   only the tops of its pills showed, and a tap on Options landed on the bar's Home — which
   redrew Home and folded the box. Transform and visibility, not display, so the bar's
   measured height stands; the bar returns the moment the field lets go. */
body.is-phone-studio:has(.phone-home .capture-shell:focus-within) .sidebar { transform: translateY(calc(100% + 32px)); visibility: hidden; pointer-events: none; }

/* The tap trace (Herv, 2026-09-07): a log at the top of the screen, over everything, under
   no finger — it takes no taps and hides nothing that matters for long. */
body.is-phone-studio #tap-trace { position: fixed; top: 0; right: 0; left: 0; z-index: 2147483000; margin: 0; padding: calc(4px + env(safe-area-inset-top, 0px)) 8px 5px; border-bottom: 1px solid rgba(215, 255, 217, 0.35); background: rgba(10, 12, 24, 0.88); color: #d7ffd9; font: 10px/1.35 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  body.is-phone-studio .sidebar { transition: transform 180ms ease, visibility 0s; }
  body.is-phone-studio:has(.phone-home .capture-shell:focus-within) .sidebar { transition: transform 180ms ease, visibility 0s linear 180ms; }
}