/* The Sanctum after the meeting of 23 September.
 *
 * Loaded last on the belt pages, so what is here is what the meeting decided,
 * in one place, rather than a fourth layer threaded through cards.css. What it
 * covers:
 *
 *   1. The rail sits flush against the right edge and is slim.
 *   2. The roots drawing moves behind the cards.
 *   3. The card: one paragraph on the left, the Article's statement beside the
 *      question, and the four positions coloured by side.
 *   4. After an answer: one line of what was recorded, one of what it changed,
 *      and a small line to sign.
 *   5. Press and hold on a phone.
 *
 * Selectors that have to beat cards.css carry #stories, because the rules they
 * replace do, and an id outranks any number of classes. */

/* ------------------------------------------------------------ 1. The rail

   "Why so much margin on the right side?" The page was a centred block 1680
   wide with the rail inside it, so on a wide screen there was a band of white
   past the rail and the rail read as floating. The rail now meets the right
   edge, it is narrower, and the column of cards takes the width it gave up, up
   to a measure where the question still reads as one line of sight. */
@media (min-width: 701px) {
  body.page-sanctum { --rail-w: clamp(236px, 17vw, 280px); --rail-gap: clamp(28px, 3vw, 56px); }
  .page-sanctum .layout {
    max-width: none; margin: 0;
    grid-template-columns: minmax(0, 1fr) var(--rail-w);
    gap: var(--rail-gap);
    padding-left: 3vw; padding-right: 0;
  }
  .page-sanctum .feed { width: 100%; max-width: 1240px; justify-self: center; }
  .page-sanctum .right-rail { border-right: 0; padding: 0 22px 24px 22px; }
}

/* Three counts in a row, number over word. The icons went: at this width they
   took a third of the rail to say what the word under the number says. */
.rail-stats { border-top: 0; padding-top: 0; }
.rail-stats .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.rail-stats .stats-grid p { display: block; }
.rail-stats .stat-icon { display: none; }
.rail-stats .stat-copy strong { display: block; font-size: 20px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.rail-stats .stat-copy small { display: block; font-size: 12.5px; color: #6c706b; }
.rail-stats .stats-note { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: #6c706b; }
.rail-stats .stats-note a { color: #2368c2; text-decoration: underline; text-underline-offset: 2px; }

/* The eight, to jump to. Each row is the Article's numeral and name, and a
   mark that fills when it is answered. The one on screen is marked too. */
.rail-jump { border-top: 1px solid var(--line); padding: 18px 0 16px; }
.rail-jump-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rail-jump-head .eyebrow { margin: 0; font-size: 10px; color: #6c706b; }
.rail-count { font-size: 13px; color: #4f544e; font-variant-numeric: tabular-nums; }
.rail-count b { font-weight: 600; color: #191919; }
.rail-jump ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.rail-jump a {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 6px;
  padding: 7px 8px 7px 10px; border-radius: 8px; font-size: 14.5px; line-height: 1.3; color: #3b3f3a;
  transition: background .15s ease, color .15s ease;
}
.rail-jump a:hover { background: #f2f4f0; color: #191919; }
.rail-jump a:focus-visible { outline: 2px solid #438ff4; outline-offset: 1px; }
.jump-num { font-size: 12px; letter-spacing: .06em; color: #666a64; font-variant-numeric: tabular-nums; }
.jump-mark { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #c9ccc5; justify-self: end; }
.rail-jump a.done .jump-mark { border-color: #438ff4; background: #438ff4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.2 8.4 2.5 2.4 5-5.4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.rail-jump a[aria-current="true"] { background: #eef4fe; color: #174e98; }
.rail-jump a[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; background: #438ff4; }
.rail-jump a[aria-current="true"] .jump-name { font-weight: 600; }
.rail-jump #to-go { display: block; margin-top: 10px; font-size: 12.5px; color: #6c706b; }
.page-sanctum .rail-jump + .live-judgments { border-top: 1px solid var(--line); }

/* ---------------------------------------------------- 2. Roots, behind

   The drawing sat beside the headline and took the eye before the question
   did (meeting of 23 September). It is the page's ground now: faint, fixed,
   and anchored where it used to be, so the first screen still shows the
   plant. The first card rises over it, and from then on it is seen in the
   space between one card and the next. */
.belt-roots {
  position: fixed; z-index: 0; pointer-events: none;
  top: calc(var(--belt-top, 76px) + 11vh);
  right: calc(var(--rail-w, 0px) + var(--rail-gap, 0px) + 1vw);
  width: min(38vw, 620px); opacity: .34;
}
.belt-roots svg { display: block; width: 100%; height: auto; }
.page-sanctum .layout, .page-sanctum .site-footer { position: relative; z-index: 1; }
@media (max-width: 700px) {
  .belt-roots { top: auto; bottom: 0; right: -10vw; width: 120vw; opacity: .14; }
}
@media print { .belt-roots { display: none; } }

/* The hero is one column now the drawing has gone behind it. */
.page-sanctum .sanctum-hero:not(.signal-hero) {
  grid-template-columns: minmax(0, 1fr);
  min-height: min(460px, calc(100dvh - var(--belt-top, 76px) - 160px));
}
.page-sanctum .sanctum-hero:not(.signal-hero) .sanctum-hero-copy { max-width: 720px; }

/* On a phone the rail is out of sight, so the eight are a row of links here. */
.hero-jump { display: none; }
@media (max-width: 700px) {
  .hero-jump { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 22px 0 0; padding: 0; }
  .hero-jump a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
    border: 1px solid #d9dcd5; border-radius: 999px; background: #fff; font-size: 14px; color: #2d312c;
  }
}

/* ---------------------------------------------------------- 3. The card */

/* The card as an object (MC, 23 September: "more depth, more shadow,
   thickness, texture"). A heavy card stock rather than a flat panel: an edge
   built from three thin layers under it, a long soft shadow, the white side
   on the same paper as the Constitution and a faint grain in the black. */
.page-sanctum #stories > .story-card[data-kind="constitution"] {
  border: 1px solid #d8d4c8; border-radius: 22px;
  box-shadow:
    0 1px 0 #ece9e0, 0 2px 0 #e2ded3, 0 3px 0 #d8d3c6, 0 4px 0 #cdc8ba,
    0 22px 40px -14px rgba(33, 28, 14, .30),
    0 60px 100px -46px rgba(33, 28, 14, .40);
}
.page-sanctum #stories > .story-card[data-kind="constitution"] .story-top {
  background: #faf8f3 url("/images/paper.webp") 0 0 / 700px 700px repeat;
  box-shadow: inset -18px 0 30px -26px rgba(0, 0, 0, .35);
}
.page-sanctum #stories > .story-card[data-kind="constitution"] .decision {
  background-color: #161616;
  background-image:
    radial-gradient(120% 60% at 20% 0%, rgba(255, 255, 255, .06), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The scene, in quotation marks. A quote, in Urbanist's italic, so it reads
   as the situation and cannot be mistaken for a second question. */
@font-face { font-family: "Urbanist"; src: url("/fonts/urbanist-latin-300-italic.woff2") format("woff2"); font-style: italic; font-weight: 300; font-display: swap; }
@font-face { font-family: "Urbanist"; src: url("/fonts/urbanist-latin-400-italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
.page-sanctum #stories > .story-card[data-kind="constitution"] .story-top { justify-content: center; }
.page-sanctum #stories > .story-card[data-kind="constitution"] .context { margin: 0; padding: 0; border: 0; }
.scene { position: relative; margin: 0; padding: 58px 0 0; }
.scene::before {
  content: ""; position: absolute; left: 0; top: 0; width: 46px; height: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 36'%3E%3Cpath fill='%23d3cab3' d='M0 36V22C0 10 6 3 18 0l2 4C13 7 10 11 10 17h8v19zm28 0V22c0-12 6-19 18-22l2 4c-7 3-10 7-10 13h8v19z'/%3E%3C/svg%3E") 0 0 / contain no-repeat;
}
.scene p {
  margin: 0; font-family: "Urbanist", "Avenir Next", "Helvetica Neue", Arial, sans-serif; font-style: italic; font-weight: 300;
  font-size: clamp(21px, .9vw + 1.5vh, 32px); line-height: 1.42; letter-spacing: -.005em; color: #1f211e; text-wrap: pretty;
}

@media (max-width: 950px) {
  .scene { padding-top: 44px; }
  .scene::before { width: 36px; height: 27px; }
  .scene p { font-size: 21px; }
}

/* The question, then the four positions, with room between them. */
.page-sanctum #stories > .story-card[data-kind="constitution"] .choices[data-row] { margin-top: clamp(18px, 2.6vh, 30px); }

/* The Article and its statement, above the question. */
.decision-article { margin: clamp(14px, 2vh, 24px) 0 0; font-size: 14px; line-height: 1.45; color: #aeb5aa; }
.decision .story-article { color: #e8ece4; letter-spacing: .06em; font-size: 12px; text-transform: uppercase; margin-right: 8px; }
.decision .story-article:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.decision-statement { color: #c9cfc5; }
.page-sanctum #stories > .story-card[data-kind="constitution"] .decision-article + h3 { margin-top: clamp(8px, 1.2vh, 14px); }

/* The four positions. Each says where it sits on the ladder, in words and in
   its colour: red the strongest no, yellow the soft no, green the soft yes,
   blue the strongest yes. The colour is a line along the top of the tile at
   rest, and the whole border when a pointer rests on it, a finger holds it or
   it is chosen. The tiles sit on the card like raised keys. */
.page-sanctum [data-tone="red"] { --tone-text: #ff8b7c; }
.page-sanctum [data-tone="yellow"] { --tone-text: #f3c95e; }
.page-sanctum [data-tone="green"] { --tone-text: #6fd49b; }
.page-sanctum [data-tone="blue"] { --tone-text: #8db6ff; }
.page-sanctum #stories > .story-card[data-kind="constitution"] .choices[data-row] .choice {
  border: 2px solid #383838; background: linear-gradient(180deg, #262626, #1e1e1e);
  box-shadow: inset 0 3px 0 var(--bar-color), 0 1px 0 rgba(255, 255, 255, .04), 0 8px 18px -6px rgba(0, 0, 0, .55);
  justify-content: flex-start; gap: 8px;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.page-sanctum #stories > .story-card[data-kind="constitution"] .choices[data-row] .choice:is(:hover, :focus-visible, .is-held) {
  border-color: var(--bar-color);
  background: color-mix(in srgb, var(--bar-color) 14%, #202020);
  transform: translateY(-2px);
  box-shadow: inset 0 3px 0 var(--bar-color), 0 14px 26px -8px rgba(0, 0, 0, .6);
}
.page-sanctum #stories > .story-card[data-kind="constitution"] .choices[data-row] .choice.selected { border-color: var(--bar-color); }
.page-sanctum #stories > .story-card.answered[data-kind="constitution"] .choices[data-row] .choice.selected {
  background: color-mix(in srgb, var(--bar-color) 18%, #ffffff);
  border-color: var(--bar-color);
}
.choice-scale { display: inline-flex; align-items: center; gap: 3px; height: 8px; }
.choice-scale i { width: 16px; height: 4px; border-radius: 3px; background: var(--pip); opacity: .28; }
.choice-scale i.on { height: 8px; opacity: 1; }
.page-sanctum #stories > .story-card[data-kind="constitution"] .choice-not-sure { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
@media (prefers-reduced-motion: reduce) {
  .page-sanctum #stories > .story-card[data-kind="constitution"] .choices[data-row] .choice:is(:hover, :focus-visible, .is-held) { transform: none; }
}

/* ---------------------------------------------- 4. After an answer

   Three short lines where the hint was: what was recorded, what it changed,
   and, once an account is on offer, a small line to sign. Share is behind the
   same control as the reasons. */
.page-sanctum .story-card[data-kind="constitution"] .guide.answer-landed { display: grid; gap: 6px; align-items: start; }
.landed-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.landed-impact { font-size: 13.5px; line-height: 1.45; color: #c3cbbd; }
.landed-sign {
  justify-self: start; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; color: #9cc2ff; text-decoration: underline; text-underline-offset: 3px;
}
.landed-sign:hover, .landed-sign:focus-visible { color: #fff; }
.landed-sign:disabled { color: #c3cbbd; text-decoration: none; cursor: default; }
@media (max-width: 700px) { .landed-sign { min-height: 44px; } }

/* ------------------------------------------ 5. Press and hold, on a phone */
.choice-tip {
  position: absolute; left: 16px; right: 16px; z-index: 4; margin: 0;
  padding: 12px 14px 12px 16px; border-radius: 12px; background: #fbfbf9; color: #242723;
  font-size: 14px; line-height: 1.45; box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  border-left: 5px solid #c4c4c0;
}
.choice-tip[data-tone="red"] { border-left-color: #e0503f; }
.choice-tip[data-tone="yellow"] { border-left-color: #e9b43c; }
.choice-tip[data-tone="green"] { border-left-color: #3fae6a; }
.choice-tip[data-tone="blue"] { border-left-color: #3d7fe8; }
.choice-tip b { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .page-sanctum #stories > .story-card[data-kind="constitution"] .choices[data-row] .choice { transition: none; }
}

/* The guide rests in the bottom right corner, which is now the rail's. The
   rail can scroll its last lines up clear of it. */
@media (min-width: 701px) {
  .page-sanctum .right-rail { padding-bottom: 170px; }
}

/* The country, asked once after all eight. */
#country-ask select { width: 100%; }
.country-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.country-skip { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: #555; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#country-form small { display: block; min-height: 18px; margin-top: 8px; font-size: 13px; color: #4f544e; }
/* With a fourth count (countries), two by two rather than three and one. */
.rail-stats .stats-grid:has(> [data-stat-wrap="countries"]:not([hidden])) { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }

/* On a phone's Question tab the white side has nothing left to show once the
   scene is behind the other tab, so it takes no room. */
@media (max-width: 950px) {
  .page-sanctum #stories > .story-card[data-kind="constitution"][data-tab="decision"] .story-top:not(:has(.meta)) { display: none; }
}