/* LocalBooked · /system and its six part pages (system.html, system/<part>.html).
   Loaded after site.css and components.css; tokens from site.css only. The phone drawings come from phones.css.
   Every part page has the same structure, so the six feel like a set: the head on paper (label, headline, lead,
   button, and the part's phone beside it from 900px, under it on phones), "What it does" and "How it fits" on white,
   the questions on ink, the call to action on lime. */

/* ==================== part pages: the head ==================== */
.part-head {
  display: grid;
  gap: var(--space-2xl);
  padding-block: clamp(2.5rem, 7vh, 5rem) var(--section-pad);
}
.part-head__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .5em;
  margin-bottom: var(--space-xs);
  color: var(--graphite);
  font-size: var(--small-size);
  font-weight: 600;
}
.part-head__label a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}
.part-head__label a:hover { text-decoration-thickness: 2px; }
.part-head .page-title { max-width: 15em; }
.part-head .page-lead { max-width: 32em; }
.part-head__text > .btn--primary { margin-top: var(--space-l); }
.part-head__phone { display: flex; justify-content: center; min-width: 0; }
@media (max-width: 640px) {
  .part-head__text > .btn--primary { display: flex; width: 100%; }
}
@media (min-width: 900px) {
  .part-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--space-2xl); }
}

/* ==================== part pages: what it does, how it fits ==================== */
.part-fit {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--rule);
}
.part-fit__title {
  margin-bottom: var(--space-m);
  font-family: var(--font-display);
  font-size: var(--h3-size);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.part-fit__text { max-width: 34em; color: var(--graphite); text-wrap: pretty; }
.part-fit__text a { color: var(--ink); text-underline-offset: .2em; }
.part-fit__text a:hover { text-decoration-thickness: 2px; }
.part-fit .text-link { margin-top: var(--space-xs); }

/* The six parts in three stages, the part on this page filled lime: where it sits, and the way to its neighbours */
.fit { display: grid; gap: var(--space-m); margin: var(--space-l) 0 0; padding: 0; list-style: none; }
.fit__stage { display: grid; align-content: start; gap: var(--space-xs); padding-top: var(--space-s); border-top: 3px solid var(--ink); }
.fit__name { font-size: var(--small-size); font-weight: 700; text-wrap: balance; }
.fit__parts { display: grid; gap: .25rem; padding: 0; list-style: none; }
.fit__part {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .75rem var(--space-s); /* at least 12px around the text, also when a name wraps */
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.fit__part:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.fit__part[aria-current="page"] { background: var(--lime); }
@media (max-width: 640px) { .fit__parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 641px) { .fit { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-s); } }

/* ==================== the overview (/system) ==================== */
.sys-head__note { margin-top: var(--space-xs); font-weight: 600; }
.sys-head > .btn--primary { margin-top: var(--space-l); }
@media (max-width: 640px) { .sys-head > .btn--primary { display: flex; width: 100%; } }

/* The six parts: white cards on paper, two across from 641px, so each row is one stage (found, answered, booked) */
.sys-parts { display: grid; gap: var(--space-s); margin: 0; padding: 0; list-style: none; }
.sys-part {
  display: grid;
  gap: var(--space-l);
  padding: var(--space-l);
  border-radius: var(--radius);
  background: var(--white);
}
.sys-part__text { display: grid; grid-template-rows: auto auto auto 1fr auto; justify-items: start; }
/* The part's phone, small, beside the text from 1000px; left out on narrower screens (each part page has it) */
.sys-part__phone { display: none; }
@media (min-width: 1000px) {
  .sys-part { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .sys-part__phone { display: block; }
  .sys-part__phone .dp { width: clamp(11.5rem, 4rem + 9vw, 14rem); }
  /* The small phone keeps the drawing's own proportions: the 11px floor of the big phones (phones.css) would make the
     text a third too big for this screen and push bubbles and names out of place. Each part's page has the big one. */
  .sys-part__phone .dp__screen { font-size: 4.3cqw; }
  .sys-part__phone .dp-tag, .sys-part__phone .dp-day { font-size: 3.5cqw; }
  .sys-part__phone .dp-meta, .sys-part__phone .dp-ai__src { font-size: 3.4cqw; }
  /* The notification floats outside the frame, so it measures against the whole phone (sizes as on the big phone) */
  .sys-part__phone .dp { container-type: inline-size; }
  .sys-part__phone .dp-pop__tab { padding: 1.6cqw 3.3cqw 1.3cqw; font-size: 4cqw; }
  .sys-part__phone .dp-note { gap: .8cqw; padding: 4cqw 4.6cqw 4.2cqw; border-radius: 4.6cqw; font-size: 4.3cqw; }
  .sys-part__phone .dp-note__app { gap: 2.4cqw; font-size: 4cqw; }
  .sys-part__phone .dp-note__icon { width: 6cqw; height: 6cqw; border-radius: 1.6cqw; }
}
.sys-part__stage { margin-bottom: var(--space-xs); color: var(--graphite); font-size: var(--small-size); font-weight: 600; }
.sys-part__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--display-track);
  text-wrap: balance;
}
.sys-part__line { margin: var(--space-xs) 0 var(--space-m); color: var(--ink); font-weight: 600; text-wrap: pretty; }
.sys-part .checks { gap: var(--space-s); margin-bottom: var(--space-m); }
@media (min-width: 641px) { .sys-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sys-part { padding: var(--space-l) var(--space-m) var(--space-m); } }

/* How the parts work together: three stages, each under an ink line, like the steps */
.together { display: grid; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; }
.together__stage { display: grid; align-content: start; gap: var(--space-s); padding-top: var(--space-m); border-top: 3px solid var(--ink); }
.together__name {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.together__parts { font-size: var(--small-size); font-weight: 600; }
.together__parts a { text-underline-offset: .25em; }
.together__parts a:hover { text-decoration-thickness: 2px; }
.together__stage > p:last-child { max-width: 30em; color: var(--graphite); text-wrap: pretty; }
.together__end { max-width: 34em; margin-top: var(--space-xl); font-weight: 600; text-wrap: pretty; }
@media (min-width: 900px) { .together { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-l); } }