/* ══════════════════════════════════════════════════════════════════════════
   The trust center — trust.bagdrop.ai.
   Plain CSS rather than Tailwind, and its own file rather than a share of
   `app.css`, for one reason: this host loads no JavaScript and nothing else
   from the application, so the stylesheet it does load should be the only
   thing it costs a reader. The values are the brand's own, ported from
   app/assets/tailwind/application.css — squared corners included, which is
   why no border-radius appears anywhere below.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --ground:    #F8F5EF;
  --surface:   #FFFFFF;
  --surface-2: #EDE8DC;
  --ink:       #1B2B4B;
  --ink-deep:  #0F1E35;
  --ink-soft:  #6B7C8E;
  --rule:      #D4CAB8;
  --rule-soft: #E4DCCB;
  --gold:      #C9A84C;
  --gold-dk:   #8F6B1E;
  --mast-bg:   #0F1E35;
  --mast-ink:  #F8F5EF;
  --mast-soft: #B8C8D8;

  /* Semantic status, deliberately not the gold accent — a control's state and
     the brand's accent must never be confusable. */
  --ok:     #3D6B5E;  --ok-bg:     #E6EFEC;
  --part:   #8F6B1E;  --part-bg:   #F5EDD8;
  --design: #5F7186;  --design-bg: #E7ECF1;
  --none:   #8E2A2A;  --none-bg:   #F7E9E7;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0F1E35; --surface: #17263F; --surface-2: #1B2B4B;
    --ink: #F1EDE4; --ink-deep: #FFFFFF; --ink-soft: #A8B8C8;
    --rule: #2C4272; --rule-soft: #223559;
    --gold: #C9A84C; --gold-dk: #E8D4A0;
    --mast-bg: #0A1424; --mast-ink: #F8F5EF; --mast-soft: #B8C8D8;
    --ok: #8FBFB0; --ok-bg: #14302A;
    --part: #E8D4A0; --part-bg: #332C18;
    --design: #B8C8D8; --design-bg: #1E2C42;
    --none: #E89898; --none-bg: #351B1F;
  }
}
:root[data-theme="dark"] {
  --ground: #0F1E35; --surface: #17263F; --surface-2: #1B2B4B;
  --ink: #F1EDE4; --ink-deep: #FFFFFF; --ink-soft: #A8B8C8;
  --rule: #2C4272; --rule-soft: #223559;
  --gold: #C9A84C; --gold-dk: #E8D4A0;
  --mast-bg: #0A1424; --mast-ink: #F8F5EF; --mast-soft: #B8C8D8;
  --ok: #8FBFB0; --ok-bg: #14302A;
  --part: #E8D4A0; --part-bg: #332C18;
  --design: #B8C8D8; --design-bg: #1E2C42;
  --none: #E89898; --none-bg: #351B1F;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.trust {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Instrument Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.trust h1, .trust h2, .trust h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500; line-height: 1.15; margin: 0;
  text-wrap: balance; color: var(--ink-deep);
}
.trust h1 { font-size: 2.875rem; letter-spacing: -.015em; }
.trust h2 { font-size: 1.875rem; }
.trust h3 { font-size: 1.1875rem; }
.trust p  { margin: 0; max-width: 66ch; }
.trust p + p { margin-top: .7rem; }
.trust ul, .trust ol { margin: 0; padding-left: 1.15rem; max-width: 68ch; }
.trust li::marker { color: var(--gold-dk); }
.trust li + li { margin-top: .35rem; }
.trust a { color: inherit; text-decoration-color: var(--gold); text-underline-offset: 2px; }
.trust a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.trust ::selection { background: var(--gold); color: #0F1E35; }
.trust code {
  font-family: "DM Mono", ui-monospace, monospace; font-size: .8125em;
  background: var(--surface-2); padding: .08em .35em; color: var(--ink);
}
.trust strong { font-weight: 600; color: var(--ink-deep); }

.eyebrow {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .625rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-dk);
}
.meta {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .6875rem; letter-spacing: .04em; color: var(--ink-soft);
  line-height: 1.5;
}

/* ── Masthead ───────────────────────────────────────────────────────────── */
.mast { background: var(--mast-bg); color: var(--mast-ink); border-bottom: 2px solid var(--gold); }
.mast .inner { max-width: 74rem; margin: 0 auto; padding: 3.25rem 1.5rem 2.75rem; display: grid; gap: 1.25rem; }
.mast .eyebrow { color: var(--gold); }
.mast h1 { color: var(--mast-ink); max-width: 20ch; }
.mast .lede { color: var(--mast-soft); font-size: 1.0625rem; max-width: 60ch; }
.stamp {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center;
  border-top: 1px solid rgba(201, 168, 76, .3); padding-top: 1.125rem; margin-top: .25rem;
}
.stamp .meta { color: var(--mast-soft); }
.actions { display: flex; flex-wrap: wrap; gap: .625rem; margin-left: auto; }
.btn {
  font-family: "DM Mono", ui-monospace, monospace; font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .625rem 1rem; border: 1px solid var(--gold); background: none;
  color: var(--gold); text-decoration: none; display: inline-block;
  transition: background .15s ease, color .15s ease;
}
.btn:hover { background: var(--gold); color: #0F1E35; }
.btn.solid { background: var(--gold); color: #0F1E35; }
.btn.solid:hover { background: #E8D4A0; }

/* ── Shell: rail + column ───────────────────────────────────────────────── */
.shell { max-width: 74rem; margin: 0 auto; padding: 0 1.5rem; display: grid; gap: 3rem; }
.rail { display: none; }
@media (min-width: 68rem) {
  .shell { grid-template-columns: 13rem minmax(0, 1fr); align-items: start; gap: 4rem; }
  .rail { display: block; position: sticky; top: 1.5rem; padding-top: 3rem; }
}
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.rail a {
  display: block; padding: .3rem 0 .3rem .875rem; font-size: .8125rem;
  color: var(--ink-soft); text-decoration: none; border-left: 2px solid var(--rule-soft);
  line-height: 1.35;
}
.rail a:hover { color: var(--ink-deep); border-left-color: var(--gold); }
.rail .rail-head { margin: 0 0 .75rem .875rem; }

.trust main { padding-top: 3rem; min-width: 0; }
.trust section { padding-bottom: 3.25rem; }
.trust section + section { border-top: 1px solid var(--rule-soft); padding-top: 3rem; }
.sec-head { display: grid; gap: .5rem; margin-bottom: 1.75rem; }
.sec-head > p { color: var(--ink-soft); }

/* ── The opening claim ──────────────────────────────────────────────────── */
.thesis { border-left: 3px solid var(--gold); padding-left: 1.5rem; display: grid; gap: .875rem; }
.thesis p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.4375rem; line-height: 1.35; max-width: 36em; color: var(--ink-deep);
}

/* ── Status chips ───────────────────────────────────────────────────────── */
.chip {
  font-family: "DM Mono", ui-monospace, monospace; font-size: .5625rem;
  letter-spacing: .16em; text-transform: uppercase; padding: .25rem .5rem;
  display: inline-block; white-space: nowrap; border: 1px solid currentColor;
}
.chip.ok        { color: var(--ok);     background: var(--ok-bg); }
.chip.partial   { color: var(--part);   background: var(--part-bg); }
.chip.by_design { color: var(--design); background: var(--design-bg); }
.chip.none      { color: var(--none);   background: var(--none-bg); }

.legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-bottom: 1.5rem; }
.legend span { display: inline-flex; align-items: baseline; gap: .5rem; font-size: .8125rem; color: var(--ink-soft); }

/* ── Posture list ───────────────────────────────────────────────────────── */
.posture { display: grid; border-top: 1px solid var(--rule); }
.posture .row {
  display: grid; grid-template-columns: 10.5rem 1fr 6.5rem; gap: .35rem 1.25rem;
  padding: .9rem 0; border-bottom: 1px solid var(--rule-soft); align-items: baseline;
}
.posture .name { font-weight: 600; color: var(--ink-deep); }
.posture .what { color: var(--ink); font-size: .9375rem; }
.posture .st { justify-self: end; }
@media (max-width: 48rem) {
  .posture .row { grid-template-columns: 1fr auto; }
  .posture .what { grid-column: 1 / -1; }
}

/* ── Fact blocks ────────────────────────────────────────────────────────── */
.facts { display: grid; gap: 1.5rem; }
.fact {
  background: var(--surface); border: 1px solid var(--rule);
  border-top: 2px solid var(--gold); padding: 1.25rem 1.5rem;
  display: grid; gap: .75rem;
}
.fact .lead { font-weight: 600; color: var(--ink-deep); font-size: 1rem; }
.fact ul { display: grid; gap: .45rem; }
.fact .src { border-top: 1px solid var(--rule-soft); padding-top: .625rem; margin-top: .25rem; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.tablewrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--surface); }
.trust table { border-collapse: collapse; width: 100%; font-size: .875rem; min-width: 34rem; }
.trust th, .trust td { text-align: left; vertical-align: top; padding: .7rem .875rem; border-bottom: 1px solid var(--rule-soft); }
.trust th {
  font-family: "DM Mono", ui-monospace, monospace; font-size: .5625rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dk);
  font-weight: 500; background: var(--surface-2); white-space: nowrap;
}
.trust tr:last-child td { border-bottom: 0; }
.trust td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* A window the page read from the code that enforces it, rather than one somebody
   typed here. Marked so a reader can tell the difference, because that difference
   is the whole argument for serving this page from the application. */
.derived { border-bottom: 1px dotted var(--gold-dk); cursor: help; }

/* ── Gaps ───────────────────────────────────────────────────────────────── */
.gaps { display: grid; gap: .75rem; }
.gap {
  display: grid; grid-template-columns: 7rem 1fr; gap: .35rem 1.25rem;
  background: var(--surface); border: 1px solid var(--rule); padding: .9rem 1.125rem;
}
.gap .chip { align-self: start; justify-self: start; }
.gap .body { display: grid; gap: .3rem; }
@media (max-width: 40rem) { .gap { grid-template-columns: 1fr; } }

/* ── Q&A ────────────────────────────────────────────────────────────────── */
.qgroup { margin-bottom: 2rem; }
.qgroup > .eyebrow { display: block; margin-bottom: .75rem; }
.qa { display: grid; border-top: 1px solid var(--rule); }
.qa > div {
  display: grid; grid-template-columns: minmax(11rem, 17rem) 1fr; gap: .3rem 1.5rem;
  padding: 1rem 0; border-bottom: 1px solid var(--rule-soft);
}
.qa .q { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.1875rem; line-height: 1.3; color: var(--ink-deep); }
.qa .a { display: grid; gap: .45rem; }
.qa .a p { font-size: .9375rem; max-width: 62ch; }
@media (max-width: 46rem) { .qa > div { grid-template-columns: 1fr; } }

/* ── Contact ────────────────────────────────────────────────────────────── */
.contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.contact { border: 1px solid var(--rule); background: var(--surface); padding: 1rem 1.125rem; display: grid; gap: .25rem; }
.contact .who { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.125rem; color: var(--ink-deep); }
.contact .addr { font-family: "DM Mono", ui-monospace, monospace; font-size: .8125rem; }

/* ── Changelog ──────────────────────────────────────────────────────────── */
.log { display: grid; border-top: 1px solid var(--rule); }
.log > div { display: grid; grid-template-columns: 7rem 1fr; gap: .25rem 1.25rem; padding: .7rem 0; border-bottom: 1px solid var(--rule-soft); }
.log .when { font-variant-numeric: tabular-nums; }
@media (max-width: 34rem) { .log > div { grid-template-columns: 1fr; } }

.trust footer { border-top: 1px solid var(--rule); background: var(--surface-2); }
.trust footer .inner { max-width: 74rem; margin: 0 auto; padding: 1.75rem 1.5rem 3rem; display: grid; gap: .5rem; }

/* ══════════════════════════════════════════════════════════════════════════
   The one-pager — its own route, and one sheet of paper.
   ══════════════════════════════════════════════════════════════════════════ */
.op-sheet { max-width: 52rem; margin: 0 auto; padding: 2rem 1.5rem 3rem; display: grid; gap: 1.125rem; }
.op-bar {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  padding-bottom: 1rem; margin-bottom: .5rem; border-bottom: 1px solid var(--rule);
}
.op-head {
  background: var(--mast-bg); color: var(--mast-ink);
  border-bottom: 2px solid var(--gold); padding: 1.25rem 1.375rem;
  display: grid; gap: .375rem;
}
.op-head .eyebrow { color: var(--gold); }
.op-head h2 { color: var(--mast-ink); font-size: 1.625rem; }
.op-head .meta { color: var(--mast-soft); }
.op-pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: .625rem; }
.op-pillar { border: 1px solid var(--rule); border-left: 2px solid var(--gold); padding: .625rem .75rem; display: grid; gap: .2rem; }
.op-pillar .t { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.0625rem; color: var(--ink-deep); line-height: 1.2; }
.op-pillar p { font-size: .8125rem; line-height: 1.45; color: var(--ink); }
.op-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem; align-items: start; }
.op-block { display: grid; gap: .4rem; }
.op-block > .eyebrow { border-bottom: 1px solid var(--rule); padding-bottom: .3rem; }
.op-rows { display: grid; }
.op-rows > div {
  display: flex; gap: .625rem; justify-content: space-between; align-items: baseline;
  padding: .3rem 0; border-bottom: 1px solid var(--rule-soft); font-size: .8125rem;
}
.op-rows > div:last-child { border-bottom: 0; }
.op-note { font-size: .8125rem; line-height: 1.5; }
.op-foot { border-top: 1px solid var(--rule); padding-top: .625rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; justify-content: space-between; }
@media (max-width: 40rem) { .op-grid, .op-pillars { grid-template-columns: 1fr; } }

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
  :root {
    --ground: #fff; --surface: #fff; --surface-2: #F4F1EA;
    --ink: #1B2B4B; --ink-deep: #0F1E35; --ink-soft: #5A6A7C;
    --rule: #C7BCA6; --rule-soft: #DDD4C2;
    --mast-bg: #0F1E35; --mast-ink: #F8F5EF; --mast-soft: #C8D4E0;
  }
  body.trust { font-size: 9.5pt; line-height: 1.42; background: #fff; }
  .rail, .actions, .op-bar, .noprint { display: none !important; }
  .mast { border-bottom-width: 1.5pt; }
  .mast .inner { padding: 1.1cm 0 .8cm; }
  .trust h1 { font-size: 24pt; }
  .trust h2 { font-size: 15pt; }
  .shell { display: block; padding: 0; max-width: none; }
  .trust main { padding-top: .6cm; }
  .trust section { padding-bottom: .5cm; }
  .trust section + section { padding-top: .5cm; }
  .sec-head, .fact, .gap, .contact, .qa > div, .posture .row, .trust tr { page-break-inside: avoid; }
  .trust h2, .trust h3 { page-break-after: avoid; }
  .tablewrap { overflow: visible; border-color: #999; }
  .trust table { min-width: 0; font-size: 8pt; }
  .trust a { text-decoration: none; }
  @page { margin: 1.4cm 1.5cm; }
}

/* The one-pager is exactly one page, so it gets its own, tighter print scale. */
@media print {
  body.trust.onepager { font-size: 8.4pt; }
  .onepager .op-sheet { max-width: none; padding: 0; gap: .34cm; page-break-inside: avoid; }
  .onepager .op-head { padding: .42cm .5cm; }
  .onepager .op-head h2 { font-size: 17pt; }
  .onepager .op-pillar .t { font-size: 10.5pt; }
  .onepager .op-pillar p,
  .onepager .op-rows > div,
  .onepager .op-note { font-size: 7.6pt; line-height: 1.36; }
  .onepager .chip { font-size: 5.4pt; padding: .1rem .3rem; }
}

@page { margin: 1.4cm 1.5cm; }