/* Tool pages in the tools home's look (2026-10-09). On top of assets/site.css and assets/home.css:
   the page header, section heads, card heads, choice tiles, the pill switch, the editor bar, the
   rail folded to its icons for the editors (body.rail-slim), and HQ's rail on the admin site
   (body.rail-hq). The rail itself is drawn by assets/rail.js. Chapter colours stay "calm": only the
   rail wears them (and a picked tile's shadow). Type: things you click are in the serif, sentence
   case (the buttons, site.css); labels and status (kickers, chips, pills) in the display caps. */

/* ---------- the page ---------- */

.landing .tp {
  max-width: 1240px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Header: kicker, serif title, a lede; actions to the right (My assets' header). */
.tp-head[hidden], .tp-bar[hidden] { display: none; }
.tp-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; }
.tp-head__id { min-width: 0; max-width: 46rem; }
.tp-title { margin: 4px 0 6px; font-size: clamp(26px, 1.2vw + 16px, 34px); line-height: 1.1; }
.tp-lede { margin: 0; font-size: 15px; line-height: 1.5; color: var(--home-meta); }
.tp-head__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.landing .tp-head .button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; }
.tp-head .ic { width: 15px; height: 15px; }
.landing .tp-head .home-lnk { gap: 7px; }

/* A note that points somewhere else (a badge, a sentence, an outline pill link). */
.tp-note {
  display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap;
  padding: 12px 16px; background: #fff; border: 1.5px solid rgba(44, 54, 89, 0.2); border-radius: 12px;
}
.tp-note p { margin: 0; flex: 1 1 20rem; font-size: 14px; }
.tp-note .home-badge { width: 30px; height: 30px; border-radius: 9px; }
.tp-note .home-badge .ic { width: 16px; height: 16px; }

/* Section heads inside a page (the home's "Run an event / From idea to RSVPs"). */
.tp-sec__h { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.tp-sec__h h2 { margin: 3px 0 0; font-size: clamp(20px, 0.6vw + 14px, 24px); line-height: 1.2; }

/* ---------- the pill switch (My assets' Auto / White / Dark / Grid) ---------- */

.tp-seg { display: inline-flex; }
.landing .tp-seg button, .landing .tp-seg a {
  font: 700 13px/1 var(--font-serif); color: var(--navy); background: transparent; text-decoration: none;
  border: 1.5px solid var(--navy); padding: 7px 12px; margin-left: -1.5px; min-height: 32px;
  display: inline-flex; align-items: center; box-shadow: none;
}
.landing .tp-seg > :first-child { border-radius: 999px 0 0 999px; margin-left: 0; padding-left: 14px; }
.landing .tp-seg > :last-child { border-radius: 0 999px 999px 0; padding-right: 14px; }
.landing .tp-seg [aria-pressed="true"], .landing .tp-seg .is-on { background: var(--navy); color: var(--cream); }

/* ---------- the editor bar (an editor's header, kept small: the work gets the room) ---------- */

.landing .tp-bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 18px;
  padding: 12px 22px; background: var(--cream); color: var(--navy);
  border-bottom: 1.5px solid var(--home-rule);
}
.landing .tp-bar__id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.landing .tp-bar__title { margin: 1px 0 0; font-family: var(--font-serif); font-weight: 700; font-size: 21px; line-height: 1.15; }
.tp-bar__acts { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.landing .tp-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px 0 9px;
  border: 1.5px solid var(--navy); border-radius: 999px; color: var(--navy); background: transparent; box-shadow: none;
  font-family: var(--font-serif); font-weight: 700; font-size: 13.5px; line-height: 1.2; letter-spacing: 0; text-transform: none;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.landing .tp-back:hover { background: var(--navy); color: var(--cream); }
.tp-back .ic { width: 15px; height: 15px; }

/* In an embed (no rail): no footer of the page's own, and an editor bar's kicker goes (the tool's
   own bar look comes back). */
body:not(.landing) main > .content__footer, body:not(.landing) .tp-bar .home-kicker { display: none; }
body:not(.landing) .tp-bar__id { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
body:not(.landing) .tp-bar__id p { margin: 0; }

/* The footer: Report a problem, then Globert's Ask Globert (tools-host.js adds it), together on the right. */
.landing .content__footer > a[data-report-link] { margin-left: auto; }
.landing .content__footer .tools-globert-foot:not([hidden]) { display: inline-flex; align-items: center; gap: 0.5em; }

/* ---------- the rail: folded to its icons (the editors) ---------- */

.rail__fold {
  display: none;
  align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; margin-left: auto;
  background: transparent; color: var(--cream);
  border: 1.5px solid rgba(253, 251, 233, 0.5); border-radius: 50%;
}
.rail__fold:hover { background: rgba(0, 0, 0, 0.16); }
.rail__fold .ic { width: 16px; height: 16px; }
body.is-editor .rail__fold { display: inline-flex; }
body.is-editor .rail__top .chip { margin-right: 0; }

@media (min-width: 901px) {
  body.rail-slim { --rail-w: 76px; }
  body.rail-slim .rail { padding: 18px 10px; gap: 14px; align-items: center; }
  body.rail-slim .rail__top { flex-direction: column; padding: 0; gap: 12px; }
  body.rail-slim .rail__brand span:not(.mark), body.rail-slim .rail__top .chip,
  body.rail-slim .rail__head, body.rail-slim .rail__h, body.rail-slim .home-mine__id,
  body.rail-slim .home-mine__note, body.rail-slim #home-mine-switch-label, body.rail-slim .rail-find,
  body.rail-slim .rail__updated, body.rail-slim .rail__nav a > span[aria-hidden],
  body.rail-slim .rail__links .tools-globert-back { display: none; }
  body.rail-slim .rail__fold { transform: rotate(180deg); margin: 0; }
  body.rail-slim .home-mine { padding: 0; align-items: center; }
  body.rail-slim .home-mine__card { min-height: 0; padding: 5px; border-radius: 10px; }
  body.rail-slim .home-mine__card .home-seal { --s: 40px !important; }
  body.rail-slim .rail a.home-mine__switch { width: 40px; min-height: 30px; padding: 0; }
  body.rail-slim .rail__nav a { width: 46px; justify-content: center; padding: 0; }
  body.rail-slim .rail__ri { font-size: 0; gap: 0; }
  body.rail-slim .rail__ri .ic { width: 19px; height: 19px; }
  body.rail-slim .rail__nav ul { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  body.rail-slim .rail__nav + .rail__nav { border-top: 1px solid rgba(253, 251, 233, 0.25); padding-top: 12px; }
}

/* ---------- the rail on the admin site: HQ's ---------- */

body.rail-hq .home-mine { display: none; }
.rail-find { padding: 0 10px; }
.rail-find .rail__h { display: block; margin: 0 0 6px; }
.rail-find__box { position: relative; }
.rail-find__box .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--navy); pointer-events: none; }
.landing .rail-find input {
  width: 100%; height: 40px; padding: 0 12px 0 34px; border: 0; border-radius: 8px;
  background: var(--cream); color: var(--navy); font-family: var(--font-serif); font-size: 14px;
}
.landing .rail-find input:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; }

/* ---------- smaller screens ---------- */

@media (max-width: 900px) {
  body.is-editor .rail__fold { display: none; }
  .tp-head { align-items: flex-start; }
  .landing .tp-bar { padding: 12px 16px; }
  /* The rail's tool list is hidden on phones (home.css): keep its Home, as a way back. */
  body[data-home-page] .rail__nav--tools { display: block; }
  body[data-home-page] .rail__nav--tools li + li { display: none; }
  body[data-home-page] .rail__nav--tools a { min-height: 44px; }
  body.rail-hq .rail-find, body.rail-hq .rail__nav--hq { display: none; }
}

/* Icons for CSS badges (the sprite's strokes, in cream and in navy), for pages whose markup isn't
   theirs to change (the event form widget): background-image: var(--ic-NAME-cream). */
:root {
  --ic-user-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDFBE9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E");
  --ic-user-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C3659' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E");
  --ic-calendar-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDFBE9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --ic-calendar-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C3659' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --ic-tag-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDFBE9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4a1 1 0 011-1h8l9 9-9 9z'/%3E%3Ccircle cx='8' cy='8' r='1.5'/%3E%3C/svg%3E");
  --ic-tag-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C3659' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4a1 1 0 011-1h8l9 9-9 9z'/%3E%3Ccircle cx='8' cy='8' r='1.5'/%3E%3C/svg%3E");
  --ic-image-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDFBE9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 17l-5-5-9 8'/%3E%3C/svg%3E");
  --ic-image-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C3659' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 17l-5-5-9 8'/%3E%3C/svg%3E");
  --ic-users-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDFBE9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c1-3.5 3.5-5.5 6.5-5.5s5.5 2 6.5 5.5'/%3E%3Cpath d='M16 4.5a3.5 3.5 0 010 7M18 14.5c2 .7 3.2 2.6 3.7 5.5'/%3E%3C/svg%3E");
  --ic-users-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C3659' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c1-3.5 3.5-5.5 6.5-5.5s5.5 2 6.5 5.5'/%3E%3Cpath d='M16 4.5a3.5 3.5 0 010 7M18 14.5c2 .7 3.2 2.6 3.7 5.5'/%3E%3C/svg%3E");
  --ic-dollar-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDFBE9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M17 7c-1-1.5-2.8-2-5-2-2.8 0-4.5 1.3-4.5 3.3 0 4.7 9.5 2.3 9.5 7.2 0 2-1.9 3.5-5 3.5-2.4 0-4.4-.8-5.5-2.4'/%3E%3C/svg%3E");
  --ic-dollar-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C3659' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M17 7c-1-1.5-2.8-2-5-2-2.8 0-4.5 1.3-4.5 3.3 0 4.7 9.5 2.3 9.5 7.2 0 2-1.9 3.5-5 3.5-2.4 0-4.4-.8-5.5-2.4'/%3E%3C/svg%3E");
  --ic-repeat-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDFBE9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 2l3 3-3 3'/%3E%3Cpath d='M4 11V9a4 4 0 014-4h12'/%3E%3Cpath d='M7 22l-3-3 3-3'/%3E%3Cpath d='M20 13v2a4 4 0 01-4 4H4'/%3E%3C/svg%3E");
  --ic-repeat-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C3659' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 2l3 3-3 3'/%3E%3Cpath d='M4 11V9a4 4 0 014-4h12'/%3E%3Cpath d='M7 22l-3-3 3-3'/%3E%3Cpath d='M20 13v2a4 4 0 01-4 4H4'/%3E%3C/svg%3E");
  --ic-type-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDFBE9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6V4h14v2'/%3E%3Cpath d='M12 4v16'/%3E%3Cpath d='M9 20h6'/%3E%3C/svg%3E");
  --ic-type-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C3659' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6V4h14v2'/%3E%3Cpath d='M12 4v16'/%3E%3Cpath d='M9 20h6'/%3E%3C/svg%3E");
  --ic-palette-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDFBE9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 100 18c1.2 0 2-.8 2-1.8 0-1.3-1-1.7-1-2.9 0-1 .8-1.8 1.9-1.8H17a4 4 0 004-4C21 6.5 17 3 12 3z'/%3E%3Ccircle cx='7.5' cy='11' r='1.2'/%3E%3Ccircle cx='10' cy='7' r='1.2'/%3E%3Ccircle cx='15' cy='7.5' r='1.2'/%3E%3C/svg%3E");
  --ic-palette-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C3659' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 100 18c1.2 0 2-.8 2-1.8 0-1.3-1-1.7-1-2.9 0-1 .8-1.8 1.9-1.8H17a4 4 0 004-4C21 6.5 17 3 12 3z'/%3E%3Ccircle cx='7.5' cy='11' r='1.2'/%3E%3Ccircle cx='10' cy='7' r='1.2'/%3E%3Ccircle cx='15' cy='7.5' r='1.2'/%3E%3C/svg%3E");
  --ic-camera-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDFBE9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E");
  --ic-camera-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C3659' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E");
  --ic-link-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDFBE9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 005.66 0l3-3a4 4 0 00-5.66-5.66l-1 1'/%3E%3Cpath d='M14 10a4 4 0 00-5.66 0l-3 3a4 4 0 005.66 5.66l1-1'/%3E%3C/svg%3E");
  --ic-link-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C3659' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 005.66 0l3-3a4 4 0 00-5.66-5.66l-1 1'/%3E%3Cpath d='M14 10a4 4 0 00-5.66 0l-3 3a4 4 0 005.66 5.66l1-1'/%3E%3C/svg%3E");
  --ic-flag-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDFBE9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4h11l-2 4 2 4H5'/%3E%3C/svg%3E");
  --ic-flag-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C3659' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4h11l-2 4 2 4H5'/%3E%3C/svg%3E");
  --ic-mail-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDFBE9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
  --ic-mail-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C3659' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
  --ic-send-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDFBE9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L10 14'/%3E%3Cpath d='M21 3l-7 18-4-7-7-4z'/%3E%3C/svg%3E");
  --ic-send-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C3659' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L10 14'/%3E%3Cpath d='M21 3l-7 18-4-7-7-4z'/%3E%3C/svg%3E");
  --ic-layers-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDFBE9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5z'/%3E%3Cpath d='M3 13l9 5 9-5'/%3E%3C/svg%3E");
  --ic-layers-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C3659' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5z'/%3E%3Cpath d='M3 13l9 5 9-5'/%3E%3C/svg%3E");
  --ic-note-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDFBE9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h10l4 4v14H5z'/%3E%3Cpath d='M15 3v4h4M8 12h8M8 16h5'/%3E%3C/svg%3E");
  --ic-note-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C3659' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h10l4 4v14H5z'/%3E%3Cpath d='M15 3v4h4M8 12h8M8 16h5'/%3E%3C/svg%3E");
  --ic-pin-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDFBE9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0114 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
  --ic-pin-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C3659' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0114 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
  --ic-eye-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDFBE9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --ic-eye-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C3659' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* Option B for the editors (for comparison): no rail at all while editing; the bar's back pill and
   the CNL mark are the way out. */
@media (min-width: 901px) {
  body.rail-off { --rail-w: 0px; grid-template-columns: minmax(0, 1fr) !important; }
  body.rail-off .rail { display: none; }
}