/* ===================== Navbar ===================== */

.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  /* The signature bar of the era: a dark saturated gradient with a lighter top
     edge and a hard dark rule underneath. Opaque, because the translucent
     sticky bar it replaced is a much later idea. */
  background: linear-gradient(to bottom, #1d5c63 0%, #14464c 100%);
  border-bottom: 1px solid #123c41;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 3px rgba(0, 0, 0, 0.3);
}

.navbar-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: bold;
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  white-space: nowrap;
  /* White on the dark bar, with the shadow pressed downward -- the inverse of the
     highlight used on light surfaces. */
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}

/* The badge already carries its own border and gloss, so it needs nothing here
   beyond a size and protection from the global `img { max-width: 100% }` rule
   squashing it out of square. */
.navbar-mark {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
}

.navbar-brand:hover {
  color: #d5e7e8;
}

.navbar-search {
  flex: 1;
  max-width: 460px;
}

.navbar-search input {
  border-radius: var(--r-sm);
  background: #fff;
  border: 1px solid #123c41;
  padding: 3px 6px;
  font-size: var(--text-sm);
  line-height: 18px;
  color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22);
}

.navbar-search input:focus {
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: var(--ring);
}

.navbar-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.3em;
  font-weight: 600;
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* Text links on the dark bar.
   These used --ink-muted, which is the secondary colour for text on a LIGHT
   surface. Once the bar became a dark blue gradient that put "Log in" at 1.05:1
   -- dark grey on dark blue, effectively invisible. Anything sitting on the bar
   has to be light, and is measured against the darker of its two gradient stops. */
.navbar-links > a:not(.button-primary),
.navbar-links .link-button {
  padding: 3px 8px;
  border-radius: var(--r-md);
  color: #d5e7e8;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.navbar-links > a:not(.button-primary):hover,
.navbar-links .link-button:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.navbar-links > a.button-primary {
  padding: 0.6em 1.25em;
  font-size: var(--text-xs);
}

.navbar-profile-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}

.navbar-profile-link .avatar {
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}

.navbar-profile-link:hover .avatar {
  box-shadow: 0 0 0 2px var(--brand);
  transform: scale(1.06);
}

/* Also on the dark bar, so also light. The white text-shadow that used to sit
   under it belonged to a light surface and only muddied it here. */
.navbar-nsfw-link {
  font-weight: bold;
  letter-spacing: 0.02em;
  color: #ffffff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}

/* This one carries its own near-white background, so it is its own light surface
   and its label stays dark. */
.safe-mode-toggle {
  font-size: var(--text-2xs) !important;
  padding: 2px 7px !important;
  border-radius: var(--r-md);
  border: 1px solid #a8b0bd !important;
  background: #ffffff !important;
}

.safe-mode-toggle.is-on {
  color: var(--success) !important;
  border-color: #8fae8f !important;
}

.safe-mode-toggle.is-off {
  color: var(--pink) !important;
  border-color: #d59ab4 !important;
}

/* ===================== Page shell ===================== */

.page-container {
  max-width: 1000px;
  margin: 0 auto;
  /* Tight, even padding measured in pixels. The generous em-based whitespace of a
     modern layout is one of the loudest signals that a page is not from 2010. */
  padding: 10px 0 40px;
  min-height: 62vh;
}

.page-header {
  margin-bottom: 2em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em;
  animation: rise-in var(--dur-slow) var(--ease-out) both;
}

/* Hero treatment: the page title is the one place a big gradient headline earns
   its keep, so it gets the display scale and the aurora text fill. */
.page-header h1 {
  margin-bottom: 0;
  flex-basis: 100%;
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.page-header > p,
.page-header .field-hint {
  flex-basis: 100%;
  margin: -0.4em 0 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  max-width: 62ch;
}

.site-footer {
  border-top: 1px solid var(--glass-border);
  padding: 3em 1.75em;
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  background: var(--glass-bg);
}

/* ===================== Chips ===================== */

.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 0.9em;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.5em 1.05em;
  border-radius: var(--r-full);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-muted);
  position: relative;
  box-shadow: var(--glass-highlight);
  transition: transform var(--dur) var(--ease-spring), border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out);
}

.chip::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chip-color, var(--brand));
  margin-right: 0.6em;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip-color, var(--brand)) 24%, transparent),
    0 0 12px color-mix(in srgb, var(--chip-color, var(--brand)) 60%, transparent);
}

.chip.active,
.chip:hover {
  border-color: var(--chip-color, var(--brand));
  color: var(--ink);
  background: var(--glass-bg-strong);
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}

.search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

/* ===================== Misc layout bits ===================== */

.profile-edit-link {
  margin: 1.4em 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.edit-section-title {
  font-size: var(--text-base);
  margin-top: 2em;
  padding-top: 1.5em;
  border-top: 1px solid var(--line);
}

.edit-section-hint {
  margin-top: -0.6em;
  margin-bottom: 1.4em;
}

/* ===================== Responsive ===================== */

@media (max-width: 1024px) {
  .navbar-inner {
    padding: 0.8em 1.25em;
  }
  .page-container {
    padding: 2em 1.25em 5em;
  }
}

@media (max-width: 860px) {
  .navbar-inner {
    flex-wrap: wrap;
    gap: 0.7em;
  }
  .navbar-search {
    order: 3;
    max-width: none;
    flex-basis: 100%;
  }
  .navbar-links {
    gap: 0.15em;
    /* Wrap instead of overflowing: brand + search + several links cannot fit
       one nowrap line on narrow screens. */
    flex-wrap: wrap;
    justify-content: flex-end;
    white-space: normal;
  }
  .navbar-links > a:not(.button-primary),
  .navbar-links .link-button {
    padding: 0.45em 0.65em;
  }
}

/* On phones the avatar alone identifies the account, so drop the username
   text to buy back horizontal space. */
@media (max-width: 560px) {
  .navbar-brand {
    font-size: var(--text-base);
  }
  .navbar-profile-link span {
    display: none;
  }
  .navbar-links {
    font-size: var(--text-xs);
  }
  .navbar-links > a.button-primary {
    padding: 0.52em 0.95em;
  }
  .page-container {
    padding: 1.5em 1em 4em;
  }
  .card {
    padding: 1.35em;
    border-radius: var(--r-lg);
  }
  .auth-card {
    padding: 1.9em 1.5em;
  }
}

/* Sticky warning so an admin cannot forget the site is closed to visitors. */
.maintenance-strip {
  position: relative;
  z-index: 51;
  padding: 0.6em 1.5em;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 600;
  color: #09090b;
  background: linear-gradient(90deg, #fbbf24, #ff6b6b);
}

.maintenance-strip a {
  text-decoration: underline;
  font-weight: 700;
}

/* ===================== Shell: sidebar + content ===================== */

.shell {
  display: grid;
  /* Five tracks on a rail page, four without: sidebar, a flexible gutter, the
     content column, another flexible gutter, and the rail.
     
     The content column is capped rather than fluid, and the gutters are the only
     tracks that take the slack. That is what lets the frame widen on a big monitor
     while the feed stays exactly the width it has always been -- widening a plain
     `1fr` centre column instead would have stretched the posts themselves.
     
     The two gutters are both 1fr, so they always resolve equal and the content
     column stays centred in the frame without any centring maths. */
  grid-template-columns: 190px minmax(28px, 1fr) minmax(0, 800px) minmax(28px, 1fr);
  max-width: 1600px;
  margin: 0 auto;
  /* Keeps the sidebars off the very edge of the glass on a maximised window. */
  padding: 0 16px;
  align-items: start;
  gap: 0;
}

/* Explicit placement is required once there are spacer tracks: left to auto-flow,
   the content would land in the first gutter. */
.shell > .sidebar {
  grid-column: 1;
}

.shell > .page-container {
  grid-column: 3;
}

/* The sidebar owns the page width now, so the content column must not also cap
   itself at 1400px or it would sit off-centre inside its own track. */
.shell > .page-container {
  max-width: none;
  margin: 0;
}

.sidebar {
  position: sticky;
  top: 52px;
  padding: 0 0 20px;
  /* Independently scrollable: a long category list must not force the whole page
     to scroll before the feed can be reached. */
  max-height: calc(100vh - 62px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  padding-bottom: 0.9em;
  margin-bottom: 0.5em;
  border-bottom: 1px solid var(--line);
}

.sidebar-group:last-child {
  border-bottom: none;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.62em 0.85em;
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-muted);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.sidebar-link:hover {
  background: var(--glass-bg-strong);
  color: var(--ink);
}

.sidebar-link.active {
  background: var(--brand-soft);
  color: var(--ink);
}

/* Left rail on the active entry -- clearer at a glance than a background tint
   alone, especially for the entries that share a path and differ by query.
   In the warm accent rather than the chrome colour: it is the one mark on the
   page that is not teal, so the eye finds "where am I" immediately. */
.sidebar-link.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

.sidebar-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: currentColor;
}

.sidebar-link.active .sidebar-icon {
  fill: var(--brand);
}

.sidebar-sub {
  padding-left: 1.1em;
  font-weight: 500;
  font-size: var(--text-xs);
}

/* Category colour dot. The value arrives as data-color and is applied by
   colorAttrs.js, because the CSP forbids inline style attributes. */
.sidebar-dot {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--chip-color, var(--brand));
}

.sidebar-cta {
  color: var(--ink);
  background: var(--brand-soft);
  border: 1px solid var(--brand-ring);
}

.sidebar-cta:hover {
  background: var(--brand);
  color: #fff;
}

.sidebar-cta:hover .sidebar-icon {
  fill: #fff;
}

.sidebar-badge {
  margin-left: auto;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2em 0.5em;
  border-radius: var(--r-full);
  background: var(--gradient-brand);
  color: #fff;
}

.sidebar-badge.is-nsfw {
  background: var(--pink);
}

.sidebar-quiet {
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 0.4em 0.85em;
  opacity: 0.75;
}

/* --- Narrow screens: horizontal strip instead of a column ------------------ */
@media (max-width: 900px) {
  /* minmax(0, 1fr), not 1fr: a grid track defaults to min-width:auto, so it grows
     to fit its widest child. The nav strip is deliberately wider than the screen,
     which would stretch the track and scroll the whole page sideways instead of
     scrolling inside the strip. */
  .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0.75em 1em 0;
  }

  .sidebar-nav {
    flex-direction: row;
    gap: 0.4em;
    overflow-x: auto;
    padding-bottom: 0.5em;
    /* Momentum scrolling, and no scrollbar eating a row of a short strip. */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .sidebar-nav::-webkit-scrollbar {
    display: none;
  }

  .sidebar-group {
    flex-direction: row;
    gap: 0.4em;
    padding: 0 0.6em 0 0;
    margin: 0 0.2em 0 0;
    border-bottom: none;
    border-right: 1px solid var(--line);
  }

  .sidebar-group:last-child {
    border-right: none;
  }

  .sidebar-link {
    white-space: nowrap;
    padding: 0.55em 0.9em;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
  }

  .sidebar-link.active {
    box-shadow: none;
    border-color: var(--brand);
  }

  /* The legal links belong at the foot of the page, not in a nav strip that has
     to stay short enough to scan. */
  .sidebar-legal {
    display: none;
  }
}

/* ===================== Right rail ===================== */

/* Three columns only where a rail actually exists; other pages keep the
   two-column shell rather than reserving an empty track. */
.shell.has-rail {
  /* Same five-track idea, but the centre is capped at the feed's own 560px rather
     than the 800px a page without a rail gets.
     
     The first track is 230px to match the rail, not 190px to match the sidebar it
     holds. With equal gutters, unequal outer tracks put the feed 20px left of the
     window centre -- half the 40px difference between the two sides. Matching the
     tracks centres the feed exactly; the sidebar still starts at the same left
     edge, and the extra 40px is absorbed by empty gutter nobody can see. */
  grid-template-columns: 230px minmax(28px, 1fr) minmax(0, 560px) minmax(28px, 1fr) 230px;
}

/* The sidebar keeps its own width rather than stretching to fill the wider track. */
.shell.has-rail > .sidebar {
  width: 190px;
}

.shell.has-rail > .right-rail {
  grid-column: 5;
}

.right-rail {
  position: sticky;
  top: 52px;
  padding: 0 0 20px;
  max-height: calc(100vh - 62px);
  overflow-y: auto;
  scrollbar-width: thin;
}

/* ---- Rail modules ---- */

/* The sidebar module of the era: a gradient title bar sitting on a white body,
   with a hairline border wrapping both. Every block on the rail is this shape, so
   the column reads as a stack of panels rather than floating fragments. */
.rail-block {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  margin-bottom: 10px;
  overflow: hidden;
}

.rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 8px;
  background: var(--gradient-titlebar);
  border-bottom: 1px solid var(--line);
}

.rail-head h2 {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: bold;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #464d5a;
  text-shadow: 0 1px 0 #fff;
}

.rail-more {
  font-size: var(--text-2xs);
  color: var(--brand-text);
}

.rail-more:hover { text-decoration: underline; }

.rail-body {
  padding: 6px 8px 8px;
}

/* ---- Top creators ---- */

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

.rail-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid #eef0f3;
}

.rail-item:last-child { border-bottom: none; }

.rail-rank {
  flex: 0 0 auto;
  width: 16px;
  font-size: var(--text-xs);
  font-weight: bold;
  text-align: center;
  color: var(--ink-muted);
}

/* Medal colours for the podium, deep enough to read at 11px on white. */
.rail-rank-1 { color: #9a6b00; }
.rail-rank-2 { color: #6b7280; }
.rail-rank-3 { color: #8a4b21; }

.rail-user {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: inherit;
}

.rail-user .avatar {
  width: 28px;
  height: 28px;
  font-size: 13px;
  border: 1px solid var(--line);
}

.rail-user-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.rail-name {
  font-size: var(--text-xs);
  font-weight: bold;
  color: var(--brand-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-user:hover .rail-name { text-decoration: underline; }

.rail-stats {
  font-size: var(--text-2xs);
  color: var(--ink-muted);
}

/* ---- Tag cloud ---- */

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 7px;
  align-items: baseline;
  line-height: 1.5;
}

.cloud-tag {
  color: var(--brand-text);
}

.cloud-tag:hover {
  text-decoration: underline;
  color: var(--brand-strong);
}

/* Sized by how often a tag is used. Five bands as classes, not inline styles --
   the CSP blocks a computed size written into a style attribute. */
.cloud-size-1 { font-size: 10px; }
.cloud-size-2 { font-size: 12px; }
.cloud-size-3 { font-size: 14px; font-weight: bold; }
.cloud-size-4 { font-size: 17px; font-weight: bold; }
.cloud-size-5 { font-size: 20px; font-weight: bold; }

/* ---- Stats table ---- */

.rail-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
}

.rail-stats-table th {
  text-align: left;
  font-weight: normal;
  color: var(--ink-muted);
  padding: 2px 0;
}

.rail-stats-table td {
  text-align: right;
  font-weight: bold;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  padding: 2px 0;
}

.rail-stats-table tr + tr th,
.rail-stats-table tr + tr td {
  border-top: 1px solid #eef0f3;
}

/* ---- New members ---- */

.rail-members {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 4px;
}

.rail-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  color: var(--ink-muted);
}

.rail-member .avatar {
  width: 34px;
  height: 34px;
  font-size: 15px;
  border: 1px solid var(--line);
}

.rail-member-name {
  font-size: var(--text-2xs);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-member:hover .rail-member-name { color: var(--brand-text); }

/* ---- Sign-up block ---- */

.rail-cta-text {
  margin: 0 0 7px;
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.rail-cta-button {
  display: flex;
  width: 100%;
}

.rail-cta-small {
  margin: 6px 0 0;
  font-size: var(--text-2xs);
  color: var(--ink-muted);
  text-align: center;
}

.rail-cta-small a { color: var(--brand-text); }
.rail-cta-small a:hover { text-decoration: underline; }


/* Below the three-column breakpoint the rail becomes a normal block under the
   feed -- a sticky 230px panel next to a 375px screen would sit on top of the
   content it belongs to.
   
   Raised from 1010px because the widened frame needs more room before it fits:
   190 + 28 + 560 + 28 + 230 plus the shell's own padding is ~1060, so collapsing
   any later would overflow rather than merely look tight.
   
   The spacer tracks go away here too. They have to: `.page-container` is pinned to
   column 3 above, and leaving that pin against a two-track template would place it
   in an implicit third column with the gutters still holding space. */
@media (max-width: 1080px) {
  .shell,
  .shell.has-rail {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 10px;
    /* Not zero: .post-row-track bleeds a couple of pixels past its container with
       negative margins so the cards' hover lift is not clipped. The old 1000px cap
       always left slack for that; once the shell fills the window it needs a little
       padding of its own or the strip pushes a horizontal scrollbar onto the page. */
    padding: 0 8px;
  }
  .shell > .page-container {
    grid-column: 2;
  }
  /* Releases the desktop width pin, or the nav strip cannot span the screen. */
  .shell.has-rail > .sidebar {
    width: auto;
  }
  .shell.has-rail > .right-rail,
  .right-rail {
    grid-column: 1 / -1;
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0 0 24px;
  }
}

@media (max-width: 760px) {
  .shell,
  .shell.has-rail {
    grid-template-columns: minmax(0, 1fr);
  }
  .shell > .sidebar,
  .shell > .page-container {
    grid-column: 1;
  }
  .right-rail {
    padding: 0 8px 20px;
  }
  /* Four across, not six: at the larger side-column type a six-wide grid gives
     each name about 53px and the longer usernames get an ellipsis. */
  .rail-members {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ===================== Notification bell ===================== */

.navbar-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-md);
  color: #e4defa;
}

.navbar-bell:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* The count sits on the bell rather than beside it, so the bar's width does not
   shift as notifications arrive. */
.bell-count {
  position: absolute;
  top: -3px;
  right: -5px;
  min-width: 15px;
  padding: 0 3px;
  border-radius: var(--r-full);
  background: linear-gradient(to bottom, #d94a5c 0%, #b0173f 100%);
  border: 1px solid #8d1233;
  color: #fff;
  font-size: 9px;
  font-weight: bold;
  line-height: 13px;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}

/* ===================== Side column type scale ===================== */

/* The side columns were set a step smaller than the feed, which made the
   navigation and the rail hard to read next to it. Rather than hunting down
   every font-size in both columns, the scale itself is redefined here and
   inherited: every rule inside that already says var(--text-xs) simply resolves
   larger. Changing one of these three values re-tunes both columns together. */
.sidebar,
.right-rail {
  --text-2xs: 11px;
  --text-xs: 13px;
  --text-sm: 14px;
}

/* The cloud sets explicit pixels rather than tokens, because the five bands have
   to stay visibly distinct from each other -- so they are bumped on their own. */
.cloud-size-1 { font-size: 12px; }
.cloud-size-2 { font-size: 14px; }
.cloud-size-3 { font-size: 16px; }
.cloud-size-4 { font-size: 19px; }
.cloud-size-5 { font-size: 22px; }

/* The sidebar's own badges were set below the scale in raw rem. */
.sidebar-badge {
  font-size: 11px;
}