/* ---------------------------------------------------------------------------
   Peltify — the phase6 shell (2026-09-04). Instagram's chrome, Peltify's paper.

   Loaded AFTER app.css on purpose: everything about the rail, the top bar and
   the phone tab bar is restated here, and the older rules below it in
   app.css are simply out-ranked. Two formats, one codebase:

     ≥ 1264px   a 244px rail — glyph + label, wordmark at the top, "More" at
                the foot. No top bar.
     901–1263   the same rail at 72px, icons only, the brand mark instead of
                the wordmark (Instagram collapses exactly like this).
     ≤ 900px    a bottom tab bar of five icons and a slim top bar with the
                wordmark on the left and the paper-plane on the right.

   Shared primitives the feed / profile / search lanes draw with live at the
   bottom of this file (`.ig-*`): the dialog scrim, the pill buttons, the
   follow button, the stat row. One definition, so a Follow button on the
   feed and a Follow button on a profile are the same button.
   --------------------------------------------------------------------------- */

/* --------------------------------------------------------------- layout --- */

.app { grid-template-columns: 244px minmax(0, 1fr); }
.main { grid-template-rows: auto 1fr; }
.topbar.is-empty { display: none; }

/* ------------------------------------------------------------- the rail --- */

.rail {
  position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh;
  display: grid; grid-template-rows: auto 1fr auto; gap: 8px;
  padding: 10px 12px 18px;
  border-right: 1px solid var(--line);
  background: var(--white);
  z-index: 30;
}

.rail-brand {
  display: flex; align-items: center; height: 60px;
  margin: 8px 0 12px; padding: 0 12px;
  border: 0; background: none; cursor: pointer; border-radius: 8px;
}
.rail-brand:hover { background: transparent; opacity: .82; }
.rail .rail-brand img { display: block; height: 28px; width: auto; object-fit: contain; }
.rail .rail-brand img.rail-brand-mark { display: none; width: 28px; }

.rail-nav { position: relative; display: grid; gap: 4px; align-content: start; }
.rail-foot { display: grid; gap: 4px; }

.rail-nav button, .rail-foot button {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 16px;
  width: 100%; min-height: 48px; padding: 0 12px;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--ink); font: inherit; font-size: 16px; font-weight: 500;
  text-align: left; cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.rail-nav button:hover, .rail-foot button:hover { background: var(--paper); }
.rail-nav button:hover .rail-ic, .rail-foot button:hover .rail-ic { transform: scale(1.06); }
.rail-nav button[aria-current="page"], .rail-foot button[aria-current="page"] {
  background: transparent; color: var(--ink); font-weight: 800;
}
.rail-nav button[aria-current="page"] .rail-ic svg { stroke-width: 2.6; }
.rail-nav button[aria-current="page"] .rail-ic-av .av { box-shadow: 0 0 0 2px var(--ink); }

.rail .rail-nav button span.rail-ic, .rail .rail-foot button span.rail-ic {
  display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none;
  transition: transform 160ms var(--ease);
}
.rail-ic svg { width: 24px; height: 24px; stroke-width: 1.9; }
.rail-ic-av .av { width: 26px; height: 26px; font-size: 11px; }
.rail-l { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* THE PILL that travels between items. */
.rail-pill {
  position: absolute; left: 0; right: 0; top: 0; height: 48px;
  border-radius: 8px; background: var(--violet-wash);
  opacity: 0; pointer-events: none;
  transition: transform 340ms cubic-bezier(0.16, 1, 0.3, 1),
              height 340ms cubic-bezier(0.16, 1, 0.3, 1), opacity 160ms ease;
}

/* THE RED DISC: Instagram's unread count, pinned to the glyph's corner. */
.rail-nav .count, .rail-foot .count { display: none; }
.rail-nav .count.is-alert, .topbar-ib .count.is-alert {
  position: absolute; left: 26px; top: 6px; margin: 0;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: #ff3040; color: #fff;
  font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--white);
}

/* icons-only band. The selectors are deliberately heavier than app.css's
   older 901–1100px rules (which hid every span in a rail button and cropped
   the wordmark to a square) so this file wins at every width. */
@media (max-width: 1263px) and (min-width: 901px) {
  .app { grid-template-columns: 72px minmax(0, 1fr); }
  .rail { padding: 10px 8px 18px; }
  .rail .rail-brand { justify-content: center; padding: 0; margin: 8px 0 12px; }
  .rail .rail-brand img.rail-brand-mark { display: block; height: 28px; width: 28px; object-fit: contain; }
  .rail .rail-brand img.rail-brand-word { display: none; }
  .rail .rail-nav button, .rail .rail-foot button { justify-content: center; padding: 0; gap: 0; }
  .rail .rail-nav button span.rail-ic, .rail .rail-foot button span.rail-ic { display: inline-grid; }
  .rail .rail-nav button span.rail-l, .rail .rail-foot button span.rail-l { display: none; }
  .rail .rail-nav .count.is-alert { left: 34px; top: 4px; }
}

/* ----------------------------------------------------------- the phone --- */

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail, .rail.is-phone {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: auto;
    z-index: 40; width: 100%;
    grid-template-rows: auto; gap: 0;
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
    border-right: 0; border-top: 1px solid var(--line);
    background: var(--white);
  }
  .rail-brand, .rail-foot, .rail-pill { display: none; }
  .rail-nav { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
  .rail-nav button {
    flex-direction: column; justify-content: center; gap: 0;
    min-height: 48px; padding: 6px 0;
  }
  .rail .rail-nav button span.rail-l { display: none; }
  .rail .rail-nav button span.rail-ic { display: inline-grid; }
  .rail-ic svg { width: 26px; height: 26px; }
  .rail-nav .count.is-alert { left: calc(50% + 6px); top: 4px; }
  .surface { padding: 12px 12px calc(84px + env(safe-area-inset-bottom)); }
  .composer-wrap { bottom: 62px; }
  .rail-nav button[aria-current="page"] .rail-ic-av .av { box-shadow: 0 0 0 2px var(--ink); }
}

/* The phone top bar: wordmark left, paper-plane right. */
/* 19.1 — and it steps out of the way of an open suggestion card, for the same
   reason `.srch-bar` does (see `styles/search.css`): at z-index 35 it drew
   over the top of a card the card could not out-rank. */
body:has(.ch-pop) .topbar-phone { z-index: auto; }
.topbar-phone {
  position: sticky; top: 0; z-index: 35;
  display: flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 8px 0 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 253, 250, 0.92); backdrop-filter: blur(12px);
}
.topbar-phone .topbar-title b { font-size: 16px; font-weight: 800; }
.topbar-phone .topbar-status { margin-left: auto; }
.topbar-brand { display: inline-flex; align-items: center; border: 0; background: none; padding: 4px 0; cursor: pointer; }
.topbar-brand img { display: block; height: 30px; }
.topbar-ib {
  position: relative; display: inline-grid; place-items: center;
  width: 44px; height: 44px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); cursor: pointer;
}
.topbar-ib:hover { background: var(--paper); }
.topbar-ib[aria-current="page"] svg { stroke-width: 2.6; }
.topbar-ib .count.is-alert { left: 24px; top: 4px; }

/* The desktop bar that only engine pages carry. */
@media (min-width: 901px) {
  .topbar:not(.topbar-phone) { padding: 10px clamp(18px, 3vw, 32px); }
}

/* ------------------------------------------------------ shared primitives ---
   The feed, the profile page, the search page and the composer draw with
   these. A lane may add to them in its own stylesheet; it may not redefine
   them. */

/* A dialog over the page: scrim + card, fading in. */
.ig-scrim {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 16px;
  background: rgba(20, 12, 28, 0.55);
  animation: ig-fade 180ms var(--ease) both;
}
.ig-dialog {
  position: relative; width: min(100%, var(--ig-dialog-w, 560px));
  max-height: min(92vh, 92dvh); overflow: auto;
  border-radius: 12px; background: var(--white); color: var(--ink);
  box-shadow: var(--raise-hi);
  animation: ig-rise 220ms var(--ease) both;
}
.ig-dialog-h {
  position: sticky; top: 0; z-index: 2;
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
  height: 48px; border-bottom: 1px solid var(--line); background: var(--white);
}
.ig-dialog-h b { text-align: center; font-size: 15px; font-weight: 700; }
.ig-x {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: 8px;
}
.ig-x:hover { background: var(--paper); }
@keyframes ig-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ig-rise { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ig-scrim, .ig-dialog { animation: none; } }
@media (max-width: 600px) {
  .ig-scrim { padding: 0; align-items: end; }
  .ig-dialog { width: 100%; max-height: 96dvh; border-radius: 14px 14px 0 0; }
}

/* Buttons: Instagram's two — the blue-ish primary is our violet, the grey
   secondary is our paper. */
.ig-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 0 16px;
  border: 0; border-radius: 8px;
  background: var(--paper-deep); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 700; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease), opacity var(--fast);
}
.ig-btn:hover { background: color-mix(in srgb, var(--paper-deep) 80%, var(--ink) 8%); }
.ig-btn:active { transform: translateY(1px); }
.ig-btn:disabled { opacity: .5; cursor: not-allowed; }
.ig-btn.is-primary { background: var(--violet); color: #fff; }
.ig-btn.is-primary:hover { background: var(--spine); }
.ig-btn.is-quiet { background: transparent; }
.ig-btn.is-quiet:hover { background: var(--paper); }
.ig-btn.is-danger { color: #c22; }
.ig-btn.is-block { width: 100%; }

/* A round icon button (like, comment, share, more). */
.ig-ib {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer;
  transition: transform 120ms var(--ease), background var(--fast) var(--ease), color var(--fast);
}
.ig-ib:hover { background: var(--paper); }
.ig-ib:active { transform: scale(.9); }
.ig-ib svg { width: 24px; height: 24px; }
.ig-ib.is-on { color: #ff3040; }
.ig-ib.is-on svg { fill: currentColor; }

/* A person row: avatar · name/handle · action. Feed suggestions, follower
   lists and search results are all this row. */
.ig-person { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; }
.ig-person .av { flex: none; }
.ig-person-t { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; line-height: 1.25; }
.ig-person-t b { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-person-t span { font-size: 13px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-person-t button { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ig-person-t button:hover { text-decoration: underline; }
.ig-person .ig-btn { flex: none; }

/* Section heading with a trailing action ("Suggested for you · See all"). */
.ig-h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.ig-h b { font-size: 14px; font-weight: 700; color: var(--ink-soft); margin-right: auto; }
.ig-h button, .ig-h a { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink); cursor: pointer; }

/* Quiet, centred empties. */
.ig-empty { margin: 32px 0; text-align: center; color: var(--ink-faint); font-size: 14px; line-height: 1.5; }
.ig-empty b { display: block; color: var(--ink); font-size: 18px; font-weight: 800; margin-bottom: 6px; }

/* A one-line inline media mention inside a body of text: [Creator - Title]. */
.ig-mention {
  display: inline; padding: 0 2px; border: 0; background: none;
  font: inherit; font-weight: 700; color: var(--spine); cursor: pointer;
  border-radius: 3px;
}
.ig-mention:hover { background: var(--violet-wash); text-decoration: underline; }
.ig-handle { font-weight: 700; color: var(--ink); text-decoration: none; border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
.ig-handle:hover { text-decoration: underline; }

/* ------------------------------------------------------ messages page ----
   Messages is its own page now; the Friends furniture around the inbox (the
   left submenu and the inner tab row) is hidden when the view is pinned. */
.fr[data-only="messages"] .fr-side, .fr[data-only="messages"] .fr-tabs { display: none; }
.fr[data-only="messages"] .fr-shell { grid-template-columns: minmax(0, 1fr); gap: 0; }

/* ------------------------------------------------------- library, phone ---
   The settings-shaped pages show their list first on a phone and the pane
   after a tap. The Library is not a settings page: on a phone it opens ON the
   gallery (Nick: "an easy UI flow"), with its two views as a chip row above
   the pane instead of a full-screen list. */
@media (max-width: 720px) {
  .stg.brain-stg .stg-pane { display: grid; }
  .stg.brain-stg .stg-nav { display: block; position: static; margin-bottom: 4px; }
  .stg.brain-stg .stg-nav-h, .stg.brain-stg .stg-group { display: none; }
  .stg.brain-stg .stg-navlist { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; }
  .stg.brain-stg .stg-navrow {
    flex: none; width: auto; min-height: 36px; padding: 0 14px;
    border-radius: 999px; border: 1px solid var(--line);
    background: var(--white); font-size: 13.5px;
  }
  .stg.brain-stg .stg-navrow.is-on { background: var(--ink); color: var(--white); border-color: var(--ink); }
  .stg.brain-stg .stg-navrow svg { display: none; }
}

/* ------------------------------------------------------------ search page ---
   The chat is the page here (Nick: "make the ai chatbox span more over the
   page"), so the Search surface is wider than the others and its inner
   column stretches with it. */
.surface-wide[data-view="search"] { width: min(1400px, 100%); }
@media (min-width: 901px) {
  [data-view="search"] .surface, .surface:has(> .surface-wide[data-view="search"]) { padding-bottom: 24px; }
}

/* THE SLIDE-OUT SEARCH PANEL IS GONE (18.1, 2026-09-10). Discover and Search
   merged into one screen with the bar fixed at its top, so there is no second
   place to type — `styles/search.css` owns the bar, the dropdown and the box. */
}

/* 13.10 — a mention is a kind icon plus a bold word, inline in the sentence
   (post-card SPEC 2026-09-08). No box, no pill, no thumbnail: the highlight
   sits on the words and wraps with the prose, the glyph rides in front. */
.ig-mention { font-weight: inherit; color: var(--spine); padding: 0; border-radius: 0;
              background: none; border: 0; font: inherit; cursor: pointer; }
/* 17.1: the opacity moved to `.is-glyph` — a cover is not a dimmed glyph. */
.ig-mention-k { display: inline-block; vertical-align: -2px; margin-right: 3px; }
.ig-mention-k svg { display: block; }
.ig-mention-word { font-weight: 700; color: var(--spine); }
.ig-mention:hover .ig-mention-word { text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   17.1 — A COMPOSER FIELD WHERE THE MENTION IS ONE COMPONENT (rich-input.js).

   The field is a contenteditable div wearing the class the textarea used to
   wear, so every layout rule above still applies to it. Only four things are
   its own: the placeholder (a div has none), wrapping, the atomic chip, and
   the cover that now sits where the kind glyph used to.
   -------------------------------------------------------------------------- */
.rin { white-space: pre-wrap; overflow-wrap: break-word; outline: none; cursor: text; }
.rin:focus, .rin:focus-visible { outline: none; box-shadow: none; }
.rin.is-one-line { white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.rin.is-one-line::-webkit-scrollbar { display: none; }
/* 26.1 — THE PLACEHOLDER TAKES NO ROOM. Nick: "when I type something and
   backspace … the placeholder text makes the type line appear AFTER it." An
   inline ::before is text the caret has to sit after; once typing leaves a
   <br> behind, the caret lands past the whole sentence. Out of flow, it is
   drawn at the same spot and the caret stays at the start. */
.rin.is-empty { position: relative; }
.rin.is-empty::before {
  content: attr(data-placeholder); color: var(--ink-faint);
  position: absolute; max-width: 100%; overflow: hidden;
  pointer-events: none; cursor: text;
}
.rin.is-disabled { color: var(--ink-faint); cursor: default; }
/* The component itself: not selectable by character, so a drag cannot take
   half of it, and one backspace takes all of it (rich-input.js owns that key). */
.rin-chip { user-select: none; -webkit-user-select: none; cursor: default; white-space: nowrap; }

/* THE COVER, WHERE THE KIND GLYPH USED TO BE (17.1). `mentionArt` swaps the
   glyph back in when the image 404s, so this rule only ever dresses a picture
   that loaded. */
.ig-mention-k img {
  display: block; width: 15px; height: 15px;
  border-radius: 3px; object-fit: cover; background: var(--paper);
}
.ig-mention-k.is-glyph { opacity: 0.75; }

/* 2026-09-14 — the phone bar carries no secondary "+" beside Library */
@media (max-width: 900px) { .rail-nav .rail-plus { display: none; } }