/* discriminant.ly — tokens taken from the 2014–16 screenshots */
:root {
  /* colours sampled from the 2014-16 screenshots */
  --chrome: #262727;        /* dark chrome: header + page surround (matches original mean 37.8) */
  --chrome-deep: #181818;   /* left rail, darker than the surround */
  --chrome-line: #3d3d3d;
  --chrome-text: #adadad;
  --chrome-muted: #7d7d7d;
  --paper: #dcdddd;         /* light feed area behind the cards */
  --paper-strip: #d2d4d4;   /* "Activity from the entire network" band */
  --card: #f4f4f2;   /* neutral: off the cold blue-grey, not warm */
  --ink: #2a2a2a;
  --ink-soft: #949494;
  --rule: #d0d0d0;
  --red: #d8302f;           /* hashtags and links (253,48,51 at screen gamma) */
  --gold: #d9b859;
  --tile-on: #e4e0ec;       /* selected collection tile */
  --tile-on-img: #968fa4;
  --btn-top: #fdfefe; --btn-bottom: #e4e8e8; --btn-border: #c9cdcd;
  --dbtn-top: #4a4a4a; --dbtn-bottom: #262626; --dbtn-border: #141414;
  --slab: "chaparral-pro", "Chaparral Pro", "ChaparralPro-Regular", "Rokkitt", "Roboto Slab", "Rockwell", "Zilla Slab", Georgia, serif;
  /* fine vertical stripe, ~2px period, over a soft mottle — matches the dark chrome */
  --stripe: repeating-linear-gradient(90deg, rgba(255,255,255,.050) 0 1px, rgba(0,0,0,.075) 1px 2px);
  --table-gap: 6px;
  --radius-search: 22px;
  --searchbar-h: 65px;
  --masthead-h: 72px;
  --img-pad: 14px;   /* top/right/bottom gap around a note's image; flush on the left where it meets the text column */
  --rail-overlay: rgba(0,0,0,.45);   /* panel darkening over the striped base */
  --edge-inset: 13px;   /* the section shadow clears the left rail rather than touching it */
  --edge-shadow: linear-gradient(rgba(0,0,0,.17) 0 1px, rgba(0,0,0,.13) 1px, rgba(0,0,0,0) 5px);
  --tile-purple: #dfd6f2;
  --table-rule: rgba(255,255,255,.07);   /* translucent white: every cell border, inside and out */
  --masthead-shadow: linear-gradient(rgba(0,0,0,.30) 0px, rgba(0,0,0,.16) 3px, rgba(0,0,0,.06) 6px, rgba(0,0,0,0) 9px);
  /* 3D hairline: a dark line sitting on a lighter one */
  --hr-dark: rgba(0,0,0,.62);   --hr-dark-lift: rgba(255,255,255,.075);
  --hr-light: rgba(0,0,0,.13);  --hr-light-lift: rgba(255,255,255,.72);
  /* lit from above: broad soft highlight across the top, tighter shade at the base */
  --avatar-shadow: inset 0 7px 14px rgba(255,255,255,.26), inset 0 -3px 6px rgba(0,0,0,.42);
  --avatar-shadow-big: inset 0 14px 28px rgba(255,255,255,.22), inset 0 -6px 12px rgba(0,0,0,.5);
  /* the same translucent-white rule used by every table/CTA edge on dark ground */
  --cta-border: var(--table-gap) solid var(--table-rule);
  /* note curtain, sampled from the original mock */
  --curtain-frame: rgba(0,0,0,.5);
  --curtain-nub: rgba(0,0,0,.75);
  --nub-gold: #dfcf87;
  --nav-active: #d6d0e6;   /* very pale lavender for the active rail icon */
  --private-ink: #d1a21a;   /* firefighter yellow, only for the privately-noted line */
  --link: #6f63a8;         /* lavender for links on light grounds */
  --link-on-dark: #b8b0d8;  /* lavender for links on the dark chrome */
  --date-ink: #7a7773;     /* stacked date on light ground */
  --nf-card: #dcdad6;
  --nf-field: #f3f2ef;
  --nf-field-soft: #e1dfdb;
  --nf-rule: rgba(0,0,0,.10);
  --nf-ink: #4b4844;
  /* Two — and only two — field sizes on the note and mark forms, shared by
     the standalone and curtain variants. --nf-input-size is every label and
     placeholder; --nf-body-size is the deliberate larger tier for title and
     comments, which carry the note card's body voice. Both are overridden
     once at the mobile breakpoint. Nothing else should hardcode a size. */
  --nf-input-size: .78rem;
  --nf-body-size: .88rem;
  --tile-face: #edeeee;
  /* travel marks sit on paper: warm stock with a fibrous grain */
  --mark-card: #eeece5;
  --mark-ink: #474640;
  --mark-rule: rgba(70,68,56,.15);
  /* check-in entries: a light linen, close to the mark's paper but cooler */
  --log-card: #f3f1ea;
  --log-ink: #4c504a;
  --log-rule: rgba(52,60,52,.10);
  --linen-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='l'><feTurbulence type='fractalNoise' baseFrequency='.9 .35' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .30 0 0 0 0 .34 0 0 0 0 .28 0 0 0 .09 0'/></filter><rect width='140' height='140' filter='url(%23l)'/></svg>");
  --paper-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .34 0 0 0 0 .32 0 0 0 0 .24 0 0 0 .08 0'/></filter><rect width='180' height='180' filter='url(%23p)'/></svg>");
  /* the OSM embed is recoloured to sit with the rest of the palette */
  --map-tone: sepia(.22) saturate(.6) contrast(.94) brightness(1.03) hue-rotate(-4deg);
  --tile-rule: rgba(0,0,0,.10);
  --mottle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .45 0'/></filter><rect width='200' height='200' filter='url(%23m)'/></svg>");
  --mottle-soft: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/></filter><rect width='140' height='140' filter='url(%23s)'/></svg>");
}

* { box-sizing: border-box; }
html { font-size: 17px; }
body { margin: 0; color: var(--ink); font-family: var(--slab); font-weight: 300; line-height: 1.5;
  background-color: var(--chrome); background-image: var(--stripe), var(--mottle);
  background-size: auto, 200px 200px;
  background-attachment: fixed, fixed;   /* anchored: never scrolls or shifts with the UI */
  background-position: 0 0, 0 0; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 120rem; margin: 0 auto; padding: 0 2rem; }
h1, h2 { font-weight: 400; line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.8rem; }
.lbl, .caps, .who, .count, h3.lbl { font-family: var(--slab); font-weight: 600; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.fine { font-size: .78rem; color: var(--ink-soft); }
.empty { color: var(--ink-soft); font-style: italic; }
.err { color: var(--red); background: #fbecea; border: 1px solid #e6b8b3; padding: .5rem .75rem; font-size: .9rem; }
.flash { background: var(--paper); border-bottom: 1px solid var(--rule); padding: .5rem 0; }

/* masthead */
.masthead { position: fixed; top: 0; left: 0; right: 0; z-index: 6; border: 0;
  background-color: var(--chrome); background-image: var(--stripe), var(--mottle);
  background-size: auto, 200px 200px; background-attachment: scroll, scroll; }
.masthead::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 9px;
  pointer-events: none; background: var(--masthead-shadow); }
body:not(.is-in) { padding-top: var(--masthead-h); }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 4.4rem; gap: 1rem; }
.mark { display: flex; align-items: center; gap: .9rem; color: var(--chrome-text); font-weight: 500; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; line-height: 1; }
.mark img { display: block; position: relative; top: -1px; }   /* optical centring against the caps */
.mark span { display: block; transform: translateY(.5px); }
.mark:hover { text-decoration: none; color: #fff; }
.mark img { filter: brightness(0) invert(.84); }  /* original brown mark, rendered light on the dark chrome */
.mark:hover img { filter: brightness(0) invert(1); }
.masthead nav { display: flex; align-items: baseline; gap: 1.4rem; }
.masthead nav a, .masthead nav button.link { line-height: 1; font-family: var(--slab); font-size: .64rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--chrome-text); }
.masthead nav a:hover, .masthead nav button.link:hover { color: #fff; text-decoration: none; }
.masthead nav .btn-dark { align-self: baseline; }
.signin button.caps { align-self: baseline; font-family: var(--slab); font-size: .64rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; line-height: 1; }
.inline { display: inline; }
button.link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.masthead nav form.inline { display: block; margin: 0; }
.masthead nav form.inline button.link:focus { outline-offset: 3px; }
.masthead nav form.inline button.link { display: block; line-height: 1; padding: 0; font-family: var(--slab); font-size: .64rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--chrome-text); }
.signin { display: flex; align-items: baseline; gap: .8rem; margin: 0; }
.signin input { width: 9.5rem; margin: 0; background: #0d0d0d; border: 1px solid #111; color: #eee; font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: .5rem .6rem; box-shadow: none; }
.signin input::placeholder { color: #bbb; }
.signin button { color: #fff; }


/* giant search bar (signed in) — black at low opacity so the stripe shows through */
.searchbar { padding: .35rem 0 .45rem; }
.searchbar .wrap { padding: 0 .7rem; }
.searchbar form { margin: 0; }
.searchbar input {
  width: 100%; height: 47px; margin: 0; padding: 0 1.6rem; border-radius: var(--radius-search);
  border: 1px solid rgba(0,0,0,.45);
  background-color: transparent;
  background-image: linear-gradient(rgba(255,255,255,.085) 0%, rgba(255,255,255,.072) 18%, rgba(255,255,255,.028) 36%, rgba(0,0,0,0) 50%, rgba(0,0,0,.02) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02), inset 0 -1px 0 rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.04);
  font-family: var(--slab); font-size: .8rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; text-align: center;
  color: rgba(255,255,255,.72);
}
.searchbar input::placeholder { color: rgba(255,255,255,.42); letter-spacing: .22em; }
.searchbar input:focus { outline: none; border-color: rgba(0,0,0,.6); background-image: linear-gradient(rgba(255,255,255,.14) 0%, rgba(255,255,255,.09) 16%, rgba(0,0,0,0) 48%, rgba(0,0,0,.02) 100%); }

/* buttons */
.btn, .btn-dark { display: inline-block; font-family: var(--slab); font-weight: 600; font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; line-height: 1;
  padding: .75rem 1.1rem; cursor: pointer; text-decoration: none; text-align: center; color: var(--ink); border: 1px solid var(--btn-border);
  background: linear-gradient(var(--btn-top), var(--btn-bottom)); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 1px 2px rgba(0,0,0,.15); }
.btn:hover { background: linear-gradient(#fff, var(--btn-bottom)); text-decoration: none; }
.btn-dark { color: var(--chrome-text); border-color: var(--dbtn-border); background: linear-gradient(var(--dbtn-top), var(--dbtn-bottom)); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 1px 3px rgba(0,0,0,.5); }
.btn-dark:hover { color: #fff; background: linear-gradient(#555, var(--dbtn-bottom)); text-decoration: none; }
.block { display: block; width: 100%; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* layout: dark rail + light feed */
.cols { display: grid; grid-template-columns: 19rem minmax(0, 1fr); align-items: stretch; margin-top: 0; }
.rail { background-color: var(--rail-overlay); color: var(--chrome-text); padding: 1.6rem 2rem 2rem; }   /* overlay only; texture comes from the fixed body background */
.rail a { color: var(--chrome-text); }
.rail .prail-site a, .dialog a { color: var(--link-on-dark); }
.rail-title { text-align: center; font-size: 1.2rem; font-weight: 300; margin: .4rem 0 1.1rem; color: #c8c8c8; }
.steps { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.steps li { display: flex; align-items: center; gap: .8rem; padding: .35rem 0; font-size: .95rem; }
.steps li span { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; font-size: .7rem; font-weight: 600; }
.signup { background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.09); padding: 1rem; margin-bottom: 1.4rem; }
.signup .lbl { color: var(--chrome-text); display: block; margin-bottom: .35rem; }
.signup input { margin: 0 0 .9rem; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.08); color: #eee; box-shadow: none; }
.rail .search input { margin: 0 0 1.2rem; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.08); color: #ddd; text-align: center; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; border-radius: var(--radius-search); padding: .6rem 1rem; box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.rail .search input::placeholder { color: #999; }
.rail h3.lbl { color: var(--chrome-text); margin: 1.6rem 0 .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--chrome-line); }
.about { color: var(--chrome-muted); font-size: .9rem; margin: 0 0 .9rem; }
.rail .tags, .rail-tags { color: var(--chrome-muted); }
.rail .rail-tags a { color: var(--chrome-text); font-weight: 500; }
.rail .rail-tags a.on { color: var(--gold); }
.members { list-style: none; padding: 0; margin: .4rem 0 0; }
/* Centered to match the rail's own "Start remembering:" heading above it,
   rather than left-hugging with only a token .7rem indent. Desktop-only by
   construction: .rail .members is hidden entirely below the 52rem breakpoint. */
.members li a { display: flex; align-items: center; justify-content: center; gap: .85rem; padding: .45rem 0; font-size: .95rem; }
.welcome { text-align: center; padding: .4rem 0 1rem; }
.welcome-name { font-size: 1.1rem; color: #eee; margin: .6rem 0 .9rem; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #111; border: 1px solid #111; margin-bottom: 1rem; }
.stats a { background: rgba(0,0,0,.45); padding: .8rem .4rem; text-decoration: none; }
.stats b { display: block; font-size: 1.4rem; font-weight: 400; color: #fff; }
.stats span { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--chrome-muted); }

.feed { background-color: var(--paper); background-image: var(--mottle-soft); background-size: 140px 140px; padding: 0 1.5rem 2rem; min-width: 0; }
.strip { position: relative; margin: 0 -1.5rem 1.5rem; padding: .85rem 1.5rem; text-align: center; font-weight: 400; font-size: 1rem; color: #6f7070; background: transparent; border: 0; box-shadow: none; }
.strip::after, .edge-shadow::after { content: ""; position: absolute; left: var(--edge-inset); right: 0; top: 100%; height: 5px; pointer-events: none; background: var(--edge-shadow); }
.grid { columns: 30rem; column-gap: 2rem; }        /* fallback; JS swaps in real columns */
.grid > * { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  margin: 0 0 1.6rem; }
footer { margin: 2rem auto; color: var(--chrome-muted); font-size: .8rem; }
footer a { color: var(--chrome-text); }

/* avatars + stacked date */
.avatar { position: relative; width: 2.9rem; height: 2.9rem; border-radius: 50%; object-fit: cover; display: block; background: #ccc;
  box-shadow: var(--avatar-shadow); overflow: hidden; }
img.avatar { object-fit: cover; object-position: center; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.06); }
.avatar-initial { display: grid; place-items: center; font-family: var(--slab); font-weight: 400; color: #e8e8e8; background: #4a4b4b; font-size: 1.25rem; }
.avatar.big { width: 6rem; height: 6rem; margin: 0 auto; font-size: 2.7rem;
  box-shadow: var(--avatar-shadow-big); }
img.avatar.big { box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), 0 0 0 1px rgba(255,255,255,.07); }
.stackdate { display: flex; flex-direction: column; align-items: center; line-height: 1;
  margin-top: .6rem; color: var(--date-ink); font-weight: 300; }
.stackdate .mon { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.stackdate .day { font-size: 1.95rem; font-weight: 300; margin: .3rem 0 .28rem; letter-spacing: .01em; }
.stackdate .yr { font-size: .92rem; font-weight: 300; letter-spacing: .04em; }
.note { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 1.2rem; align-items: start; width: 100%; }
.byline { display: flex; flex-direction: column; align-items: center; padding-top: .2rem; padding-bottom: .6rem; }
.card { background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.05); display: grid; grid-template-columns: minmax(0, 1fr); }
.has-image .card { grid-template-columns: minmax(11rem, 1fr) minmax(11rem, 1.15fr); align-items: stretch; }
.text { background: var(--card); padding: .9rem .8rem 1rem; }
.note .figure { display: block; background: var(--card); align-self: stretch; padding: var(--img-pad) var(--img-pad) var(--img-pad) 0; }   /* fixed gap on top, right, and bottom; flush left against the text column */
.note .figure img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 0%; display: block; }   /* anchored to the top: no letterboxing above the image, only below if the box is taller */
.who { margin: 0 0 .35rem; color: var(--ink); }
.who a { color: var(--ink); }
.note h2 { font-size: 1.25rem; margin: 0 0 .5rem; }
.note h2 a { color: var(--ink); }
.body { margin: 0 0 .8rem; font-size: .88rem; line-height: 1.45; color: #444; white-space: pre-line; }
.tags { margin: 0 0 .2rem; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--link); }
.tags a { color: var(--link); }
.link { margin: 0 0 .8rem; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; word-break: break-all; }
.link .lbl { color: var(--ink); font-weight: 600; letter-spacing: .1em; }
.link a { color: var(--link); font-weight: 600; }
.noteit { background: #eff2f2; border: 1px solid #e2e5e5; padding: .5rem; display: block; width: 100%; }
.noteit form { margin: 0; }
.btn-note { display: block; width: 100%; font-family: var(--slab); font-weight: 700; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; line-height: 1; padding: .8rem; cursor: pointer; text-align: center; color: var(--ink); border: 1px solid var(--btn-border);
  background: linear-gradient(#fefefe, #eceeee); box-shadow: 0 1px 0 #fff inset, 0 1px 2px rgba(0,0,0,.12); text-decoration: none; }
.btn-note:hover { background: linear-gradient(#fff, #e2e5e5); text-decoration: none; }
.btn-note:active { box-shadow: 0 2px 4px rgba(0,0,0,.2) inset; }
.btn-note.is-noted { color: var(--ink); background: linear-gradient(#e9ecec, #dcdfdf); box-shadow: inset 0 1px 3px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.5); }

.noteit .count { text-align: center; font-weight: 400; letter-spacing: .08em; color: var(--ink-soft); }
.note-full { max-width: 60rem; }

/* light content pages (object, profile, forms) */
main > *:not(.cols) { background-color: var(--paper); background-image: var(--mottle-soft); background-size: 140px 140px; padding: 1.2rem 1.5rem; margin: 0; }
main > h1 { padding-bottom: 0; font-size: 1.1rem; text-align: center; color: var(--ink-soft); font-weight: 400; }
main > :first-child { margin-top: 0; }
main > :last-child { padding-bottom: 2rem; }
.profile { text-align: center; }
.profile h1 { margin-top: .8rem; }
.noters h3, main > section h3 { margin: 0 0 .6rem; }
.form { max-width: 34rem; margin: 0 auto !important; }
.form label { display: block; margin: 0 0 .9rem; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
input, select, textarea { display: block; width: 100%; margin-top: .3rem; font: 300 1rem var(--slab); color: var(--ink); padding: .55rem .7rem; background: #f7f7f7; border: 1px solid #ccc; box-shadow: 0 1px 2px rgba(0,0,0,.08) inset; }
textarea { resize: vertical; }
.invites { border-collapse: collapse; font-size: .85rem; width: 100%; }
.invites td { padding: .45rem 0; border-bottom: 1px dotted var(--rule); }
code { font-family: Menlo, Consolas, monospace; font-size: .85em; }
.noters p { margin: .3rem 0; }
.why-inline { font-style: italic; color: var(--ink-soft); }

@media (max-width: 52rem) {
  html { font-size: 16px; }
  .wrap { padding: 0 .75rem; }
  .masthead .wrap { flex-wrap: wrap; justify-content: center; padding: .6rem .75rem; }
  .mark { justify-content: center; width: 100%; gap: .8rem; margin-bottom: .5rem; }
  .signin { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; width: 100%; }
  .signin input { flex: 1 1 8rem; width: auto; min-width: 0; font-size: .62rem; }
  .signin button.caps { flex: 0 0 auto; white-space: nowrap; }
  .cols { grid-template-columns: 1fr; }
  .rail { padding: 1.2rem; }
  .rail h3.lbl, .rail .about, .rail .members, .rail .rail-tags { display: none; }
  .grid, .activity-feed { columns: 1; column-gap: 0; }
  .act-note .note, .grid .note { min-width: 0; }
  .note .card, .note .text { min-width: 0; }
  .link, .body, .note h2 { overflow-wrap: anywhere; }
  .note { grid-template-columns: 1fr; gap: .4rem; }
  .has-image .card { grid-template-columns: 1fr; }
  .note .figure { order: -1; padding: var(--img-pad); }   /* stacked above the text now, so all four sides match */
  .note .figure img { min-height: 0; max-height: 16rem; }
  .masthead nav a:not(.btn-dark), .masthead nav form { display: none; }
}

/* ---- post note form (screenshot 2) ---- */
main > .postnote { max-width: 34rem; margin: 1rem auto 0 !important; padding: 1rem 1.2rem 0; }
.pn-top { display: flex; justify-content: flex-end; align-items: center; gap: .8rem; margin-bottom: .8rem; color: var(--ink); }
.switch { position: relative; width: 3.2rem; height: 1.6rem; display: inline-block; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.switch span { position: absolute; inset: 0; border-radius: 1rem; background: linear-gradient(#bdbdbd, #d8d8d8); box-shadow: 0 1px 2px rgba(0,0,0,.25) inset; transition: .15s; }
.switch span::after { content: ""; position: absolute; top: .12rem; left: .12rem; width: 1.36rem; height: 1.36rem; border-radius: 50%; background: linear-gradient(#fff, #e6e6e6); box-shadow: 0 1px 2px rgba(0,0,0,.35); transition: .15s; }
.switch input:checked + span { background: linear-gradient(#4a4a4a, #2a2a2a); }
.switch input:checked + span::after { transform: translateX(1.6rem); }
.pn-box { background: #d9d9d9; box-shadow: 0 0 0 1px #cfcfcf, 0 1px 0 #fff inset; padding: 1rem; display: grid; gap: 1rem; }
.pn-field { display: block; width: 100%; margin: 0; font: 300 1rem var(--slab); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); padding: .8rem .8rem; background: #f6f6f6; border: 1px solid #c8c8c8; box-shadow: 0 1px 1px rgba(0,0,0,.08) inset; }
.pn-field::placeholder { color: #9a9a9a; }
textarea.pn-field { text-transform: none; letter-spacing: .02em; min-height: 10rem; }
.pn-stack { display: grid; }
.pn-stack .pn-field { border-top-width: 0; }
.pn-stack .pn-field:first-child { border-top-width: 1px; }
.pn-colls { border: 0; margin: 0; padding: .6rem .8rem .8rem; background: #f0f0f0; box-shadow: 0 0 0 1px #c8c8c8 inset; display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; }
.pn-colls legend { padding: 0 .3rem; color: var(--ink-soft); }
.chk { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
.chk input { width: auto; margin: 0; }
.pn-colls .pn-field { flex: 1 1 10rem; padding: .5rem .7rem; font-size: .8rem; background: #fff; }
.pn-image { position: relative; padding: 0; overflow: hidden; transition: box-shadow .12s; }
.pn-image .pn-field { text-align: center; padding: 2.4rem 1rem; color: #aaa; font-weight: 700; font-size: .82rem; letter-spacing: .1em; border: 0; background: transparent; box-shadow: none; }
.pn-image-preview { display: block; width: 100%; max-height: 14rem; object-fit: contain; background: #fff; }
.pn-image-preview[hidden] { display: none; }
.pn-image.has-image { background: #fff; }
.pn-image.has-image .pn-field { padding: .6rem .8rem; text-align: left; font-weight: 400; font-size: .8rem; letter-spacing: .02em; color: var(--ink-soft); text-transform: none; background: #f6f6f6; border-top: 1px solid #e2e2e2; }
.pn-image.dragover { box-shadow: inset 0 0 0 2px var(--nub-gold); background: rgba(0,0,0,.03); }
.pn-post { display: block; width: 100%; font-family: var(--slab); font-weight: 700; font-size: 1.15rem; letter-spacing: .22em; text-transform: uppercase; padding: 1rem; cursor: pointer; color: var(--ink); border: 1px solid #b9b9b9;
  background: linear-gradient(#f2f2f2 0%, #dedede 55%, #cfcfcf 100%); box-shadow: 0 1px 0 #fff inset, 0 1px 3px rgba(0,0,0,.25); }
.pn-post:hover { background: linear-gradient(#fafafa, #d6d6d6); }
.pn-post:active { box-shadow: 0 2px 5px rgba(0,0,0,.3) inset; }
.pn-foot { max-width: 34rem; margin: 1.6rem auto 2.4rem !important; padding: 0 1.2rem !important; background: transparent !important; display: flex; justify-content: space-between; align-items: center; }
.pn-foot form { margin: 0; }
.pn-link { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
  font-family: var(--slab); font-weight: 600; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--chrome-text); }
.pn-link:hover { color: #fff; text-decoration: underline; }
.pn-link-danger { color: #d9736a; }
.pn-link-danger:hover { color: #e8988f; }
.badge { display: inline-block; margin-left: .4rem; padding: .1rem .4rem; background: var(--ink); color: #fff; font-size: .55rem; letter-spacing: .14em; vertical-align: middle; }
.colls { margin: 0 0 .3rem; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.art-tags, .note .tags { color: var(--link); }
.colls a { color: var(--ink-soft); }

/* ---- profile page (screenshot 5) ---- */
.profile-rail { text-align: center; padding-top: 2rem; }
.prail-handle { font-size: 1.15rem; color: #eee; margin: .9rem 0 .4rem; }
.prail-bio { color: var(--chrome-muted); font-size: .95rem; margin: 0 0 .2rem; }
.prail-site { margin: 0 0 1.2rem; font-size: .85rem; }
.prail-site a { color: var(--link-on-dark); }
.prail-nav { list-style: none; padding: 0; margin: 0 -2rem; text-align: left; border-top: 1px solid rgba(0,0,0,.5); }
.prail-nav li { border-bottom: 0; position: relative; }
.prail-nav li::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(var(--hr-dark) 0 1px, var(--hr-dark-lift) 1px 2px); }
.prail-nav a, .prail-nav .plain { display: flex; justify-content: space-between; padding: 1rem 2rem; font-size: 1rem; color: var(--chrome-text); text-decoration: none; }
.prail-nav a:hover { color: #fff; }
.prail-nav a span { color: var(--chrome-muted); }
.tiles-wrap { margin: 0 0 1.2rem; }
.tiles-nav { display: flex; justify-content: space-between; align-items: center; padding: 0 2px 7px; }
.tiles-arrow { background: none; border: 0; padding: 0 .1rem; cursor: pointer; line-height: 0; opacity: .75; }
.tiles-arrow:hover { opacity: 1; }
.tiles-arrow img { width: 22px; height: 22px; display: block; }
.tiles-arrow[data-scroll="-1"] img { transform: scaleX(-1); }
.tiles { display: flex; overflow-x: auto; overflow-y: hidden; gap: 0; background: transparent; border: 1px solid var(--tile-rule);
  scroll-behavior: smooth; scrollbar-width: none; }
.tiles::-webkit-scrollbar { display: none; }
.tile-slot { position: relative; flex: 0 0 8.6rem; display: flex; }
.tile-slot + .tile-slot, .tiles > .tile-new { border-left: 1px solid var(--tile-rule); }
.tile { flex: 1 1 auto; min-width: 0; background: transparent; text-decoration: none; color: var(--ink); text-align: center; display: grid; grid-template-rows: 5rem auto auto; }
.tile:hover { text-decoration: none; background: rgba(255,255,255,.22); }
.tile.on { background: var(--tile-on); }
.tile-img { display: block; margin: .6rem .6rem 0; background: #d9dada center/cover; height: 4.2rem; display: grid; place-items: center; }
.tile.on .tile-img { background-color: var(--tile-purple); }
.tile.on .tile-count { background: rgba(255,255,255,.30); }
/* the inset runs the full height of the slot, over the count band too */
.tile-slot { position: relative; flex: 0 0 8.6rem; display: flex; }
.tile-slot + .tile-slot, .tiles > .tile-new { border-left: 1px solid var(--tile-rule); }
.tile-slot:has(.tile.on)::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  box-shadow: inset 0 3px 4px rgba(0,0,0,.15), inset 3px 0 4px -2px rgba(0,0,0,.12), inset -3px 0 4px -2px rgba(0,0,0,.12), inset 0 -3px 4px -2px rgba(0,0,0,.10); }
.tile-glyph { display: grid; place-items: center; color: rgba(255,255,255,.92); line-height: 0; }
.tile-glyph svg { width: 34px; height: 37px; }
.tile-name { font-size: .58rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .5rem .3rem .45rem; border-bottom: 1px solid rgba(0,0,0,.09); }
.tile-count { padding: .5rem 0 .55rem; font-size: 1.05rem; font-weight: 300; color: #8b8886; background: rgba(255,255,255,.28); }
.within input { margin: 0 0 1.2rem; border-radius: var(--radius-search); text-align: left; padding: .75rem 1.4rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .06em; color: #6e7070;
  background-color: transparent;
  background-image: linear-gradient(rgba(0,0,0,.10) 0%, rgba(255,255,255,.45) 12%, rgba(255,255,255,.12) 30%, rgba(0,0,0,.03) 70%, rgba(0,0,0,.07) 100%);
  border: 1px solid rgba(0,0,0,.09); box-shadow: inset 0 2px 3px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.55); }
.within input::placeholder { color: #9a9c9c; letter-spacing: .06em; }
.post-box { display: flex; align-items: center; justify-content: center; gap: 1.3rem; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.05); padding: 1.15rem 1.6rem; margin-bottom: 1.6rem; text-decoration: none; color: #6f7171; font-weight: 400; font-size: 1.28rem; }
.post-box:hover { text-decoration: none; background: #fafafa; }
.post-box .plus { display: block; width: 4rem; height: 4rem; }
@media (max-width: 52rem) {
  .profile-rail { padding-top: 1.4rem; }
  .prail-nav { display: grid; grid-template-columns: 1fr 1fr; }
  .vis-tabs a { font-size: .68rem; }
}

/* ---- welcome / splash (screenshot 3) ---- */
.is-welcome main > .splash { text-align: center; padding: 3rem 1.5rem 2.5rem; }
.splash-mark { display: block; margin: 0 auto .6rem; }
.splash-word { margin: 0 0 2.4rem; font-weight: 600; font-size: .9rem; letter-spacing: .24em; text-transform: uppercase; color: #3b1d00; }
.splash-h { font-size: 2.6rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: #3b1d00; margin: 0 0 .3rem; }
.splash-sub { font-size: 1.45rem; margin: 0 0 1.6rem; color: #4a3a2c; }
.splash-form { display: flex; justify-content: center; max-width: 22rem; margin: 0 auto; }
.splash-form input { margin: 0; flex: 1; font-size: .9rem; letter-spacing: .06em; border-right: 0; }
.splash-form .btn { padding: .75rem 1.2rem; }
.is-welcome main > .preview { padding: 0; margin: 0 auto 2rem; max-width: 62rem; background: #1e1e1e; box-shadow: 0 8px 30px rgba(0,0,0,.6); }
.preview-chrome { display: flex; gap: .4rem; padding: .55rem .8rem; background: #d9d9d9; }
.preview-chrome span { width: .7rem; height: .7rem; border-radius: 50%; background: #b5b5b5; }
.preview-chrome span:nth-child(1) { background: #ff5f57; } .preview-chrome span:nth-child(2) { background: #febc2e; } .preview-chrome span:nth-child(3) { background: #28c840; }
.preview-feed { padding: 0 1.5rem 1.5rem; }
.preview-feed .grid { grid-template-columns: 1fr; max-width: 40rem; margin: 0 auto; }

/* ---- settings (screenshot 6) ---- */
.is-dark-page main > * { background: transparent; }
.crumb { color: inherit; }
.strip .crumb:hover { color: var(--ink); }
.dark-strip { position: relative; background: transparent !important; color: var(--chrome-text); border: 0; box-shadow: none; margin: 1rem 0 1.6rem !important; }
.dark-strip::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 5px; pointer-events: none; background: linear-gradient(rgba(0,0,0,.45) 0 1px, rgba(0,0,0,.32) 1px, rgba(0,0,0,0) 5px); }
/* Base (single column): the original 30rem table width, unchanged.
   Each wider breakpoint below raises this in step with the column count, so
   a column is always ~30rem — never squeezed to fit inside the old fixed cap. */
main > .settings { max-width: 30rem; margin: 0 auto !important; padding: 0 !important; }
.center { text-align: center; }
.sbox-title { text-align: center; font-size: 1.25rem; margin: 0 0 .3rem; color: #eee; }
.sbox-sub { text-align: center; font-style: italic; color: var(--chrome-muted); margin: 0 0 1rem; font-size: .95rem; }
.slabel { display: block; margin: 0 0 1rem; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--chrome-text); }
.settings input, .settings textarea { background: #383838; border: 1px solid #1e1e1e; color: #ddd; box-shadow: none; }
.settings input:disabled { color: #888; }
.settings .btn3d { margin-top: .4rem; }
.conn-url { text-align: center; margin: 0 0 .8rem; }
.conn-url code { display: inline-block; background: #1a1a1a; color: var(--gold); padding: .6rem .8rem; word-break: break-all; font-size: .78rem; text-align: left; }
.settings .fine { color: var(--chrome-muted); margin: 0 0 1rem; }
.settings .empty { color: var(--chrome-muted); }

/* ---- profile rail active state + follow ---- */
.prail-nav a.on { color: #d8d8d8; }
.prail-nav a.on span { display: none; }
.prail-follow { margin: 0 0 1.2rem; }
.prail-sub { margin-top: 1.2rem; border-top: 1px solid var(--chrome-line); }
.btn-on { color: var(--ink); background: linear-gradient(#e8eaea, #d3d7d7); border-color: #b6baba; }


/* ---- public/private filter tabs: original geometry and states ---- */
.vis-tabs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 0 -1.5rem 1.6rem; padding: 0 1.5rem; border-bottom: 1px solid rgba(0,0,0,.13); }
.vis-tabs::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 6px; pointer-events: none; background: var(--edge-shadow); }
.vis-tabs a { position: relative; display: flex; align-items: center; justify-content: center; height: 31px;
  text-align: center; text-decoration: none; font-size: .7rem; font-weight: 600; letter-spacing: .05em;
  color: #2f3131;                                              /* unselected: darker, clickable */
  background-image: linear-gradient(to top,
    rgba(255,255,255,.62) 0%, rgba(255,255,255,.42) 34%, rgba(255,255,255,.16) 68%, rgba(255,255,255,0) 100%); }
.vis-tabs a + a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to top, rgba(0,0,0,.16) 0%, rgba(0,0,0,.13) 55%, rgba(0,0,0,0) 100%); }
.vis-tabs a:hover { color: #000; }
.vis-tabs a.on { color: #8b8d8d; background-image: none; }   /* selected: bare texture, no wash */

/* ---- people lists (followers / following / noted by) ---- */
.people { list-style: none; padding: 0; margin: 0; }
.people li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.05); padding: .8rem 1.1rem; margin-bottom: .8rem; }
.person { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--ink); min-width: 0; }
.person:hover { text-decoration: none; }
.person-name { display: flex; flex-direction: column; font-size: 1.05rem; }
.person-name em { font-style: normal; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-top: .2rem; }
.people form { margin: 0; }
.pad { padding: 1rem 0; }

/* ---- activity list ---- */
.activity-feed { columns: 30rem; column-gap: 2rem; }   /* fallback; JS swaps in real columns */
.activity-feed > * { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 1.2rem; }
.act-line { display: flex; gap: 1rem; align-items: baseline; background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.06); padding: .7rem 1.1rem; font-size: .98rem; }
.act-date { flex: 0 0 7rem; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.act-note .note { max-width: none; }

/* ---- article page (screenshot 1) ---- */
.article { max-width: 46rem; margin: 0 auto; background: #fff; padding: 1.6rem 1.8rem 2rem; box-shadow: 0 1px 3px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.05); }
.art-coll { margin: 0 0 1rem; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.art-coll a { color: var(--ink-soft); }
.art-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.5rem; align-items: start; }
.article h1 { font-size: 1.7rem; font-weight: 400; line-height: 1.25; margin: 0 0 .8rem; }
.art-link { margin: 0; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; word-break: break-all; }
.art-link .lbl { color: var(--ink); }
.art-link a { color: var(--link); }
.art-lede { list-style: disc; margin: .3rem 0 0; padding-left: 1.1rem; color: #444; }
.art-lede li { font-size: .95rem; line-height: 1.5; }
.art-figure { margin: 1.6rem 0 1.2rem; background: #f0f0f0; }
.art-figure img { display: block; width: 100%; }
.art-by { margin: 0 0 .6rem; font-size: .95rem; color: #444; }
.art-tags { margin: 0 0 1.4rem; }
.art-actions { display: flex; align-items: center; gap: 1.2rem; padding-top: 1.2rem; border-top: 1px solid #e4e4e4; }
.art-actions .noteit { min-width: 14rem; }
.article .noters { margin-top: 1.6rem; }
.article .noters h3 { color: var(--ink-soft); margin: 0 0 .7rem; }
.article .people li { box-shadow: none; border: 1px solid #eee; padding: .6rem .8rem; margin-bottom: .5rem; }

@media (max-width: 52rem) {
  .art-head { grid-template-columns: 1fr; gap: 1rem; }
  .people li { flex-wrap: wrap; }
  .activity li { flex-direction: column; gap: .2rem; }
  .act-date { flex: none; }
}

/* the dominant surface: base colour + stripe + mottle, for anything that must
   read as *no* overlay (active rail rows, active tabs) */
.surface-base, .feednav a.on, .prail-nav a.on {
  /* repaint the page's own fixed texture, so the row reads as bare ground through the rail overlay */
  background-color: var(--chrome);
  background-image: var(--stripe), var(--mottle);
  background-size: auto, 200px 200px;
  background-attachment: fixed, fixed;
}

/* ---- 3D button token: #000 gradients at low opacity so the stripe reads through ---- */
:root {
  --btn3d-face: linear-gradient(
      rgba(0,0,0,.34) 0%,      /* short dark lip at the top */
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 42%,          /* neutral middle: pure texture, no overlay */
      rgba(0,0,0,.22) 64%,     /* long taper into the bottom */
      rgba(0,0,0,.46) 100%);
  --btn3d-face-hover: linear-gradient(rgba(0,0,0,.26) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 46%, rgba(0,0,0,.16) 64%, rgba(0,0,0,.38) 100%);
}
.btn3d {
  display: inline-block; background-color: transparent; background-image: var(--btn3d-face);
  border: var(--cta-border); color: var(--chrome-text); cursor: pointer;
  font-family: var(--slab); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  padding: .95rem 1.1rem; line-height: 1; text-align: center; text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
}
.btn3d:hover { background-image: var(--btn3d-face-hover); color: #fff; text-decoration: none; }
.btn3d:active { background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.12)); }
.btn3d.block { display: block; width: 100%; }

/* ---- icon rail (signed in) ---- */
.iconrail { position: fixed; left: 0; top: var(--searchbar-h); bottom: 0; width: 62px; z-index: 5;
  background: transparent;            /* the page texture shows through, undarkened */
  display: flex; flex-direction: column; align-items: center; }
.iconrail a, .iconrail-btn { position: relative; display: grid; place-items: center; width: 100%; height: 119px; color: #f0f0f0;
  background: none; border: 0; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.iconrail-btn.is-listening { color: var(--nub-gold); }
.iconrail-btn.is-listening::after { content: ""; position: absolute; bottom: 32px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--nub-gold); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .25 } 50% { opacity: 1 } }
.iconrail-btn:hover { color: #fff; }
.iconrail a + a::before, .iconrail a + .iconrail-btn::before { content: ""; position: absolute; top: 0; left: 12px; right: 10px; height: 2px;
  background: linear-gradient(var(--hr-dark) 0 1px, var(--hr-dark-lift) 1px 2px); }
.iconrail a:hover { color: #fff; }
.iconrail a.on { color: var(--nav-active); }
.iconrail a.on::after { content: ""; position: absolute; left: 0; top: 26%; bottom: 26%; width: 2px;
  background: linear-gradient(transparent, rgba(214,208,230,.65), transparent); }
.iconrail svg { opacity: .92; }
body.is-in { padding-top: var(--searchbar-h); }
body.is-in main.wrap, body.is-in footer.wrap { padding-left: 62px; }
body.is-in .cols { margin-top: 0; }
.searchbar { position: fixed; top: 0; left: 0; right: 0; z-index: 6; padding: .55rem 0 .5rem;
  background-color: var(--chrome); background-image: var(--stripe), var(--mottle); background-size: auto, 200px 200px;
  background-attachment: scroll, scroll; }   /* the bar never scrolls; fixed here mispaints in Safari */
.searchbar::after { content: ""; position: absolute; left: 62px; right: 1.1rem; top: 100%; height: 9px;
  pointer-events: none; background: var(--masthead-shadow); }

/* ---- home rail: feed nav + welcome table ---- */
.feednav { list-style: none; padding: 0; margin: -1.6rem -2rem 1.6rem; }
.feednav li + li { border-top: 0; position: relative; }
.feednav li + li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(var(--hr-dark) 0 1px, var(--hr-dark-lift) 1px 2px); }
.feednav a { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; font-size: 1rem; color: var(--chrome-text); text-decoration: none; }
.feednav a:hover { color: #fff; text-decoration: none; }
.feednav a span { color: var(--chrome-muted); font-size: 1.1rem; }
.feednav a.on { color: #d8d8d8; }
.ruled-table, .wtable { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: transparent; padding: 0; border: var(--table-gap) solid var(--table-rule); }
.wcell { background: transparent; padding: 1.6rem .6rem; text-align: center; text-decoration: none; color: var(--chrome-text);
  border-right: var(--table-gap) solid var(--table-rule); border-bottom: var(--table-gap) solid var(--table-rule); }
.wtable > .wcell:nth-child(3), .wtable > .wcell:nth-child(5) { border-right: 0; }
.wtable > .wcell:last-child { border-bottom: 0; border-right: 0; }
.wcell-wide { border-right: 0; }
a.wcell:hover { background: rgba(0,0,0,.25); text-decoration: none; }
.wcell-wide { grid-column: 1 / -1; }
.wcell b { display: block; font-size: 1.7rem; font-weight: 300; color: #eaeaea; line-height: 1; margin-bottom: .5rem; }
.wcell span { font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--chrome-muted); }
.wcell .welcome-name { font-size: 1.2rem; font-weight: 300; color: #e4e4e4; margin: .9rem 0 0; }
.wcell-btn { padding: 0; background: none; background-color: transparent; }
.wcell-btn .btn3d { border: 0; padding: 1.05rem; }

/* home feed sits directly on the page texture; the grey panel is the profile's */
.feed-plain { background-color: transparent; background-image: none; }
.feed-plain .strip { background: transparent; color: var(--chrome-text); }
.feed-plain .strip::after { background: linear-gradient(rgba(0,0,0,.45) 0 1px, rgba(0,0,0,.32) 1px, rgba(0,0,0,0) 5px); }
.feed-plain .stackdate { color: var(--chrome-muted); }   /* on the dark home feed */
.feed-plain .empty { color: var(--chrome-muted); }

/* ---- article page: exact feed card, plus comments ---- */
.grid-single { columns: 1; max-width: 42rem; margin: 0 0 1.6rem; }
.comments { margin-top: 1.8rem; }
.comment-form { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; margin: 0 0 1.4rem; }
.comment-form textarea { grid-column: 2; margin: 0; resize: vertical; font-size: .92rem; }
.comment-form .btn { grid-column: 2; justify-self: start; }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-list li { position: relative; display: flex; gap: .8rem; align-items: flex-start; padding: .8rem 0; border-top: 0; }
.comment-list li + li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(var(--hr-light) 0 1px, var(--hr-light-lift) 1px 2px); }
.comment-list li:first-child { border-top: 0; }
.comment-body { flex: 1; min-width: 0; }
.comment-meta { margin: 0 0 .25rem; font-size: .72rem; font-weight: 600; letter-spacing: .06em; color: var(--ink-soft); }
.comment-meta a { color: var(--ink); }
.comment-body p:last-child { margin: 0; font-size: .92rem; line-height: 1.45; white-space: pre-line; }

/* ---- delete (edit page) ---- */


/* ================= note form card (shared: /new, /o/:id/edit, and the curtain) ================= */
.nf { margin: 0; }
.nf-top { display: flex; justify-content: flex-end; align-items: center; gap: .8rem; padding: .1rem .1rem .3rem; }
.nf-lbl { font-family: var(--slab); font-weight: 700; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--nf-ink); }
.nf-box { background: var(--nf-card); padding: 17px 22px 25px; display: grid; gap: 11px; box-shadow: 0 2px 6px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.10); }
.nf-field { display: block; width: 100%; margin: 0; box-sizing: border-box;
  font-family: var(--slab); font-weight: 400; font-size: var(--nf-input-size); letter-spacing: .12em; text-transform: uppercase; color: #333;
  background: var(--nf-field); border: 1px solid var(--nf-rule); box-shadow: none; padding: .78rem .85rem; }
.nf-field::placeholder { color: #9b9c9d; letter-spacing: .12em; }
/* title + comments carry the note card's body voice: mixed case, same ink */
.nf-stack input[name="name"], textarea.nf-field {
  text-transform: none; letter-spacing: .01em; font-size: var(--nf-body-size); line-height: 1.45; color: #333; }
textarea.nf-field { resize: vertical; }
/* collections dropdown: gradient tints give it depth over the card */
.nf-drop { position: relative; }
.nf-drop > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: .78rem .9rem; border: 1px solid var(--nf-rule);
  background-image: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.10) 55%, rgba(0,0,0,.05));
  font-family: var(--slab); font-weight: 700; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--nf-ink); }
.nf-drop > summary::-webkit-details-marker { display: none; }
.nf-drop > summary::after { content: ""; margin-left: .8rem; border: 5px solid transparent; border-top-color: #8b8c8d; transform: translateY(3px); }
.nf-drop[open] > summary::after { transform: translateY(-2px) rotate(180deg); }
.nf-drop > summary:hover { background-image: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.2) 55%, rgba(0,0,0,.04)); }
.nf-drop-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-drop-menu { position: absolute; z-index: 3; left: 0; right: 0; top: 100%; margin-top: -1px;
  border: 1px solid var(--nf-rule); background-color: #eceded;
  background-image: linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.15) 40%, rgba(0,0,0,.06));
  box-shadow: 0 6px 14px rgba(0,0,0,.28); }
.nf-opt { display: flex; align-items: center; gap: .55rem; padding: .6rem .9rem; cursor: pointer;
  font-family: var(--slab); font-weight: 600; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--nf-ink);
  border-top: 1px solid rgba(255,255,255,.6); box-shadow: 0 -1px 0 rgba(0,0,0,.06) inset; }
.nf-opt:first-child { border-top: 0; box-shadow: none; }
.nf-opt:hover { background: rgba(255,255,255,.5); }
.nf-opt input { width: auto; margin: 0; }
.nf-opt-new { flex-wrap: wrap; }
.nf-opt-new .nf-field { flex: 1 1 100%; margin-top: .4rem; padding: .45rem .6rem; font-size: var(--nf-input-size); background: #fff; }
.nf-image { position: relative; border: 1px solid var(--nf-rule); background: var(--nf-field-soft); overflow: hidden; }
.nf-image .nf-field { border: 0; background: transparent; text-align: center; padding: 2.6rem 1rem; font-weight: 700; font-size: var(--nf-input-size); letter-spacing: .14em; color: #a9a7a3; }
.nf-image-preview { display: block; width: 100%; max-height: 13rem; object-fit: contain; background: #fff; }
.nf-image-preview[hidden] { display: none; }
.nf-image.has-image { background: #fff; }
.nf-image.has-image .nf-field { padding: .5rem .7rem; text-align: left; font-weight: 400; font-size: var(--nf-input-size); letter-spacing: .02em; text-transform: none; color: #8a8b8c; background: var(--nf-field-soft); border-top: 1px solid var(--nf-rule); }
.nf-image.dragover { box-shadow: inset 0 0 0 2px var(--nub-gold); }
.nf-stack { display: grid; gap: 0; }
.nf-stack .nf-field { border-top-width: 0; }
.nf-stack .nf-field:first-child { border-top-width: 1px; }
.nf-post { display: block; width: 100%; cursor: pointer; font-family: var(--slab); font-weight: 700; font-size: .88rem;
  letter-spacing: .2em; text-transform: uppercase; color: #3f4040; padding: .95rem 1rem; border: 1px solid #c2c3c4;
  background: linear-gradient(#fafbfb 0%, #e4e5e6 55%, #d2d3d5 100%); box-shadow: 0 1px 0 #fff inset; }
.nf-post:hover { background: linear-gradient(#fff, #dcdddf); }
.nf-post:active { box-shadow: 0 2px 5px rgba(0,0,0,.22) inset; }
.nf-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 0; }
/* Editing an existing note: Delete far left, Owned genuinely centered, Cancel
   far right. A plain flex space-between can't center the middle item once
   Delete and Cancel have different widths — the outer 1fr columns absorb
   that difference so the toggle sits at the true midpoint regardless. */
.nf-foot.nf-foot-3 { display: grid; grid-template-columns: 1fr auto 1fr; justify-content: normal; }
.nf-foot.nf-foot-3 .nf-del { justify-self: start; }
.nf-foot.nf-foot-3 .nf-owned { justify-self: center; }
.nf-foot.nf-foot-3 > a.nf-link-btn, .nf-foot.nf-foot-3 > button.nf-link-btn:not(.nf-del) { justify-self: end; }
.nf-link-btn { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
  font-family: var(--slab); font-weight: 700; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--nf-ink); }
.nf-link-btn:hover { text-decoration: underline; }
.nf-danger { color: #a4433c; }
.nf-del { color: var(--nf-ink); }          /* same ink as Cancel */
.nf-del:hover { text-decoration: underline; }
main > .notecard-page { max-width: 33rem; margin: 1.2rem auto 2.6rem !important; background: transparent; padding: 0 1rem !important; }

/* ================= the curtain ================= */
/* Proportions taken from the original mock: card 640 wide, tint band 40 each side,
   ribbon 180 wide flush to the card's right edge and flush under its bottom.        */
.curtain { --peek: 52px; --nub-w: 177px; --nub-h: 259px;
  position: fixed; top: var(--searchbar-h); right: 3.5rem; z-index: 5;
  width: 29rem; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: flex-end;
  background: none;
  transform: translateY(calc(-100% + var(--peek)));
  transition: transform .42s cubic-bezier(.22,.61,.36,1); }
.curtain:hover { --peek: var(--nub-h); }
.curtain.is-open, .curtain.is-open:hover { transform: translateY(0); }
.curtain-frame { width: 100%; box-sizing: border-box; background: var(--curtain-frame);
  padding: 0 29px 0; }              /* side bands; the bottom band lives in .curtain-tail */
.curtain-body { width: 100%; }
/* bottom band and the ribbon's bridge sit side by side, so the two tints meet without overlapping */
.curtain-tail { display: flex; width: 100%; height: 29px; }
.tail-band { flex: 1; background: var(--curtain-frame); }
.tail-bridge { width: calc(var(--nub-w) * 180 / 260); background: var(--curtain-nub); }
.tail-edge { width: calc(var(--nub-w) * 40 / 260); background: var(--curtain-frame); }
/* the tint + ribbon silhouette is a PNG so the two translucencies and points stay exact */
.curtain-nub { position: relative; box-sizing: border-box;
  width: var(--nub-w); height: var(--nub-h);
  margin: 0;                            /* butts against the tail: bands continue, no double tint */
  background: url("/nub.png") no-repeat top center / 100% auto;
  border: 0; cursor: pointer; color: var(--nub-gold);
  padding: .95rem 1.5rem 0; text-align: center; }
.nub-label { display: block; font-family: var(--slab); font-weight: 700; font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; line-height: 1.5; color: var(--nub-gold); }
.nub-icon { display: grid; place-items: center; margin: .6rem auto 0; width: 3.5rem; height: 3.5rem;
  border-radius: 50%; background: rgba(255,255,255,.10); color: #fff; }
.nub-icon svg { width: 30px; height: 32px; }
.curtain-nub:focus-visible { outline: 2px solid var(--nub-gold); outline-offset: -6px; }
@media (max-width: 60rem) { .curtain:not(.dialog) { display: none; } }   /* dialogs still needed on mobile */

/* settings reuses the ruled table */
.settings-table { margin-bottom: 1.4rem; }
.settings-table .wcell { text-align: left; padding: 1.4rem 1.5rem; }
.set-cap { display: block; text-align: center; margin: .9rem 0 1rem; color: var(--chrome-text); }

/* ---- new-collection tile + delete affordance ---- */
.tile-new { flex: 0 0 8.6rem; display: grid; grid-template-rows: 5rem auto auto; background: var(--tile-face);
  text-align: center; cursor: pointer; border: 0; padding: 0; transition: flex-basis .28s ease; }
.tile-new .tile-img { background: transparent; }
.tile-new .tile-img img { width: 2.4rem; height: 2.4rem; }
.tile-new .tile-name { border-bottom: 0; }
.tile-new .tile-count { display: flex; align-items: center; justify-content: center; gap: .35rem; padding: .35rem .35rem .4rem; background: transparent; }
.tile-new input { display: none; width: 100%; margin: 0; padding: .3rem .4rem; font-family: var(--slab);
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; background: #fff; border: 1px solid var(--tile-rule); box-shadow: none; }
.tile-new .tile-save { display: none; background: none; border: 0; cursor: pointer; font-family: var(--slab);
  font-weight: 700; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--red); padding: 0 .2rem; }
.tile-new.is-open { flex-basis: 17rem; }
.tile-new.is-open input, .tile-new.is-open .tile-save { display: block; }
.tile-del { position: absolute; right: 6px; bottom: 6px; z-index: 2; opacity: 0; transition: opacity .15s;
  background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; }
.tile-del img { width: 18px; height: 18px; }
.tile-slot:hover .tile-del { opacity: 1; }

/* ---- confirm dialog: the note card's shell, sliding from the fixed bar ---- */
.dialog { --peek: 0px; width: 26rem; right: 50%; transform: translate(50%, -100%); pointer-events: none;
  visibility: hidden; transition: transform .42s cubic-bezier(.22,.61,.36,1), visibility 0s linear .42s; }
.dialog.is-open { transform: translate(50%, 0); pointer-events: auto;
  visibility: visible; transition: transform .42s cubic-bezier(.22,.61,.36,1), visibility 0s; }
.dialog:hover { transform: translate(50%, -100%); }
.dialog.is-open:hover { transform: translate(50%, 0); }
.dialog .curtain-tail { height: 29px; }
/* dialogs use the note card's stock, buttons and spacing */
.dialog .nf-box { padding: 17px 22px 25px; }
.dlg-title { margin: 0 0 .5rem; font-family: var(--slab); font-weight: 700; font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--nf-ink); }
.dlg-copy { margin: 0 0 1.1rem; font-size: .92rem; line-height: 1.5; color: #4b4844; }
.dlg-input { margin-bottom: 1rem; text-transform: none; letter-spacing: .01em;
  font-size: .92rem; line-height: 1.45; color: var(--ink); min-height: 5.2rem; resize: vertical; }
.dlg-input::placeholder { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; }
.dlg-input[hidden], .nf-field[hidden] { display: none; }   /* .nf-field's display would otherwise win */
.dialog .nf-foot { margin-top: 24px; }

/* ---- rail rule pattern: hairline sits above the heading ---- */
.rail h3.lbl.ruled { border-bottom: 0; padding-bottom: 0; padding-top: .75rem; position: relative; }
.rail h3.lbl.ruled::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(var(--hr-dark) 0 1px, var(--hr-dark-lift) 1px 2px); }
.rail .about { color: rgba(255,255,255,.34); }

/* ---- search bar active state (its own token, separate from .btn3d) ---- */
:root { --search-active-face: linear-gradient(rgba(0,0,0,.34) 0%, rgba(0,0,0,.12) 42%, rgba(0,0,0,0) 62%, rgba(0,0,0,.06) 100%); }
.searchbar.is-active input { text-transform: none; background-image: var(--search-active-face);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10); color: #efefef; text-align: left; letter-spacing: .1em; }

/* ---- new-collection tile: stacked CTAs with room to breathe ---- */
.tile-new .tile-count { flex-direction: row; align-items: center; gap: .5rem; padding: .45rem .6rem .5rem; }
.tile-new input { margin: 0; padding: .35rem .5rem; flex: 1 1 auto; min-width: 0; }
.tile-ctas { display: none; flex-direction: row; gap: .7rem; flex: 0 0 auto; }
.tile-new.is-open .tile-ctas { display: flex; }
.tile-cta { display: block; white-space: nowrap; background: none; border: 0; cursor: pointer; padding: .3rem 0;
  font-family: var(--slab); font-weight: 700; font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; color: #7b7b7b; }
.tile-cta:hover { color: #333; }
.tile-cta-go { color: #333; }

/* ---- empty states: an imprint, a rule, then suggestions ---- */
.empty-state { display: flex; align-items: center; justify-content: center; min-height: 20rem; padding: 3.5rem 1.5rem 3rem; text-align: center; }
.empty-line span { display: block; }
.empty-line { margin: 0; font-family: var(--slab); font-weight: 600; font-size: 3.1rem; line-height: 1.15;
  letter-spacing: -.005em; color: rgba(0,0,0,.13); max-width: 26ch; }
@media (max-width: 60rem) { .empty-line { font-size: 2.1rem; } }
.feed-plain .empty-line { color: rgba(255,255,255,.13); }
.empty-rule { position: relative; height: 2px; margin: 0 0 1.8rem;
  background: linear-gradient(var(--hr-light) 0 1px, var(--hr-light-lift) 1px 2px); }
.feed-plain .empty-rule { background: linear-gradient(var(--hr-dark) 0 1px, var(--hr-dark-lift) 1px 2px); }
.suggest-title { margin: 0 0 1.1rem; color: var(--ink-soft); border: 0; padding: 0; }
.feed-plain .suggest-title { color: var(--chrome-muted); }

/* ---- avatar picker ---- */
.avatar-pick { position: relative; display: block; margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer; }
.avatar-pick-hint { position: absolute; left: 0; right: 0; bottom: 0; padding: .3rem 0; border-radius: 0 0 6rem 6rem;
  background: rgba(0,0,0,.55); color: #fff; font-family: var(--slab); font-weight: 700; font-size: .58rem;
  letter-spacing: .14em; text-transform: uppercase; opacity: 0; transition: opacity .15s; }
.avatar-pick:hover .avatar-pick-hint { opacity: 1; }
.drop-zone { display: grid; place-items: center; min-height: 9rem; margin: 0 0 .2rem; cursor: pointer;
  border: 1px dashed rgba(255,255,255,.18); background: rgba(0,0,0,.25); overflow: hidden; }
.drop-zone.dragover { border-color: var(--nav-active); background: rgba(0,0,0,.35); }
.drop-zone img { max-width: 9rem; max-height: 9rem; border-radius: 50%; display: block; }
.drop-zone.has-image .drop-hint { display: none; }
.drop-hint { font-family: var(--slab); font-weight: 700; font-size: var(--nf-input-size); letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.35); }
#avatar-dialog .nf-post { margin-top: .2rem; }

#avatar-file { display: none !important; }

/* =========================================================================
   MOBILE  (≤52rem).  Everything below is scoped to the breakpoint and uses
   its own --m-* tokens, so desktop values are never touched.
   ========================================================================= */
@media (max-width: 52rem) {
  :root {
    --m-rail-w: 52px;          /* narrower fixed icon column */
    --m-searchbar-h: 52px;   /* measured height of the mobile search bar */
    --m-masthead-h: 100px;   /* signed-out masthead wraps to two rows on mobile */
    --m-tab-h: 34px;
    --m-tab-h-tall: 50px;   /* tabs that carry a wrapped label and a count */
    --m-tab-line: 1.05rem;  /* one line box for every tab line, so baselines align across tabs */
    --m-gutter: .75rem;
    --m-page-pad: 1.15rem;   /* breathing room on either side of scrolling content */
  }

  /* fixed chrome stays fixed: icon rail, search bar, signed-out masthead */
  .iconrail { width: var(--m-rail-w); top: var(--m-searchbar-h); }
  .iconrail a, .iconrail-btn { height: 84px; }
  .iconrail svg { transform: scale(.88); }
  .iconrail a + a::before, .iconrail a + .iconrail-btn::before { left: 9px; right: 8px; }
  body.is-in { padding-top: var(--bar-h, var(--m-searchbar-h)); }
  body:not(.is-in) { padding-top: var(--bar-h, var(--m-masthead-h)); }
  .iconrail { top: var(--bar-h, var(--m-searchbar-h)); }
  body.is-in main.wrap { padding-left: var(--m-rail-w); padding-right: 0; }
  body.is-dark-page main.wrap { padding-right: var(--m-page-pad); }
  main > .settings { padding: 0 var(--m-page-pad) !important; }
  .dark-strip { padding-left: var(--m-page-pad); padding-right: var(--m-page-pad); }
  .searchbar { padding: .4rem 0 .35rem; }
  .searchbar .wrap { padding: 0 .5rem; }
  .searchbar input { height: 40px; font-size: .68rem; letter-spacing: .16em; }
  /* Safari handles background-attachment: fixed poorly on small screens, which
     paints the strip under the fixed bar as a solid block. The texture is a fine
     repeat, so scrolling attachment is visually the same and safe. */
  body { background-attachment: scroll, scroll; }
  .surface-base, .feednav a.on, .prail-nav a.on { background-attachment: scroll, scroll; }

  /* the signed-out masthead's shadow renders correctly, so use its exact values */
  .searchbar::after { left: 0; right: 0; top: 100%; height: 9px;
    pointer-events: none; background: var(--masthead-shadow); }

  /* home rail: welcome table and its buttons first, feed nav below as tabs */
  .cols > .rail { display: flex; flex-direction: column; padding: 1rem var(--m-gutter) 1.2rem; }
  .cols > .rail > .welcome  { order: 1; }
  .cols > .rail > .wtable   { order: 2; }
  .cols > .rail > .feednav  { order: 4; }
  .cols > .rail > *         { order: 5; }

  /* feed nav: a tab row flush to the rail's bottom edge.
     Same logic as the notes filters — the selected tab is undressed (bare
     texture), the others carry a soft gradient so they read as raised.      */
  .cols > .rail { padding-bottom: 0; }
  .feednav { display: grid; grid-template-columns: repeat(3, 1fr);
    margin: 1.1rem calc(-1 * var(--m-gutter)) 0; border-top: 1px solid rgba(0,0,0,.4); }
  .feednav { position: relative; }
  .feednav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 9px; z-index: 2;
    pointer-events: none; background: var(--masthead-shadow); }
  .feednav li { position: relative; }
  .feednav li + li { border-top: 0; }
  .feednav li + li::before { top: 14%; bottom: 14%; left: 0; right: auto; width: 2px; height: auto;
    background: linear-gradient(90deg, var(--hr-dark) 0 1px, var(--hr-dark-lift) 1px 2px); }
  .feednav a { justify-content: center; text-align: center; min-height: var(--m-tab-h-tall); padding: .3rem;
    font-weight: 600; letter-spacing: .09em; text-transform: uppercase; line-height: var(--m-tab-line);
    background-image: linear-gradient(rgba(255,255,255,.05), rgba(0,0,0,.16)); }
  .feednav a:hover { background-image: linear-gradient(rgba(255,255,255,.08), rgba(0,0,0,.14)); }
  /* .on keeps the shared surface-base repaint: bare page texture, no overlay */
  .feednav a span { display: none; }
  .feednav a::before { content: attr(data-short); font-size: .56rem; }   /* short labels on small screens */

  /* note cards: centred avatar + date lockup, one date treatment throughout */
  .note { gap: .55rem; }

  .welcome .avatar.big { width: 4.6rem; height: 4.6rem; font-size: 2rem; }
  .welcome-name { font-size: 1rem; margin: .5rem 0 .7rem; }
  .wcell { padding: 1rem .5rem; }
  .wcell b { font-size: 1.3rem; }

  /* profile rail nav: same tab pattern and tokens as the home feed nav */
  .profile-rail { padding-bottom: 0; }
  .prail-nav { position: relative; display: flex; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;          /* left and right only */
    overscroll-behavior-x: contain; touch-action: pan-x pan-y;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; max-width: 100%;
    margin: 1.1rem calc(-1 * var(--m-gutter)) 0; border-top: 1px solid rgba(0,0,0,.4); }
  .prail-nav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 9px; z-index: 2;
    pointer-events: none; background: var(--masthead-shadow); }
  .prail-nav::-webkit-scrollbar { display: none; }
  .prail-nav li { position: relative; border-bottom: 0;
    flex: 0 0 25%; scroll-snap-align: start; }   /* four fill the width, the rest swipe in */
  .prail-nav li::after { display: none; }
  .prail-nav li + li::before { content: ""; position: absolute; top: 14%; bottom: 14%; left: 0; width: 2px;
    background: linear-gradient(90deg, var(--hr-dark) 0 1px, var(--hr-dark-lift) 1px 2px); }
  .prail-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
    text-align: center; min-height: var(--m-tab-h-tall); padding: .3rem .2rem;
    font-size: 0; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
    background-image: linear-gradient(rgba(255,255,255,.05), rgba(0,0,0,.16)); }
  /* every line — wrapped label or count — sits in an identical line box, so the
     second line of "All / Activity" shares a baseline with the counts beside it */
  .prail-nav a::before { content: attr(data-short); font-size: .52rem; line-height: var(--m-tab-line);
    white-space: pre-line; }
  .prail-nav a[data-count]::after { content: attr(data-count); font-size: .54rem; font-weight: 400;
    line-height: var(--m-tab-line); letter-spacing: .04em; color: var(--chrome-muted); }
  /* All Activity already wraps to two lines, so it needs no filler line */
  .prail-nav a.on[data-count]::after { color: #cfcfcf; }
  .prail-nav a span { display: none; }
  .prail-nav a:hover { background-image: linear-gradient(rgba(255,255,255,.08), rgba(0,0,0,.14)); }

  /* notes filters: short labels so they stay on one line */
  .vis-tabs a { display: flex; align-items: center; justify-content: center; min-height: 42px; font-size: 0; padding: .4rem .3rem; }
  .vis-tabs a::after { content: attr(data-short); font-size: .68rem; letter-spacing: .05em; }

  /* note form: the icon rail eats 52px, so the card is scaled down as a set —
     type and controls come down together so the proportions hold             */
  :root { --nf-input-size: .68rem; }
  main > .notecard-page { max-width: none; margin: 1rem var(--m-gutter) 2rem 0 !important; padding: 0 !important; }
  .nf-box { padding: 12px 12px 18px; gap: 9px; }
  .nf-drop-menu { left: -1px; right: -1px; }
  .nf-lbl { font-size: .6rem; letter-spacing: .12em; }
  .nf-field { padding: .62rem .7rem; }
  :root { --nf-body-size: .8rem; }
  .nf-image .nf-field { padding: 2rem .8rem; letter-spacing: .12em; }   /* size comes from --nf-input-size */
  .nf-image-preview { max-height: 10rem; }
  .nf-drop > summary { padding: .62rem .75rem; font-size: .68rem; letter-spacing: .11em; }
  .nf-opt { padding: .5rem .75rem; font-size: .66rem; }
  .nf-post { font-size: .76rem; letter-spacing: .17em; padding: .8rem .8rem; }
  .nf-foot { margin-top: 16px; }
  .nf-link-btn { font-size: .66rem; letter-spacing: .14em; }
  .switch { width: 2.7rem; height: 1.4rem; }
  .switch span::after { width: 1.16rem; height: 1.16rem; }
  .switch input:checked + span::after { transform: translateX(1.3rem); }

  .empty-state { min-height: 12rem; padding: 2rem .75rem 1.6rem; }
  .empty-line { font-size: 1.75rem; max-width: 20ch; }
}

/* ---- article page: section rules, member list, comment composer ---- */
.section-rule { height: 2px; margin: 1.6rem 0;
  background: linear-gradient(var(--hr-light) 0 1px, var(--hr-light-lift) 1px 2px); }
/* "Also noted by" reads like the members list in the signed-out rail */
.noters-fold > summary { list-style: none; cursor: pointer; text-align: center; padding: .1rem 0 .2rem; }
.noters-fold > summary::-webkit-details-marker { display: none; }
.noters-fold > summary::after { content: "▾"; display: inline-block; margin-left: .5rem; font-size: .6rem;
  color: var(--ink-soft); transform: translateY(-1px); }
.noters-fold[open] > summary::after { content: "▴"; }
.noters-title { color: var(--ink-soft); }
.noter-list { list-style: none; padding: .6rem 0 0; margin: 0 auto; justify-content: center;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), max-content)); gap: .2rem 2rem; }
.noter-list.is-one { grid-template-columns: max-content; }
.noter-list li a { display: flex; align-items: center; gap: .85rem; padding: .45rem 0; font-size: .95rem;
  color: var(--ink); text-decoration: none; }
.noter-list li a:hover { color: #000; }
.noter-list .avatar, .comment-list .avatar, .is-article .byline .avatar { width: 2.6rem; height: 2.6rem; }
.stamp { text-transform: uppercase; letter-spacing: .08em; font-size: .92em; }
/* the composer lines up with the note card above it and reuses the Post Note face */
.comment-form { display: block; margin: 0 0 1.6rem; }
.comment-form textarea { width: 100%; margin: 0 0 .7rem; text-transform: none; letter-spacing: .01em; font-size: .88rem; }
.comment-form textarea::placeholder { text-transform: uppercase; letter-spacing: .12em; font-size: .82em; }
.comment-form .nf-post { width: 100%; }
/* line the sections up with the note card, which sits past the avatar/date column */
.section-rule, .comments, .noters { max-width: 42rem; margin-left: 0; margin-right: 0; }
.comments, .noters { padding-left: calc(3.4rem + 1.2rem); }
.comments > .lbl, .noters .lbl { display: block; text-align: center; }
.section-rule { margin-left: calc(3.4rem + 1.2rem); max-width: calc(42rem - 3.4rem - 1.2rem); }

/* mobile overrides that must sit after the article-page rules above */
@media (max-width: 52rem) {
  /* the card runs full width on mobile, so the sections take no indent */
  .comments, .noters { padding-left: 0; max-width: none; }
  .section-rule { margin-left: 0; max-width: none; }
  .noter-list { grid-template-columns: 1fr 1fr; gap: .1rem .6rem; }
  .noter-list li a { font-size: .85rem; gap: .6rem; }
  .noter-list .avatar { width: 2rem; height: 2rem; }
  .comment-form .nf-post { font-size: .76rem; letter-spacing: .17em; }
}

/* one avatar scale across the article page */
.article-page-avatars { }
.noters .avatar, .comments .avatar, .is-article .note .byline .avatar { width: 2.6rem; height: 2.6rem; }

/* comment thread separator */
.comment-rule { margin: 0 0 1.3rem; }
@media (max-width: 52rem) {
  /* Post a new note lives in the curtain and the tabs; the rail button is redundant */
}

/* breadcrumb: profile › section › note */
.crumb-here { color: var(--ink); }
.strip .crumb { color: inherit; }
.strip .crumb:hover { color: var(--ink); text-decoration: underline; }

/* signed-out comment CTA uses the Post Note face */
.comment-signin { display: block; width: 100%; text-align: center; text-decoration: none; margin: 0 0 1.3rem; }
.comment-signin:hover { text-decoration: none; }

/* sign in / join sit on the dark chrome and reuse the settings form */
.join-intro { margin: 0 0 1.2rem; }
.settings-table .slabel a { color: var(--link-on-dark); }

/* ---- travel marks ---- */
.travelmark .mark-where { margin: 0 0 .55rem; font-size: .8rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); }
.mark-visits { display: flex; flex-direction: column; gap: .5rem; }
.visit-count { margin: 0; font-family: var(--slab); font-size: .68rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); text-align: center; }
.visit-del { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--link); }
.visit-del:hover { text-decoration: underline; }
.visits .comment-list li { padding-left: 0; }
.visits .comment-list li:first-child { border-top: 0; }
.visits .comment-body p:last-child { margin: 0; }

/* ---- travel marks: map media, lookup, ratings, location filters ---- */
.mark-map { background: #e9e9e7; }
.mark-map iframe { display: block; width: 100%; height: 100%; min-height: 15rem; border: 0; }
.mark-address { margin: 0 0 .6rem; font-size: .82rem; color: var(--ink-soft); }
.share-mark { cursor: pointer; }

/* place lookup */
.nf-lookup { position: relative; }
.lookup-list { position: absolute; z-index: 4; left: 0; right: 0; top: 100%; margin: -1px 0 0; padding: 0; list-style: none;
  background: #eceded; border: 1px solid var(--nf-rule); box-shadow: 0 6px 14px rgba(0,0,0,.28); max-height: 15rem; overflow-y: auto; }
.lookup-list li { padding: .55rem .8rem; cursor: pointer; border-top: 1px solid rgba(255,255,255,.6); }
.lookup-list li:first-child { border-top: 0; }
.lookup-list li:hover { background: rgba(255,255,255,.55); }
.lookup-list b { display: block; font-weight: 600; font-size: .82rem; color: #333; }
.lookup-list em { display: block; font-style: normal; font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: .1rem; }

/* visit log */

/* country / city filters: the note form's dropdown, one per axis */
.place-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 0 1.2rem; }
.place-drop .nf-opt.is-empty { color: var(--ink-soft); cursor: default; }
.place-field { display: block; min-width: 0; }
.place-drop > summary { background-color: transparent;
  background-image: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.16) 55%, rgba(0,0,0,.05)); }
.place-drop[data-empty] { opacity: .5; pointer-events: none; }
.place-drop .nf-opt { text-decoration: none; color: #333; }
.place-drop .nf-opt:hover { text-decoration: none; }
.place-drop .nf-opt.on { font-weight: 700; }

/* ================= travel mark card ================= */
.travelmark .card { grid-template-columns: 1fr; background-color: var(--mark-card);
  background-image: var(--paper-grain); background-size: 180px 180px; }
.travelmark .text { background: transparent; text-align: center; padding: 1.3rem 1.3rem 1.4rem;
  display: flex; flex-direction: column; align-items: center; }
/* a readable measure — long lines across a wide card read as a wall of text */
.travelmark .who, .travelmark .colls, .travelmark h2, .travelmark .mark-where,
.travelmark .mark-address, .travelmark .body, .travelmark .tags, .travelmark .link {
  max-width: 34rem; width: 100%; }
.travelmark .body { max-width: 30rem; }
.travelmark .mark-map, .travelmark .map-credit, .travelmark .noteit { width: 100%; max-width: 34rem; }
.travelmark .who { color: var(--mark-ink); }
.travelmark .who a { color: var(--mark-ink); }
.travelmark h2 a { color: #35342e; }
.travelmark .body { color: #52514a; }
.travelmark .mark-where { color: #767468; }
.travelmark .mark-address { color: #85847a; }
.travelmark .colls, .travelmark .colls a { color: #85847a; }
.travelmark .tags, .travelmark .link { text-align: center; }
.travelmark .link .lbl { color: var(--mark-ink); }
.mark-photo { display: block; margin: 0 0 1rem; }
/* A fixed height, not max-height — the box must be its final size the instant
   layoutFeed() measures it (DOMContentLoaded), not once the photo happens to
   finish downloading. Without this, a mark whose photo hasn't loaded yet gets
   placed into a masonry column based on a too-short measurement, then grows
   after the fact with no re-layout — leaving its neighbor column looking
   short, a "phantom" gap that has nothing under it. */
.mark-photo img { display: block; width: 100%; height: 13rem; object-fit: cover; }

/* map: wide and shallow, tinted to the palette */
.mark-map { margin: .2rem auto .35rem; max-width: var(--mark-measure); border: 1px solid var(--mark-rule); background: #e6e4dc; overflow: hidden; }
.mark-map iframe { display: block; width: 100%; height: 8.5rem; border: 0; filter: var(--map-tone); }
/* Feed cards: the map is a placeholder — clickable — until loaded on demand.
   Once loaded it stays non-interactive (pointer-events:none on the iframe
   itself, not the container, so the click that revealed it isn't blocked by
   the same rule that then keeps it from being pannable in a scrolling feed).
   The real, pannable map lives on the mark's own page (.note-full). */
.travelmark:not(.note-full) .mark-map { overflow: hidden; cursor: pointer; }
.travelmark:not(.note-full) .mark-map iframe {          /* widen and crop so the zoom buttons fall outside */
  width: calc(100% + 96px); margin-left: -48px; pointer-events: none; }
.mark-map-placeholder { display: flex; align-items: center; justify-content: center; height: 8.5rem;
  font-family: var(--slab); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mark-ink); opacity: .55; }
.travelmark:not(.note-full) .mark-map:hover .mark-map-placeholder { opacity: .8; }
.note-full .mark-map iframe { height: 11rem; }
.map-credit { margin: 0 0 .9rem; font-family: var(--slab); font-size: .58rem; letter-spacing: .08em;
  text-transform: uppercase; color: #97968c; }
.travelmark .noteit { background: rgba(255,255,255,.5); border-color: var(--mark-rule); }
.travelmark .btn-note { background: linear-gradient(#fcfcfa, #e9e8df); border-color: #cccabd; color: #423f38; }
.travelmark .btn-note:hover { background: linear-gradient(#fff, #e2e1d6); }
@media (max-width: 52rem) {
  .mark-map iframe { height: 7.5rem; }
  .travelmark .text { padding: 1rem 1rem 1.1rem; }
}

/* 1. a readable measure: the card can be wide, the text should not be */
:root { --mark-measure: 34rem; }
.travelmark .text > * { max-width: var(--mark-measure); margin-left: auto; margin-right: auto; }
.travelmark .body { max-width: 30rem; }
.travelmark h2 { max-width: none; }
.travelmark .mark-photo { max-width: var(--mark-measure); }

/* arc-set place name */
.mark-title { margin: .1rem 0 .2rem; max-width: none; }
.mark-title a { display: block; text-decoration: none; }
.arc-title { display: block; width: 100%; max-width: 30rem; margin: 0 auto; overflow: visible; }
.arc-title text { font-family: var(--slab); font-weight: 400; fill: #35332d; letter-spacing: -.012em; }
.mark-title a:hover .arc-title text { fill: #000; }
.note-full .arc-title { max-width: 33rem; }

/* directions beside check in; share sits bottom right like Cancel */
.mark-buttons { display: grid; grid-template-columns: 1fr; gap: .5rem; }
.mark-buttons:has(.checkin-btn), .mark-buttons:has(form), .mark-buttons:has([data-checkin]) { grid-template-columns: 1fr 1fr; }
.mark-buttons form { margin: 0; }
.mark-buttons .btn-note { text-decoration: none; }
.mark-foot { display: flex; justify-content: flex-end; max-width: var(--mark-measure); margin: .9rem auto 0; }
.mark-foot .share-mark {
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
  font-family: var(--slab); font-weight: 700; font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; line-height: 1; color: var(--nf-ink);          /* same token as Cancel */
}
.mark-foot .share-mark:hover { text-decoration: underline; }

/* ---- mark page: card beside the check-in timeline ---- */
.mark-layout { display: grid; grid-template-columns: 1fr; gap: 1.4rem; align-items: start; }
.mark-layout.has-log { grid-template-columns: minmax(0, 42rem) 16.5rem; gap: 1rem; justify-content: start; }
.mark-main { min-width: 0; }
.mark-main .grid-single { margin-bottom: 0; }

/* the log reads as a timeline; each entry is its own small card of linen stock */
.visit-log { background: rgba(0,0,0,.035); padding: 1rem .9rem 1.15rem; }
.visit-log .lbl { display: block; text-align: center; margin: 0 0 1rem; color: var(--ink-soft); }
.timeline { list-style: none; margin: 0; padding: 0 0 0 1.15rem; position: relative; }
.timeline::before { content: ""; position: absolute; left: 3px; top: .5rem; bottom: .5rem; width: 1px;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.15) 10%, rgba(0,0,0,.15) 90%, rgba(0,0,0,0)); }
.timeline li { position: relative; margin-bottom: 1.25rem;            /* room to breathe between entries */
  background-color: var(--log-card); background-image: var(--linen-grain); background-size: 140px 140px;
  border: 1px solid var(--log-rule); box-shadow: 0 1px 2px rgba(0,0,0,.07);
  padding: .62rem .7rem .66rem; }
.timeline li:last-child { margin-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -1.15rem; top: .78rem; width: 7px; height: 7px;
  border-radius: 50%; background: #fafaf8; box-shadow: inset 0 0 0 1px rgba(0,0,0,.28), 0 0 0 2px rgba(0,0,0,.035); }
.timeline li:first-child::before { background: #8a8f86; box-shadow: 0 0 0 2px rgba(0,0,0,.035); }
.tl-date { display: block; font-family: var(--slab); font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--log-ink); }
.tl-body { display: block; margin-top: .28rem; font-style: italic; font-size: .85rem; line-height: 1.45; white-space: pre-line;
  color: #62665e; }
.tl-del { position: absolute; right: .25rem; top: .25rem; font-weight: 600; opacity: 0; background: none; border: 0; cursor: pointer;
  font-size: .9rem; line-height: 1; color: var(--ink-soft); padding: .1rem .2rem; transition: opacity .15s; }
.timeline li:hover .tl-del { opacity: 1; }
.tl-del:hover { color: #4c504a; }

@media (max-width: 52rem) {
  /* stacked: card, then check-ins, then comments */
  .mark-layout.has-log { grid-template-columns: 1fr; }
  .visit-log { padding: .9rem .9rem 1rem; }
}

/* a private entry says so in the byline rather than wearing a badge */
.who-private { color: var(--private-ink); }
.travelmark .who-private { color: var(--private-ink); }

/* ---- segmented control: Note / Travel Mark ---- */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px;
  background-image: linear-gradient(rgba(0,0,0,.09), rgba(0,0,0,.03));
  border: 1px solid var(--nf-rule); border-radius: 999px; }
.seg-btn { border: 0; cursor: pointer; padding: .5rem .4rem; border-radius: 999px; background: transparent;
  font-family: var(--slab); font-weight: 700; font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: #8b8983; transition: color .15s; }
.seg-btn:hover { color: var(--nf-ink); }
.seg-btn.on { color: var(--nf-ink);
  background-image: linear-gradient(#fff, #f2f1ee);
  box-shadow: 0 1px 2px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.06); }

/* panels swap with an eased height so the curtain does not jump */
.seg-panels { overflow: hidden; transition: height .34s cubic-bezier(.22,.61,.36,1); }
.seg-panel { display: none; }
.seg-panel.is-on { display: block; }



.seg { margin: 0 0 2px; }

/* ---- dialogs on small screens ---- */
@media (max-width: 52rem) {
  .dialog { width: auto; left: var(--m-gutter); right: var(--m-gutter);
    transform: translateY(-100%); }
  .dialog.is-open, .dialog.is-open:hover { transform: translateY(0); }
  .dialog:hover { transform: translateY(-100%); }
  .dialog .curtain-frame { padding: 0 12px; }
  .dialog .nf-box { padding: 14px 16px 20px; }
  .dialog .nf-foot { margin-top: 18px; }

  /* profile tabs scroll sideways rather than stacking */
  .cols > .rail, .profile-rail { min-width: 0; }   /* a grid item defaults to min-content width */
}

/* ---- delete from a feed card ---- */
.byline { position: relative; }
.byline-who { display: flex; flex-direction: column; align-items: center; }
.card-del { display: block; margin: .7rem auto 0; padding: 0; background: none; border: 0;
  cursor: pointer; opacity: 0; transition: opacity .15s; line-height: 0; }
.card-del img { width: 22px; height: 22px; display: block; }
.note:hover .card-del, .card-del:focus-visible { opacity: .75; }
.card-del:hover { opacity: 1; }

/* ---- paging ---- */
.more { margin: .4rem 0 2rem; }
.more-link { display: block; text-align: center; text-decoration: none; max-width: 22rem; margin: 0 auto; }
.more-link:hover { text-decoration: none; }

@media (max-width: 52rem) {
  .card-del { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; opacity: .7; }
  .card-del img { width: 24px; height: 24px; }
}

/* ---- Edit on a feed card: the Cancel token, sized for the byline ---- */
.card-edit { display: block; margin: .7rem auto 0; text-align: center; text-decoration: none;
  font-family: var(--slab); font-weight: 700; font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--chrome-muted); opacity: 0; transition: opacity .15s; }
.note:hover .card-edit, .card-edit:focus-visible { opacity: 1; }
.card-edit:hover { color: var(--chrome-text); text-decoration: underline; }
.feed:not(.feed-plain) .card-edit { color: var(--ink-soft); }
.feed:not(.feed-plain) .card-edit:hover { color: var(--ink); }

/* Delete sits opposite the privacy toggle on an edit page */
.nf-top { justify-content: space-between; }
.nf-top .nf-lbl { margin-left: auto; }

/* the unfurl hint under the link field */
.lookup-note { margin: .35rem 0 0; font-family: var(--slab); font-size: .66rem; letter-spacing: .06em;
  text-transform: uppercase; color: #8b8983; }

@media (max-width: 52rem) {
  .card-edit { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; opacity: 1; }
}

/* real column elements, once the tiling script has run */
.feed-col > * { break-inside: auto; margin: 0 0 1.6rem; }
.feed-col > *:last-child { margin-bottom: 0; }

/* check-in entry actions */
.tl-actions { position: absolute; right: .25rem; top: .25rem; display: flex; align-items: center; gap: .45rem;
  opacity: 0; transition: opacity .15s; }
.timeline li:hover .tl-actions, .tl-actions:focus-within { opacity: 1; }
.tl-edit { background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--slab); font-weight: 700; font-size: .54rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--log-ink); }
.tl-edit:hover { text-decoration: underline; }
.tl-del { position: static; opacity: 1; }

/* check-in entry actions */
.tl-actions { position: absolute; right: .25rem; top: .25rem; display: flex; align-items: center; gap: .35rem;
  opacity: 0; transition: opacity .15s; }
.timeline li:hover .tl-actions, .tl-actions:focus-within { opacity: 1; }
.tl-edit { background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--slab); font-weight: 700; font-size: .54rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); }
.tl-edit:hover { color: var(--log-ink); text-decoration: underline; }
.tl-del { position: static; opacity: 1; }

/* ---- clamped description in feeds ---- */
.body.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7;
  overflow: hidden; margin-bottom: .25rem; }
.more-inline { margin: 0 0 .8rem; font-size: .88rem; line-height: 1.45; }
.more-inline a { color: var(--link); font-weight: 600; }

/* ---- rename a collection from its tile ---- */
.tile-ren { position: absolute; left: 4px; bottom: 3px; z-index: 3; background: none; border: 0;
  cursor: pointer; padding: 0 .25rem; line-height: 1; font-size: .95rem; letter-spacing: .04em;
  color: var(--ink-soft); opacity: 0; transition: opacity .15s; }
.tile-slot:hover .tile-ren, .tile-ren:focus-visible { opacity: 1; }
.tile-ren:hover { color: var(--ink); }
.tile-edit { display: none; position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: .45rem .5rem .5rem; background: var(--tile-face); border-top: 1px solid var(--tile-rule); }
.tile-slot.is-renaming .tile-edit { display: block; }
.tile-slot.is-renaming .tile-ren, .tile-slot.is-renaming .tile-del { opacity: 0; pointer-events: none; }
.tile-edit input { width: 100%; box-sizing: border-box; margin: 0 0 .4rem; padding: .35rem .5rem;
  font-family: var(--slab); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: #333; background: #fff; border: 1px solid var(--tile-rule); }
.tile-edit .tile-ctas { display: flex; flex-direction: row; gap: .7rem; justify-content: flex-end; }

/* ---- saved to the home screen: clear the status bar and the island ---- */
/* Only in standalone. In a browser tab the chrome already handles this, and
   adding the inset there would leave a dead band under the toolbar. */
.is-app .searchbar { padding-top: calc(.55rem + env(safe-area-inset-top, 0px)); }
.is-app .masthead { padding-top: env(safe-area-inset-top, 0px); }
.is-app .iconrail { padding-left: env(safe-area-inset-left, 0px); }
.is-app body { padding-bottom: env(safe-area-inset-bottom, 0px); }
@media (max-width: 52rem) {
  .is-app .searchbar { padding-top: calc(.4rem + env(safe-area-inset-top, 0px)); }
}

/* ---- choosing among the images a page offered ---- */
.nf-image { position: relative; }
.img-pick { position: absolute; z-index: 3; left: 0; right: 0; bottom: 6px;
  display: flex; align-items: center; justify-content: space-between;
  background: none; padding: 0 .35rem; pointer-events: none; }
.img-arrow { pointer-events: auto; background: none; border: 0; cursor: pointer; padding: 0 .45rem;
  line-height: 1; font-size: 1.5rem; color: var(--nf-ink); opacity: .45; transition: opacity .15s; }
.img-arrow:hover { opacity: .9; }
.img-count { font-family: var(--slab); font-size: .56rem; font-weight: 700; letter-spacing: .14em;
  color: var(--nf-ink); opacity: .55; }

/* =========================================================================
   The byline lockup. Desktop and mobile are deliberately different shapes, so
   each owns its own tokens rather than patching the other.

   Desktop: a narrow left column — avatar, then the date stacked beneath it.
   Mobile:  a single centred line — avatar and date side by side, one text size.
   ========================================================================= */
@media (max-width: 52rem) {
  :root {
    --m-byline-avatar: 2.1rem;   /* large enough to read, still on one line */
    --m-byline-size: .62rem;     /* matches .card-edit exactly */
    --m-byline-gap: .45rem;
  }
  /* three tracks: a spacer, the centred lockup, then Edit at the right. Grid
     rather than absolute positioning, so the date and Edit share a baseline. */
  .byline { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline;
    justify-content: center; padding: .1rem 0 1rem; }
  /* align-items: baseline here, not center — so the row's own baseline (what
     the outer grid aligns Edit against) is the date's text baseline, not the
     tall avatar's bottom edge. The avatar opts itself out with align-self,
     so it still centres visually without setting the row's baseline. */
  .byline-who { grid-column: 2; display: flex; flex-direction: row; align-items: baseline;
    gap: var(--m-byline-gap); }
  .byline .avatar { width: var(--m-byline-avatar); height: var(--m-byline-avatar); flex: 0 0 auto;
    align-self: center; position: relative; top: .82rem; }   /* recentres on the date visually;
    a relative offset paints only — it does not alter what the row exposes as its baseline */
  .stackdate { flex-direction: row; align-items: baseline; gap: .28rem;
    margin: 0; line-height: 1; white-space: nowrap; }
  .stackdate .mon, .stackdate .day, .stackdate .yr {
    font-size: var(--m-byline-size); font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; margin: 0; }
  /* Edit sits in the third track. Reset every desktop property that could
     shift its box off the grid's baseline: margin, size, weight, tracking. */
  .card-edit { position: static; grid-column: 3; justify-self: end; align-self: baseline;
    transform: none; margin: 0; opacity: 1;
    font-size: var(--m-byline-size); font-weight: 600; letter-spacing: .12em; line-height: 1; }
}

@media (max-width: 52rem) {
  .place-filters { grid-template-columns: 1fr; gap: .7rem; }
}

/* the rail's compose glyph is drawn at 44x48 for the curtain nub — scale it
   down to match the other rail icons rather than dominate the stack */
.iconrail-compose svg { width: 19px; height: 19px; }

/* re-mark lineage: where this mark was adopted from */
.remark-source { margin: .6rem 0 0; text-align: center; font-family: var(--slab);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.remark-source a { color: var(--link); }

/* re-mark lineage: the source no longer exists, but the relationship still happened */
.remark-source-gone { color: var(--ink-soft); opacity: .75; }

/* PWA install — reuses .sbox-title/.sbox-sub (settings box) and .dlg-copy's
   type treatment (dialog), rather than introducing new list styling. */
.install-steps { margin: 0 0 1.1rem; padding-left: 1.3rem; font-size: .92rem; line-height: 1.6; color: #4b4844; }
.install-steps li { margin-bottom: .3rem; }
.is-app .install-box { display: none; }   /* belt-and-braces alongside the JS check — never show once already standalone */

/* invites list — reuses the settings box's own dark-scheme divider token */
.invite-row { padding: .9rem 0; border-top: var(--table-gap) solid var(--table-rule); }
.invite-row:first-child { border-top: 0; padding-top: 0; }
.invite-row .conn-url { margin: 0; }

/* ---- welcome page (v1.14) ------------------------------------------------
   Every rule here is scoped to .is-welcome so the signed-out splash can carry
   its own light treatment without touching the dark chrome used everywhere
   else. The masthead's .signin stays dark on every other page. */
/* the splash sits on light stock edge to edge, rather than the app's dark
   chrome showing around a light block — main > * would otherwise tint only
   each child, leaving the surround dark. */
body.is-welcome { background-color: var(--paper); background-image: var(--paper-grain);
  background-size: 180px 180px; }
.is-welcome main > *:not(.cols) { background-color: transparent; background-image: none; }
.is-welcome main { padding-bottom: 3rem; }
.is-welcome .masthead { position: static; background: none; box-shadow: none; }
.is-welcome .masthead::after { display: none; }
.is-welcome .masthead .wrap { justify-content: flex-end; min-height: 0; padding-top: 1.6rem; }
.is-welcome .masthead .mark { display: none; }        /* the splash lockup below is the wordmark */
.is-welcome .signin { align-items: center; gap: .4rem; }
.is-welcome .signin input { width: 7rem; background: #f1f1f1; border: 1px solid #d4d4d4; color: #6d6d6d;
  font-size: .66rem; font-weight: 400; letter-spacing: .04em; text-transform: none; padding: .45rem .6rem; }
.is-welcome .signin input::placeholder { color: #a5a5a5; text-transform: none; letter-spacing: .04em; }
.is-welcome .signin button.caps { color: #3b1d00; font-size: .66rem; letter-spacing: .06em; }
.is-welcome .signin button.caps:hover { color: #000; }

.is-welcome main > .splash { max-width: 42rem; margin: 0 auto; padding: .5rem 1.5rem 2.5rem; }
.is-welcome .splash-h { font-size: 1.9rem; margin-bottom: .5rem; }
.is-welcome .splash-sub { font-size: 1rem; line-height: 1.55; max-width: 34rem; margin: 0 auto 1.6rem; }
.splash-enter { padding: .9rem 3.2rem; }
.splash-install { margin-top: 1.1rem; }
/* the install CTA is the curtain's own "Post note" button, not a new token */
.splash-install .nf-post { max-width: 20rem; margin: 0 auto; }

/* the demo shot, with the concave "lifted corners" shadow: two counter-rotated
   slabs, so the shadow pools under the bottom corners and pulls away toward the
   middle. A single ellipse bulges the wrong way and cannot do this.
   .shot-shadow is clipped to exactly the frame's own width, so the blur can
   never bleed past the image's edges regardless of rotation/blur math. */
.is-welcome main > .shot-wrap { width: 56rem; max-width: 100%; margin: 0 auto 2.5rem; padding: 0; }
.shot-wrap { position: relative; }
.shot-shadow { position: absolute; left: 0; right: 0; bottom: -30px; height: 80px;
  overflow: hidden; z-index: -1; }
.shot-shadow::before, .shot-shadow::after {
  content: ""; position: absolute; bottom: 44px; width: 52%; height: 50px;
  box-shadow: 0 20px 16px rgba(0,0,0,.55); }
.shot-shadow::before { left: 2%; transform: rotate(-5deg); transform-origin: 0 100%; }
.shot-shadow::after { right: 2%; transform: rotate(5deg); transform-origin: 100% 100%; }
.shot-frame { position: relative; z-index: 1; border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 20px rgba(0,0,0,.18); }
.shot-chrome { display: flex; align-items: center; gap: 7px; padding: 10px 14px;
  background: linear-gradient(#d6d6d6, #cfcfcf); }
.shot-chrome span { width: 10px; height: 10px; border-radius: 50%; background: #b5b5b5; }
.shot-chrome span:nth-child(1) { background: #ff5f57; }
.shot-chrome span:nth-child(2) { background: #febc2e; }
.shot-chrome span:nth-child(3) { background: #28c840; }
/* height:auto is load-bearing — the img carries width/height attributes for
   layout stability, and without this the intrinsic height wins at narrow
   widths and the shot renders squashed. */
.shot-frame img { display: block; width: 100%; height: auto; }

@media (max-width: 40rem) {
  .is-welcome .masthead .wrap { justify-content: center; padding-top: 1.2rem; }
  .is-welcome .signin { flex-wrap: wrap; justify-content: center; }
  .is-welcome .splash-h { font-size: 1.45rem; }
  .is-welcome .splash-sub { font-size: .92rem; }
  .is-welcome main > .shot-wrap { width: auto; margin-left: 1.1rem; margin-right: 1.1rem; }
}

/* ---- sticky left rails on desktop (v1.14) --------------------------------
   The rail column keeps its nav visible while the feed scrolls, and scrolls
   independently if its own content is taller than the viewport.

   Scoped to min-width 52.01rem so the mobile stacking at max-width:52rem is
   completely untouched — below that the rail is a normal flow block again.

   .cols defaults to align-items:stretch, which makes the rail full-height and
   leaves sticky nothing to move within. Setting align-self:start fixes that
   but stops the dark panel filling the column, so the column's background is
   painted on .cols itself instead — full height regardless of content. */
@media (min-width: 52.01rem) {
  .cols { background-image: linear-gradient(to right, var(--rail-overlay) 0 19rem, transparent 19rem); }
  .cols > .rail {
    background-color: transparent;          /* the gradient above paints it now */
    align-self: start;
    position: sticky;
    top: var(--searchbar-h);
    max-height: calc(100vh - var(--searchbar-h));
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .cols > .rail::-webkit-scrollbar { width: 8px; }
  .cols > .rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; }
  .cols > .rail::-webkit-scrollbar-track { background: transparent; }
}

/* ---- note card head (v1.15) ---------------------------------------------
   "who noted" + collections now live in .card-head, a sibling of .text, so
   the mobile layout can put them above the image (mirroring the travel mark
   card). On desktop, grid areas keep the head visually inside the text column
   exactly where it was — same background, same combined padding — so the
   desktop card is unchanged. */
/* Scoped away from .travelmark on purpose. A travel mark card declares only
   grid-template-columns:1fr and no named areas, so a bare `grid-area: text`
   there points at an area that does not exist — grid then invents implicit
   tracks and the content lands off-centre with a phantom gap on the left. */
.note:not(.travelmark) .card-head { grid-area: head; background: var(--card); padding: .9rem .8rem 0; }
.note:not(.travelmark) .card-head + .text { padding-top: 0; }
.note:not(.travelmark) .text { grid-area: text; }
.note:not(.travelmark) .figure { grid-area: figure; }
.note:not(.travelmark) .card { grid-template-areas: "head" "text" "owned"; grid-template-rows: auto 1fr auto; }
.note.has-image .card { grid-template-areas: "head figure" "text figure" "owned owned"; grid-template-rows: auto 1fr auto; }
/* Owned spans the full card width on its own row, below the image, so the
   switch lands at the true bottom-right corner rather than the right edge of
   the text column. */
.note:not(.travelmark) .owned-row { grid-area: owned; }

@media (max-width: 52rem) {
  /* head → image → text, all centered, matching the travel mark card */
  .note.has-image .card { grid-template-areas: "head" "figure" "text" "owned"; grid-template-rows: auto auto 1fr auto; }
  .note .figure { order: 0; }                     /* order:-1 no longer needed — grid areas place it */
  .note:not(.travelmark) .card-head { text-align: center; padding-bottom: .1rem; }
  .note:not(.travelmark) .text { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .note:not(.travelmark) .text > * { width: 100%; }
  .note:not(.travelmark) .text .noteit { width: 100%; }
}

/* ---- Owned + Warrant (v1.15) --------------------------------------------
   Owned is deliberately quiet: a label and a small switch, matching the
   `private` toggle on the post form. It renders only for the member's own
   notes — a viewer looking at someone else's note gets no element at all. */
.owned-row { display: flex; align-items: center; justify-content: flex-end; gap: .6rem;
  margin: 0; padding: .75rem .8rem; background: var(--card); border-top: 1px solid var(--rule); }
/* stays bottom-right on mobile too */
.owned-row .nf-lbl { color: var(--ink-soft); }

/* The Warrant seal hangs from the top edge, near the left corner, on both
   note and mark cards. Rendered only when a warrant is currently active. */
.card { position: relative; }   /* anchor for the warrant seal */
/* Hangs off the card's top edge, near the left corner. The ribbon tucks
   behind the disc; the disc itself carries the drop shadow so the seal reads
   as sitting proud of the card rather than printed on it. */
/* Sits at the card's own top edge, indented .8rem to align with the text
   paragraph beneath it. The ribbon is a light warm grey strip running from
   the top edge down behind the disc, so the seal reads as draped over the
   card's corner. The drop shadow is on the disc, not the ribbon. */
/* z-index:1 is deliberate: every real overlay in the app (dropdown menus,
   lookup lists, image pickers, the curtain, the masthead) sits at 2 or above,
   and the seal must never be able to win a stacking fight against any of
   them. It only needs to clear ordinary static content, which has no
   z-index at all. */
.warrant-seal { position: absolute; top: 0; left: .8rem; z-index: 1; line-height: 0; pointer-events: none; }
/* mark cards inset their text further, so the seal follows to stay aligned
   with the paragraph beneath it (1.3rem desktop, 1rem mobile) */
.travelmark .card > .warrant-seal { left: 1.3rem; }
@media (max-width: 52rem) { .travelmark .card > .warrant-seal { left: 1rem; } }
.warrant-seal .wsl-ribbon { fill: #d8d3c8; }
.warrant-seal circle:first-of-type { filter: drop-shadow(0 2px 3px rgba(0,0,0,.30)); }
/* Warranted cards push their head/text down to clear the hanging seal.
   :has() scopes this to warranted cards only — an unwarranted card keeps its
   original spacing exactly. */
.card:has(.warrant-seal) .card-head,
.travelmark .card:has(.warrant-seal) .text { padding-top: 3.4rem; }
@media (max-width: 52rem) {
  /* Centred head text on mobile: inset both sides equally so the centred
     "who noted" line can never run under the seal, while staying centred. */
  .card:has(.warrant-seal) .card-head .who,
  .card:has(.warrant-seal) .card-head .colls,
  .travelmark .card:has(.warrant-seal) .who,
  .travelmark .card:has(.warrant-seal) .colls { padding-left: 3rem; padding-right: 3rem; box-sizing: border-box; }
}

/* ---- post-form Warrant + Owned controls (v1.16) --------------------------
   Warrant sits top-left in .nf-top, opposite the Private toggle. The CTA and
   the seal occupy the same slot; .is-warranted swaps which one is shown, and
   the seal slides down into place from above the box edge. */
.nf-top { position: relative; }
.nf-warrant { position: relative; min-width: 3.2rem; min-height: 1.6rem; margin-right: auto; }
/* -17px clears .nf-box's padding, -.1rem clears .nf-top's own padding, so
   the ribbon starts flush with the box's top edge. */
.nf-warrant .warrant-seal-form { position: absolute; left: 0; top: calc(-17px - .1rem); pointer-events: auto; cursor: pointer;
  opacity: 0; transform: translateY(-1.2rem);
  /* Snappy: the drop is short and mostly done in the first third of its
     duration, so the seal reads as landing rather than drifting. */
  transition: transform .2s cubic-bezier(.2,.9,.3,1), opacity .1s linear; }
/* The CTA disappears on the same frame as the tap — no fade to sit through. */
.nf-warrant .nf-warrant-cta { transition: none; }
.nf-warrant.is-warranted .nf-warrant-cta { opacity: 0; pointer-events: none; }
.nf-warrant.is-warranted .warrant-seal-form { opacity: 1; transform: translateY(0); }
/* Immediate tactile feedback on press, before any animation begins. */
.nf-warrant-cta { -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: none; }
.nf-warrant-cta:active { opacity: .5; }
.nf-warrant .warrant-seal-form:active { transform: translateY(0) scale(.92); transition: transform .06s; }
/* Someone who prefers less motion just gets the state change. */
@media (prefers-reduced-motion: reduce) {
  .nf-warrant .warrant-seal-form { transition: opacity .08s linear; transform: none; }
  .nf-warrant.is-warranted .warrant-seal-form { transform: none; }
}
.nf-warrant.is-warranted { min-height: 3rem; }

/* Owned sits bottom-left in .nf-foot, opposite Cancel. Same .switch token as
   Private; Delete joins it on the left when editing. */
.nf-foot-left { display: flex; align-items: center; gap: 1.1rem; }
.nf-owned { display: flex; align-items: center; gap: .6rem; }

/* the owned switch dims briefly while its background request is in flight,
   and flashes if it failed and had to snap back */
.owned-row.is-saving .switch { opacity: .55; }
.owned-row.is-failed .switch span { background: linear-gradient(#c98b8b, #b06a6a); }

/* duplicate awareness: informational, never blocking */
.note-dupe { font-family: var(--slab); font-size: .68rem; letter-spacing: .04em;
  color: var(--ink-soft); margin: 0 0 .5rem; text-align: center; }

/* ---- Ensemble worksurface (v1.18) --------------------------------------- */
.ens { max-width: 62rem; margin: 0 auto; }
.ens-head { text-align: center; padding: 1.4rem 1.5rem .6rem; }
.ens-title { font-size: 1.9rem; font-weight: 400; margin: 0 0 .4rem; color: var(--ink); }
.ens-desc { font-size: 1rem; line-height: 1.55; max-width: 34rem; margin: 0 auto .6rem; color: var(--ink); }
.ens-meta { font-family: var(--slab); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.ens-primary img { display: block; width: 100%; height: auto; }
.ens-alts { display: flex; flex-wrap: wrap; gap: .8rem; padding: .9rem 1.2rem; }
.ens-alt { margin: 0; width: 9rem; }
.ens-alt img { display: block; width: 100%; height: 7rem; object-fit: cover; }
.ens-danger { color: #8c4a4a; }
.ens-comps { list-style: none; margin: 0; padding: 0; }
.ens-comp { display: flex; align-items: center; gap: .9rem; padding: .7rem 1.2rem;
  border-top: 1px solid var(--rule); }
.ens-comp img, .ens-comp-blank { width: 3rem; height: 3rem; object-fit: cover; flex: none;
  background: var(--nf-field-soft); }
.ens-comp-body { flex: 1; display: flex; flex-direction: column; gap: .15rem; }
.ens-comp-label { font-size: .95rem; color: var(--ink); }
.ens-comp-state { font-family: var(--slab); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); }
.ens-comp.unresolved .ens-comp-label { color: var(--ink-soft); font-style: italic; }
.ens-edit { margin: 1.4rem 0 0; }
.ens-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 1rem; padding: 1.2rem; }
.ens-tile { display: flex; flex-direction: column; gap: .3rem; text-decoration: none; }
.ens-tile img, .ens-tile-blank { width: 100%; height: 9rem; object-fit: cover; background: var(--nf-field-soft); }
.ens-tile-t { font-size: .92rem; color: var(--ink); }
.ens-tile-t i { font-family: var(--slab); font-size: .55rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); font-style: normal; }
.ens-tile-n { font-family: var(--slab); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 52rem) { .ens-comp { padding: .7rem .9rem; } }

/* grouped component sections on the ensemble worksurface */
.ens-group { font-family: var(--slab); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft); margin: 1.1rem 0 0; padding: 0 1.2rem; }
.ens-group i { font-style: normal; opacity: .6; }
.ens-comp.is-linked { padding: 0; }
.ens-comp-link { display: flex; align-items: center; gap: .9rem; flex: 1;
  padding: .7rem 1.2rem; text-decoration: none; color: inherit; }
.ens-comp-link:hover { background: rgba(0,0,0,.03); text-decoration: none; }
.ens-comp-link:hover .ens-comp-label { text-decoration: underline; }
@media (max-width: 52rem) {
  .ens-group { padding: 0 .9rem; }
  .ens-comp-link { padding: .7rem .9rem; }
}
.ens-saved { font-family: var(--slab); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft); }
.ens-saved.is-bad { color: #8c4a4a; }

/* Follow button on another user's rail, matching the dark .btn3d token used
   by Logout and Save changes rather than the light .btn it used before. */
.prail-follow .btn3d.is-following { color: var(--chrome-text); background: linear-gradient(var(--dbtn-top), var(--dbtn-bottom));
  border-color: var(--dbtn-border); }

/* ---- settings: two columns at generous widths (v1.19) --------------------
   Column 1 is the member's own profile + sign out; column 2 is everything
   that connects outward (AI connector, invites, install). align-items:start
   is what keeps both columns' first boxes top-aligned — without it a grid
   row stretches every cell to the tallest, which would pull column 2 down
   to match column 1's full height instead of starting level with it. */
.settings-grid { display: block; }
.settings-col { display: flex; flex-direction: column; gap: 1.4rem; }
.settings-col .settings-table { margin-bottom: 0; }

/* Two columns: profile+signout | connector+invites+install. Below the width
   where a genuine third column fits, Install is simply the third box in
   column 2's own stack — tucked in under Invites, not floating on its own.
   Container widens to 2×30rem+gap so each column keeps the original width. */
@media (min-width: 76rem) {
  main > .settings { max-width: 61.4rem; }
  .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: start; }
}

/* Three columns, only once there is genuinely room for one. Column 2's own
   wrapper is what has been stacking Connector/Invites/Install in a plain
   flex column — display:contents makes that wrapper disappear from layout
   without touching the DOM, so its three boxes become direct grid items and
   can be placed independently: Connector and Invites keep sharing column 2,
   Install moves out into column 3 on its own. Container widens again to
   3×30rem+gaps so no column shrinks below the original width. */
@media (min-width: 108rem) {
  main > .settings { max-width: 92.8rem; }
  .settings-grid { grid-template-columns: 1fr 1fr 1fr; }
  /* Dissolve the OUTER wrapper only. .settings-stack (Connector+Invites) is
     never dissolved, so it stays ONE grid cell whose height is its own
     content — not tied to column 1's much taller profile form via a shared
     row track, which is what produced a large empty gap under Invites when
     Connector and Invites were placed as two separately row-numbered items
     on the grid directly. Install becomes independent in column 3. */
  .settings-col-outward { display: contents; }
  .settings-stack { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 1.4rem; }
  .install-box { grid-column: 3; grid-row: 1; margin: 0; }
}

/* pending-review banner and its keep/discard controls */
.ens-pending { color: #c9a227; font-weight: 700; }
.ens-review { display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  padding: .9rem 1.2rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  margin: .8rem 0 0; flex-wrap: wrap; }
.ens-review-q { margin: 0; font-family: var(--slab); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); }
.ens-review form { margin: 0; }

/* ---- multi-day check-ins (v1.29) ----------------------------------------
   Everything here dresses NATIVE elements in existing tokens: the date input
   as an .nf-field, day rows as <details> using .tl-date, and day logs nested
   in the timeline. No new colours or components. */
.nf-field[type="date"] { color-scheme: light; font-family: var(--slab); letter-spacing: .06em; }
.nf-dates { display: grid; grid-template-columns: 1fr; gap: 0; }
.nf-dates.has-end { grid-template-columns: 1fr 1fr; }
.nf-dates.has-end .nf-field:last-child { border-left-width: 0; }
.nf-range { font-family: var(--slab); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--nf-ink); opacity: .7; margin: .2rem 0 0; }
.ck-days-wrap { display: grid; gap: .4rem; }
.nf-days { display: grid; gap: 0; border-top: 1px solid rgba(0,0,0,.14); }
.nf-day { border-bottom: 1px solid rgba(0,0,0,.14); }
.nf-day summary { list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; padding: .55rem .1rem; cursor: pointer; }
.nf-day summary::-webkit-details-marker { display: none; }
.nf-day summary:focus-visible { outline: 2px solid var(--nf-ink); outline-offset: 2px; }
.nf-day .tl-date { font-family: var(--slab); font-weight: 700; font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--nf-ink); white-space: nowrap; }
.nf-day .nf-link-btn { font-size: .62rem; white-space: nowrap; }
.nf-day[open] summary .nf-link-btn { display: none; }
.nf-day[open] summary .nf-day-preview { display: none; }
.nf-day .nf-day-preview { font-size: .8rem; color: var(--nf-ink); opacity: .75; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-day textarea.nf-field { margin: 0 0 .5rem; }
/* day logs inside the timeline: a subordinate column, NOT further cards.
   .timeline li supplies a card and a dot; strip both for the nested list. */
.tl-days { list-style: none; margin: .6rem 0 0; padding: 0 0 0 .9rem; border-left: 2px solid rgba(0,0,0,.14); }
.tl-days li { margin: .45rem 0 0; padding: 0; background: none; box-shadow: none; border: 0; }
.tl-days li::before, .tl-days li::after { display: none; }
.tl-days .tl-date { display: block; margin-bottom: .1rem; font-size: .62rem; }
.tl-days .tl-body { font-size: .86rem; }
/* `hidden` must actually hide: several of these blocks set display:grid,
   which would otherwise override the attribute's user-agent default. */
#checkin-dialog [hidden] { display: none !important; }
.ingest-mode { display: grid; gap: .3rem; margin: .8rem 0 0; }
.ingest-mode .nf-field { width: 100%; }