/* Narto · /systemet and its five part pages (systemet.html, systemet/<part>.html). Where the structure comes from: DESIGN.md.
   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 five feel like a set: the head on concrete (label, headline, the
   plan line, lead, button, and the part's phone beside it from 900px, under it on phones), "Det gør den" and
   "Sådan passer den ind" on white, the questions on ink, the call to action on green. */

/* ==================== 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__plan { margin-top: var(--space-s); color: var(--accent-text); font-size: var(--small-size); font-weight: 700; }
.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) {
  /* The phone at the top of its column, level with the label, and larger (20rem) (fourth round) */
  .part-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: var(--space-2xl); }
  .part-head__phone .dp { width: 20rem; }
}

/* ==================== part pages: what it does, how it fits ==================== */
.part-fit {
  margin-top: var(--space-xl);
  padding-top: var(--space-l);
  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;
}
.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 five parts as one row of equal cards under "Sådan passer den ind": each card has its group as a small line and
   the part's name; the card for this page has a green border and the line "Du er her". Five across from 1000px, two
   across below (the fifth card spans both columns, so no column is ever empty). */
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s); margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.fit > li { display: flex; }
.fit > li:last-child { grid-column: 1 / -1; }
.fit__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
  min-height: 6rem;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius);
  background: var(--concrete);
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--ink);
  text-decoration: none;
}
.fit__group { color: var(--graphite); font-size: var(--small-size); font-weight: 600; line-height: 1.3; }
.fit__name { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; line-height: 1.02; text-wrap: balance; }
.fit__here { margin-top: auto; padding-top: var(--space-xs); color: var(--accent-text); font-size: var(--small-size); font-weight: 700; }
.fit__card:hover .fit__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.fit__card[aria-current="page"] { box-shadow: inset 0 0 0 3px var(--accent); background: var(--white); }
@media (min-width: 1000px) {
  .fit { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fit > li:last-child { grid-column: auto; }
  .fit__card { min-height: 9.5rem; }
}

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

/* The five parts: white cards on concrete, two across from 641px (the fifth alone on its row: after the job) */
.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 auto 1fr auto; justify-items: start; } /* stage, name, plan, line, points, link */
/* 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-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__plan { margin-top: var(--space-xs); color: var(--accent-text); font-size: var(--small-size); font-weight: 700; }
.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;
  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;
}
.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); } }