/* RosterPress (working name): what the public pages need beyond theme.css. Module D, "offer".
   The same tokens and nothing else: no new colour, no new font, no type size or space step that
   theme.css doesn't define, nothing that moves. Customer text is never re-cased here either:
   capitals are written in the HTML. A public page is the same job ticket as the tool: a cool grey
   desk, white ruled sheets, a header whose text starts on the sheets' left edge. */

/* the masthead: the ticket header's shape, for a page that has no order open */
.masthead { background: var(--sheet); border-bottom: 1px solid var(--ink); min-height: var(--bar); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-6); padding-block: var(--s-2); padding-inline: max(var(--s-6), calc((100% - var(--page)) / 2 + var(--s-6))); }
.masthead .name { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; font: 600 var(--t-15)/var(--l-15) var(--sans); color: var(--ink); text-decoration: none; }
.masthead .name img { display: block; width: 20px; height: 20px; }
.masthead nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0 var(--s-6); }
.masthead nav a { display: inline-flex; align-items: center; min-height: 40px; font: 600 var(--t-13)/var(--l-13) var(--sans); color: var(--ink-2); text-decoration: none; }
.masthead nav a:hover { color: var(--ink); text-decoration: underline; }
.masthead nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }

/* sheets on a public page are read, not worked in: a little more room than the tool's */
/* every sheet header is one height, with or without a state tag, so neighbouring sheets' rules line up */
.offer .sheet > header { min-height: var(--s-12); padding: var(--s-2) var(--s-6); }
.offer .sheet > .body { padding: var(--s-6); }
/* headings in outline order: a sheet's label is an h2 written in capitals, a heading inside it an h3 */
.eyebrow { font: 600 var(--t-13)/var(--l-13) var(--sans); letter-spacing: 0.04em; color: var(--ink-2); }
.title { font: 600 var(--t-18)/var(--l-18) var(--sans); letter-spacing: 0; color: var(--ink); }
.offer .sheet > header .aside { margin-left: auto; }

/* reading text */
.flow > * + * { margin-top: var(--s-3); }
.flow > .title:not(:first-child) { margin-top: var(--s-8); }
.flow > .cols:not(:first-child), .flow > dl:not(:first-child), .flow > .band:not(:first-child) { margin-top: var(--s-6); }
.measure { max-width: 720px; }
.lead { font-size: var(--t-18); line-height: var(--l-18); color: var(--ink-2); }
.offer ul.list { padding-left: 20px; }
.offer ul.list li + li, .offer ol.list li + li { margin-top: var(--s-2); }
.offer ul.list li::marker { color: var(--ink-3); }
/* numbered steps: the figure sits on the text's own left edge, so nothing hangs outside the column */
.offer ol.list { list-style: none; counter-reset: step; }
.offer ol.list li { counter-increment: step; display: grid; grid-template-columns: 20px minmax(0, 1fr); }
.offer ol.list li::before { content: counter(step); font: 600 var(--t-15)/var(--l-15) var(--mono); color: var(--ink-3); }
.nb { white-space: nowrap; }
.offer strong { font-weight: 600; }
.quiet { color: var(--ink-2); }

/* columns */
.cols { display: grid; gap: var(--s-6) var(--s-12); align-items: start; }
.cols.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols > [data-before-open] { grid-column: 1 / -1; }   /* the line that says purchasing isn't open yet sits above both columns */
.cols.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-8); }
.cols.hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6) var(--s-8); align-items: stretch; }
.cols > .ruled { border-left: 1px solid var(--rule-2); padding-left: var(--s-12); margin-left: calc(-1 * var(--s-6)); }
.cols.pair { gap: var(--s-6); align-items: stretch; }   /* two sheets side by side: the gap between sheets, and one height */

/* the first sheet of the offer page */
.hero h1 { font: 600 var(--t-32)/var(--l-32) var(--sans); letter-spacing: -0.01em; }
.hero .pitch { display: flex; flex-direction: column; justify-content: center; gap: var(--s-4); padding-block: var(--s-4); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }

/* what the owner sees first: three small sheets on a piece of the desk, in the tool's own order */
.glance { background: var(--desk); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s-4); display: grid; gap: var(--s-3); align-content: start; }
.glance > .caption { color: var(--ink-2); }
.glance .sheet > header { padding: var(--s-2) var(--s-4); }
.glance .sheet > .body { padding: var(--s-3) var(--s-4); }
.glance .sheet > .body p + p { margin-top: var(--s-1); }

/* the row of links to this page's sections */
.onpage { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-6); padding: var(--s-1) var(--s-6); }
.onpage .eyebrow { margin-right: var(--s-2); }
.onpage a { display: inline-flex; align-items: center; min-height: 40px; font-size: var(--t-13); line-height: var(--l-13); }

/* six short rules, three to a row */
.points .title { font-size: var(--t-15); line-height: var(--l-15); }
.points > div { border-top: 1px solid var(--ink); padding-top: var(--s-3); }
.points > div > * + * { margin-top: var(--s-2); }

/* a demonstration still: a sheet whose header says what the picture shows */
.stills { display: grid; gap: var(--s-6); }
.still > figcaption { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--s-4); padding: var(--s-3) var(--s-6); border-bottom: 1px solid var(--rule); }
.still > figcaption .n { grid-row: 1 / span 2; font: 600 var(--t-18)/var(--l-18) var(--mono); color: var(--ink-3); }
.still > figcaption .title { font-size: var(--t-15); line-height: var(--l-15); }
.still > figcaption p { color: var(--ink-2); }
.still > a { display: block; }
.still img { display: block; width: 100%; height: auto; }   /* its shape comes from its own width and height attributes: a still that ends above the paid step is shorter than the others */

/* labelled rows: a ruled form, label at the left */
dl.rows > div { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-1) var(--s-6); padding: var(--s-3) 0; border-top: 1px solid var(--rule-2); }
dl.rows > div:first-child { border-top: 1px solid var(--ink); }
dl.rows > div:last-child { border-bottom: 1px solid var(--rule-2); }
dl.rows dt { font-weight: 600; }
dl.rows dd > * + * { margin-top: var(--s-2); }

/* rows quoted from a customer's file: ruled like the file, each followed by what the tool does with it */
table.written caption { caption-side: top; text-align: left; padding-bottom: var(--s-2); font-size: var(--t-12); line-height: var(--l-12); color: var(--ink-3); }
table.written th.num, table.written td.num { text-align: left; }
table.written td { border-bottom: 0; border-top: 1px solid var(--rule-2); }
table.written tbody tr:first-child td { border-top: 0; }
table.written tr.says td { border-top: 0; padding-top: 0; font-size: var(--t-13); line-height: var(--l-13); color: var(--ink-2); }
table.written tbody tr:last-child td { border-bottom: 1px solid var(--rule-2); }

/* the three facts every page and label carries, set out as the ticket header sets them */
.carries { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); border: 1px solid var(--rule); border-bottom-color: var(--ink); border-radius: var(--radius); font-weight: 600; }
.carries > .as-written { flex: 1 0 100%; }   /* the title has its own line; the code and the state share the next */

/* the price */
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.price .amount { font: 700 var(--t-32)/var(--l-32) var(--display); }
.price .terms { color: var(--ink-2); }

/* words quoted exactly from the policy */
.exact { border-left: 4px solid var(--ink); background: var(--desk); padding: var(--s-4); }
.exact > * + * { margin-top: var(--s-3); }

/* a band across the top of a page whose wording is not final: needs a person, so it is the loudest thing */
.band { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-6); border: 1px dashed var(--attention); border-radius: var(--radius); background: var(--attention-wash); }
.band p { flex: 1 1 320px; }

/* a value filled in at launch (offer/PLACEHOLDERS.md): impossible to miss while it is still a placeholder */
.placeholder { font-weight: 600; color: var(--attention); background: var(--attention-wash); outline: 1px dashed var(--attention); outline-offset: 0; padding: 0 var(--s-1); white-space: nowrap; }

/* a document page: the rail lists the documents, as the tool's rail lists its sections */
.rail { display: grid; }
.rail .eyebrow { display: flex; align-items: center; min-height: var(--s-12); padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--rule); }
.rail a { display: flex; align-items: center; min-height: 40px; padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--rule-2); color: var(--ink); text-decoration: none; }
.rail a:last-child { border-bottom: 0; }
.rail a:hover { text-decoration: underline; }
.rail a[aria-current="page"] { font-weight: 600; box-shadow: inset 4px 0 0 var(--ink); }
.doc .body > .measure > h2 { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--rule-2); }
.doc .body > .measure > h2:first-of-type { border-top-color: var(--ink); }
.doc .body > .measure > dl.rows { margin-top: var(--s-4); }
.doc .body > .measure > dl.rows:has(+ h2) > div:last-child { border-bottom: 0; }   /* the next heading brings its own rule; one line, not two */
.doc .updated { color: var(--ink-3); font-size: var(--t-13); line-height: var(--l-13); }

/* the sample package's list of files */
dl.rows.files > div { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.files dt .what { display: block; font-weight: 400; color: var(--ink-2); }
.files dd { text-align: right; }
.files dd .caption { display: block; margin-top: 2px; }   /* a file's size sits under its link, never against it */

/* the foot of every page */
.foot { max-width: var(--page); margin: 0 auto; padding: 0 var(--s-6) var(--s-12); }
.foot > div { border-top: 1px solid var(--ink); padding-top: var(--s-4); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-8); align-items: start; font-size: var(--t-13); line-height: var(--l-13); color: var(--ink-2); }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); justify-content: flex-end; }
.foot nav a { display: inline-flex; align-items: center; min-height: 40px; margin-top: -10px; }
.foot p + p { margin-top: var(--s-1); }

@media (max-width: 760px) {
  .masthead { padding-inline: var(--s-4); }
  .masthead nav { margin-left: 0; width: 100%; gap: 0 var(--s-4); border-top: 1px solid var(--rule-2); }
  .offer .sheet > header { padding: var(--s-2) var(--s-4); }
  .offer .sheet > .body { padding: var(--s-4); }
  .cols, .cols.two, .cols.three, .cols.hero { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .cols > .ruled { border-left: 0; padding-left: 0; margin-left: 0; border-top: 1px solid var(--rule-2); padding-top: var(--s-6); }
  .cols.pair, .stills { gap: var(--s-4); }
  .glance .sheet > header { flex-direction: column; align-items: flex-start; }
  .glance .sheet > header .aside { margin-left: 0; }
  table.written th, table.written td { padding-inline: var(--s-2); }
  table.written tbody tr:last-child td { border-bottom: 0; }   /* the column's own rule follows; one line, not two */
  .with-rail > .rail { order: 2; }                              /* on a phone the document comes first, the list of documents after it */
  .hero h1 { font-size: var(--t-24); line-height: var(--l-24); letter-spacing: 0; }
  .hero .pitch { padding-block: 0; }
  .actions .button { width: 100%; justify-content: center; }
  .onpage { padding: var(--s-1) var(--s-4); gap: 0 var(--s-4); }
  .onpage .eyebrow { width: 100%; margin: var(--s-2) 0 0; }
  .still > figcaption { padding: var(--s-3) var(--s-4); }
  dl.rows > div { grid-template-columns: minmax(0, 1fr); }
  .files dd { text-align: left; }
  .files dd a { overflow-wrap: anywhere; }
  dl.rows.files > div { grid-template-columns: minmax(0, 1fr); }
  .band { padding: var(--s-3) var(--s-4); }
  .foot { padding: 0 var(--s-4) var(--s-8); }
  .foot > div { grid-template-columns: minmax(0, 1fr); }
  .foot nav { justify-content: flex-start; gap: 0 var(--s-4); }
  .foot nav a { margin-top: 0; }
}
@media print { .masthead nav, .onpage, .rail, .actions { display: none !important; } }