/* ============================================================================
   ThunkBox — charcoal / white / #FFACAE
   Mobile-first. The mascot carries the personality; everything else stays calm.
   ========================================================================== */

:root {
  /* Grounds, darkest to lightest */
  --bg:            #0a0a0b;
  --bg-2:          #101012;
  --surface:       #161618;
  --surface-2:     #1c1c1f;
  --surface-3:     #232327;

  /* Hairlines */
  --line:          #26262a;
  --line-2:        #303036;

  /* Type */
  --text:          #ffffff;
  --text-2:        #a8a8b0;
  --text-3:        #6e6e77;

  /* The one accent */
  --accent:        #FFACAE;
  --accent-dim:    rgba(255, 172, 174, .18);
  --accent-line:   rgba(255, 172, 174, .30);
  --accent-wash:   rgba(255, 172, 174, .07);

  --danger:        #ff7a7a;
  --ok:            #FFACAE;

  --font: "Nunito", ui-rounded, "SF Pro Rounded", "Segoe UI Variable",
          system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.28);
  --shadow-lift: 0 2px 6px rgba(0,0,0,.55), 0 18px 44px rgba(0,0,0,.4);

  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Fixed chrome heights — content padding is derived from these */
  --nav-h:      58px;
  --composer-h: 60px;
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(120% 60% at 50% 0%, #141416 0%, transparent 60%),
    linear-gradient(180deg, #0c0c0e 0%, var(--bg) 40%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--text-2); }

/* ---------------------------------------------------------------- gates --- */

.gate {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(100% 60% at 50% 0%, #17171a 0%, transparent 70%),
    var(--bg);
  z-index: 60;
}

.gate-card {
  width: 100%;
  max-width: 380px;
  padding: 30px 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-lift);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gate-mark {
  width: 72px; height: 72px;
  border-radius: 20px;
  align-self: center;
  margin-bottom: 2px;
}

.gate-kicker {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
  margin: 0;
}

.gate-card h1 {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.02em;
  text-align: center;
}

.gate-card > p {
  margin: 0;
  text-align: center;
  color: var(--text-2);
  font-size: .92rem;
}

.gate-card label { display: flex; flex-direction: column; gap: 6px; }
.gate-card label > span {
  font-size: .76rem;
  font-weight: 600;
  color: var(--text-2);
}

.gate-card input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  color: var(--text);
  font-size: 1rem;
}
.gate-card input::placeholder { color: var(--text-3); }
.gate-card input:focus { border-color: var(--accent-line); outline: none; }

.gate-card code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .86em;
  color: var(--accent);
  background: var(--accent-wash);
  padding: 1px 5px;
  border-radius: 5px;
}

.form-error {
  margin: 0;
  min-height: 1.2em;
  font-size: .85rem;
  color: var(--danger);
  text-align: center;
}

/* ---------------------------------------------------------------- buttons - */

.btn {
  padding: 12px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  color: var(--text);
  font-size: .9rem;
  font-weight: 600;
  transition: border-color .15s, background .15s;
}
.btn:hover { border-color: var(--line-2); background: var(--surface-3); }
.btn.active { border-color: var(--accent-line); color: var(--accent); }

.btn-primary {
  border: 0;
  background: var(--accent);
  color: #17090a;
  font-weight: 800;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:disabled { opacity: .45; cursor: default; filter: none; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-2);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn svg { width: 21px; height: 21px; }

/* ---------------------------------------------------------------- shell --- */

.app-shell {
  max-width: 1100px;
  margin: 0 auto;
  transition: padding-bottom .18s ease;
  padding:
    calc(var(--safe-top) + 10px)
    14px
    calc(var(--nav-h) + var(--composer-h) + var(--safe-bottom) + 26px);
}

/* ---------------------------------------------------------------- search -- */

.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 50px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 2px 10px rgba(0,0,0,.3);
  transition: border-color .15s;
}
.search-wrap:focus-within { border-color: var(--accent-line); }

.search-icon {
  flex: 0 0 auto;
  width: 19px; height: 19px;
  color: var(--accent);
}

.search-wrap input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  outline: none;
  -webkit-appearance: none;
}
.search-wrap input::placeholder { color: var(--text-2); }
.search-wrap input::-webkit-search-cancel-button { display: none; }

.search-clear {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border: 0; border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1;
}
.search-clear:hover { color: var(--text); }

/* ---------------------------------------------------------------- brand --- */

.brand-bar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 4px 10px;
}

.brand-mark {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius: 15px;
  display: block;
}

.brand-text { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }

.brand-name {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.05;
  color: var(--text);
}

.brand-slogan {
  margin: 0;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-2);
  line-height: 1.25;
}

/* Sits just under the search bar, pushed right. Small and quiet -- it is a
   footnote to the name, not a second headline. */
.brand-tag {
  margin: 0 4px 6px;
  font-size: .7rem;
  line-height: 1.3;
  text-align: right;
  color: var(--text-2);   /* was --text-3, which was too dim to actually read */
}
@media (max-width: 319px) { .brand-tag { display: none; } }

.brand-menu { flex: 0 0 auto; align-self: flex-start; margin-top: 4px; }

/* ------------------------------------------------------- owner review ----- */

.client-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r);
  background: var(--accent-wash);
}
.client-strip-label {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.client-select {
  flex: 1 1 200px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  color: var(--text);
  font-size: .88rem;
  font-weight: 600;
}
.client-select:focus-visible { outline: 2px solid var(--accent); }
.client-select option { background: var(--surface); color: var(--text); }
.client-meta {
  flex: 1 1 100%;
  font-size: .72rem;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 640px) { .client-meta { flex: 1 1 auto; text-align: right; } }

/* ---------------------------------------------------------------- status -- */

.status-line {
  padding: 2px 4px 10px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-3);
}

.offline-banner {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-2);
  font-size: .84rem;
  text-align: center;
}

.drop-overlay {
  position: fixed;
  inset: 12px;
  z-index: 70;
  display: grid;
  place-items: center;
  border: 2px dashed var(--accent-line);
  border-radius: var(--r-lg);
  background: rgba(10,10,11,.9);
  backdrop-filter: blur(6px);
  color: var(--accent);
  font-size: 1.15rem;
  font-weight: 700;
  pointer-events: none;
}

/* ---------------------------------------------------------------- masonry - */

.masonry {
  column-count: 2;
  column-gap: 12px;
}
/* Two columns is the intended phone layout (the 390px reference shows two).
   Only genuinely narrow devices — 320px-class — collapse to one, where a
   ~140px column really would squeeze the text. */
/* One line of copy has no business being split down two columns. */
.masonry.is-empty { column-count: 1; }
@media (max-width: 359px) { .masonry { column-count: 1; } }
@media (min-width: 700px) { .masonry { column-count: 3; column-gap: 14px; } }
@media (min-width: 900px) { .masonry { column-count: 4; } }

/* Search hits, painted where they sit in the Thunk. */
/* The switch in the menu, and anyone whose device asked for calm. */
.no-animations *,
.no-animations *::before,
.no-animations *::after {
  transition-duration: 0s !important;
  animation-duration: 0s !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
}

mark.hit {
  /* A hit that wraps across two lines keeps its shape on both. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 3px;
  border-radius: 4px;
  background: var(--accent);
  color: #000;
  font-weight: 700;
}

.thunk-card {
  cursor: pointer;   /* the whole capsule opens */
  break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.thunk-card:hover { border-color: var(--line-2); }
/* Reachable without a pointer, now that Open has left the menu. */
.thunk-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Adding to a Thunk lives in the editor now. */
.editor-add { display: flex; }
#editorAddBtn { display: inline-flex; align-items: center; gap: 7px; }
#editorAddBtn svg { width: 16px; height: 16px; }

/* The Thunk you just made, arriving. It drops in, wears the accent for a
   beat, then settles down and looks like every other card. */
.thunk-card.just-landed {
  position: relative;
  animation: card-land .34s cubic-bezier(.2,.8,.3,1) both;
}
.thunk-card.just-landed::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--accent);
  border-radius: var(--r);
  pointer-events: none;
  animation: card-land-glow 1.5s ease forwards;
}
@keyframes card-land {
  from { opacity: 0; transform: translateY(-10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes card-land-glow {
  0%, 45% { opacity: 1; }
  100%    { opacity: 0; }
}
.thunk-card button,
.thunk-card summary,
.thunk-card a,
.thunk-card label,
.thunk-card input { cursor: pointer; }
.thunk-card .card-text,
.thunk-card .card-title { cursor: pointer; }
.thunk-card.pinned { border-color: var(--accent-line); }

.card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 11px 8px;
}

.card-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: .74rem;
  font-weight: 700;
  color: var(--text);
}
.card-kind svg { width: 15px; height: 15px; color: var(--accent); flex: 0 0 auto; }
.card-kind span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.card-client-row { padding: 0 11px 2px; display: flex; }
.card-client {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 8px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  color: var(--accent);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .03em;
}

.card-time {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: .66rem;
  color: var(--text-3);
  white-space: nowrap;
}

.card-body { padding: 0 11px 4px; display: flex; flex-direction: column; gap: 8px; }

.card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  letter-spacing: -.01em;
}

/* Capped here so nothing flashes at full length before the trim runs; the
   actual cut is made in JS at a word boundary. -webkit-line-clamp was the
   obvious answer and it is wrong for this: it fits as many characters as it
   can and will happily cut "him" to "hi…". */
.card-text {
  max-height: 13.6em;
  overflow: hidden;
  /* never capped in the full view -- that is where you read the whole thing */
  margin: 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.card-domain {
  font-size: .74rem;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* media inside cards */
.card-image, .youtube-thumb {
  position: relative;
  margin: 0 -11px;
  background: var(--bg-2);
  overflow: hidden;
}
.card-image img, .youtube-thumb img {
  display: block;
  width: 100%;
  height: auto;
  /* A portrait screenshot is 1600px tall. Show the top of it, cropped, rather
     than letting it run the length of the column or get sliced by the cap. */
  max-height: 240px;
  object-fit: cover;
  object-position: top center;
  /* ...but once the Thunk is open you are looking at it on purpose, so the
     whole picture is shown rather than the top 240px of it. */
}
.youtube-thumb { cursor: pointer; }
.youtube-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.youtube-play span {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  color: #17090a;
  font-size: .95rem;
  line-height: 1;
  padding-left: 3px;
}

.audio-box { display: flex; flex-direction: column; gap: 8px; }
.audio-box audio {
  width: 100%;
  height: 38px;
  border-radius: var(--r-sm);
}

.link-box, .file-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  min-width: 0;
  transition: border-color .14s, background .14s;
}
/* A link plate is a real anchor now, so it must not inherit link underlines
   but must still look and behave like something you can follow. */
a.link-box { color: inherit; text-decoration: none; }
a.link-box:hover,
a.link-box:focus-visible { border-color: var(--accent-line); background: var(--surface-2); }
a.link-box:hover .file-meta strong { color: var(--accent); }
.file-box { cursor: pointer; }
.file-box:hover { border-color: var(--accent-line); }
.link-box a, .link-box div { min-width: 0; overflow-wrap: anywhere; }
.link-box a { color: var(--text); font-weight: 600; font-size: .86rem; text-decoration: none; }
.link-box a:hover { color: var(--accent); }

.file-glyph {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--accent-line);
  border-radius: 9px;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.file-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.file-meta strong {
  font-size: .84rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-meta span { font-size: .72rem; color: var(--text-3); }

.checklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.checklist li { display: flex; align-items: flex-start; gap: 9px; }
.checklist input[type="checkbox"] {
  flex: 0 0 auto;
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px;
  margin: 1px 0 0;
  border: 1.5px solid var(--line-2);
  border-radius: 6px;
  background: var(--bg-2);
  position: relative;
  cursor: pointer;
}
.checklist input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.checklist input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #17090a;
  font-size: .74rem;
  font-weight: 900;
}
.checklist span { font-size: .86rem; color: var(--text-2); line-height: 1.4; }
.checklist li.done span { color: var(--text-3); text-decoration: line-through; }

/* card footer */
/* Grid, not flex: the "+ Original" summary shares the row with the star and the
   dots, but the block it opens needs the whole card width. As a flex child it
   was squeezed into a ~90px column and the text came out one word per line. */
.card-footer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: start;
  gap: 8px;
  padding: 6px 11px 10px;
}
/* Column 1 only. Spanning all three put this button underneath the tack and
   the dots, so a tap in the middle of the footer hit the wrong control. */
.card-footer > .card-original-btn { grid-area: 1 / 1 / 2 / 2; }
.card-footer > .card-tack         { grid-area: 1 / 2 / 2 / 3; }
.card-footer > .card-actions      { grid-area: 1 / 3 / 2 / 4; }

/* ---------------------------------------------------------- card flip ---

   Front is the thought, back is the receipt. The back is absolutely
   positioned over the front, so turning a card over never reflows the page.

   The 3D properties are applied ONLY while flipping or flipped. perspective
   and preserve-3d both make an element a containing block for position:fixed
   descendants, and the actions menu is fixed so it can escape the card -- at
   rest the card must stay a plain, untransformed box or that menu gets
   trapped inside it. */

/* A card is a preview, not the whole document. Left uncapped, one long note
   became a 7,686px card -- it owned a whole masonry column, and flipping it
   meant rasterising two layers that tall, which is what made the turn stutter
   while the turn back stayed smooth (those layers were already warm).
   The full text is a tap away on the front and scrollable on the back. */
/* The welcome note is a hello, not a manual: the card shows the greeting and a
   line of it, and the rest waits for whoever taps. Sits beside the general cap
   so the :not(.is-clipped) reset below still applies to it. */
.card-body.is-welcome { max-height: 168px; }

.card-body {
  max-height: 340px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
}
/* Only fade when there is actually something below the fold. */
.card-body:not(.is-clipped) {
  -webkit-mask-image: none;
  mask-image: none;
  max-height: none;
  overflow: visible;
}

.card-flip { position: relative; }

/* The full view turns over. Same reasoning as before about scoping the 3D:
   perspective and preserve-3d make a containing block for position:fixed, and
   at rest this must stay a plain box. */
.modal-shell.flipping, .modal-shell.flipped { perspective: 1400px; }
.detail-flip { position: relative; flex: 1 1 auto; min-height: 0; }
.modal-shell.flipping .detail-flip,
.modal-shell.flipped .detail-flip {
  transform-style: preserve-3d;
  transition: transform .46s cubic-bezier(.4, .1, .3, 1);
  will-change: transform;
}
.modal-shell.flipped .detail-flip { transform: rotateY(180deg); }

.detail-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.detail-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  transform: rotateY(180deg);
  visibility: hidden;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.modal-shell.flipping .detail-back,
.modal-shell.flipped .detail-back { visibility: visible; }
.modal-shell.flipped .detail-front { pointer-events: none; }
.detail-back > div { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }

.card-text.is-full { max-height: none; overflow: visible; }
.detail-actions .btn svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 5px; }
.detail-actions .btn.active { border-color: var(--accent-line); color: var(--accent); }

/* a note that has been changed says so, quietly, on the card */
.card-edited {
  flex: 0 0 auto;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: .75;
}

.card-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }

.card-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  transform: rotateY(180deg);
  border-radius: inherit;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  visibility: hidden;
}
.thunk-card.flipped .card-back,
.thunk-card.flipping .card-back { visibility: visible; }
.thunk-card.flipped .card-front { pointer-events: none; }

/* A one-line note would otherwise flip to a back too short to read. */
.thunk-card.flipped { min-height: 232px; }

.card-back-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 11px 6px;
  border-bottom: 1px solid var(--line);
}
.card-back-title {
  flex: 1 1 auto;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.card-back-expand {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
}
.card-back-expand svg { width: 14px; height: 14px; }
.card-back-expand:hover { background: var(--accent); color: #000; }

.card-back-close {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-2);
  font-size: .95rem;
  line-height: 1;
}
.card-back-close:hover { color: var(--text); border-color: var(--text-3); }

.card-back-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* the button that turns the card over */
.card-original-btn {
  flex: 1 1 auto;
  min-width: 0;
  justify-self: start;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: .72rem;
  font-weight: 600;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-original-btn svg { flex: 0 0 auto; width: 14px; height: 14px; }
.card-original-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-original-btn:hover { color: var(--accent); }

.card-facts {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  font-size: .74rem;
}
.card-facts dt { color: var(--text-3); font-weight: 700; }
.card-facts dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }

/* ---- the pieces the back of the card still needs ---- */

.card-tack {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--text-3);
}
.card-tack svg { width: 19px; height: 19px; }
.card-tack:hover { color: var(--accent); background: var(--accent-wash); }
.card-tack.on { color: var(--accent); }
.card-tack.on svg * { stroke: var(--accent); }

.original-version { display: flex; flex-direction: column; gap: 5px; }
.original-version + .original-version {
  padding-top: 9px;
  border-top: 1px dashed var(--line-2);
}
.original-version pre {
  margin: 0;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  line-height: 1.5;
  color: var(--text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.original-stamp {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.stamp-label {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.original-version + .original-version .stamp-label { color: var(--text-3); }
.stamp-when { font-size: .68rem; color: var(--text-3); }

.original-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.original-actions button {
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: .7rem;
  font-weight: 600;
}
.original-actions button:hover { color: var(--accent); border-color: var(--accent-line); }

.card-actions { flex: 0 0 auto; position: relative; }
.card-actions > summary {
  list-style: none;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  color: var(--text-3);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  letter-spacing: .04em;
}
.card-actions > summary::-webkit-details-marker { display: none; }
.card-actions > summary:hover { color: var(--text); background: var(--surface-3); }

/* Fixed, not absolute: the card is overflow:hidden and lives in a CSS column,
   both of which would clip an absolutely-positioned menu. JS places it. */
.card-actions-menu {
  position: fixed;
  left: 0; top: 0;
  z-index: 60;
  min-width: 178px;
  padding: 5px;
  border: 1px solid var(--line-2);
  border-radius: 13px;
  /* It now floats over other cards, so it needs to read as a separate layer. */
  background: var(--surface-3);
  box-shadow: 0 14px 38px rgba(0,0,0,.72), 0 2px 8px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
}
.card-actions-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font-size: .84rem;
  font-weight: 600;
  text-align: left;
}
.menu-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  color: var(--text-2);
}
.menu-icon svg { width: 17px; height: 17px; }
.card-actions-menu button:hover .menu-icon { color: inherit; }
.card-actions-menu button.danger .menu-icon,
.card-actions-menu button.tack .menu-icon { color: inherit; }
.menu-label { white-space: nowrap; }
.card-actions-menu button:hover { background: var(--surface-3); }
.card-actions-menu button.danger { color: var(--danger); }
.card-actions-menu button.danger:hover { background: rgba(255,122,122,.1); }
/* Tack sits above the rest and is the one thing painted in the accent. */
.card-actions-menu button.tack { color: var(--accent); font-weight: 800; }
.card-actions-menu button.tack:hover { background: var(--accent-wash); }
.card-actions-menu .menu-sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--line-2);
}

/* empty state */
.empty-state {
  padding: 54px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.empty-state strong { font-size: 1.05rem; font-weight: 700; }
.empty-state span { font-size: .88rem; color: var(--text-2); }

.load-more {
  display: block;
  width: 100%;
  margin: 6px 0 0;
  padding: 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text-2);
  font-size: .86rem;
  font-weight: 600;
}
.load-more:hover { color: var(--text); border-color: var(--line-2); }

/* --------------------------------------------------------- composer bar --- */

.composer-bar {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--nav-h) + var(--safe-bottom));
  z-index: 40;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(10,10,11,0) 0%, var(--bg) 34%);
  pointer-events: none;
}

/* The stack above owns the width and the pointer events now. Auto side margins
   on a flex child make it shrink to its content, which quietly halved the box
   on desktop the moment this moved inside .composer-stack. */
.composer-inner {
  display: flex;
  align-items: flex-end;   /* the arrow stays beside the last line as the box grows */
  gap: 9px;
}

.composer-field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-height: 48px;
  padding: 6px 16px 6px 6px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 3px 14px rgba(0,0,0,.4);
}

/* Everything that is not "send" lives here, so the arrow keeps one meaning. */
.composer-add {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  transition: color .15s, background .15s;
}
.composer-add svg { width: 20px; height: 20px; }
.composer-add:hover, .composer-add:focus-visible { color: var(--accent); background: var(--accent-wash); }
.composer-add:active { transform: scale(.92); }
.composer-field:focus-within { border-color: var(--accent-line); }

/* A textarea, not an input: Enter makes a new line, the arrow is the only send. */
.composer-field textarea {
  width: 100%;
  height: 36px;              /* one line; grown by JS from here */
  max-height: 132px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 22px;
  resize: none;
  overflow-y: auto;
  outline: none;
}
/* The question is the invitation, so it wears the accent. Placeholder text
   cannot slide, but its colour can, so one line dissolves into the next. */
.composer-field textarea::placeholder {
  color: var(--accent);
  opacity: 1;
  transition: color .26s ease;
}
.composer-field textarea.placeholder-out::placeholder { color: transparent; }

.composer-send-wrap { position: relative; flex: 0 0 auto; }

/* Appears once there is something to send. Sits across the bottom of the
   circle so it reads as a label ON the button, not a stray tooltip beside it. */
.send-hint {
  position: absolute;
  left: 50%;
  bottom: -4px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: #ffffff;
  color: #000000;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 2px 9px rgba(0,0,0,.55);
  opacity: 0;
  transform: translate(-50%, 4px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.send-hint.show { opacity: 1; transform: translate(-50%, 0); }

.composer-send {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  box-shadow: 0 3px 14px rgba(255,172,174,.22);
  transition: filter .15s, transform .1s;
}
.composer-send:hover:not(:disabled) { filter: brightness(1.06); }
.composer-send:active:not(:disabled) { transform: scale(.94); }
/* Dimmed until there is something to send — the button has exactly one job. */
.composer-send:disabled {
  background: var(--surface-3);
  color: var(--text-3);
  box-shadow: none;
  cursor: default;
}
.composer-send svg { width: 22px; height: 22px; }

/* An opened Thunk shows all of itself: whole pictures, not cropped previews. */
.card-image.is-full img {
  max-height: none;
  object-fit: contain;
  cursor: zoom-in;
}
.card-image.is-full { margin: 0; border-radius: var(--r-sm); }
.detail-piece .note-piece { margin: 2px 0; }

/* The mark on the welcome note. Small on the card, where the greeting is the
   point; roomier once the note is open. */
.welcome-mark { display: flex; justify-content: center; padding: 2px 0 0; }
.welcome-mark img {
  width: 62px; height: 62px;
  border-radius: 16px;
  image-rendering: auto;
}
.welcome-mark.is-full { padding: 4px 0 8px; }
.welcome-mark.is-full img { width: 104px; height: 104px; border-radius: 24px; }

/* --------------------------------------------------------------- boxes ---- */
/* A row of places, only once you have made one. No boxes, no strip, nothing
   for a new account to work out. */

.box-strip {
  margin: 2px 0 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.box-strip::-webkit-scrollbar { display: none; }

.box-chips {
  display: flex;
  gap: 6px;
  width: max-content;
  padding: 1px;
}

.box-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-2);
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
  transition: color .14s, border-color .14s, background .14s;
}
.box-chip:hover { color: var(--text); border-color: var(--text-3); }
.box-chip.active {
  color: #000;
  background: var(--accent);
  border-color: var(--accent);
}
.box-chip-more {
  display: inline-grid;
  place-items: center;
  margin-right: -5px;
  padding: 0 4px;
  border-radius: 7px;
  font-size: .62rem;
  letter-spacing: .5px;
  line-height: 1;
  opacity: .65;
}
.box-chip-more:hover { opacity: 1; background: rgba(0,0,0,.14); }

.box-chip-add { padding: 7px 10px; color: var(--text-3); }
.box-chip-add svg { width: 15px; height: 15px; }
.box-chip-add:hover { color: var(--accent); border-color: var(--accent-line); }

/* Naming a box happens where the box will be, not in a dialog about naming. */
.box-chip-new { padding: 3px 5px 3px 11px; border-color: var(--accent-line); }
.box-chip-new input {
  width: 108px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  outline: none;
}
.box-chip-new input::placeholder { color: var(--text-3); font-weight: 600; }

/* Where a Thunk lives, on the Thunk. */
.card-box {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: .66rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 96px;
}

.modal-narrow { width: min(420px, 92vw); }
.box-pick-list { display: flex; flex-direction: column; gap: 6px; }

.box-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  transition: border-color .14s, background .14s;
}
.box-row:hover, .box-row:focus-visible { border-color: var(--accent-line); background: var(--surface-2); }
.box-row-icon {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--surface-3);
  color: var(--accent);
}
.box-row-icon svg { width: 16px; height: 16px; }
.box-row-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.box-row-text b { font-size: .88rem; font-weight: 700; }
.box-row-text small { font-size: .74rem; color: var(--text-2); }
.box-row.danger .box-row-icon { color: var(--danger); }
.box-row.danger:hover { border-color: rgba(255,122,122,.5); }

/* ------------------------------------------------ parts of a Thunk -------- */
/* One note is being written in the composer: the words in the box, plus a
   stack of parts sitting above them. The plus grows the add row in place, so
   what you already typed never leaves the screen. */

.composer-stack {
  pointer-events: auto;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.add-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: var(--surface-2);
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
  animation: add-row-in .16s ease both;
}
@keyframes add-row-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.add-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 4px 7px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  font-size: .72rem;
  font-weight: 700;
  transition: background .14s, color .14s;
}
.add-chip svg { width: 21px; height: 21px; }
.add-chip:hover, .add-chip:focus-visible { background: var(--accent-wash); color: var(--accent); }
.add-chip:active { transform: scale(.95); }

/* The plus turns into a close when the row is open, so one control has one
   meaning: show me the choices / put them away. */
.composer-add.is-open {
  color: var(--accent);
  background: var(--accent-wash);
  transform: rotate(45deg);
}
.composer-add { transition: color .15s, background .15s, transform .18s; }

.composer-parts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cap-capsule {
  border: 1px solid var(--line-2);
  border-radius: 15px;
  background: var(--surface-2);
  overflow: hidden;
}
.cap-capsule.is-open { border-color: var(--accent-line); }
.cap-capsule.is-busy { opacity: .66; }

.cap-face {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}
.cap-icon,
.cap-thumb {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--surface-3);
  color: var(--accent);
  overflow: hidden;
}
.cap-icon svg { width: 19px; height: 19px; }
.cap-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cap-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cap-text b { font-size: .82rem; font-weight: 700; }
.cap-text small {
  font-size: .74rem;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A thumb cannot hover, so the controls are revealed by tapping the capsule.
   A mouse gets them early, which is a bonus and never the only way in. */
.cap-tools {
  display: none;
  gap: 4px;
  padding: 0 8px 8px 54px;
}
.cap-capsule.is-open .cap-tools,
.cap-capsule.is-hovered .cap-tools { display: flex; }
.cap-tool {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-2);
  transition: color .14s, border-color .14s, background .14s;
}
.cap-tool svg { width: 15px; height: 15px; }
.cap-tool.flip-y svg { transform: rotate(180deg); }
.cap-tool:hover, .cap-tool:focus-visible { color: var(--accent); border-color: var(--accent-line); }
.cap-tool.danger:hover, .cap-tool.danger:focus-visible { color: var(--danger); border-color: rgba(255,122,122,.5); }

.cap-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 12px 12px 12px;
}
.cap-lines { display: flex; flex-direction: column; gap: 6px; }
.cap-line { display: flex; align-items: center; gap: 6px; }
.cap-line input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: .92rem;
}
.cap-line input::placeholder { color: var(--text-3); }
.cap-line input:focus { border-color: var(--accent-line); outline: none; }
.cap-line .cap-tool { width: 30px; height: 30px; border-color: transparent; background: transparent; }
.cap-add-line {
  align-self: flex-start;
  padding: 5px 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  font-size: .78rem;
  font-weight: 700;
}
.cap-add-line:hover { color: var(--accent); background: var(--accent-wash); }
.cap-done { align-self: flex-start; padding: 7px 16px; font-size: .82rem; }

/* ------------------------------------------------- the box is empty ------- */
/* Nothing to read, so the one thing there is to do takes the room. The search
   bar and the brand stay exactly where they are — only the composer moves,
   out of the strip against the nav and up into the space the cards will fill.
   The moment the first Thunk exists this comes off and never comes back. */

.box-empty .app-shell,
.box-empty #app.app-shell {
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 20px);
}
.box-empty .composer-bar {
  position: static;
  z-index: auto;
  padding: 0;
  background: none;
}
/* With one note in a four-column grid, a desktop shows a 255px card marooned
   in a thousand pixels of nothing. While the box is still waiting for a first
   Thunk, the note and the box you write it in line up as one column. */
.box-empty .masonry {
  column-count: 1;
  max-width: 560px;
  margin: 0 auto;
}
.box-empty .composer-stack { max-width: 560px; }
.box-empty .empty-state { max-width: 560px; margin: 0 auto; }
/* ------------------------------------------------ room to write ---------- */
/* The box grows where it is, rather than a dialog opening over the app. Same
   box, same arrow, same place — it just gets bigger while you are in it and
   settles back when you leave. Nothing to dismiss, and the two-second path
   through it is unchanged.
   Applies while the box is empty (nothing else to look at) and while you are
   actually typing in it. */
.box-empty .composer-inner,
.composing .composer-inner { position: relative; }

/* The arrow tucks into the corner of the big box instead of floating beside
   it, so the whole thing reads as one note you are writing. */
.box-empty .composer-send-wrap,
.composing .composer-send-wrap {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.composer-field { transition: border-color .15s, box-shadow .15s, min-height .18s ease, padding .18s ease, border-radius .18s ease; }
/* The bar is fixed, so when it grows it covers more of the list. Without this
   the last card's controls end up underneath it and cannot be tapped at all. */
.composing #app.app-shell {
  padding-bottom: calc(var(--nav-h) + var(--composer-h) + var(--safe-bottom) + 118px);
}
.box-empty .composer-field,
.composing .composer-field {
  align-items: flex-start;
  padding: 14px 66px 12px 8px;
  border-radius: 26px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 6px 26px rgba(0,0,0,.45);
}
/* Waiting for a first Thunk: roomy, but still at rest. */
.box-empty .composer-field {
  min-height: 96px;
  border-color: var(--line-2);
}
/* You are in it. This has to look like something happened even when the box
   was already big because the account is new — otherwise the one moment a
   first-time user needs reassurance is the one moment nothing moves. */
.composing .composer-field {
  min-height: 136px;
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03),
              0 0 0 3px var(--accent-wash),
              0 10px 32px rgba(0,0,0,.5);
}
.box-empty .composer-field textarea,
.composing .composer-field textarea {
  font-size: 1.1rem;
  line-height: 28px;
  padding: 4px 0;
}
/* Sits the invitation about a third of the way down, where a thumb is,
   rather than jammed under the brand with a void beneath it. */
.box-empty .empty-state {
  padding: min(12vh, 104px) 20px 18px;
  gap: 4px;
}
/* The toast lives above the composer normally; here the composer has left. */
.box-empty .toast {
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 14px);
}

/* ------------------------------------------------------------ bottom nav -- */

.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  border-top: 1px solid var(--line);
  background: rgba(14,14,16,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.bottom-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 0;
}
.bottom-item svg { width: 22px; height: 22px; }
.bottom-item em {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(9px);
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  color: var(--text-2);
  font-size: .56rem;
  font-style: normal;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
}
.bottom-item.active em {
  background: var(--accent);
  border-color: var(--accent);
  color: #17090a;
}
.bottom-item em:empty, .bottom-item em.zero { display: none; }
.bottom-item.active { color: var(--accent); }
.bottom-item.active::before {
  content: "";
  position: absolute;
  top: 0;
  width: 26px; height: 2px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
}

/* ---------------------------------------------------------------- drawer -- */

.drawer {
  position: fixed;
  top: 0; right: 0;
  z-index: 80;
  width: min(300px, 84vw);
  height: 100dvh;
  padding: calc(var(--safe-top) + 18px) 16px calc(var(--safe-bottom) + 18px);
  border-left: 1px solid var(--line);
  background: var(--surface);
  transform: translateX(105%);
  transition: transform .22s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.drawer.open { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.drawer-head img { width: 34px; height: 34px; border-radius: 10px; }
.drawer-head strong { font-size: 1.05rem; font-weight: 800; }
.drawer-head .icon-btn { margin-left: auto; }

.drawer-action {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 12px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font-size: .92rem;
  font-weight: 600;
  text-align: left;
}
.drawer-action svg { width: 19px; height: 19px; color: var(--accent); flex: 0 0 auto; }
.drawer-action:hover { background: var(--surface-2); }
.drawer-action.danger { color: var(--danger); }
.drawer-action.danger svg { color: var(--danger); }

.drawer-copy {
  margin-top: auto;
  font-size: .74rem;
  line-height: 1.6;
  color: var(--text-3);
}

.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 75;
  border: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

/* ---------------------------------------------------------------- modals -- */

.modal {
  width: min(560px, 94vw);
  /* The detail view is the full-size version of a card, so on a wide screen it
     covers the masonry rather than sitting in a narrow slot beside it. */
  max-height: 88dvh;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
#detailDialog.modal { width: min(880px, 94vw); }
#detailDialog .modal-shell { overflow: hidden; height: 88dvh; }
/* The front face has to be pinned like the back one. Without this it has no
   height of its own, so a long note grows straight past the flip container and
   out over the buttons underneath instead of scrolling. */
#detailDialog .detail-front {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal::backdrop { background: rgba(0,0,0,.66); backdrop-filter: blur(3px); }

.modal-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 88dvh;
  overflow-y: auto;
  position: relative;
  padding: 18px;
  -webkit-overflow-scrolling: touch;
}

.modal-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.modal-kicker {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.modal-head h2 { margin: 2px 0 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.modal-head .icon-btn { margin-left: auto; }

.composer-modes {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.composer-modes::-webkit-scrollbar { display: none; }
.mode {
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}
.mode.active {
  border-color: var(--accent-line);
  background: var(--accent-wash);
  color: var(--accent);
}

.composer-pane { display: flex; flex-direction: column; gap: 12px; }

.composer-pane textarea,
.composer-pane input[type="text"] {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  color: var(--text);
  font-size: .95rem;
  line-height: 1.5;
  resize: vertical;
}
.composer-pane textarea::placeholder,
.composer-pane input::placeholder { color: var(--text-3); }
.composer-pane textarea:focus,
.composer-pane input:focus { border-color: var(--accent-line); outline: none; }

.composer-hint { font-size: .78rem; color: var(--text-3); line-height: 1.5; }

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

.drop-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 34px 20px;
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r);
  background: var(--bg-2);
  color: var(--text);
}
.drop-button:hover { border-color: var(--accent-line); }
.drop-button .big-arrow {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--accent);
  color: #17090a;
}
.drop-button .big-arrow svg { width: 22px; height: 22px; }
.drop-button strong { font-size: 1rem; font-weight: 700; }
.drop-button small { font-size: .8rem; color: var(--text-2); }

.canvas-wrap {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
}
#drawCanvas { display: block; width: 100%; height: auto; touch-action: none; }

.detail-body { display: flex; flex-direction: column; gap: 12px; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Five buttons on a 390px phone: pack them a little tighter so they wrap
   into two rows instead of three. */
@media (max-width: 430px) { .detail-actions .btn { padding: 11px 12px; font-size: .85rem; } }

/* "Close Thunk" and "Cancel" are exits, not actions — quieter than the rest. */
.btn-quiet {
  border-color: var(--line);
  background: transparent;
  color: var(--text-2);
}
.btn-quiet:hover { background: var(--surface-2); color: var(--text); }

/* ------------------------------------------------------- thunk editor --- */

.editor-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

.editor-field { display: flex; flex-direction: column; gap: 6px; }

.editor-label {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-3);
}

.editor-field input,
.editor-field textarea,
.editor-part textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: .95rem;
  line-height: 1.45;
  resize: vertical;
  outline: none;
}
.editor-field input:focus,
.editor-field textarea:focus,
.editor-part textarea:focus { border-color: var(--accent-line); }
.editor-field input::placeholder,
.editor-field textarea::placeholder { color: var(--text-3); }

.editor-section { display: flex; flex-direction: column; gap: 6px; }
.editor-hint, .editor-note { color: var(--text-3); font-size: .78rem; line-height: 1.5; margin: 0; }
.editor-note {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--accent-wash);
}
.editor-note strong { color: var(--accent); font-weight: 800; }

.editor-parts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 4px 0 0;
  padding: 0;
}

.editor-part {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.editor-part.removed { opacity: .5; border-style: dashed; }

.part-head { display: flex; align-items: center; gap: 7px; }
.part-head svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--accent); }
.part-kind {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-2);
}

.part-tools { flex: 0 0 auto; display: flex; gap: 4px; }
.part-tool {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: .9rem;
  line-height: 1;
}
.part-tool:hover:not(:disabled) { color: var(--text); border-color: var(--text-3); }
.part-tool:disabled { opacity: .32; cursor: default; }
.part-tool.danger { color: var(--danger); }
.part-tool.danger:hover { background: rgba(255,122,122,.12); border-color: var(--danger); }

.part-meta {
  font-size: .76rem;
  color: var(--text-3);
  overflow-wrap: anywhere;
}
.part-removed-note {
  font-size: .72rem;
  font-weight: 700;
  color: var(--danger);
}

/* ---------------------------------------------------------------- toast --- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + var(--composer-h) + var(--safe-bottom) + 14px);
  transform: translate(-50%, 14px);
  z-index: 90;
  max-width: min(90vw, 400px);
  padding: 11px 17px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text);
  font-size: .86rem;
  font-weight: 600;
  text-align: center;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { border-color: rgba(255,122,122,.5); color: var(--danger); }

/* ---------------------------------------------------------------- misc ---- */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media (min-width: 700px) {
  .app-shell { padding-left: 20px; padding-right: 20px; }
  .brand-name { font-size: 1.9rem; }
}

/* ------------------------------------------------- auth: two ways in --- */

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
}
.auth-tab {
  padding: 9px 10px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-2);
  font-size: .84rem;
  font-weight: 700;
}
.auth-tab.active { background: var(--accent); color: #000; }

.auth-field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.auth-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: .95rem;
  resize: vertical;
  outline: none;
}
.auth-field textarea:focus { border-color: var(--accent-line); }

.auth-banner {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: .82rem;
  font-weight: 700;
}
.form-notice { margin: 0; color: var(--text-2); font-size: .82rem; line-height: 1.5; }

/* A quiet way off the invite screen for someone who already has an account. */
.auth-link {
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px;
}
.auth-link:hover { color: var(--accent); }

/* ------------------------------------------------------------ install --- */

.install-body { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.install-lead { margin: 0; color: var(--text-2); font-size: .92rem; line-height: 1.55; }
.install-shot {
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}
.install-steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text);
  font-size: .92rem;
  line-height: 1.5;
}
.install-note {
  margin: 0;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  color: var(--text-2);
  font-size: .86rem;
}

/* ---------------------------------------------------- people & access --- */

.access-body { display: flex; flex-direction: column; gap: 20px; overflow-y: auto; }
.access-section { display: flex; flex-direction: column; gap: 7px; }
.access-list { display: flex; flex-direction: column; gap: 8px; }

.access-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.access-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 190px; }
.access-who strong { font-size: .92rem; }
.access-meta { color: var(--text-3); font-size: .76rem; overflow-wrap: anywhere; }
.access-note {
  margin-top: 4px;
  padding: 7px 9px;
  border-left: 2px solid var(--accent-line);
  color: var(--text-2);
  font-size: .8rem;
  line-height: 1.45;
}
.access-row .btn { padding: 8px 12px; font-size: .82rem; }

.invite-row { display: flex; flex-wrap: wrap; gap: 8px; }
.invite-row input {
  flex: 1 1 160px;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: .92rem;
  outline: none;
}
.invite-row input:focus { border-color: var(--accent-line); }

.invite-result {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  background: var(--accent-wash);
}
.invite-result code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  color: var(--text);
  overflow-wrap: anywhere;
}

.drawer-badge {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #000;
  font-size: .7rem;
  font-style: normal;
  font-weight: 800;
  text-align: center;
}


/* ------------------------------------------------- animation switch --- */

.drawer-switch { position: relative; }
.drawer-switch .switch {
  margin-left: auto;
  flex: 0 0 auto;
  width: 36px; height: 21px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--surface);
  position: relative;
  transition: background .16s, border-color .16s;
}
.drawer-switch .switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--text-3);
  transition: transform .16s, background .16s;
}
.drawer-switch.on .switch { background: var(--accent); border-color: var(--accent); }
.drawer-switch.on .switch::after { transform: translateX(15px); background: #000; }