/* The reading surfaces, tuned to look like a news site rather than a toy: hairline rules instead of floating
   bubbles, corners that are barely rounded, one colour per name, and type doing the work.
   Loaded after every other stylesheet, so it is the last word on the feed, the rails and the chrome. */

:root {
  --edge: #e4e9f2;
  --edge-soft: #eef1f6;
  --ink-2: #4a5a75;
  --ink-3: #6b7a93;
  --r-card: 10px;
  --r-small: 6px;
  --r-chip: 4px;
}

/* one colour per name, used by the marks and chips in the feed */
[data-tone="blue"] { --tone: var(--blue); --wash: #eef4ff; }
[data-tone="indigo"] { --tone: #4a5bd4; --wash: #f0f2ff; }
[data-tone="mint"] { --tone: #12836c; --wash: #e9f8f3; }
[data-tone="sand"] { --tone: #9a6612; --wash: #fdf5e6; }
[data-tone="peach"] { --tone: #c9512f; --wash: #fff1ec; }
[data-tone="teal"] { --tone: #0f7385; --wash: #e8f7fa; }
[data-tone="violet"] { --tone: #6f45c9; --wash: #f4efff; }
[data-tone="pink"] { --tone: #c53c6e; --wash: #fdeff5; }
[data-tone="green"] { --tone: #2a7c46; --wash: #ecf8f0; }
[data-tone="amber"] { --tone: #a95d15; --wash: #fdf3e8; }

/* ----------------------------------------------------------- the feed surface */
/* One sheet of paper with rules between the items, the way a news list reads. */
.social-feed {
  display: block;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  background: #fff;
}

.feed-item {
  display: flex;
  gap: 18px;
  padding: 18px 20px;
  border-top: 1px solid var(--edge-soft);
  transition: background-color 0.15s;
}

.social-feed > .feed-item:first-child { border-top: 0; }

.feed-item:hover { background: #fbfcfe; }

.feed-item-main { min-width: 0; flex: 1; }

.feed-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  color: var(--ink-3);
  font-size: 12.5px;
}

.feed-line .author,
.feed-source {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.feed-line .author-link { color: inherit; }
.feed-line .author-link:hover { color: var(--tone, var(--blue)); }

.feed-line time { color: var(--ink-3); }

.feed-dot { color: #c2ccdb; }

/* the small square that carries a name's colour */
.mark {
  display: grid;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: var(--r-small);
  background: var(--tone, var(--blue));
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  place-items: center;
}

.chip {
  padding: 2px 7px;
  border-radius: var(--r-chip);
  background: var(--wash, var(--tint));
  color: var(--tone, var(--blue-dark));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

a.chip:hover { background: var(--tone, var(--blue)); color: #fff; }

.chip-new { background: #ffeceb; color: #c0392b; letter-spacing: 0.06em; }

.chip-full { background: #eaf3ff; color: var(--blue-dark); }

.feed-headline {
  margin-top: 7px;
  font-size: 18.5px;
  font-weight: 750;
  line-height: 1.34;
  letter-spacing: -0.015em;
  text-wrap: pretty;
  word-break: keep-all;
}

.feed-headline a:hover { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 3px; }

.feed-standfirst {
  margin-top: 6px;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.62;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.feed-numbers {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 10px;
  margin-left: -8px;
}

.feed-numbers form { display: contents; }

.feed-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: var(--r-small);
  color: var(--ink-3);
  font-size: 12.5px;
}

.feed-act .icon { width: 15px; height: 15px; }

a.feed-act:hover, button.feed-act:hover { background: #eef3fb; color: var(--blue-dark); }

button.feed-act.is-on { color: var(--coral); }
button.feed-act.is-on .icon { fill: currentColor; }

.feed-act.is-quiet { cursor: default; }
.feed-act.has-comments { color: var(--blue-dark); }

.feed-thumb {
  display: block;
  overflow: hidden;
  width: 148px;
  height: 104px;
  flex-shrink: 0;
  border-radius: var(--r-small);
  background: var(--edge-soft);
}

.feed-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* an ad sits in the same rhythm, edge to edge, and says what it is */
.feed-promo { position: relative; padding: 0; }
.feed-promo a { display: block; width: 100%; }
.feed-promo img { width: 100%; max-height: 260px; object-fit: cover; }

.feed-promo .ad-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  border-radius: var(--r-chip);
  background: #12203ad9;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------ writing box */
.composer-box,
.composer {
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
}

.composer-box > summary { padding: 12px 14px; gap: 10px; }

.composer-box .avatar,
.composer .avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--r-small);
  background: var(--blue);
  font-size: 14px;
}

.composer-box .composer-open,
.composer .composer-open {
  padding: 9px 13px;
  border-radius: var(--r-small);
  background: #f5f8fd;
  font-size: 14.5px;
}

.composer-box .composer-go,
.composer .composer-go {
  padding: 9px 14px;
  border-radius: var(--r-small);
  font-size: 13.5px;
}

.composer-form textarea { border-radius: var(--r-small); font-size: 15px; }
.composer-board select,
.composer-photo { border-radius: var(--r-small); }

/* --------------------------------------------------------------- the tabs */
.feed-switch {
  gap: 0;
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  background: #fff;
}

.feed-switch a {
  padding: 11px 14px;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--ink-3);
  font-size: 14px;
}

.feed-switch a:first-child { border-top-left-radius: var(--r-card); }
.feed-switch a:last-child { border-top-right-radius: var(--r-card); }

.feed-switch a:hover { background: #f7f9fd; color: var(--ink); }

.feed-switch a[aria-current] {
  border-bottom-color: var(--blue);
  background: #fff;
  color: var(--ink);
  font-weight: 750;
}

/* ------------------------------------------------------------- the rails */
.category-rail,
.trending-panel,
.rail-ad a,
.sidebar > .panel,
.panel { border-radius: var(--r-card); }

.rail-write { border-radius: var(--r-small); font-size: 14.5px; }

.rail-link { border-radius: var(--r-small); }

.rail-link.is-active {
  position: relative;
  background: #f2f6fd;
  font-weight: 700;
}

.rail-link.is-active::before {
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--blue);
  content: "";
}

/* trending: a numbered list with the picture beside it */
.trending-panel .panel-heading { padding-bottom: 6px; }

.trending-row {
  align-items: flex-start;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--edge-soft);
}

.trending-rank {
  width: 16px;
  padding-top: 1px;
  color: #9fb0c8;
  font-size: 13px;
  font-weight: 800;
}

.trending-text strong { font-size: 13.5px; font-weight: 650; line-height: 1.4; }

.trending-text span { font-size: 11.5px; }

.trending-shot {
  width: 54px;
  height: 40px;
  flex-shrink: 0;
  overflow: hidden;
  order: 3;
  border-radius: var(--r-chip);
  background: var(--edge-soft);
}

.trending-shot img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------- chrome */
.button, .button-primary, .button-outline, .button-small { border-radius: var(--r-small); }

.stream-chips a,
.board-nav a,
.dining-search,
.board-search input,
.board-search { border-radius: var(--r-small); }

.pagination a { border-radius: var(--r-small); }

.social-card { border-radius: var(--r-card); }

@media (max-width: 719px) {
  .feed-item { gap: 12px; padding: 14px 14px; }
  .feed-thumb { width: 96px; height: 72px; }
  .feed-headline { font-size: 16.5px; }
  .feed-standfirst { font-size: 14px; -webkit-line-clamp: 3; }
}

/* ============================================================ the shell
   Wide screens: the left rail is the navigation, so the date strip, the big header and the ticker step
   aside. Three columns with room to breathe - 280 / 640 / 340 - centred in the page. */

@media (min-width: 1200px) {
  .top-chrome { display: none; }

  /* Fill the window: the rails keep their width and the stream takes everything left over. */
  .page-layout,
  .home-screen .page-layout {
    grid-template-columns: 300px minmax(0, 1fr) 380px;
    gap: 28px;
    padding-top: 22px;
  }

  /* shell.css and home.css cap this at 1360px with their own body-level rules; we out-rank them. */
  body .page-width,
  body.home-screen .page-width {
    width: calc(100% - 64px);
    max-width: 1450px;
  }

  /* the rails start below the bar and keep their own scroll */
  .rail-column,
  .sidebar {
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 116px);
    overflow-y: auto;
    scrollbar-width: none;
  }

  .rail-column::-webkit-scrollbar,
  .sidebar::-webkit-scrollbar { display: none; }

  .rail-column { gap: 12px; }
}

/* The rail only exists on wide screens; below that the old horizontal strip rules stay in charge. */
@media (min-width: 1200px) {
  .rail-brand {
    display: block;
    padding: 6px 10px 10px;
  }

  .rail-brand .brand-image { width: 148px; height: auto; }


  /* the menu itself: room to press, one active marker */
  .rail-column .category-rail { padding: 10px 10px 12px; border: 1px solid var(--edge); }

  .rail-label {
    display: block;
    padding: 6px 12px 10px;
    color: #93a2b8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
  }

  .rail-link {
    gap: 13px;
    padding: 11px 13px;
    min-height: 46px;
    font-size: 15px;
    font-weight: 600;
  }

  .rail-link .icon { width: 20px; height: 20px; }

  .rail-write {
    margin-top: 2px;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 750;
  }

  .rail-login {
    display: block;
    padding: 11px 14px;
    border: 1px solid var(--edge);
    border-radius: var(--r-small);
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 650;
    text-align: center;
    background: #fff;
  }

  .rail-login:hover { border-color: #c6d8f8; color: var(--blue-dark); }

  .rail-account { border: 1px solid var(--edge); border-radius: var(--r-small); background: #fff; }

  .rail-account > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    list-style: none;
    cursor: pointer;
  }

  .rail-account > summary::-webkit-details-marker { display: none; }

  .rail-account .mark { width: 30px; height: 30px; font-size: 13px; background: var(--blue); }

  .rail-account-name { flex: 1; font-size: 14.5px; font-weight: 700; }

  .rail-account > summary .icon { width: 15px; height: 15px; color: var(--ink-3); }

  .rail-account-menu { display: grid; padding: 4px; border-top: 1px solid var(--edge-soft); }

  .rail-account-menu a,
  .rail-account-menu button {
    padding: 9px 11px;
    border-radius: var(--r-chip);
    color: var(--ink-2);
    font-size: 14px;
    text-align: left;
  }

  .rail-account-menu a:hover,
  .rail-account-menu button:hover { background: #f2f6fd; color: var(--blue-dark); }

  .rail-foot { padding: 4px 6px 0; }

  .rail-foot .language-switch { justify-content: flex-start; font-size: 12.5px; }
}

@media (max-width: 1199px) {
  .rail-brand, .rail-account, .rail-login, .rail-foot { display: none !important; }
}

/* --------------------------------------------------------- the middle column */
/* A sheet with a sticky title row on top, the way a news front page sits still while you read. */
.feed-switch {
  position: sticky;
  z-index: 4;
  top: 0;
  margin-bottom: 14px;
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: 0 1px 0 #ffffff;
}

.composer-box, .composer { margin-bottom: 2px; }

.home-stream, .board-stream { gap: 16px; }

/* ------------------------------------------------------------ the right rail */
.rail-search { margin-bottom: 14px; }

.rail-search form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  background: #fff;
}

.rail-search input {
  width: 100%;
  border: 0;
  background: none;
  font-size: 14.5px;
}

.rail-search input:focus { outline: none; }

.rail-search .icon { width: 17px; height: 17px; color: var(--ink-3); }

.sidebar { gap: 14px; }

.sidebar > .panel { padding: 16px 18px; border: 1px solid var(--edge); box-shadow: none; }

.panel-heading h2 { font-size: 15.5px; font-weight: 800; letter-spacing: -0.01em; }

/* ------------------------------------------------- modules inside the stream */
/* Weather and dining keep their own identity but share the column's rhythm. */
.feed-module {
  padding: 16px 20px;
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  background: #fff;
}

.module-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.module-line .icon { width: 17px; height: 17px; }

.module-line > a {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 600;
}

.module-line > a:hover { color: var(--blue-dark); }
.module-line > a .icon { width: 13px; height: 13px; }

.module-weather {
  border-color: #cfe2f7;
  background: linear-gradient(120deg, #f4f9ff, #ffffff 60%);
}

.module-weather .module-line .icon { color: #e8a13c; }

.module-weather-now {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
}

.module-weather-now > strong {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.module-weather-side { color: var(--ink-2); font-size: 13px; line-height: 1.5; }

.module-days {
  display: flex;
  margin-left: auto;
  gap: 16px;
}

.module-days li {
  display: grid;
  gap: 3px;
  justify-items: center;
  color: var(--ink-3);
  font-size: 11.5px;
}

.module-days .icon { width: 19px; height: 19px; color: #7d9dd6; }
.module-days b { color: var(--ink); font-size: 13.5px; }

.module-dining {
  border-color: #f2ddcf;
  background: linear-gradient(120deg, #fff8f3, #ffffff 60%);
}

.module-dining .module-line .icon { color: #c9512f; }

.module-places {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.module-places a {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid #f0e2d8;
  border-radius: var(--r-small);
  background: #fff;
}

.module-places a:hover { border-color: #e0bda8; }

.module-places strong { font-size: 14px; font-weight: 700; line-height: 1.35; }

.module-places span {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-3);
  font-size: 12px;
}

.module-places .icon { width: 12px; height: 12px; color: #f2a93b; }

@media (max-width: 719px) {
  .feed-module { padding: 14px; }
  .module-weather-now { flex-wrap: wrap; gap: 12px; }
  .module-days { margin-left: 0; width: 100%; justify-content: space-between; }
  .module-places { grid-template-columns: minmax(0, 1fr); }
}

.join-card { display: grid; gap: 10px; }
.join-card h2 { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.join-card p { color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
.join-card .button { justify-content: center; padding: 11px 16px; font-size: 14.5px; }
.join-card-note { color: var(--ink-3); font-size: 12.5px; }
.join-card-note a { color: var(--blue-dark); font-weight: 700; }

@media (max-width: 620px) {
  /* one swipeable row of sections instead of a block that fills the screen before the feed starts */
  .category-rail {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding: 8px;
    scrollbar-width: none;
  }

  .category-rail::-webkit-scrollbar { display: none; }

  .category-rail .rail-link {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 13px;
    font-size: 13.5px;
  }
}

/* ==================================================================== the app
   A Korean community paper for Las Vegas: a bar across the top, sections down the
   left, the stream in the middle, and what is happening beside it. */

@media (min-width: 1200px) {
  body { background: #f4f6fb; }

  .app-top {
    position: sticky;
    z-index: 30;
    top: 0;
    border-bottom: 1px solid var(--edge);
    background: #fff;
  }

  .app-top-inner {
    display: flex;
    align-items: center;
    gap: 26px;
    width: calc(100% - 64px);
    max-width: 1450px;
    margin: 0 auto;
    padding: 12px 0;
  }

  .app-brand {
    display: grid;
    width: 254px;
    flex-shrink: 0;
    gap: 2px;
  }

  .app-brand .brand-image { width: 150px; height: auto; }

  .app-brand-line {
    color: var(--ink-3);
    font-size: 11.5px;
  }

  .app-search {
    display: flex;
    max-width: 560px;
    flex: 1;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border: 1px solid var(--edge);
    border-radius: 999px;
    background: #f5f7fb;
    transition: border-color 0.15s, background-color 0.15s;
  }

  .app-search:focus-within { border-color: #b9cdf5; background: #fff; }

  .app-search .icon { width: 17px; height: 17px; color: var(--ink-3); }

  .app-search input {
    width: 100%;
    border: 0;
    background: none;
    font-size: 14.5px;
  }

  .app-search input:focus { outline: none; }

  .app-top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
  }

  .app-write {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 72%, #fff), var(--blue));
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--blue) 18%, transparent);
  }

  .app-write:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 72%, #fff), var(--blue-dark)); }
  .app-write .icon { width: 16px; height: 16px; }

  .app-icon-button {
    position: relative;
    display: grid;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--ink-2);
    place-items: center;
  }

  .app-icon-button:hover { background: #f1f5fc; color: var(--blue-dark); }

  .app-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 17px;
    padding: 1px 4px;
    border-radius: 999px;
    background: var(--coral);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
  }

  .app-account { position: relative; }

  .app-account > summary {
    display: flex;
    align-items: center;
    gap: 5px;
    list-style: none;
    cursor: pointer;
  }

  .app-account > summary::-webkit-details-marker { display: none; }
  .app-account .mark { width: 34px; height: 34px; border-radius: 50%; font-size: 14px; }
  .app-account > summary .icon { width: 14px; height: 14px; color: var(--ink-3); }

  .app-account-menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 10px);
    right: 0;
    display: grid;
    min-width: 200px;
    padding: 6px;
    border: 1px solid var(--edge);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 40px #16274a1f;
  }

  .app-account-menu a,
  .app-account-menu button {
    padding: 9px 11px;
    border-radius: 7px;
    color: var(--ink-2);
    font-size: 14px;
    text-align: left;
  }

  .app-account-menu a:hover,
  .app-account-menu button:hover { background: #f2f6fd; color: var(--blue-dark); }

  .app-login { color: var(--ink-2); font-size: 14px; font-weight: 650; }
  .app-login:hover { color: var(--blue-dark); }

  .app-top-actions .language-switch { font-size: 12.5px; }

  .page-layout,
  .home-screen .page-layout { padding-top: 24px; }
}

@media (max-width: 1199px) { .app-top { display: none; } }

/* ------------------------------------------------------------- rail groups */
.rail-group {
  display: block;
  margin-top: 14px;
  padding: 8px 12px 6px;
  border-top: 1px solid var(--edge-soft);
  color: #93a2b8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

@media (max-width: 1199px) { .rail-group { display: none; } }

.rail-invite,
.rail-me {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid #dbe6fb;
  border-radius: var(--r-card);
  background: linear-gradient(135deg, #f2f6ff, #ffffff);
}

.rail-invite:hover, .rail-me:hover { border-color: #b9cdf5; }

.rail-invite-icon {
  display: grid;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 72%, #fff), var(--blue));
  color: #fff;
  place-items: center;
}

.rail-invite-icon .icon { width: 18px; height: 18px; }

.rail-invite-copy,
.rail-me-copy { display: grid; flex: 1; gap: 2px; min-width: 0; }

.rail-invite-copy strong,
.rail-me-copy strong { font-size: 13.5px; font-weight: 750; }

.rail-invite-copy span,
.rail-me-copy span { color: var(--ink-3); font-size: 12px; }

.rail-invite > .icon,
.rail-me > .icon { width: 15px; height: 15px; color: var(--ink-3); }

.rail-me .mark { width: 36px; height: 36px; border-radius: 10px; font-size: 15px; }

@media (max-width: 1199px) { .rail-invite, .rail-me { display: none; } }

/* ------------------------------------------------------------- the banner */
.hero-banner {
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  border-radius: 16px;
  background: #0f1d38;
  isolation: isolate;
}

.hero-banner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.hero-banner::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #0d1b33f0 12%, #0d1b3399 52%, #0d1b3326 100%);
  content: "";
}

.hero-banner-copy {
  position: relative;
  z-index: 1;
  display: grid;
  max-width: 460px;
  gap: 8px;
  padding: 30px 32px 32px;
  color: #fff;
}

.hero-banner-eyebrow {
  color: #a8c4f8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.hero-banner h2 {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.03em;
}

.hero-banner p { color: #d7e3f8; font-size: 14.5px; line-height: 1.6; }

.hero-banner .button {
  justify-self: start;
  margin-top: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 14px;
}

/* ------------------------------------------------------- the topic tiles */
.topic-rail {
  margin-bottom: 16px;
  padding: 16px 18px 18px;
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  background: #fff;
}

.topic-rail-head {
  margin-bottom: 12px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.topic-tiles {
  display: flex;
  overflow-x: auto;
  gap: 14px;
  scrollbar-width: none;
}

.topic-tiles::-webkit-scrollbar { display: none; }

.topic-tiles a {
  display: grid;
  width: 78px;
  gap: 8px;
  justify-items: center;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 650;
  text-align: center;
}

.topic-shot {
  display: block;
  overflow: hidden;
  width: 74px;
  height: 74px;
  border-radius: 18px;
  background: var(--edge-soft);
  box-shadow: 0 6px 16px #16274a14;
  transition: transform 0.18s;
}

.topic-shot img { width: 100%; height: 100%; object-fit: cover; }

.topic-tiles a:hover .topic-shot { transform: translateY(-2px); }
.topic-tiles a:hover { color: var(--blue-dark); }

/* --------------------------------------------------------- right rail cards */
.rail-card .panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
}

.rail-card .panel-heading h2 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
}

.rail-card .panel-heading h2 .icon { width: 16px; height: 16px; color: var(--blue); }

.rail-card .panel-heading a { color: var(--ink-3); font-size: 12px; font-weight: 650; }
.rail-card .panel-heading a:hover { color: var(--blue-dark); }

.rail-rows { display: grid; }

.rail-rows > li { border-top: 1px solid var(--edge-soft); }
.rail-rows > li:first-child { border-top: 0; }

.rail-rows a { display: flex; align-items: center; gap: 11px; padding: 11px 0; }

.rail-shot {
  display: block;
  overflow: hidden;
  width: 52px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--edge-soft);
}

.rail-shot img { width: 100%; height: 100%; object-fit: cover; }

.rail-row-text { min-width: 0; flex: 1; }

.rail-row-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.4;
  word-break: keep-all;
}

.rail-rows a:hover .rail-row-text strong { color: var(--blue-dark); }

.rail-row-text span {
  display: block;
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 11.5px;
}

.rail-boards > li { display: flex; align-items: center; gap: 11px; padding: 11px 0; }

.rail-boards .mark { width: 34px; height: 34px; border-radius: 10px; }
.rail-boards .mark .icon { width: 17px; height: 17px; color: #fff; }

.rail-join {
  padding: 7px 13px;
  border-radius: 999px;
  background: #eef3fd;
  color: var(--blue-dark);
  font-size: 12.5px;
  font-weight: 700;
}

.rail-join:hover { background: var(--blue); color: #fff; }

@media (max-width: 719px) {
  .hero-banner-copy { padding: 22px 20px 24px; }
  .hero-banner h2 { font-size: 24px; }
  .topic-rail { padding: 14px; }
  .topic-shot { width: 64px; height: 64px; border-radius: 16px; }
  .topic-tiles a { width: 68px; font-size: 12px; }
}

@media (min-width: 1200px) { .rail-search-narrow { display: none; } }

/* Today's weather and the exchange rate ride in the bar, so nobody scrolls for them. */
@media (min-width: 1200px) {
  .app-live {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
  }

  .app-stat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1px solid var(--edge);
    border-radius: 999px;
    background: #fff;
    color: var(--ink-3);
    font-size: 12.5px;
    white-space: nowrap;
  }

  a.app-stat:hover { border-color: #b9cdf5; color: var(--blue-dark); }

  .app-stat .icon { width: 18px; height: 18px; color: #e8a13c; }

  .app-stat b { color: var(--ink); font-size: 14px; font-weight: 800; }

  .app-stat span { color: var(--ink-3); }
}

@media (max-width: 1499px) {
  .app-stat span { display: none; }
}

@media (max-width: 1319px) {
  .app-live { display: none; }
}

@media (max-width: 1199px) {
  .app-live { display: none; }
}

/* Wide screens: the window is full, the reading column stays readable. */
@media (min-width: 1200px) {
  .page-layout,
  .home-screen .page-layout {
    grid-template-columns: 260px minmax(0, 1fr) 336px;
  }

  .main-column { width: 100%; }
}

/* a story without a picture keeps the shape, with the outlet's letter on its colour */
.feed-thumb.is-blank {
  display: grid;
  background: var(--wash, #eef2f8);
  place-items: center;
}

.feed-thumb.is-blank span {
  color: var(--tone, #8aa0c0);
  font-size: 28px;
  font-weight: 800;
  opacity: 0.55;
}

.composer .avatar .icon,
.composer-box .avatar .icon { width: 18px; height: 18px; color: #fff; }

/* ------------------------------------------------- one story row everywhere */
.home-story-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  color: var(--ink-3);
  font-size: 12.5px;
}

.home-story-source { color: var(--ink); font-size: 13px; font-weight: 700; }

.home-story-summary {
  margin-top: 6px;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.68;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-story-shot {
  display: block;
  overflow: hidden;
  width: 150px;
  height: 106px;
  flex-shrink: 0;
  border-radius: var(--r-small);
  background: var(--edge-soft);
}

.home-story-shot img { width: 100%; height: 100%; object-fit: cover; }

/* roomier rows: the owner found the old ones hard to read */
.feed-item { padding: 20px 24px; gap: 20px; }
.feed-headline { margin-top: 8px; font-size: 19px; line-height: 1.36; }
.feed-standfirst { font-size: 15px; line-height: 1.68; }

/* the mascot panel in the rail said nothing the top bar does not already say */
.sidebar .welcome-panel { display: none; }

@media (max-width: 719px) {
  .feed-item { padding: 15px 15px; gap: 12px; }
  .home-story-shot { width: 98px; height: 74px; }
}

/* home.css paints .home-welcome-copy > a blue, which made the blue button unreadable */
.home-welcome-copy > a.button,
.home-refresh .home-welcome-copy > a.button { color: #fff; }

/* the strip's dots belong away from its button */
.ad-rail-dots { gap: 7px; }

/* ================================================== the home dashboard
   Not a wall of feed: cards that say what is here and let people choose where to go.
   News reads like news (outlet mark, headline, picture). A neighbour's post reads like a person
   (round avatar, name first, their words, reactions) so the two are never mistaken for each other. */

.home-board {
  display: grid;
  gap: 20px;
}

.board-card {
  padding: 22px 24px 8px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: #fff;
}

.board-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--edge-soft);
}

.board-card-head h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.board-card-head h2 .icon { width: 19px; height: 19px; color: var(--blue); }

.board-card-head > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.board-card-head > a:hover { color: var(--blue-dark); }
.board-card-head > a .icon { width: 13px; height: 13px; }

.board-card-empty { padding: 20px 0 24px; color: var(--ink-3); font-size: 14px; }

/* ------------------------------------------------------------- news rows */
.story-rows > .feed-item {
  padding: 20px 0;
  border-top: 1px solid var(--edge-soft);
}

.story-rows > .feed-item:first-child { border-top: 0; }
.story-rows > .feed-item:hover { background: transparent; }
.story-rows > .feed-item:hover .feed-headline a { color: var(--blue-dark); }

/* ---------------------------------------------------------- people's posts */
.card-neighbors { background: linear-gradient(180deg, #fbfcff, #fff 120px); }

.card-neighbors .composer-box,
.card-neighbors .composer { margin: 16px 0 4px; }

.post-rows { display: grid; }

.post-row {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--edge-soft);
}

.post-row:first-child { border-top: 0; }

.post-avatar {
  display: grid;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--tone, var(--blue));
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  place-items: center;
}

.post-row-main { min-width: 0; flex: 1; }

.post-row-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--ink-3);
  font-size: 12.5px;
}

.post-row-line b { color: var(--ink); font-size: 14px; }

.post-row-body { display: grid; gap: 5px; margin-top: 7px; }

.post-row-body strong {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  word-break: keep-all;
}

.post-row:hover .post-row-body strong { color: var(--blue-dark); }

.post-row-body > span {
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.65;
  word-break: keep-all;
}

.post-row-numbers {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  color: var(--ink-3);
  font-size: 12.5px;
}

.post-row-numbers span { display: inline-flex; align-items: center; gap: 5px; }
.post-row-numbers .icon { width: 15px; height: 15px; }

/* ------------------------------------------------- weather and dining side by side */
.board-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.board-pair .feed-module { margin: 0; height: 100%; border-radius: 14px; }

/* ------------------------------------------------------------- board tiles */
.board-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 0 20px;
}

.board-tiles a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid var(--edge-soft);
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.16s, transform 0.16s;
}

.board-tiles a:hover { border-color: var(--tone, var(--blue)); transform: translateY(-1px); }

.board-tile-mark {
  display: grid;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--wash, #eef4ff);
  place-items: center;
}

.board-tile-mark .icon { width: 17px; height: 17px; color: var(--tone, var(--blue)); }

.board-tile-text { display: grid; gap: 2px; min-width: 0; }
.board-tile-text strong { font-size: 14px; font-weight: 700; }
.board-tile-text span { color: var(--ink-3); font-size: 12px; }

/* the ad keeps the same rhythm as the cards */
.home-board > .feed-promo {
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: 14px;
}

@media (max-width: 899px) {
  .board-pair,
  .board-tiles { grid-template-columns: minmax(0, 1fr); }
  .board-card { padding: 18px 16px 6px; }
}

/* ============================================ what members write, and how they write it */

/* the formatting bar over a writing box */
.rich-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.rich-tool {
  min-width: 34px;
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--edge);
  border-radius: 7px;
  background: #fff;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1;
}

.rich-tool:hover { border-color: #b9cdf5; background: #f4f8ff; color: var(--blue-dark); }
.rich-tool:active { background: #e9f1ff; }

/* a post or a comment, rendered */
.rich-body {
  color: #1f314f;
  font-size: 16.5px;
  line-height: 1.78;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.rich-body > * + * { margin-top: 1.05em; }

.rich-body h3 { font-size: 1.25em; font-weight: 800; letter-spacing: -0.015em; }
.rich-body h4 { font-size: 1.12em; font-weight: 750; }
.rich-body h5 { font-size: 1em; font-weight: 700; color: var(--ink-2); }

.rich-body h3, .rich-body h4, .rich-body h5 { margin-top: 1.5em; line-height: 1.4; }

.rich-body ul, .rich-body ol { padding-left: 1.35em; }
.rich-body ul { list-style: disc; }
.rich-body ol { list-style: decimal; }
.rich-body li { margin: 0.35em 0; }
.rich-body li::marker { color: #7f9ad0; }

.rich-body blockquote {
  padding: 2px 0 2px 18px;
  border-left: 3px solid #9fbdf2;
  color: #33456a;
}

.rich-body code {
  padding: 2px 6px;
  border-radius: 5px;
  background: #eef2f8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
}

.rich-body pre {
  overflow-x: auto;
  padding: 14px 16px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: #f7f9fc;
}

.rich-body pre code { padding: 0; background: none; font-size: 13.5px; line-height: 1.7; }

.rich-body hr { margin: 1.6em 0; border: 0; border-top: 1px solid var(--edge); }

.rich-body a { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 3px; }

.rich-image {
  max-width: 100%;
  height: auto;
  margin: 4px 0;
  border: 1px solid var(--edge-soft);
  border-radius: 12px;
}

.rich-body s { color: var(--ink-3); }

/* the head of a post, set apart from what the person wrote */
.post-view .post-header {
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--edge);
}

.post-view .post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  color: var(--ink-3);
  font-size: 13px;
}

.post-view .post-meta .avatar {
  display: grid;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  place-items: center;
}

.post-view .post-meta .author { color: var(--ink); font-size: 14.5px; font-weight: 750; }
.post-view .post-meta .author-link:hover { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 3px; }

.post-view .post-meta .author-badge {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

/* ---------------------------------------- membership, advertising, admin pages */
/* Same frame, same rail, same top alignment as the rest of the site; the working area is wider
   than a reading column because these pages hold forms and tables. */
@media (min-width: 1200px) {
  .workspace-layout {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
    justify-content: start;
    padding-top: 22px;
  }
}

.member-workspace { min-width: 0; }

.workspace-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.workspace-nav a {
  padding: 9px 15px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: #fff;
  color: var(--ink-3);
  font-size: 13.5px;
  font-weight: 650;
}

.workspace-nav a:hover { border-color: #b9cdf5; color: var(--blue-dark); }

.workspace-nav a[aria-current] { border-color: var(--blue); background: var(--blue); color: #fff; }

.chip-translated { background: #eef7ee; color: #2a7c46; }

/* ================================ less air at the top of a page, one alignment
   The strip, the tabs and the first line of a page were pushing content half a screen down, and the
   membership page centred its heading while everything around it sits left. */

.ad-rail { margin: 0; }

.ad-rail-inner { padding: 10px 0; }

@media (min-width: 1200px) {
  .page-layout,
  .home-screen .page-layout { padding-top: 16px; }

  .ad-rail-slide { height: 104px; }
}

/* the tab row over a workspace page reads like the feed tabs, not like buttons */
.workspace-nav {
  gap: 2px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--edge);
}

.workspace-nav a {
  padding: 11px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--ink-3);
  font-size: 14px;
}

.workspace-nav a:hover { background: #f7f9fd; color: var(--ink); }

.workspace-nav a[aria-current] {
  border-bottom-color: var(--blue);
  background: none;
  color: var(--ink);
  font-weight: 750;
}

/* membership: left-aligned like the rest of the site, and closer to the top */
.membership-heading {
  margin: 4px 0 24px;
  text-align: left;
}

.membership-heading h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }

.membership-heading p { margin-top: 8px; color: var(--ink-2); font-size: 15px; }

.membership-options { margin-inline: 0; max-width: none; }

.membership-option { border-color: var(--edge); border-radius: 14px; padding: 28px; }

.membership-option-action > p,
.ad-storage-note { text-align: left; }

.membership-release { justify-content: flex-start; text-align: left; }

/* the ad manager heading sits with the same rhythm */
.ad-manager-heading { margin-bottom: 20px; }
.ad-manager-heading h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }

/* ------------------------------------------------- choosing where an ad runs */
/* Equal cards in a tidy grid: name and tick on one line, two lines of explanation, the size at the foot. */
.ad-placement-options {
  grid-auto-rows: 1fr;
  gap: 12px;
}

.ad-placement-option > span {
  gap: 0;
  padding: 15px 16px 14px;
  border-color: var(--edge);
  border-radius: 12px;
}

.ad-placement-option input { top: 16px; right: 15px; }

.ad-placement-option strong {
  display: block;
  padding-right: 26px;
  font-size: 14.5px;
  font-weight: 750;
  line-height: 1.35;
}

.ad-placement-option small {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 6px;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ad-placement-option .ad-size,
.ad-placement-option small:last-child {
  margin-top: auto;
  padding-top: 12px;
  color: var(--ink-3);
  font-size: 12px;
  -webkit-line-clamp: 1;
}

.ad-placement-option input:checked + span {
  border-color: var(--blue);
  background: #f5f9ff;
  box-shadow: none;
}

.ad-placement-option:hover > span { border-color: #b9cdf5; }

/* the preview panel, quieter */
.ad-preview-panel .ad-forum-preview { border-color: var(--edge); background: #fbfcfe; }
.ad-preview-example, .ad-template-download { font-size: 13px; }

/* The right rail scrolls with the page. As its own scroll box it clipped the first card. */
@media (min-width: 1200px) {
  .sidebar {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

.sidebar .sidebar-footnote:empty { display: none; }

/* ------------------------------------------------------- the head of a page */
/* Replaces the old banner: same column, same width, same type as everything under it. */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--edge);
}

.page-head-copy { min-width: 0; }

.page-head-eyebrow {
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page-head-title {
  margin-top: 5px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.page-head-text {
  margin-top: 7px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.6;
}

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

.page-head-actions .button { padding: 9px 15px; font-size: 13.5px; }

/* the old banner is gone from every page */
.hero, .hero-slim { display: none; }

@media (max-width: 719px) {
  .page-head { gap: 10px; }
  .page-head-title { font-size: 24px; }
}

/* ------------------------------------------- the rail as advertising space */
.rail-ads .ad-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.sidebar-ad-stack { display: grid; gap: 14px; }

.sidebar-ad {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: #fff;
}

.sidebar-ad img { width: 100%; display: block; }

.rail-slot {
  display: grid;
  gap: 6px;
  padding: 20px 18px 18px;
  border: 1px dashed #cfdcf2;
  border-radius: 12px;
  background: linear-gradient(170deg, #fbfdff, #f3f7ff);
  text-align: left;
  transition: border-color 0.16s, background-color 0.16s;
}

.rail-slot:hover { border-color: var(--blue); background: #f2f7ff; }

.rail-slot-eyebrow {
  color: #93a2b8;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.rail-slot-mark { color: var(--blue); }
.rail-slot-mark .icon { width: 22px; height: 22px; }

.rail-slot strong { font-size: 15px; font-weight: 750; line-height: 1.35; }

.rail-slot-text { color: var(--ink-3); font-size: 12.5px; line-height: 1.55; }

.rail-slot-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  color: var(--blue-dark);
  font-size: 12.5px;
  font-weight: 700;
}

.rail-slot-action .icon { width: 13px; height: 13px; }

/* ============================================ a look of its own for each section
   A marketplace should read like a marketplace and a board of questions like a board of questions.
   The shell stays identical everywhere; what changes is the shape of the thing being listed and the
   colour that section carries. */

/* things for sale, places to rent, jobs going: a grid of listings with a picture each */
.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 16px;
}

.item-card {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.16s, box-shadow 0.16s, transform 0.16s;
}

.item-card:hover {
  border-color: #c6d8f8;
  box-shadow: 0 10px 24px #16274a12;
  transform: translateY(-2px);
}

.item-shot {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--edge-soft);
}

.item-shot img { width: 100%; height: 100%; object-fit: cover; }

.item-shot-blank {
  display: grid;
  width: 100%;
  height: 100%;
  background: var(--wash, #eef3fb);
  place-items: center;
}

.item-shot-blank .icon { width: 30px; height: 30px; color: var(--tone, #9fb3d1); opacity: 0.55; }

.item-body { display: grid; gap: 6px; padding: 13px 14px 14px; }

.item-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  word-break: keep-all;
}

.item-card:hover .item-title { color: var(--blue-dark); }

.item-line {
  overflow: hidden;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.item-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 12px;
}

.item-foot .mark { width: 18px; height: 18px; border-radius: 5px; font-size: 10px; }

.item-grid > .feed-promo { grid-column: 1 / -1; border: 1px solid var(--edge); border-radius: 12px; }

/* ------------------------------------------------- each section, its own colour
   The page head carries a thin accent so you always know where you are. */
.page-head { position: relative; }

.page-head::before {
  position: absolute;
  top: 2px;
  left: -14px;
  width: 3px;
  height: 34px;
  border-radius: 3px;
  background: var(--section, var(--blue));
  content: "";
}

body[data-section="news"] { --section: var(--blue); }
body[data-section="forums"] { --section: #4a5bd4; }
body[data-section="information"] { --section: #12836c; }
body[data-section="restaurants"] { --section: #c9512f; }
body[data-section="housing"] { --section: #0f7385; }
body[data-section="jobs"] { --section: #6f45c9; }
body[data-section="marketplace"] { --section: #a95d15; }
body[data-section="events"] { --section: #c53c6e; }
body[data-section="dating"] { --section: #d2447a; }
body[data-section="notices"] { --section: #2a7c46; }

.page-head-eyebrow { color: var(--section, var(--ink-3)); }

.stream-chips a[aria-current],
.board-nav a[aria-current] {
  border-color: var(--section, var(--blue));
  background: var(--section, var(--blue));
  color: #fff;
}

.rail-link.is-active::before { background: var(--section, var(--blue)); }

@media (max-width: 719px) {
  .item-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .page-head::before { display: none; }
}

.item-numbers {
  display: flex;
  gap: 12px;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 12px;
}

.item-numbers span { display: inline-flex; align-items: center; gap: 4px; }
.item-numbers .icon { width: 14px; height: 14px; }
.item-numbers .has-comments { color: var(--blue-dark); }
.item-foot .author-link { color: var(--ink-3); }
.item-foot .author-link:hover { color: var(--blue-dark); }

/* --------------------------------------------- the bar, tidied, and its menu */
@media (min-width: 1200px) {
  .app-top-inner { gap: 18px; }

  .app-live { gap: 8px; }

  .app-stat,
  .app-search,
  .app-write,
  .app-login { height: 40px; }

  .app-search { padding-block: 0; }
  .app-stat { padding-block: 0; }

  .app-write { padding-block: 0; align-items: center; }

  .app-top-actions { gap: 10px; }

  .app-icon-button { width: 40px; height: 40px; }

  .app-top-actions .language-switch {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 4px;
    border-left: 1px solid var(--edge);
    margin-left: 2px;
    padding-left: 12px;
  }
}

.app-account-menu { padding: 8px; min-width: 232px; }

.app-account-who {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px 10px;
  border-bottom: 1px solid var(--edge-soft);
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 750;
}

.app-account-who .mark { width: 28px; height: 28px; border-radius: 50%; font-size: 12px; }

.app-account-group {
  padding: 10px 9px 4px;
  color: #93a2b8;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.app-account-menu a,
.app-account-menu button {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 38px;
}

.app-account-menu .icon { justify-self: center; }

.app-account-menu .icon { width: 16px; height: 16px; color: var(--ink-3); }
.app-account-menu a:hover .icon,
.app-account-menu button:hover .icon { color: var(--blue-dark); }
.app-account-menu .count-badge { margin-left: auto; }

.rich-tool-image { padding: 0 12px; font-weight: 650; }

.rich-status {
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 12.5px;
}

.rich-status.is-bad { color: var(--coral); }

textarea.is-dropping {
  border-color: var(--blue);
  background: #f2f7ff;
}

/* The rail's advertising follows the reader down the page; the cards above it scroll away normally. */
@media (min-width: 1200px) {
  /* the rail runs the full height of the row, so the sticky advertising has room to travel */
  .sidebar { align-self: stretch; }

  .sidebar .rail-ads,
  .sidebar .advertisement {
    position: sticky;
    top: 96px;
  }

  /* when the stack is taller than the screen, its foot rests at the bottom instead of being cut off */
  .sidebar .rail-ads { max-height: calc(100vh - 116px); }
  .sidebar .rail-ads .sidebar-ad-stack { max-height: calc(100vh - 160px); overflow: hidden; }
}

/* ------------------------------------------------------------------ dating */
.dating-panel {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 40px 28px 32px;
  border: 1px solid #f3dce6;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff7fa, #fff 200px);
  text-align: center;
}

.dating-symbol {
  display: grid;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: #fdeaf1;
  place-items: center;
}

.dating-symbol .icon { width: 26px; height: 26px; color: #c53c6e; }

.dating-panel h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }

.dating-description { max-width: 52ch; color: var(--ink-2); font-size: 15px; line-height: 1.7; }

.dating-launch {
  padding: 5px 12px;
  border-radius: 999px;
  background: #fdeaf1;
  color: #a72f5b;
  font-size: 12.5px;
  font-weight: 700;
}

.dating-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  max-width: 560px;
  margin-top: 16px;
  padding-top: 22px;
  border-top: 1px solid #f3dce6;
}

.dating-features > div { display: grid; gap: 8px; justify-items: center; color: var(--ink-2); font-size: 13.5px; }
.dating-features .icon { width: 22px; height: 22px; color: #c53c6e; }

.dating-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  color: var(--ink-3);
  font-size: 13px;
}

.dating-note .icon { width: 15px; height: 15px; }

@media (max-width: 719px) {
  .dating-panel { padding: 28px 18px 24px; }
  .dating-features { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

.chip-original { background: #f1f4f9; color: var(--ink-3); }

/* ---------------------------------------- the bar: four controls, everything else in the menu */
@media (min-width: 1200px) {
  /* the account control shows who you are, so the menu is obvious */
  .app-account > summary {
    gap: 8px;
    height: 40px;
    padding: 0 10px 0 6px;
    border: 1px solid var(--edge);
    border-radius: 999px;
    background: #fff;
  }

  .app-account > summary:hover { border-color: #b9cdf5; }

  .app-account-name {
    max-width: 120px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-account > summary .app-badge {
    position: static;
    min-width: 18px;
    padding: 1px 5px;
  }

  /* one letter toggle for a reader who is not signed in */
  .app-lang-toggle {
    display: grid;
    width: 40px;
    height: 40px;
    border: 1px solid var(--edge);
    border-radius: 10px;
    background: #fff;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 750;
    place-items: center;
  }

  .app-lang-toggle:hover { border-color: #b9cdf5; color: var(--blue-dark); }
}

/* the profile row at the head of the menu */
.app-account-menu a.app-account-who {
  grid-template-columns: 34px 1fr;
  gap: 10px;
  padding: 8px 10px 12px;
  border-bottom: 1px solid var(--edge-soft);
  margin-bottom: 6px;
  border-radius: 8px;
}

.app-account-who .mark { width: 34px; height: 34px; border-radius: 50%; font-size: 14px; }
.app-account-who span span { display: grid; }
.app-account-who strong { font-size: 14.5px; font-weight: 750; }
.app-account-who span span span { color: var(--ink-3); font-size: 12px; font-weight: 400; }

.app-account-menu a[aria-current] { color: var(--blue-dark); font-weight: 700; }
.app-account-menu a[aria-current] .icon:last-child { color: var(--blue); }

/* the three ways to read a board */
.sort-chips {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: #fff;
}

.sort-chips a {
  padding: 7px 14px;
  border-radius: 7px;
  color: var(--ink-3);
  font-size: 13.5px;
  font-weight: 650;
}

.sort-chips a:hover { background: #f4f7fd; color: var(--ink); }

.sort-chips a[aria-current] {
  background: var(--section, var(--blue));
  color: #fff;
}

/* the actions under a card stay on one line; a form must not break the row */
.feed-numbers,
.social-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.feed-numbers > form,
.social-actions > form { display: contents; }

/* edit and delete, for the person who wrote it */
.card-menu { position: relative; margin-left: auto; }

.card-menu > summary {
  display: grid;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: var(--ink-3);
  cursor: pointer;
  list-style: none;
  place-items: center;
}

.card-menu > summary::-webkit-details-marker { display: none; }
.card-menu > summary:hover { background: #eef3fb; color: var(--ink); }
.card-menu > summary .icon { width: 15px; height: 15px; transform: rotate(90deg); }

.card-menu-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  min-width: 150px;
  padding: 6px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 30px #16274a1f;
}

.card-menu-list a,
.card-menu-list button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--ink-2);
  font-size: 13.5px;
  text-align: left;
}

.card-menu-list a:hover { background: #f2f6fd; color: var(--blue-dark); }
.card-menu-list button:hover { background: #fdeeee; color: var(--coral); }
.card-menu-list .icon { width: 15px; height: 15px; }

.composer-title {
  width: 100%;
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px solid var(--edge);
  border-radius: var(--r-small);
  background: #fbfcfe;
  font-size: 15px;
  font-weight: 650;
}

.composer-title:focus { background: #fff; }

/* ================================ the control room
   One door at /admin with a strip across the top, then a page per job. Plain rows and real labels:
   the owner is reading it, not admiring it. */

.workspace-admin { display: inline-flex; align-items: center; gap: 7px; }
.workspace-admin svg { width: 15px; height: 15px; }
.workspace-admin .count-badge { margin-left: 2px; }

.admin-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: -6px 0 20px;
  padding: 6px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: #f8fafd;
}

.admin-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 7px;
  color: var(--ink-3);
  font-size: 13.5px;
  font-weight: 650;
  white-space: nowrap;
}

.admin-nav a svg { width: 15px; height: 15px; opacity: 0.75; }
.admin-nav a:hover { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(24, 43, 80, 0.08); }
.admin-nav a.is-active { background: #fff; color: var(--ink); font-weight: 750; box-shadow: 0 1px 3px rgba(24, 43, 80, 0.12); }
.admin-nav a.is-active svg { opacity: 1; color: var(--blue); }
.admin-nav-home svg { color: var(--blue); opacity: 1; }
.admin-nav-rule { width: 1px; height: 20px; margin: 0 4px; background: var(--edge); }
.admin-nav .count-badge { margin-left: 1px; }

/* the hub */
.admin-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.admin-totals li {
  padding: 14px 16px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: #fff;
}

.admin-totals b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.admin-totals span { font-size: 12.5px; color: var(--ink-3); }

.admin-section { margin-bottom: 26px; }

.admin-section > h2 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}

.admin-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 16px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}

.admin-card:hover { border-color: #b9cdf5; background: #fbfcff; }
.admin-card:hover > svg:last-child { transform: translateX(2px); }

.admin-card-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 9px;
  background: #eef3ff;
  color: var(--blue);
}

.admin-card-icon svg { width: 18px; height: 18px; }
.admin-card-copy { min-width: 0; flex: 1; }
.admin-card-copy strong { display: block; font-size: 14.5px; font-weight: 750; letter-spacing: -0.01em; }
.admin-card-copy > span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.admin-card > svg:last-child { width: 16px; height: 16px; flex: none; color: var(--ink-3); transition: transform 140ms ease; }

/* a page of settings */
.admin-panel .admin-group {
  margin-bottom: 14px;
  padding: 18px 20px 20px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: #fff;
}

.admin-panel .admin-group > h2 {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--edge-soft);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.admin-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 18px;
  margin-bottom: 16px;
}

.admin-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.admin-field > span { font-size: 12.5px; font-weight: 650; color: var(--ink-2); }

.admin-field input[type="text"],
.admin-field input[type="number"],
.admin-field select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--edge);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
}

.admin-field input:focus,
.admin-field select:focus { outline: 2px solid #c6d8ff; outline-offset: 0; border-color: var(--blue); }
.admin-field small { font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }
.admin-wide { grid-column: 1 / -1; }
.admin-colour input[type="color"] { width: 64px; height: 34px; padding: 2px; border: 1px solid var(--edge); border-radius: 7px; background: #fff; }

.admin-flag {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: #fbfcfe;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}

.admin-flag:hover { border-color: #b9cdf5; }
.admin-flag input { width: 16px; height: 16px; flex: none; accent-color: var(--blue); }
.admin-note { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-3); }

/* the placement tabs above the slots */
.admin-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--edge);
}

.admin-switch a {
  padding: 9px 14px;
  border-bottom: 2px solid transparent;
  color: var(--ink-3);
  font-size: 13.5px;
  font-weight: 650;
}

.admin-switch a:hover { background: #f7f9fd; color: var(--ink); }
.admin-switch a[aria-current] { border-bottom-color: var(--blue); color: var(--ink); font-weight: 750; }

/* numbered ad slots */
.slot-list { margin: 0 0 16px; padding: 0; list-style: none; }

.slot-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--edge-soft);
}

.slot-row:first-child { border-top: 0; }
.slot-row .admin-field { flex: 1; }

.slot-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 7px;
  background: #eef3ff;
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 800;
}

/* pinned stories */
.pinned-list { margin: 0 0 14px; padding: 0; list-style: none; }

.pinned-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--edge-soft);
  font-size: 13.5px;
}

.pinned-list li:first-child { border-top: 0; }
.pinned-list a { color: var(--ink); font-weight: 650; }
.pinned-list a:hover { color: var(--blue); }
.pinned-source { margin-left: auto; flex: none; font-size: 12px; color: var(--ink-3); }

.pick-list { max-height: 460px; overflow-y: auto; margin: 0 0 16px; padding: 0; list-style: none; }

.pick-list li { border-top: 1px solid var(--edge-soft); }
.pick-list li:first-child { border-top: 0; }

.pick-list label {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 8px;
  border-radius: 7px;
  cursor: pointer;
}

.pick-list label:hover { background: #f7f9fd; }
.pick-list input { margin-top: 2px; width: 16px; height: 16px; flex: none; accent-color: var(--blue); }
.pick-text { min-width: 0; }
.pick-text strong { display: block; font-size: 13.5px; font-weight: 650; line-height: 1.45; color: var(--ink); }

.pick-text > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 12px;
  color: var(--ink-3);
}

.pick-text > span svg { width: 13px; height: 13px; }

@media (max-width: 720px) {
  .admin-nav { gap: 2px; padding: 4px; }
  .admin-nav a { padding: 7px 10px; font-size: 13px; }
  .admin-nav a span { display: none; }
  .admin-nav-home span { display: inline; }
  .admin-panel .admin-group { padding: 16px; }
  .admin-cards { grid-template-columns: 1fr; }
}

/* ---- uploading her own advertising, and running the rail by hand */

.admin-rule {
  margin: 30px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--edge);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.admin-picks { margin: 0 0 16px; padding: 0; border: 0; }

.admin-picks legend {
  padding: 0;
  margin-bottom: 9px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ink-2);
}

.pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.pick-grid .admin-flag span { display: flex; align-items: baseline; gap: 6px; }
.pick-grid small { font-size: 11px; color: var(--ink-3); }

.admin-field input[type="file"] {
  width: 100%;
  padding: 9px 11px;
  border: 1px dashed var(--edge);
  border-radius: 7px;
  background: #fbfcfe;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-2);
}

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

.own-ads li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--edge-soft);
}

.own-ads li:first-child { border-top: 0; }

.own-ad-shot {
  display: block;
  width: 120px;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: #fff;
}

.own-ad-shot img,
.own-ad-shot .ad-creative { display: block; width: 100%; height: auto; }
.own-ad-copy { min-width: 0; flex: 1; }
.own-ad-copy strong { display: block; font-size: 14px; font-weight: 700; }
.own-ad-copy > span { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); word-break: break-all; }

.pinned-list li { flex-wrap: wrap; }
.pinned-order input { width: 56px; padding: 6px 8px; border: 1px solid var(--edge); border-radius: 6px; font: inherit; font-size: 13px; }
.pinned-list .pinned-source { margin-left: 0; }

.pinned-kind {
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef3ff;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
}

.pinned-drop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-3);
  cursor: pointer;
}

.pinned-drop input { width: 15px; height: 15px; accent-color: #c5283d; }
.pinned-list a { flex: 1; min-width: 180px; }

@media (max-width: 720px) {
  .own-ads li { flex-wrap: wrap; }
  .own-ad-shot { width: 84px; }
}

/* ---- ticking and numbering the home blocks and the menu sections */

.admin-order { margin: 0; padding: 0; border: 0; }
.admin-order legend { padding: 0; margin-bottom: 4px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.admin-order .admin-note { margin: 0 0 10px; }
.order-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.order-list li { display: flex; align-items: center; gap: 8px; }
.order-list .admin-flag { flex: 1; }
.order-number input { width: 56px; padding: 9px 8px; border: 1px solid var(--edge); border-radius: 7px; background: #fff; font: inherit; font-size: 13px; text-align: center; }

/* ---- the tidied control room: one card shape, a heading with its explanation, one save bar */

.admin-panel .workspace-heading { margin-bottom: 20px; }
.admin-panel .workspace-heading h1 { font-size: 27px; font-weight: 800; letter-spacing: -0.03em; }
.admin-panel .workspace-heading > p { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }

.admin-group-head { margin-bottom: 16px; padding-bottom: 13px; border-bottom: 1px solid var(--edge-soft); }
.admin-group-head h2,
.admin-group-head h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.admin-group-head p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }

.step-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.admin-step > form { margin: 0; }
.admin-step .admin-picks { margin-top: 4px; }

/* one save bar per page, not a button hidden in every card */
.admin-save {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--edge-soft);
}

.admin-save p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.admin-save .button-primary { margin-left: auto; padding: 10px 26px; }
.admin-save .button-outline { order: -1; }
.admin-save.is-sticky { margin-bottom: 30px; }

/* the hub: what needs her, then where everything lives */
.admin-queue {
  margin-bottom: 26px;
  padding: 16px 18px;
  border: 1px solid #f0d9a8;
  border-radius: 10px;
  background: #fffaf0;
}

.admin-queue.is-clear { border-color: var(--edge); background: #f8fafd; }
.admin-queue h2 { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.admin-queue p { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.admin-queue ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.admin-queue a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid #edd291;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 650;
}

.admin-queue a:hover { border-color: #d8ab3f; }
.admin-queue a svg { width: 15px; height: 15px; color: #b5800f; }
.admin-queue a b { padding: 1px 8px; border-radius: 999px; background: #c5283d; color: #fff; font-size: 11.5px; }

/* trending: the list, then the two ways to add to it */
.trending-add { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.trending-add .pick-list { max-height: 420px; }

.pinned-list li { gap: 12px; padding: 11px 0; }
.pinned-title { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 180px; }
.pinned-title a { font-size: 14px; font-weight: 650; }
.pinned-title > span { font-size: 12px; color: var(--ink-3); }

/* the placement sizes read as one line */
.pick-grid .admin-flag span { flex-direction: column; align-items: flex-start; gap: 1px; }
.pick-grid small { white-space: nowrap; }

@media (max-width: 900px) {
  .trending-add { grid-template-columns: 1fr; }
}

/* ---- last pass: rows that line up, a save bar that follows you down a long page */

.admin-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.admin-save.is-sticky {
  position: sticky;
  bottom: 10px;
  z-index: 2;
  padding: 12px 16px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(24, 43, 80, 0.08);
}

.trending-add .pick-list {
  max-height: 392px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--edge-soft);
  overscroll-behavior: contain;
}

.trending-add .admin-save { margin-top: 12px; padding-top: 0; border-top: 0; }
.trending-add .admin-save .button-primary { padding: 9px 22px; }

@media (max-width: 1100px) {
  .admin-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .admin-cards { grid-template-columns: 1fr; }
}

/* Trending rows in the control room carry their picture, and a way to change it. */
.pinned-photo { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; }
.pinned-photo img, .pinned-photo-empty { width:52px; height:52px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.pinned-photo-empty { display:grid; place-items:center; background:#eef3f9; color:#7d8ea8; }
.pinned-photo-pick { position:relative; display:inline-flex; align-items:center; min-height:36px; padding:0 12px; border:1px solid #cfd9e6; border-radius:8px; background:#fff; font-weight:700; color:var(--blue-dark); cursor:pointer; }
.pinned-photo-pick input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.pinned-photo-pick:focus-within { outline:2px solid var(--blue); outline-offset:2px; }
.pinned-photo-remove { display:inline-flex; align-items:center; gap:5px; color:#5f6e86; }

/* Keys for outside services on /admin/site: a password field looks like the text fields beside it. */
.admin-field input[type="password"] {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--edge);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
}
.admin-secret .admin-flag { margin-top: 10px; }

/* Publishing API keys (/admin/api). */
.api-new-key { border:2px solid var(--blue); }
.api-key-value { display:block; padding:12px 14px; border-radius:8px; background:#10203a; color:#fff; font-size:15px; line-height:1.5; word-break:break-all; user-select:all; }
.api-make { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; }
.api-make .admin-field { flex:1 1 240px; }
.api-keys { list-style:none; margin:0; padding:0; }
.api-keys li { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--edge); }
.api-keys li:first-child { border-top:0; }
.api-key-copy { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; flex:1; }
.api-key-copy small { font-size:13px; color:var(--ink-3); }
.api-example { margin:0 0 12px; padding:14px; overflow-x:auto; border-radius:8px; background:#f3f6fa; font-size:13.5px; line-height:1.6; }
.api-routes { margin:0 0 10px; padding-left:18px; font-size:14px; line-height:1.9; }