/* ==========================================================================
   Notebook — home screen

   A machine shop after hours, not a library: warm soot ground, brass for the
   one thing that matters, a technical grotesque set tight. Committed dark.

   Two states. At rest the page is an index of notebooks. Focus the writing
   area and it enters COMPOSE: the room goes down, a lamp comes up, and what
   you type takes the headline's place at display scale.
   ========================================================================== */

:root {
  /* Ground and structure */
  --chrome:    #100e0d;  /* the frame: rail and colophon, below the ground */
  --soot:      #131210;  /* page ground — warm near-black, olive bias */
  --soot-deep: #0d0c0b;  /* compose ground */
  --panel:     #1b1815;  /* a working surface, above the ground */
  --panel-hi:  #221e19;  /* a row of one, under the pointer */
  --stone:     #15120f;  /* small controls, set into a panel */
  --stone-hi:  #1a1713;
  --lead:      #2b2723;  /* rules, dividers */
  --lead-hi:   #3d372e;

  /* Ink — ratios against --soot: 16.1, 6.9, 4.5 */
  --bone:      #f2ede3;  /* primary */
  --ash:       #a49c8e;  /* secondary */
  --ash-dim:   #837b70;  /* tertiary — was below AA for small text */

  /* Accents */
  --brass:     #c4933f;
  --brass-hi:  #e0b163;
  --brass-dim: #7d5f2c;

  /* Undoing something, or about to */
  --warn:      #c87050;

  /* Cloth dyes, for telling one notebook from another */
  --dye-brass:     #8a6526;
  --dye-verdigris: #435a4a;
  --dye-oxblood:   #6a3a30;
  --dye-bone:      #5a5349;
  --dye-slate:     #3a4048;
  --dye-lead:      #45403a;

  /* Type — one grotesque, one mono. Nothing bookish. */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale */
  --measure: 70ch;          /* the single column, up to tablet width */
  --span: 76rem;            /* the two-column desktop composition */
  --aside: 19rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --dim: 0.13;  /* how far the room goes down in compose */
}

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

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* so the colophon closes the page even when there's little in it */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--soot);
  background-image: radial-gradient(120% 55% at 50% -12%, #1f1b16 0%, rgba(31,27,22,0) 62%);
  background-repeat: no-repeat;
  color: var(--bone);
  font-family: var(--display);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.6;
  transition: background-color 320ms ease;
}
body[data-mode="compose"] { background-color: var(--soot-deep); }

img, svg { max-width: 100%; }
a { color: inherit; }

/* Paper tooth. One texture, held way back. */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The lamp you switch on when you sit down. Only lit while writing. */
.lamp {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background-image: radial-gradient(80% 52% at 50% 24%, rgba(203,152,64,0.16), rgba(203,152,64,0) 62%);
  transition: opacity 420ms ease;
}
body[data-mode="compose"] .lamp { opacity: 1; }

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

:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; }

/* --- shared bits ------------------------------------------------------- */

.stamp {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ash);
}

.eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash-dim);
}



.dye {
  flex: 0 0 auto;
  width: 3px;
  height: 17px;
  border-radius: 1px;
  background: var(--dye-lead);
}
.dye--brass     { background: var(--dye-brass); }
.dye--verdigris { background: var(--dye-verdigris); }
.dye--oxblood   { background: var(--dye-oxblood); }
.dye--bone      { background: var(--dye-bone); }
.dye--slate     { background: var(--dye-slate); }
.dye--lead      { background: var(--dye-lead); }
.dye--none      { background: transparent; box-shadow: inset 0 0 0 1px var(--lead-hi); }

/* everything that steps back while you write */
.recede { transition: opacity 320ms ease, filter 320ms ease; }
body[data-mode="compose"] .recede {
  opacity: var(--dim);
  filter: blur(1.2px);
  pointer-events: none;
}

/* --- top rail ---------------------------------------------------------- */

.rail {
  position: relative;
  padding-block: 1.1rem;
  padding-inline: var(--gutter);
  background: var(--chrome);
  border-bottom: 1px solid var(--lead-hi);
}
.rail__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: calc(var(--measure) - 2 * var(--gutter));
  margin-inline: auto;
}

.mark { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.mark__rule {
  width: 24px; height: 2px;
  background: var(--brass);
  box-shadow: 0 4px 0 -1px var(--brass-dim);
}
.mark__word {
  font-size: 0.94rem;
  font-weight: 600;
  font-stretch: 92%;
  letter-spacing: 0.01em;
  color: var(--bone);
}
.mark:hover .mark__rule { background: var(--brass-hi); }

.rail__meta { margin-left: auto; display: flex; align-items: center; gap: 0.85rem; min-width: 0; }

.key {
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1;
  color: var(--ash);
  padding: 0.3rem 0.42rem;
  border: 1px solid var(--lead-hi);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--stone);
}

/* --- page column ------------------------------------------------------- */

.page {
  position: relative;
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(2.5rem, 7vw, 4.5rem) 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5.5vw, 3.5rem);
}

/* --- the opening ------------------------------------------------------- */

.open { position: relative; display: flex; flex-direction: column; gap: 1rem; }

.thesis {
  margin: 0;
  max-height: var(--thesis-h, none);
  overflow: hidden;
  font-size: clamp(2.1rem, 1.35rem + 3.7vw, 3.2rem);
  font-weight: 500;
  font-stretch: 88%;
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
  color: var(--bone);
  transition: max-height 300ms ease, opacity 200ms ease;
}
body[data-mode="compose"] .thesis { max-height: 0; opacity: 0; }

/* --- the slate: where you write ---------------------------------------- */

.slate { display: flex; flex-direction: column; }

.slate__area {
  width: 100%;
  border: 0;
  padding: 0.35rem 0;
  background: transparent;
  resize: none;
  overflow: hidden;
  color: var(--bone);
  caret-color: var(--brass);
  font-family: var(--display);
  font-size: 1.22rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.005em;
}
.slate__area::placeholder { color: var(--ash-dim); }
.slate__area:focus { outline: none; }

body[data-mode="compose"] .slate__area {
  font-size: clamp(1.55rem, 1.05rem + 2.1vw, 2.4rem);
  font-stretch: 96%;
  line-height: 1.32;
  letter-spacing: -0.022em;
  min-height: 4.4em;
}

/* past a couple of lines it's prose, so it gets set for reading rather than
   for the headline slot */
body[data-mode="compose"][data-long="yes"] .slate__area {
  font-size: 1.1rem;
  font-stretch: 100%;
  line-height: 1.72;
  letter-spacing: normal;
  max-width: 64ch;
  min-height: 9em;
}

/* a long entry pushes these below the fold, so they ride the bottom instead */
body[data-mode="compose"] .slate__foot {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0.85rem -1rem -1rem;
  padding: 0.8rem 1rem;
  background: var(--panel);
  border-top: 1px solid var(--lead);
}

.slate__rule {
  height: 1px;
  margin-top: 0.55rem;
  background: var(--lead-hi);
  transition: background-color 200ms ease;
}
.slate:focus-within .slate__rule { background: var(--brass); }

.slate__foot {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.85rem;
}

.slate__count { flex: 0 0 auto; margin-left: auto; color: var(--ash-dim); }

.slate__enter {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash);
  background: transparent;
  border: 1px solid var(--lead-hi);
  border-radius: 2px;
  padding: 0.46rem 0.72rem;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}
.slate__enter:hover { color: var(--soot); background: var(--brass); border-color: var(--brass); }

.slate__hint {
  margin: 0.9rem 0 0;
  min-height: 1.4rem;
  font-size: 0.82rem;
  color: var(--ash-dim);
}
.slate__hint--done { color: var(--brass); }

/* --- where it's going: the destination picker --------------------------- */

.dest { position: relative; display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.dest__arrow { color: var(--brass); font-size: 0.85rem; line-height: 1; }

.dest__btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  max-width: 100%;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--bone);
  background: var(--stone);
  border: 1px solid var(--lead-hi);
  border-radius: 2px;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.dest__btn:hover { border-color: var(--brass-dim); background: var(--stone-hi); }
.dest__btn[aria-expanded="true"] { border-color: var(--brass); background: var(--stone-hi); }
.dest__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dest__caret { flex: 0 0 auto; color: var(--ash); }

/* our own list, so the colors are ours */
.dest__menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 1.3rem;
  z-index: 50;
  min-width: 13rem;
  max-height: 20rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: #191612;
  border: 1px solid var(--lead-hi);
  border-radius: 3px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.55);
}
.dest__opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.46rem 0.55rem;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--bone);
  cursor: pointer;
}
.dest__opt:hover, .dest__opt:focus { background: var(--stone-hi); outline: none; }
.dest__opt[aria-selected="true"] { color: var(--brass-hi); }
.dest__opt[aria-selected="true"]::after {
  content: "•";
  margin-left: auto;
  padding-left: 0.6rem;
  color: var(--brass);
}
.dest__opt[aria-selected="true"] .dest__tag { margin-left: auto; }
.dest__opt[aria-selected="true"] .dest__tag ~ ::after { margin-left: 0; }
.dest__opt--none { color: var(--ash); font-style: italic; }
.dest__sep { height: 1px; margin: 0.3rem 0.2rem; background: var(--lead); }

/* --- clipped resources -------------------------------------------------- */

.clips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.95rem 0 0;
  padding: 0;
}
.clips[hidden] { display: none; }

.clip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: min(100%, 24rem);
  padding: 0.42rem 0.42rem 0.42rem 0.55rem;
  background: var(--stone);
  border: 1px solid var(--lead-hi);
  border-left: 2px solid var(--brass-dim);
  border-radius: 2px;
  animation: clip-in 220ms ease both;
}
@keyframes clip-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

.clip__mark {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--brass);
  border: 1px solid var(--brass-dim);
  border-radius: 2px;
  padding: 0.2rem 0.32rem;
}

.clip__thumb {
  flex: 0 0 auto;
  width: 38px;
  height: 28px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--lead-hi);
  background: var(--soot);
}

.clip__body { min-width: 0; display: flex; flex-direction: column; }
.clip__name {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--bone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clip__meta {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--ash-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clip__x {
  flex: 0 0 auto;
  margin-left: auto;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1;
  color: var(--ash-dim);
  background: transparent;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease;
}
.clip__x:hover { color: var(--bone); background: var(--stone-hi); }

/* attach: the fallback for when you'd rather browse than paste */
.slate__attach {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ash-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 0.4rem 0.5rem;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}
.slate__attach:hover { color: var(--brass); border-color: var(--lead-hi); }

/* --- dropping a file ---------------------------------------------------- */

.drop {
  position: fixed;
  inset: 0;
  z-index: 60;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}
body[data-drop="on"] .drop { opacity: 1; }
body[data-drop="on"] .lamp { opacity: 1; }

.drop__frame {
  height: 100%;
  display: grid;
  place-items: center;
  border: 1px dashed var(--brass);
  border-radius: 3px;
  background: rgba(13,12,11,0.84);
}
.drop__text {
  margin: 0;
  padding: 0.72rem 1.15rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  background: var(--soot-deep);
  border: 1px solid var(--brass-dim);
  border-radius: 2px;
}


/* a pasted URL or a long unbroken run has to fold rather than escape */
.passage__text,
.row__title,
.row__snip,
.book-head__name,
.entry-head__title,
.thesis,
.slate__area,
.clip__name,
.clip__meta,
.empty { overflow-wrap: break-word; }

/* --- panels --------------------------------------------------------------

   Three planes, so nothing has to be told apart by spacing alone:

     chrome   the rail and the colophon, a step darker than the page
     ground   the page itself
     panel    a working surface, a step lighter, with its own edge

   Inside a panel, rows are separated by hairlines and nothing else — the
   panel's own edge is what says where the section stops. */

.panel {
  background: var(--panel);
  border: 1px solid var(--lead-hi);
  border-radius: 3px;
}

.panel__label {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin: 0;
  padding: 0.62rem 1rem;
  border-bottom: 1px solid var(--lead);
}
.panel__title {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
}

.panel--pad { padding: 1rem; }
.panel .empty { margin: 0; padding: 1.1rem 1rem; }

.panel__foot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--lead);
}

/* --- views -------------------------------------------------------------- */

.view, .home-body {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5.5vw, 3.5rem);
}
.home-body { gap: clamp(2.5rem, 5.5vw, 3.5rem); }

.empty { margin: 1.5rem 0 0; color: var(--ash-dim); font-style: italic; }

.side { display: flex; flex-direction: column; gap: 1.4rem; }
.home-body { gap: clamp(2.5rem, 5.5vw, 3.5rem); }
.crumb__back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash-dim);
  text-decoration: none;
  transition: color 140ms ease;
}
.crumb__back:hover { color: var(--brass); }

/* --- a notebook's head -------------------------------------------------- */

.book-head, .entry-head { display: flex; flex-direction: column; gap: 0.5rem; }

.book-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
}
.book-head .dye { width: 100%; height: 3px; }
.book-head__name {
  margin: 0;
  font-size: clamp(1.8rem, 1.2rem + 2.3vw, 2.5rem);
  font-weight: 500;
  font-stretch: 88%;
  line-height: 1.05;
  letter-spacing: -0.024em;
  color: var(--bone);
}
.entry-head__meta { margin: 0; color: var(--ash-dim); }

.entry-head__title {
  margin: 0;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.2rem);
  font-weight: 500;
  font-stretch: 90%;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--bone);
}

/* --- find, in the rail -------------------------------------------------- */

.rail__find {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 30rem;
  margin-left: clamp(1rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.34rem 0.6rem;
  background: var(--stone);
  border: 1px solid var(--lead-hi);
  border-radius: 2px;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.rail__find:focus-within { border-color: var(--brass); background: var(--stone-hi); }
.rail__glass { flex: 0 0 auto; color: var(--ash-dim); }
.rail__find:focus-within .rail__glass { color: var(--brass); }

.find__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--bone);
  caret-color: var(--brass);
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 400;
  padding: 0.12rem 0;
}
.find__input:focus { outline: none; }
.find__input::placeholder { color: var(--ash-dim); }
.find__input::-webkit-search-cancel-button,
.find__input::-webkit-search-decoration { -webkit-appearance: none; }
.find__n { flex: 0 0 auto; color: var(--brass); }

/* the notebook you were in when you started typing — click it off to widen */
.find__scope {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 9rem;
  padding: 0.14rem 0.38rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  color: var(--brass);
  background: transparent;
  border: 1px solid var(--brass-dim);
  border-radius: 2px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 140ms ease;
}
.find__scope::after { content: "\00d7"; color: var(--ash); }
.find__scope:hover { border-color: var(--brass); }
.find__scope:hover::after { color: var(--bone); }

/* --- results ------------------------------------------------------------ */

.results .eyebrow { color: var(--ash); }

mark {
  background: transparent;
  color: var(--brass-hi);
  border-bottom: 1px solid var(--brass-dim);
}

/* --- entry rows --------------------------------------------------------- */

.entries { list-style: none; margin: 0; padding: 0; }

.row + .row { border-top: 1px solid var(--lead); }

/* the one just written, so it's findable at the foot of the list */
.row--fresh { animation: row-settle 2.4s ease-out both; }
@keyframes row-settle {
  0%   { background: rgba(196,147,63,0.16); }
  100% { background: rgba(196,147,63,0); }
}
@media (prefers-reduced-motion: reduce) { .row--fresh { animation: none; } }

.row__btn {
  display: block;
  width: 100%;
  padding: 0.9rem 1rem 1rem;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.row__btn:hover { background: var(--panel-hi); border-left-color: var(--brass); }

.row__head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.35rem; }
.row__stamp { color: var(--ash-dim); }
.row__where { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ash); }
.row__where .dye { height: 11px; }
.row__no { margin-left: auto; color: var(--ash-dim); }

.row__title {
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--bone);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.row__snip { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--ash); }
.row__meta { margin: 0.4rem 0 0; color: var(--ash-dim); }

/* --- an entry's sittings ------------------------------------------------ */

.passages { list-style: none; margin: 0; padding: 0; }

.passage {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0 1.6rem;
  padding: 1.3rem 1rem;
}
.passage + .passage { border-top: 1px solid var(--lead); }

.passage__stamp { margin: 0; padding-top: 0.3rem; color: var(--ash-dim); }
.passage__time { display: block; margin-top: 0.2rem; color: var(--ash); }
.passage__body { min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.passage__text {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.62;
  color: var(--bone);
}

.clips--still { margin-top: 0; }
.clip--still { background: transparent; border-left-color: var(--lead-hi); }

/* --- picking it back up ------------------------------------------------- */

.pickup__date {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}

.dest-fixed { flex: 0 0 auto; color: var(--ash); }
.hint__open {
  color: var(--brass-hi);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* moving an entry: the same list, anchored to its own button */
.move { position: relative; display: inline-flex; flex: 0 0 auto; }

/* the button sits right-aligned until the aside gets its own column, so the
   menu hangs from whichever edge keeps it on screen */
.move__menu { left: auto; right: 0; min-width: min(12.5rem, 72vw); }
@media (min-width: 68em) {
  .move__menu { left: 0; right: auto; }
}

.dest__tag {
  margin-left: auto;
  padding-left: 0.6rem;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash-dim);
}
.dest__opt[aria-selected="true"] .dest__tag { color: var(--brass-dim); }

/* --- the notebook index ------------------------------------------------ */

.books-wrap { position: relative; display: flex; flex-direction: column; }

.books { list-style: none; margin: 0; padding: 0; }

.book + .book { border-top: 1px solid var(--lead); }

.book__btn {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.72rem 1rem;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.book__btn:hover { background: var(--panel-hi); border-left-color: var(--brass); }

.book__name {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--bone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the dotted run from name to count, like an index */
.book__leader {
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: 0;
  border-bottom: 1px dotted var(--lead-hi);
}

.book__n { flex: 0 0 auto; color: var(--ash); }

.book__btn[aria-pressed="true"] {
  border-left-color: var(--brass);
  background: linear-gradient(90deg, rgba(185,138,60,0.07), rgba(185,138,60,0) 62%);
}
.book__btn[aria-pressed="true"] .book__n { color: var(--brass-hi); }
.book__btn[aria-pressed="true"] .book__leader { border-bottom-color: var(--brass-dim); }

/* --- new notebook ------------------------------------------------------ */

.book-new {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.75rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash-dim);
  background: transparent;
  border: 1px solid var(--lead-hi);
  border-radius: 2px;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}
.book-new:hover { color: var(--brass); border-color: var(--brass-dim); }
.book-new__plus { font-size: 0.95rem; line-height: 1; }

.book-new--open { border-color: var(--brass-dim); padding: 0.32rem 0.36rem 0.32rem 0.7rem; }
.book-new__input {
  border: 0;
  background: transparent;
  color: var(--bone);
  caret-color: var(--brass);
  font-family: var(--display);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  width: 11rem;
  max-width: 44vw;
  padding: 0.2rem 0;
}
.book-new__input:focus { outline: none; }
.book-new__input::placeholder { color: var(--ash-dim); font-weight: 400; }
.book-new__add {
  color: var(--soot);
  background: var(--brass);
  border: 0;
  border-radius: 2px;
  padding: 0.36rem 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.book-new__add:hover { background: var(--brass-hi); }

/* --- floating thoughts: deliberately not a notebook --------------------- */

.floaters { position: relative; display: flex; flex-direction: column; gap: 0.7rem; }

.floaters__btn {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.35rem 1rem;
  width: 100%;
  padding: 0.95rem 1rem;
  text-align: left;
  color: inherit;
  font: inherit;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.012) 0 8px,
      rgba(255,255,255,0) 8px 16px
    );
  border: 1px dashed var(--lead-hi);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.floaters__btn:hover { border-color: var(--ash-dim); background-color: var(--panel); }

.floaters__label {
  grid-column: 1 / -1;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ash-dim);
}
.floaters__head {
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ash);
}
.floaters__n {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ash-dim);
  font-variant-numeric: tabular-nums;
}
.floaters__n b { color: var(--bone); font-weight: 500; }

.floaters__btn[aria-pressed="true"] {
  border-color: var(--brass);
  border-style: dashed;
}
.floaters__btn[aria-pressed="true"] .floaters__label { color: var(--brass); }
.floaters__btn[aria-pressed="true"] .floaters__head { color: var(--bone); }

.floaters__note { margin: 0; font-size: 0.82rem; color: var(--ash-dim); }

/* --- colophon ---------------------------------------------------------- */

.colophon {
  position: relative;
  flex: 0 0 auto;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-inline: var(--gutter);
  padding-block: 1.3rem 2rem;
  background: var(--chrome);
  border-top: 1px solid var(--lead-hi);
}
.colophon__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 2.5rem;
  width: 100%;
  max-width: calc(var(--measure) - 2 * var(--gutter));
  margin-inline: auto;
}

.counts { margin: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.1rem 2rem; }
.counts > div { display: flex; flex-direction: column; gap: 0.1rem; }
.counts dt {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash-dim);
}
.counts dd {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.counts .counts__scope dd { color: var(--brass-hi); }

.counts__all {
  align-self: flex-end;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash-dim);
  background: transparent;
  border: 1px solid var(--lead-hi);
  border-radius: 2px;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
}
.counts__all:hover { color: var(--brass); border-color: var(--brass-dim); }

.colophon__note {
  margin: 0 0 0 auto;
  max-width: 34ch;
  font-size: 0.78rem;
  color: var(--ash-dim);
}
.colophon__note--warn { color: var(--warn); }

/* --- copying out -------------------------------------------------------- */

.copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.65rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash-dim);
  background: transparent;
  border: 1px solid var(--lead-hi);
  border-radius: 2px;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}
.copy:hover { color: var(--brass); border-color: var(--brass-dim); }
.copy--done { color: var(--brass); border-color: var(--brass); }
.copy__mark { flex: 0 0 auto; }

.head-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
/* a shrinking wrapper is what let these overlap each other */
.head-acts > * { flex: 0 0 auto; }

.copy--danger:hover { color: var(--warn); border-color: var(--warn); }
.copy--armed,
.copy--armed:hover {
  color: var(--soot);
  background: var(--warn);
  border-color: var(--warn);
}

.book-head__state {
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ash-dim);
  margin: 0;
}

/* archived notebooks, folded away under a line */
.archived__toggle {
  display: block;
  width: 100%;
  text-align: left;
  border-top: 1px solid var(--lead);
  padding: 0.6rem 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash-dim);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 140ms ease;
}
.archived__toggle:hover { color: var(--brass); }
.archived__toggle::before { content: "+ "; }
.archived__toggle[aria-expanded="true"]::before { content: "– "; }

.books--archived .book__name { color: var(--ash); }
.books--archived .dye { opacity: 0.5; }
.colophon__inner .copy { align-self: flex-end; }

.head-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
}
.head-row .entry-head__title { min-width: 0; }

/* the text itself, for when the clipboard is out of reach */
.report {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(10, 9, 8, 0.84);
}
.report__frame {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: min(46rem, 100%);
  max-height: min(40rem, 84vh);
  padding: 1.2rem;
  background: var(--soot-deep);
  border: 1px solid var(--lead-hi);
  border-radius: 3px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.report__head {
  margin: 0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
}
.report__text {
  flex: 1 1 auto;
  min-height: 15rem;
  resize: none;
  padding: 0.9rem;
  background: var(--soot);
  color: var(--bone);
  border: 1px solid var(--lead);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.6;
}
.report__text:focus { outline: none; border-color: var(--brass-dim); }
.report__close {
  align-self: flex-end;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash);
  background: transparent;
  border: 1px solid var(--lead-hi);
  border-radius: 2px;
  padding: 0.42rem 0.7rem;
  cursor: pointer;
}
.report__close:hover { color: var(--brass); border-color: var(--brass-dim); }


/* --- desktop: two columns ------------------------------------------------

   The work runs down the main column; where you are and what you can do sit
   in an aside that stays put while the main column scrolls. Same shape in all
   three views, so the page never rearranges itself under you. */

@media (min-width: 68em) {
  .rail__inner { max-width: calc(var(--span) - 2 * var(--gutter)); }
  .page { max-width: var(--span); }
  .colophon__inner { max-width: calc(var(--span) - 2 * var(--gutter)); }

  .view {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--aside);
    column-gap: clamp(2.5rem, 4.5vw, 5rem);
    align-items: start;
  }

  .view > .side {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
  }

  .view > .open,
  .view > .main {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 4vw, 3.5rem);
  }

  /* the aside is a column now, so its head stacks rather than spreading */
  .head-acts { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .entry-head { align-items: flex-start; gap: 0.75rem; }
  .head-row { display: contents; }
  .entry-head__title { order: 1; }
  .entry-head__meta { order: 2; }
  .entry-head .head-acts { order: 3; margin-top: 0.2rem; }

  /* long-form reading keeps its own measure inside a wider column */
  .passage__text, .floaters__note, .slate__hint { max-width: 62ch; }

  /* results stay scannable rather than stretching the full span */
  .results { max-width: 54rem; }
}

/* --- narrow ------------------------------------------------------------ */

@media (max-width: 62em) {
  .rail__meta { display: none; }
}

@media (max-width: 34em) {
  .key { display: none; }
  .rail { flex-wrap: wrap; row-gap: 0.75rem; }
  .rail__find { flex-basis: 100%; max-width: none; margin-left: 0; }
  .passage { grid-template-columns: 1fr; gap: 0.5rem; }
  .passage__stamp { padding-top: 0; }
  .row__no { margin-left: 0; }
  .row__head { flex-wrap: wrap; gap: 0.4rem 0.6rem; }
  .passage__time { display: inline; margin: 0 0 0 0.5rem; }

  #dateline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dest > .dest__menu { left: 0; min-width: min(15rem, 78vw); }
  .colophon__note { margin-left: 0; }
}

@media (max-width: 30em) {
  .slate__foot { flex-wrap: wrap; gap: 0.6rem; }
  .dest { order: 1; }
  .slate__attach { order: 2; margin-left: auto; }
  .slate__count { order: 3; margin-left: 0; }
  .slate__enter { order: 4; margin-left: auto; }
  .clip__thumb { width: 32px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}