/* The app's own layer over tokens.css, theme.css and /looks.css. First,
   rastrillo's components in the card page's colours: its tokens are
   pointed at looks.css's own colours and faces, so a box, a list, a
   field or a button is printed on the page as the card page's settings
   are, light or dark as it is. Then the columns of
   its lists, set here because the content security policy forbids
   style attributes. */
:root {
  --rst-font: var(--sans);
  --rst-fs-base: var(--body-size);
  --rst-fs-sm: 0.9375rem;
  --rst-fs-xs: 0.8125rem;
  --rst-fs-lg: 1.25rem;
  --rst-radius: var(--radius);
  --rst-radius-sm: var(--radius);
  --rst-bg: var(--ground);
  --rst-surface: var(--ground);
  --rst-surface-2: light-dark(#f3eee7, #211f1c);
  --rst-line: light-dark(rgb(35 33 31 / 0.3), rgb(244 241 234 / 0.25));
  --rst-line-strong: var(--rule);
  --rst-header-rule: var(--rule);
  --rst-text: var(--on);
  --rst-text-muted: var(--on-soft);
  --rst-text-faint: var(--on-soft);
  --rst-muted: var(--on-soft);
  --rst-accent: var(--on);
  --rst-accent-strong: var(--on);
  --rst-accent-soft: var(--hover);
  --rst-on-accent: var(--chosen-ink);
  --rst-shadow-lift: 0 0 0 transparent;
  --rst-shadow-knob: 0 0 0 transparent;
  --rst-shadow-pop: 0 10px 24px -10px rgb(var(--shade) / 0.6);
}

/* The page's title, in the masthead's face, a size down. */
[rst-page-header] h1 {
  font: var(--display-weight) clamp(1.75rem, 1.1rem + 1.6vw, 2.6rem)/1.05 var(--display);
  font-stretch: var(--display-stretch);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
[rst-box-head] h2 {
  font: var(--display-weight) 1.25rem/1.2 var(--display);
  font-stretch: var(--display-stretch);
}
/* A page of reading: privacy, terms and help. A big wide title and a
   line saying what the page is for; then, on a wide screen, what is on
   the page down the left, kept in view, beside the text, its sections
   ruled off. On a narrow one the contents come first and scroll away.
   doc.js marks the section being read; without it the list is still a
   list of links. */
.doc { --doc-gap: clamp(2.75rem, 5vw, 3.75rem); --doc-rule: light-dark(#cfcac0, #3a3631); padding: clamp(0.75rem, 4vw, 3.25rem) 0 3rem; }
.doc-head { display: grid; gap: 1.25rem; max-width: 44rem; padding-bottom: clamp(2rem, 4vw, 3rem); }
.doc-head h1 {
  margin: 0;
  font: 850 clamp(2.75rem, 1.6rem + 3.6vw, 4.75rem)/0.92 var(--display);
  font-stretch: 125%;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.doc-head p { margin: 0; max-width: 34rem; font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); line-height: 1.4; color: var(--on-soft); text-wrap: pretty; }
.doc-body { display: grid; gap: var(--doc-gap); }
@media (min-width: 52rem) {
  .doc-body { grid-template-columns: minmax(12rem, 16rem) minmax(0, 40rem); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
  .doc-contents { position: sticky; top: 2rem; }
}
.doc-contents ol { list-style: none; margin: 0; padding: 0; border-left: 1.5px solid var(--doc-rule); }
[rst-page] .doc-contents a {
  display: block;
  margin-left: -1.5px;
  padding: 0.55rem 0 0.55rem 1rem;
  border-left: 2.5px solid transparent;
  color: var(--on-soft);
  line-height: 1.3;
  text-decoration: none;
}
[rst-page] .doc-contents a:hover { color: var(--on); }
[rst-page] .doc-contents a[aria-current] { border-left-color: var(--on); color: var(--on); font-weight: 650; }
.doc-text { display: grid; gap: var(--doc-gap); font-size: 17px; line-height: 1.62; text-wrap: pretty; }
.doc-text section { display: grid; gap: 1rem; scroll-margin-top: 2rem; }
.doc-text section + section { border-top: 1px solid var(--doc-rule); padding-top: var(--doc-gap); }
.doc-text h2 {
  margin: 0;
  font: 800 1.5rem/1.15 var(--display);
  font-stretch: 112%;
  letter-spacing: -0.015em;
}
.doc-text :is(p, ul, ol) { margin: 0; }
.doc-text :is(ul, ol) { display: grid; gap: 0.4rem; padding-left: 1.25rem; }
[rst-page] .doc-text a { text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
[rst-page] .doc-text a:hover { color: var(--chosen); }
.doc-text h3 { margin: 0.5rem 0 -0.5rem; font-size: 1.0625rem; line-height: 1.3; }

/* How it works opens as an invitation: the sample card beside what
   PrintCard does and the way to start, then the four things that
   happen, numbered, before the detail. */
.help-head { max-width: none; grid-template-columns: minmax(0, 1fr); align-items: center; }
.help-head-text { display: grid; gap: 1.25rem; justify-items: start; max-width: 34rem; }
.help-head .home-sample { max-width: 26rem; }
@media (min-width: 52rem) {
  .help-head { grid-template-columns: minmax(0, 1fr) minmax(16rem, 26rem); gap: clamp(2rem, 6vw, 5rem); }
}
.help-journey { padding-bottom: var(--doc-gap); }
.help-journey ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: journey;
}
.help-journey li {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  padding: 1.1rem 1.25rem 1.25rem;
  border: 1.5px solid var(--doc-rule);
  border-radius: var(--radius);
  counter-increment: journey;
}
.help-journey li::before {
  content: counter(journey);
  font: var(--display-weight) 2.1rem/1 var(--display);
  font-stretch: var(--size-stretch);
  color: var(--logo-red);
}
.help-journey h3 { margin: 0; font: var(--display-weight) 1.25rem/1.15 var(--display); font-stretch: var(--display-stretch); }
.help-journey p { margin: 0; color: var(--on-soft); line-height: 1.5; }
@media (max-width: 30rem) {
  .help-journey li { grid-template-columns: 2rem 1fr; column-gap: 0.75rem; padding: 0.9rem 1rem; }
  .help-journey li::before { grid-row: span 2; font-size: 1.75rem; }
}
.help > .doc-text { max-width: 40rem; }
[rst-page] a:not([rst-btn]):not(.rst-nm) { color: inherit; text-underline-offset: 0.15em; }
/* The ordering steps' own colours, and no underline. */
[rst-page] .card-steps a { color: var(--on); text-decoration: none; }
[rst-page] .card-steps a[aria-current] { color: var(--chosen-ink); }
[rst-page] :focus-visible, [rst-skip]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Buttons as the card page's: ruled, and solid green when they are the
   one to press: the way on towards an order. */
[rst-btn] { min-height: 2.75rem; padding: 0.5rem 1rem; border-width: 1.5px; border-color: var(--rule); background: transparent; font-weight: 650; }
[rst-btn]:hover { border-color: var(--on); background: var(--hover); color: var(--on); }
[rst-btn~="primary"] { background: var(--go); border-color: var(--go); color: var(--go-ink); }
[rst-btn~="primary"]:hover { background: var(--go); color: var(--go-ink); opacity: 0.88; }
/* Danger is restated after the transparent rule above, which would
   otherwise take its fill and leave a pale label on a pale page. It is
   the card page's crimson (looks.css --danger), brighter than the
   theme's negative tone and kept clear of the vermilion. */
[rst-btn~="danger"], [rst-btn~="danger"]:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--danger-ink);
}
[rst-btn~="danger"]:hover { filter: brightness(0.9); }

/* Fields are white labels on the wrapper, as the words box is. */
[rst-input], [rst-textarea], [rst-page] select {
  background: var(--field);
  color: var(--field-ink);
  border-color: var(--rule);
  min-height: 2.75rem;
}

/* The admin pages: its own tabs at the top of the sheet, ruled off as the
   card page's settings are, and a wider, denser column for the lists. */
[rst-seg-tabs] {
  margin: 0 0 1.5rem;
  width: fit-content;
  padding: 0;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: transparent;
}
[rst-seg-tabs] a { padding: 0.6rem 1.1rem; font-size: 1rem; color: var(--on); border-radius: 0; }
[rst-seg-tabs] a + a { border-left: 1px solid var(--rule); }
[rst-seg-tabs] a:hover { background: var(--hover); color: var(--on); }
[rst-seg-tabs] a[aria-current] { background: var(--chosen); color: var(--chosen-ink); box-shadow: none; }
/* The column starts at the masthead's gutter, as the card page's does. */
main[rst-page] { flex: 1; width: 100%; margin: 0; padding: 1.75rem clamp(1rem, 4vw, 3rem) 3rem; }
[rst-page].admin {
  --rst-fs-base: 1rem;
  --rst-fs-sm: 0.875rem;
  --rst-fs-xs: 0.78125rem;
  max-width: 86rem;
  font-size: var(--rst-fs-base);
}

.accounts { --rst-cols: 2fr 1fr 1fr 1fr; }
.entries { --rst-cols: 1fr 1fr 2fr 1.5fr; }
.payments { --rst-cols: 1.2fr 1fr 1fr 2fr; }
.payments small { color: var(--rst-text-muted); display: block; font-size: var(--rst-fs-xs); }
.prices { --rst-cols: 1.2fr 1fr 1fr 1.4fr 1fr 1fr; }
.areas { --rst-cols: 1fr 1fr 2fr; }
.price-total { font-size: 2.5rem; font-weight: 700; line-height: 1.1; margin: 0.25rem 0; }
#price-result[aria-busy="true"] { opacity: 0.6; transition: opacity 0.2s 0.15s; }
/* tokens.css lays out [rst-form-foot] as flex, which outranks the
   hidden attribute; calculator.js hides the button row with it. */
[rst-form-foot][hidden] { display: none; }
.price-usual { margin-top: 0.5rem; }
.book { --rst-cols: 2fr 1fr 0.8fr 0.8fr 0.9fr 1.2fr; }
.postal { font-style: normal; line-height: 1.5; }
.orders { --rst-cols: 1.6fr 2fr 0.9fr 1fr 0.8fr 0.8fr; }
.events { --rst-cols: 1.3fr 0.8fr 4fr; }
.emails { --rst-cols: 1.2fr 1.2fr 0.8fr 3fr; }
.email-kinds { --rst-cols: 1.2fr 2fr 2fr; }
.email-kinds small { color: var(--rst-text-muted); display: block; font-size: var(--rst-fs-xs); }
.email-body { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; line-height: 1.5; max-width: 40rem; margin: 1rem 0; }
.emails small { color: var(--rst-text-muted); display: block; font-size: var(--rst-fs-xs); }
.event-detail { overflow-wrap: anywhere; font-size: 0.8125rem; }
.card-list { display: grid; gap: 1rem; }
.card-preview { display: block; max-width: 100%; height: auto; box-shadow: 0 1px 4px rgb(0 0 0 / 0.25); }
.card-preview.portrait { width: 9rem; }
.card-preview.landscape { width: 12rem; }
.order-card { display: flex; gap: 1.25rem; align-items: center; }
.order-card .card-preview.portrait { width: 8rem; }
.order-card .card-preview.landscape { width: 11rem; }
.order-status { font-size: 1.25rem; font-weight: 650; margin: 0 0 0.75rem; }
.order-update[hidden] { display: none; }
.account-orders { --rst-cols: 1.5fr 1fr 0.8fr 1fr; }

/* On the sheet, a page's heading has no rule under it, and a form has
   no box round it, nor has anything on a narrow sheet, which holds one
   thing: the sheet is the box. */
[rst-page-header] { border-bottom: 0; padding-bottom: 0; }
[rst-box]:has(> [rst-form]),
body[data-sheet="narrow"] [rst-box] { border: 0; padding: 0; background: none; }
/* A confirm page's buttons stand clear of what they confirm. */
[rst-form-actions] { margin-top: 1.5rem; }

/* A form's buttons, as macOS lays out a dialog's: together at its foot,
   aligned right, the primary button on the far right and the others to
   its left (DESIGN.md, Buttons). rastrillo's form foot puts the primary
   first, so it comes first to the keyboard; laid out from the right, it
   is the rightmost. Its confirm form does this already. */
[rst-form-foot] { flex-direction: row-reverse; justify-content: flex-start; flex-wrap: wrap; }

/* The account page: a row for each thing about the account, ruled off
   from the next, its label, what it is, and what to do about it at the
   right; then the orders; then signing out and deleting it, quietly. */
.account-rows { margin: 0 0 2rem; }
.account-rows > div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  gap: 0.25rem 1.5rem;
  align-items: baseline;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
}
.account-rows > div:last-child { border-bottom: 1px solid var(--rule); }
.account-rows dt { color: var(--on-soft); font-size: 0.9375rem; }
.account-rows dd { margin: 0; }
.account-rows dd small { display: block; color: var(--on-soft); font-size: 0.875rem; margin-top: 0.15rem; }
.account-rows .postal { font-style: normal; }
.account-act { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; text-align: right; }
.account-orders-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0 0 0.75rem; }
.account-orders-head h2 { margin: 0; font-size: 1.125rem; }
.account-foot { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: 0.9375rem; }
.account-foot form { display: contents; }
.account-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
@media (max-width: 34rem) {
  .account-rows > div { grid-template-columns: minmax(0, 1fr); }
  .account-act { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1rem; text-align: left; }
}
.account-none { margin: 0; color: var(--on-soft); }

/* Your cards: each card a box, its front centred in a square so tall
   and wide cards line up, its name, its reference and the date it was
   saved, and its actions: Add to cart (with the cart's own icon, solid
   green only for the card just saved), Open, and Delete, quiet. The card
   just saved comes first, the save's notice a green strip in its box.
   On a phone, Add to cart takes the box's width, with Delete and Open
   side by side under it. */
.cards-intro { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 0 0 1rem; }
.card-list { display: grid; gap: 1rem; }
.saved-card {
  display: grid;
  grid-template-columns: 9rem 1fr;
  grid-template-areas: "notice notice" "look text" "look actions";
  grid-template-rows: auto auto 1fr;
  gap: 0.75rem 1.25rem;
  align-items: start;
}
.saved-card-notice {
  grid-area: notice;
  display: flex; gap: 0.5rem; align-items: center;
  margin: 0; padding: 0.6rem 0.85rem;
  border-radius: var(--rst-radius);
  background: var(--rst-tone-positive-bg);
  color: var(--rst-tone-positive-fg);
  font-weight: 600;
}
.saved-card-notice .icon { width: 1.25rem; height: 1.25rem; flex: none; }
.saved-card-look {
  grid-area: look;
  display: grid; place-items: center;
  aspect-ratio: 1;
  background: var(--rst-surface-2);
  border-radius: var(--rst-radius);
}
.saved-card-look .card-preview { width: auto; height: auto; max-width: 82%; max-height: 82%; }
.saved-card-text { grid-area: text; min-width: 0; }
.saved-card h2 { margin: 0 0 0.25rem; font-size: 1.125rem; }
.saved-card-meta { margin: 0; color: var(--rst-text-muted); font-size: 0.9375rem; line-height: 1.45; }
.saved-card-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.saved-card-actions form { display: contents; }
.saved-card-actions [rst-btn] .icon { width: 1.125rem; height: 1.125rem; }
/* Delete is quiet: no outline until the pointer is on it. */
.saved-card-delete[rst-btn] { border-color: transparent; background: none; color: var(--rst-text-muted); }
.saved-card-delete[rst-btn]:hover { border-color: var(--rst-line-strong); color: var(--rst-text); }
.card-list > [rst-box] { margin: 0; }
/* A page header's one action stands beside the heading, at its top. */
[rst-page-header]:has(> [rst-btn]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem 1.5rem; align-items: start; }
@media (max-width: 40rem) {
  /* Make another card, full width under the intro. */
  [rst-page-header]:has(> [rst-btn]) { grid-template-columns: 1fr; }
  [rst-page-header] > [rst-btn] { justify-content: center; }
  .saved-card { grid-template-columns: 6rem 1fr; grid-template-areas: "notice notice" "look text" "actions actions"; grid-template-rows: auto; }
  .saved-card-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .saved-card-add, .saved-card-add > [rst-btn] { grid-column: 1 / -1; }
  .saved-card-add > [rst-btn], .saved-card-actions > [rst-btn] { width: 100%; justify-content: center; }
  .saved-card-delete { order: 1; }
  .saved-card-open { order: 2; }
}