/* ===========================================================================
   Peltify — THE BRAIN.                                          (2026-08-27)

   One surface, one picture. The graph fills the page; clicking a node opens a
   column on the right with a bar across the top, and the two together make the
   right angle Nick asked for: "on the top you can search for anything saved
   there. Basically it forms a right angle with the searchbox + prompt closer
   button and the right sidebar metadata."

   THE OPEN/CLOSE IS A GRID TRACK CHANGE, not a rebuild. Everything the shell
   holds — the canvas, the search input, the panel — is a persistent DOM node;
   opening the sidebar only re-sizes two tracks and repaints the panel's
   contents. Nothing re-enters, so the surface's entrance animation never
   replays and a caret in the search box never jumps.

   These rules moved out of app.css, where brain.js has always drawn from. The
   List-view and Activity blocks stayed behind: that surface is archived, and
   its CSS is still where its code expects it.
   =========================================================================== */

/* ---------------------------------------------------------------- header --- */

.brain-hd { margin: 0 0 18px; }

.brain-hd-title {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
}

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

.brain-shell {
  display: grid;
  /* CLOSED: no top bar, no sidebar, the graph has the whole surface. */
  grid-template-columns: minmax(0, 1fr) 0px;
  grid-template-rows: 0px minmax(0, 1fr);
  height: clamp(420px, calc(100vh - 250px), 940px);
  column-gap: 0;
  row-gap: 0;
  transition: grid-template-columns .3s var(--ease),
              grid-template-rows .3s var(--ease),
              column-gap .3s var(--ease), row-gap .3s var(--ease);
}

.brain-shell.is-open {
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 12px;
}

/* THE TOP BAR spans the whole width — it is the horizontal arm of the right
   angle, and the sidebar below its right end is the vertical one. */
.brain-topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease);
}

.brain-shell.is-open .brain-topbar { opacity: 1; pointer-events: auto; }

.brain-qbox {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-box);
  background: var(--white);
  transition: border-color .14s, box-shadow .14s;
}

.brain-qbox:focus-within {
  border-color: var(--violet);
  box-shadow: 0 0 0 4px var(--violet-wash);
}

.brain-qbox svg { width: 16px; height: 16px; flex: none; color: var(--ink-faint); }

.brain-q {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
}

.brain-q::placeholder { color: var(--ink-faint); }
.brain-q::-webkit-search-cancel-button { display: none; }

.brain-x {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .14s, border-color .14s, background .14s, transform .14s;
}

.brain-x:hover {
  color: var(--violet);
  border-color: var(--violet);
  transform: rotate(90deg);
}

/* ----------------------------------------------------------------- stage --- */

.brain-stage {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: radial-gradient(circle at 50% 45%,
              color-mix(in srgb, var(--violet) 6%, var(--paper)) 0%,
              var(--paper) 72%);
  touch-action: none;   /* the canvas handles pan itself */
}

.brain-canvas { display: block; }

.brain-zoom {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brain-zoom button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-box);
  background: color-mix(in srgb, var(--white) 88%, transparent);
  color: var(--ink-soft);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: color .14s, border-color .14s, background .14s;
}

.brain-zoom button:hover {
  color: var(--violet);
  border-color: var(--violet);
  background: var(--white);
}

/* --------------------------------------------------------------- sidebar --- */

.brain-side {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  opacity: 0;
  transition: opacity .22s var(--ease);
}

.brain-shell:not(.is-open) .brain-side { border-width: 0; pointer-events: none; }
.brain-shell.is-open .brain-side { opacity: 1; }

.is-off { display: none !important; }

.brain-results,
.brain-meta { padding: 18px; }

/* minmax(0, 1fr) rather than the default auto track. A bare auto column takes
   its width from the widest child's MIN-CONTENT — and one unbreakable title
   (a track name with no spaces) then made every row in the panel 398px wide
   inside a 360px column. Measured, not guessed. Everything below inherits the
   same rule for the same reason. */
.bside {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-content: start;
}

.bside > * { min-width: 0; }

.bside-art {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 200px;
  border-radius: var(--r-art);
  overflow: hidden;
  background: var(--paper-deep, var(--paper));
  display: grid;
  place-items: center;
}

.bside-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bside-art.is-blank {
  aspect-ratio: auto;
  height: 92px;
  gap: 5px;
  color: var(--ink-faint);
  border: 1px dashed var(--line);
}

.bside-art.is-blank small { font-size: 10.5px; letter-spacing: 0.03em; }

.bside-title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.bside-name {
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.bside-name:hover { color: var(--violet); text-decoration: underline; }

/* A button does not shrink below its own min-content on its own, and a track
   name with no spaces in it has a very wide one. */
.bside-name { max-width: 100%; overflow-wrap: anywhere; }

.bside-by { margin: -4px 0 0; font-size: 14px; color: var(--ink-soft); }

/* THE LINE HE LIKES: "liked songs · via Spotify". Nothing else on it. */
.bside-line {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-faint);
  line-height: 1.5;
}

.bside-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }

.bside-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px;
}

.bside-row:last-child { border-bottom: 0; }
.bside-k { color: var(--ink-faint); flex: none; }
.bside-v { color: var(--ink); font-weight: 650; text-align: right;
           min-width: 0; overflow-wrap: anywhere; }

.bside-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }

.bside-h {
  margin: 4px 0 0;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.bside-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }

.bside-jump {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--paper);
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
  min-width: 0;
}

.bside-jump:hover { border-color: var(--violet); background: var(--violet-wash); }

.bside-jump-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bside-jump-meta,
.bside-jump-n { flex: none; font-size: 11.5px; color: var(--ink-faint); }
.bside-jump-n { font-weight: 800; }
.bside-jump-n.partial { color: var(--warn); }

.bside-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.bside-tag {
  padding: 3px 9px;
  border-radius: var(--r-box);
  background: var(--paper-deep, var(--paper));
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
}

.bside-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.bside-quiet {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.bside-prov {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ink-faint);
}

.bside-work { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.bside-open { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.bside-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }

.bside-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .12s, color .12s;
}

.bside-link:hover { border-color: var(--violet); color: var(--violet); }

.bside-count {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------ responsive --- */

/* Below this the sidebar cannot be a column beside the graph without squeezing
   both. It becomes the bottom half of the same shell instead — still attached
   to the brain, still the same nodes, still no rebuild. */
@media (max-width: 900px) {
  .brain-shell.is-open {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(240px, 1fr) minmax(200px, 46vh);
  }

  .brain-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 0px minmax(0, 1fr) 0px;
    height: clamp(460px, calc(100vh - 190px), 900px);
  }

  .brain-topbar { grid-column: 1; }
  .brain-stage { grid-column: 1; grid-row: 2; }
  .brain-side { grid-column: 1; grid-row: 3; }
}

/* ===========================================================================
   THE GRAPH · GALLERY SWITCH.                                   (2026-08-27)

   Two words under the header and nothing else. Not the `.seg` control the
   archived surface used — that one carried three destinations and a border
   that made it look like a form field; this is a choice between two pictures
   of the same thing, so it reads as a choice and not as a setting.
   =========================================================================== */

.brain-views {
  display: inline-flex;
  gap: 2px;
  margin: -8px 0 16px;
  padding: 3px;
  border-radius: var(--r-pill, 999px);
  background: var(--paper-deep);
}

.brain-tab {
  appearance: none;
  border: 0;
  border-radius: var(--r-box);
  padding: 7px 18px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}

.brain-tab:hover { color: var(--ink); }

.brain-tab.on {
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--lift);
}

/* ===========================================================================
   THE GALLERY — one section per platform.

   Nick: "bring back list, but have it like a gallery… platform specific. Just
   for easy searching / recognition."

   The whole layout is built around recognition: the app's own logo and accent
   at the top of its section, then artwork at tile size, then the name. Nothing
   is boxed inside anything else — the sections are separated by air and one
   hairline, in the "more expansive, less pill-boxy" direction of round three.
   =========================================================================== */

.bgal { display: block; }

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

.bgal-top {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 6px 0 14px;
  background: linear-gradient(var(--paper) 74%, transparent);
}

.bgal-qbox {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 280px;
  min-width: 0;
  max-width: 460px;
  padding: 0 16px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill, 999px);
  background: var(--white);
  color: var(--ink-faint);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}

.bgal-qbox:focus-within {
  border-color: var(--violet);
  box-shadow: 0 0 0 4px var(--violet-wash);
}

.bgal-q {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
}

.bgal-q::-webkit-search-cancel-button { display: none; }

.bgal-count {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.bgal-none {
  margin: 32px 0;
  font-size: 15px;
  color: var(--ink-soft);
}

/* ----------------------------------------------------------- the section --- */

/* EVERY PLATFORM IS A BAR, and stays one: since 2026-09-07 the body opens as
   a popup over the page (Nick: "when I hit open, it becomes very very
   vertical. I would like large items to be contained as a big popup"), so a
   page of platforms is a page of bars whatever is open. */
.bgal-src {
  padding: 10px 0 12px;
  border-top: 1px solid var(--line-soft);
}

.bgal-src:first-child { border-top: 0; }

/* THE HEADER IS THE CONTROL. Nick: "Every platform in the gallery should be a
   smooth dropdown menu." The negative side margin lets the press target and its
   hover wash run wider than the text without moving the logo off the column the
   lists below are aligned to. */
.bgal-hd {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 -12px;
  padding: 10px 12px;
  border-radius: var(--r-box);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color .16s var(--ease);
}

/* The app's own colour, at the weight of a wash — the same hairline idea as the
   logo box, so hovering Spotify does not turn the row green. */
.bgal-hd:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }

.bgal-hd:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

.bgal-chev {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--ink-faint);
  transition: transform .32s var(--ease), color .16s var(--ease),
              background-color .16s var(--ease);
}

.bgal-chev svg { display: block; }
.bgal-hd:hover .bgal-chev { color: var(--ink); background: var(--white); }
/* The platform whose body is in the popup right now. */
.bgal-src.is-open .bgal-hd { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.bgal-src.is-open .bgal-chev { color: var(--ink); background: var(--white); }

/* How many rows matched the query, while one is up. */
.bgal-hit {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--r-pill, 999px);
  background: var(--violet-wash);
  color: var(--violet);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.bgal-hit small { font-size: 11px; font-weight: 700; }

/* --------------------------------------------------- the body, two homes --- */

/* THE BODY IS BUILT ONCE AND KEPT INSIDE ITS SECTION, hidden; pressing the
   header moves the same node into `.bgal-dlg` (below) and closing moves it
   back. Hidden is `display: none`, not a collapsed track: nothing inline ever
   grows, and a shut body is out of the tab order — without this, Tab walks
   into a thousand rows nobody can see. */
.bgal-src > .bgal-drawer { display: none; }

/* ------------------------------------------------------------- the popup --- */

/* SPECIFICITY IS DELIBERATE, as for `.blib-dlg` further down: ig.css is
   linked after brain.css, so these say `.bgal-scrim .bgal-dlg` to beat
   `.ig-dialog` whatever the order. Nothing here redefines the primitive; it
   only says how big THIS dialog is and that its body scrolls inside it. */
.ig-scrim.bgal-scrim { --ig-dialog-w: min(96vw, 1180px); }
.bgal-scrim .bgal-dlg {
  width: min(96vw, var(--ig-dialog-w, 1180px));
  height: 92vh; height: 92dvh;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;              /* the body scrolls, never the card */
  border-radius: 14px;
}
.bgal-dlg-t {
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  min-width: 0; padding: 0 6px;
}
.bgal-dlg-t b {
  font-size: 15px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bgal-dlg-n { font-size: 12.5px; font-weight: 700; color: var(--ink-faint); white-space: nowrap; }
.bgal-dlg-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 4px clamp(14px, 3vw, 28px) 28px;
}
.bgal-dlg .bgal-drawer { display: block; }
.bgal-dlg .bgal-drawer-in { min-height: 0; }
.bgal-dlg .bgal-drawer-in > :first-child { margin-top: 14px; }

/* THE PHONE GETS THE WHOLE SCREEN, as the graph popup does. */
@media (max-width: 700px) {
  .ig-scrim.bgal-scrim { padding: 0; align-items: stretch; }
  .bgal-scrim .bgal-dlg {
    width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh;
    border-radius: 0;
  }
  .bgal-dlg-body { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}

.bgal-logo {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--r-box);
  background: var(--white);
  border: 1px solid var(--line-soft);
  /* The app's own colour, and only as a hairline: a full-bleed brand block
     would make the page belong to Spotify rather than to the person. */
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

.bgal-logo img { display: block; border-radius: var(--r-box); }

.bgal-who { flex: 1; min-width: 0; }

.bgal-name {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.bgal-line {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.bgal-n {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.bgal-n small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* A FLOOR IS NOT A TOTAL. The `+` is what says so, and it is drawn in the
   warning ink everywhere in this build so it cannot be read as decoration. */
.bgal-n.partial, .bgal-list-n.partial, .bgal-chip-n.partial { color: var(--warn); }
.bgal-n.faint { font-size: 12px; font-weight: 700; color: var(--ink-faint); }

/* ------------------------------------------------------------ the genres --- */

.bgal-genres { margin: 0 0 18px; }

.bgal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.bgal-chip {
  appearance: none;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-box);
  background: var(--white);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .14s var(--ease), background .14s var(--ease),
              color .14s var(--ease);
}

.bgal-chip:hover { border-color: var(--violet); }

.bgal-chip.on {
  background: var(--violet);
  border-color: var(--violet);
  color: var(--white);
}

.bgal-chip.on .bgal-chip-n { color: var(--hero-ink-faint, rgba(255,255,255,.7)); }

/* AN INFERENCE IS DRAWN AS ONE. Dashed, exactly as the dashboard draws a
   merged genre block — same claim, same styling, one visual language for
   "Peltify worked this out" across the whole product. */
.bgal-chip.is-merged { border-style: dashed; }

.bgal-chip-n {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.bgal-chip-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.bgal-chip.on .bgal-chip-tag { color: var(--hero-ink-faint, rgba(255,255,255,.7)); }

.bgal-clear {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--violet);
  cursor: pointer;
}

.bgal-genres-none {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--ink-faint);
  max-width: 62ch;
}

/* ------------------------------------------------------------- the lists --- */

.bgal-lists { display: grid; gap: 26px; }

.bgal-list-h {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.bgal-list-n2 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.bgal-list-n {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.bgal-tag {
  padding: 2px 8px;
  border-radius: var(--r-box);
  background: var(--paper-deep);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.bgal-note, .bgal-empty {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-faint);
  max-width: 68ch;
}

.bgal-prose {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--white);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  white-space: pre-wrap;
}

/* ------------------------------------------------------------- the tiles --- */

.bgal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 18px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bgal-cell { min-width: 0; }

.bgal-tile {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}

.bgal-tile.is-flat { cursor: default; }

.bgal-art {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  width: 100%;
  margin: 0 0 9px;
  overflow: hidden;
  border-radius: var(--r-art);
  background: var(--paper-deep);
  box-shadow: var(--lift);
  transition: box-shadow .2s var(--ease), transform .2s var(--bounce, var(--ease));
}

.bgal-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bgal-tile:hover .bgal-art { box-shadow: var(--raise); transform: translateY(-2px); }

/* NOT A STAND-IN COVER. The medium's own glyph on the paper tone, with the
   fact stated in the tooltip, so nobody reads a decorated square as artwork. */
.bgal-art.is-blank { background: var(--white); border: 1px solid var(--line-soft); }
.bgal-art-none { color: var(--ink-faint); display: grid; place-items: center; }

/* An artist is a person — a square reads as a record sleeve, so a face gets a
   circle instead. (A community used to be here too; it has no artwork at all
   and is drawn as a row now, so the shape has nothing to correct.) */
.bgal-tile[data-kind="artist"] .bgal-art { border-radius: var(--r-art); }

/* ------------------------------------------------------ rows and thumbs --- */

/* NOT EVERYTHING IS A PICTURE (2026-08-27).

   A community, a post, a comment, a saved link, an author, a channel and a
   playlist have no artwork anywhere, so a 140px square with a glyph in the
   middle of it is 140px of nothing said — and 1,028 of them was an 8,600px
   page of blank squares. Those are names, and they are drawn as names: several
   to a line, one line tall.

   `.is-thumbs` is the middle case — kinds a catalogue DOES answer for, before
   any answer has arrived. A 56px thumb per row rather than a wall of empty
   squares; the covers land in the thumbs, and the next paint promotes the list
   to the grid above. */
.bgal-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 4px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bgal-rows.is-thumbs {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 10px 16px;
}

.bgal-tile.is-row {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 5px 8px 5px 5px;
  border-radius: var(--r-md);
  transition: background .14s var(--ease);
}

.bgal-tile.is-row:hover { background: var(--paper-deep); }
.bgal-tile.is-flat.is-row:hover { background: none; }

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

.bgal-art.is-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  margin: 0;
}

.bgal-art.is-mini {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  margin: 0;
  border-radius: var(--r-art);
  box-shadow: none;
}

/* A row is not a card and must not rise like one. */
.bgal-tile:hover .bgal-art.is-mini,
.bgal-tile:hover .bgal-art.is-thumb { transform: none; box-shadow: var(--lift); }
.bgal-tile:hover .bgal-art.is-mini { box-shadow: none; }

/* ONE LINE, ALWAYS. A row that wraps to three lines is a tile again. */
.bgal-rows .bgal-t {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
}

.bgal-rows .bgal-c, .bgal-rows .bgal-m {
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
}

.bgal-t {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.bgal-c, .bgal-m {
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}

.bgal-m { font-size: 11.5px; }

.bgal-gone-tag {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warn);
}

.bgal-more {
  appearance: none;
  margin: 16px 0 0;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-box);
  background: var(--white);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .14s var(--ease), color .14s var(--ease);
}

.bgal-more:hover { border-color: var(--violet); color: var(--violet); }

/* ----------------------------------------------------------- what left ----- */

.bgal-gone { margin: 24px 0 0; }

.bgal-gone-s {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  list-style: none;
}

.bgal-gone-s::-webkit-details-marker { display: none; }
.bgal-gone-s:hover { color: var(--ink); }
.bgal-gone[open] .bgal-gone-s { margin-bottom: 12px; }
.bgal-grid.is-gone .bgal-art, .bgal-rows.is-gone .bgal-art { opacity: 0.55; }
.bgal-grid.is-gone .bgal-t, .bgal-rows.is-gone .bgal-t { color: var(--ink-soft); }

/* ------------------------------------------------------------ responsive --- */

@media (max-width: 640px) {
  .bgal-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 16px 12px; }
  .bgal-rows, .bgal-rows.is-thumbs { grid-template-columns: 1fr; }
  .bgal-hd { flex-wrap: wrap; }
  /* Wrapped, the bar reads name-then-chevron on the first line and the count on
     the second, rather than pushing the chevron below the fold of its own row. */
  .bgal-chev { order: 2; margin-left: auto; }
  .bgal-n { order: 3; width: 100%; }
}

/* ===========================================================================
   ADD ITEMS — 2026-08-28. The `+ Add` beside the gallery search, its popup
   (search → results → where does this belong), and the "added by you" marks.
   =========================================================================== */
.bgal-add {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 40px; padding: 0 14px;
  border: 1px solid var(--ink); border-radius: var(--r-box);
  background: var(--ink); color: var(--white);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.bgal-add:hover { background: var(--violet); border-color: var(--violet); }
.bgal-logo.is-plain { color: var(--ink-soft); background: var(--paper); }
.bgal-manual-tag, .bside-manual {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint);
}
.bside-manual { margin: 4px 0 0; }
.bgal-n small { margin-left: 6px; font-size: 10.5px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; }

.badd { width: min(760px, 100%); max-height: min(88vh, 820px); display: flex; flex-direction: column; border-radius: var(--r-box); }
.badd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.badd-head h3 { margin: 0 0 4px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.badd-head p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); max-width: 56ch; }
.badd-x { border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; color: var(--ink-soft); }
.badd-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 20px 18px; overflow: auto; }
.badd-bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--white); }
.badd-bar.is-off { display: none; }
.badd-input { flex: 1 1 auto; border: 0; background: none; font: inherit; font-size: 15px; color: var(--ink); outline: none; }
.badd-note:empty { display: none; }
.badd-said { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--ink); }
.badd-said.is-ok { color: #1f7a3a; }
.badd-said.is-bad { color: #b3261e; }
.badd-empty, .badd-warn, .badd-group, .badd-foot { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.badd-group { font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; }
.badd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.badd-res { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); }
.badd-res-art { display: block; aspect-ratio: 1; border-radius: var(--r-art); overflow: hidden; background: var(--paper); display: grid; place-items: center; color: var(--ink-faint); }
.badd-res-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.badd-res-name { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-top: 6px; line-height: 1.25; }
.badd-res-by { font-size: 12px; color: var(--ink-soft); }
.badd-res-kind { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }
.badd-plus { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: var(--r-box); background: var(--ink); color: var(--white); cursor: pointer; }
.badd-plus:hover { background: var(--violet); border-color: var(--violet); }
.badd-where { display: flex; flex-direction: column; gap: 10px; }
.badd-back { align-self: flex-start; border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.badd-picked { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line-strong); border-radius: var(--r-box); background: var(--paper); }
.badd-picked-art { width: 52px; height: 52px; flex: none; border-radius: var(--r-art); overflow: hidden; display: grid; place-items: center; background: var(--white); color: var(--ink-faint); }
.badd-picked-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.badd-picked-text { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; color: var(--ink-soft); }
.badd-picked-text b { font-size: 14px; color: var(--ink); }
.badd-targets { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.badd-target { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
.badd-target:hover { border-color: var(--ink); }
.badd-target.is-connected { border-color: var(--line-strong); }
.badd-target.is-custom { border-style: dashed; }
.badd-target-logo { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: var(--r-art); background: var(--paper); }
.badd-target-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badd-target-tag { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #1f7a3a; }

/* ---- the Suggestions menu ([SUGG-9], 2026-08-31): every suggestion shown,
   with its outcome — read from the server's verdict store ---- */
.bver { display: flex; flex-direction: column; gap: 12px; }
.bver-lede { margin: 0; font-size: 13px; color: var(--ink-soft); max-width: 64ch; }
.bver-count { margin: 0 0 4px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.bver-empty { margin: 0; font-size: 13px; color: var(--ink-faint); display: flex; align-items: center; gap: 6px; }
.bver-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.bver-row { display: flex; align-items: baseline; gap: 8px; padding: 9px 4px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.bver-name { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.bver-name:hover { color: var(--spine); }
.bver-by { color: var(--ink-soft); font-size: 12.5px; }
.bver-kind { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.bver-said { margin-left: auto; flex: none; padding: 2px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 800;
             background: var(--paper-deep); color: var(--ink-soft); }
.bver-said[data-v="keep"], .bver-said[data-v="pelt"] { background: var(--violet-wash-strong); color: var(--spine); }
.bver-said[data-v="no"] { background: var(--paper-deep); color: var(--ink); }
.bver-said[data-v="ignored"] { background: var(--paper); color: var(--ink-faint); border: 1px dashed var(--line-strong); }
.bver-at { flex: none; font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .bver-row { flex-wrap: wrap; } .bver-said { margin-left: 0; } }

/* ---- [LIB-2]/[LIB-4] the empty state offers the add path -------------------- */
.brain-empty { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.brain-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.brain-empty .bgal-add { display: inline-flex; align-items: center; gap: 8px; }

/* ===========================================================================
   THE GRAPH AS A POPUP                                          (phase6,
                                                                 2026-09-04)

   Nick: "I want the graph to be a nice smooth fade in animated popup that you
   can close, right now the graph is a contained box that is not good on
   different aspect ratios. I also would like the graph to be small /
   rectangle horizontally contained and a bit of a blurry preview of your
   graph so it indicates its a popup. In the graph you should also have a big
   ' + Add ' button."

   ONE SHELL, TWO HOMES. `.blib-prev-stage` holds it small and blurred at the
   top of the Library; `.blib-dlg` holds it full size inside `.ig-scrim`. The
   scrim, the card, the fade and the rise are ig.css's — this file only says
   how big the graph's card is and what the preview looks like.
   =========================================================================== */

/* ---- the preview card ------------------------------------------------------ */

.blib-prev {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 5;
  max-height: 220px;
  min-height: 128px;
  margin: 0 0 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: radial-gradient(circle at 50% 45%,
              color-mix(in srgb, var(--violet) 8%, var(--paper)) 0%,
              var(--paper) 74%);
  box-shadow: var(--raise);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease),
              border-color 180ms var(--ease);
}
.blib-prev:hover { transform: translateY(-2px); box-shadow: var(--raise-hi); border-color: var(--violet); }

/* The live shell, shrunk. Pointer events are off: a drag on a graph nobody
   can read yet would be a gesture with no result, and the whole card is one
   button underneath. */
.blib-prev-stage { position: absolute; inset: 0; pointer-events: none; }
.blib-prev-stage .brain-shell {
  height: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 0px minmax(0, 1fr);
  filter: blur(3px);
  opacity: .85;
  transition: none;
}
.blib-prev-stage .brain-topbar,
.blib-prev-stage .brain-side,
.blib-prev-stage .brain-zoom { display: none; }
.blib-prev-stage .brain-stage { border: 0; border-radius: 0; background: none; }

/* the soft veil that says "this is a preview, not the thing" */
.blib-prev-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--paper) 30%, transparent) 0%,
              color-mix(in srgb, var(--paper) 62%, transparent) 100%);
}

.blib-prev-btn {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border: 0; background: none; padding: 0;
  font: inherit; color: var(--ink); cursor: pointer;
}
.blib-prev-l {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--white) 92%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: var(--raise);
  font-size: 14px; font-weight: 700;
}
.blib-prev:hover .blib-prev-l { border-color: var(--violet); color: var(--violet); }
@media (prefers-reduced-motion: reduce) {
  .blib-prev, .blib-prev:hover { transition: none; transform: none; }
}

/* ---- the popup ------------------------------------------------------------- */

/* SPECIFICITY IS DELIBERATE HERE. ig.css is linked AFTER brain.css, so a bare
   `.blib-dlg` would lose every property `.ig-dialog` also sets — width,
   max-height, overflow, and the whole ≤600px sheet treatment. Two classes
   beats one whatever the order, so these say `.blib-scrim .blib-dlg`. Nothing
   below REDEFINES a primitive; it only says how big this particular dialog is. */
/* 14.7 (library entry 7) — "the graph view used to be a blurred contained
   box": the page behind the graph is BLURRED, not merely dimmed, so the popup
   reads as a contained box over the tab rather than as a new page. */
.ig-scrim.blib-scrim { --ig-dialog-w: 96vw; backdrop-filter: blur(10px) saturate(1.05);
                       -webkit-backdrop-filter: blur(10px) saturate(1.05);
                       background: rgba(20, 12, 28, 0.42); }
.blib-scrim .blib-dlg {
  position: relative;
  width: min(96vw, var(--ig-dialog-w, 96vw));
  height: 90vh; height: 90dvh;
  max-height: 90dvh;
  overflow: hidden;              /* the graph pans inside itself, never the card */
  padding: 12px;
  display: flex;
  border-radius: 14px;
}
.blib-dlg .brain-shell {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
}
/* Inside the popup the shell is simply the whole card, top bar and sidebar
   included — the search and the metadata panel behave exactly as they always
   did, because they are exactly the same nodes. */
.blib-dlg .brain-shell.is-full { height: 100%; }

.blib-dlg .blib-x {
  position: absolute; top: 14px; right: 14px; z-index: 6;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--white) 92%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: var(--raise);
}

/* THE + ADD, floating bottom-right — the same adder the gallery has. */
.blib-dlg .blib-add {
  position: absolute; right: 22px; bottom: 22px; z-index: 6;
  min-height: 56px; padding: 0 28px;
  border-radius: var(--r-pill);
  box-shadow: var(--raise-hi), 0 0 0 6px rgba(139, 31, 209, 0.18);
  font-size: 17px; font-weight: 800;
}
.blib-dlg .blib-add svg { width: 22px; height: 22px; stroke-width: 2.4; }
/* The gallery's own + Add, made the same weight (Nick: "same with the library"). */
.bgal-add, .blib-tb .btn-primary, .brain-add {
  min-height: 46px; padding: 0 22px; font-size: 15px; font-weight: 800;
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 4px rgba(139, 31, 209, 0.14);
}

html.brain-full, html.brain-full body { overflow: hidden; overscroll-behavior: none; }
.brain-stage canvas { touch-action: none; }

/* THE PHONE GETS THE WHOLE SCREEN. `.ig-scrim` drops its padding below 600px
   and anchors the card to the bottom; a graph wants every pixel instead, and
   pinch zoom is graph.js's own two-pointer gesture on a canvas whose
   `touch-action` is already none. */
@media (max-width: 700px) {
  .ig-scrim.blib-scrim { padding: 0; align-items: stretch; }
  .blib-scrim .blib-dlg {
    width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh;
    border-radius: 0; padding: 6px;
  }
  .blib-dlg .blib-x { top: 10px; right: 10px; }
  .blib-dlg .blib-add { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .blib-prev { aspect-ratio: 16 / 7; max-height: 180px; }
}

/* ---------------------------------------------------------------------------
   2026-09-06 — the Library's submenu is Dashboard · Gallery · Scan
   (src/ui/library-nav.js), the Dashboard board lives in a Library pane, and
   an empty library points at Scan with one card instead of a quiet link.
   --------------------------------------------------------------------------- */
.stg-sub { display: grid; gap: 2px; margin: 2px 0 6px 14px; padding-left: 10px; border-left: 2px solid var(--line-soft); }
.stg-sub .stg-navrow { min-height: 34px; font-size: 13px; }
.brain-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brain-hd-scan { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.brain-board { min-width: 0; }
.brain-scan-cta {
  display: flex; align-items: center; gap: 14px; width: 100%; max-width: 560px; margin-top: 14px;
  padding: 14px 16px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.brain-scan-cta:hover { border-color: var(--violet); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.brain-scan-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--violet-wash); color: var(--spine); }
.brain-scan-t { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.brain-scan-t b { font-size: 14.5px; }
.brain-scan-t span { font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
.brain-scan-cta > svg:last-child { color: var(--ink-faint); flex: none; }

/* 2026-09-06, entry 3: "the dashboard in library has overflow for the
   media". The board came from the profile tab into a pane whose grid column
   let it size to its content, so the tile rows ran off the right edge. The
   pane and the board are now honest flex/grid children (min-width: 0), and
   a row wider than the pane scrolls inside itself, never the page. */
.brain-stg { grid-template-columns: auto minmax(0, 1fr); }
.brain-pane { min-width: 0; max-width: none; grid-template-columns: minmax(0, 1fr); }
.brain-board, .brain-board .db, .brain-board .db-board { min-width: 0; max-width: 100%; }
.brain-board .tb-strip { min-width: 0; }
.brain-board .db-things-sections > * { min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; }