/* Narto · the five phone drawings, 17 October 2026 (structure: DESIGN.md). Each part of the system happening
   on a phone, for the three made-up example firms (Kobberly VVS, Spærhøj Tag, Lunvig Varme & Køl), with their
   84 numbers (no "Eksempel" badge under the phones since the sixth round; the example sites carry their own
   "Eksempel. Ikke et rigtigt firma." bar, and the screen-reader text of each drawing starts with "Eksempel:"). Used in the home hero (the website), on the home page ("Det får du"),
   on /systemet and on each part page. The markup of each drawing lives in tools/partials/phones/<part>.html.
   No motion: every phone is plain HTML and CSS and shows its finished frame at once (fourth round). Every phone has
   the same real proportions, 300:633 (fifth round; never shortened to its content: an empty screen is filled with
   content instead, see COPY.md "Tegningerne"). The screen is placed inside the frame (inset, never height: 100%,
   which WebKit cannot resolve against an aspect-ratio box), with a home indicator, standing whole on the page.
   Everything inside the screen is sized in cqw of the screen, so a drawing scales as one piece.
   Tokens from site.css only, plus Kobberly VVS's own colour (--dp-slate) where the drawing shows
   that site's chat (the avatar and the start button). */

.dp {
  --dp-grey: var(--rule); /* incoming bubbles: 90% concrete + 10% ink (falls back to --rule without color-mix) */
  --dp-slate: #0d3b4c;    /* Kobberly VVS's own colours (eksempler/kobberly-vvs), only in its chat */
  position: relative;
  width: min(100%, 17.5rem);
  margin-inline: auto;
  color: var(--ink);
  font-family: var(--font-text);
  line-height: 1.35;
  text-align: left;
  -webkit-user-select: none;
  user-select: none;
}
@supports (color: color-mix(in srgb, red, blue)) {
  .dp { --dp-grey: color-mix(in srgb, var(--concrete) 90%, var(--ink)); }
}
@media (min-width: 641px) { .dp { width: 18.75rem; } }
@media (min-width: 900px) { .dp { width: 20rem; } } /* 320px on a computer, wherever a phone stands (fifth round) */

/* ---------- The phone ---------- */
.dp__frame {
  position: relative;
  aspect-ratio: 300 / 633; /* a real phone, as localbooked.co's: 300 x 633 at 300px wide */
  min-height: 0; /* exactly this ratio, whatever loads inside */
  padding: .4375rem;
  border-radius: 2.75rem;
  background: var(--ink);
  container-type: inline-size; /* the frame, not the screen: the screen's own font-size is in cqw too */
}
.dp__frame::before, .dp__frame::after { /* the side keys */
  content: "";
  position: absolute;
  width: 2px;
  background: var(--ink);
}
.dp__frame::before { left: -2px; top: 19%; height: 10%; border-radius: 1px 0 0 1px; }
.dp__frame::after { right: -2px; top: 24%; height: 13%; border-radius: 0 1px 1px 0; }
.dp__screen {
  position: absolute;
  inset: .4375rem;
  overflow: hidden;
  border-radius: 2.3125rem;
  clip-path: inset(0 round 2.3125rem); /* WebKit lets composited (moving) layers escape overflow alone */
  background: var(--white);
  font-size: max(11px, 4.3cqw);
}
.dp__screen::before { /* the camera cut-out */
  content: "";
  position: absolute;
  top: 3.2cqw;
  left: 50%;
  z-index: 6;
  width: 26cqw;
  height: 7.6cqw;
  margin-left: -13cqw;
  border-radius: 4cqw;
  background: var(--ink);
}
.dp__screen::after { /* the home indicator */
  content: "";
  position: absolute;
  bottom: 2.2cqw;
  left: 33%;
  z-index: 6;
  width: 34%;
  height: 1.4cqw;
  border-radius: 1cqw;
  background: var(--ink);
}
.dp__bar { /* the status bar: time left, signal and battery right */
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 14cqw;
  padding: 0 7cqw 0 9.5cqw;
  font-size: 4.6cqw;
  font-weight: 600;
  line-height: 1;
}
.dp__icons { display: flex; align-items: center; gap: 1.6cqw; }
.dp__icons svg { display: block; width: auto; height: 3.8cqw; fill: currentColor; }

/* ---------- Shared: a text thread ---------- */
.dp-head {
  display: flex;
  align-items: center;
  gap: 2.8cqw;
  min-height: 15cqw;
  padding: 0 4.5cqw 2.6cqw;
  border-bottom: 1px solid var(--rule);
}
.dp-back {
  flex: none;
  width: 3cqw;
  height: 3cqw;
  margin: 0 .6cqw 0 1.2cqw;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg);
}
.dp-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 10.5cqw;
  height: 10.5cqw;
  border-radius: 50%;
  background: var(--graphite);
  color: var(--white);
  font-size: 3.7cqw;
  font-weight: 700;
  line-height: 1;
}
.dp-avatar svg { width: 55%; height: auto; fill: currentColor; }
.dp-name { display: grid; min-width: 0; font-weight: 700; line-height: 1.2; }
.dp-name small { overflow: hidden; color: var(--graphite); font-size: .82em; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
.dp-day {
  padding: 3.4cqw 0 2.4cqw;
  color: var(--graphite);
  font-size: max(10px, 3.5cqw);
  line-height: 1.35;
  text-align: center;
}
.dp-day b { display: block; font-weight: 600; }
.dp-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6cqw;
  padding: 0 4.5cqw;
}
.dp-msg {
  max-width: 84%;
  padding: 2.4cqw 3.8cqw 2.6cqw;
  border-radius: 5.6cqw 5.6cqw 5.6cqw 1.6cqw;
  background: var(--dp-grey);
  text-wrap: pretty;
}
.dp-msg--me, .dp-msg--out { /* the phone's owner: on the right, in ink */
  align-self: flex-end;
  max-width: 80%;
  border-radius: 5.6cqw 5.6cqw 1.6cqw 5.6cqw;
  background: var(--ink);
  color: var(--night-text);
}
.dp-msg--old { color: var(--graphite); }
.dp-msg b { font-weight: 700; }
.dp-link {
  width: 84%;
  padding: 2.4cqw 3.8cqw 2.6cqw;
  border: 1px solid var(--dp-grey);
  border-radius: 1.6cqw 5.6cqw 5.6cqw 5.6cqw;
  background: var(--white);
}
.dp-link b { display: block; font-weight: 700; }
.dp-link > span { display: block; color: var(--graphite); font-size: .85em; text-decoration: underline; text-underline-offset: .2em; }
.dp-meta { color: var(--graphite); font-size: max(10px, 3.4cqw); line-height: 1.3; }
.dp-meta--out { align-self: flex-end; }
.dp-input {
  position: absolute;
  right: 4cqw;
  bottom: 7.5cqw;
  left: 4cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6cqw 1.6cqw 1.6cqw 4.4cqw;
  border-radius: 6.5cqw;
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--graphite);
}
.dp-input i { width: 7cqw; height: 7cqw; border-radius: 50%; background: var(--rule); }

/* A notification on the owner's phone, floating over the drawing's lower part (AI chat) */
.dp-pop {
  position: absolute;
  right: -5%;
  bottom: 3.5%;
  left: -5%;
  z-index: 7;
}
.dp-pop__tab {
  display: inline-block;
  margin-left: 4cqw;
  padding: .3rem .625rem .25rem;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--ink);
  color: var(--night-text);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.2;
}
.dp-note {
  display: grid;
  gap: .15rem;
  padding: .75rem .875rem .8rem;
  border-radius: .875rem;
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--ink);
  font-size: .8125rem;
  line-height: 1.35;
}
.dp-note__app { display: flex; align-items: center; gap: .45rem; color: var(--graphite); font-size: .75rem; }
.dp-note__app b { color: var(--ink); font-weight: 600; }
.dp-note__app > span:last-child { margin-left: auto; }
.dp-note__icon { /* the app's square: ink, with a green chat mark */
  position: relative;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: .3rem;
  background: var(--ink);
}
.dp-note__icon::after {
  content: "";
  position: absolute;
  top: 27%;
  left: 24%;
  width: 52%;
  height: 40%;
  border-radius: .15rem .15rem .15rem 0;
  background: var(--accent);
}
.dp-note__title { font-weight: 700; }

/* ---------- 1. Ny hjemmeside: the Kobberly VVS site on a phone, clean, nothing on top ---------- */
.dp-web__shot img { width: 100%; height: auto; }
/* ---------- 2. SEO og GEO: a search for "tagdækker i nærheden" with Spærhøj Tag among the local results, then an
   AI assistant's answer that names it. No search engine or AI brand. ---------- */
.dp-search { padding: 0 4.5cqw; }
.dp-search__top { display: flex; align-items: center; height: 9cqw; margin-bottom: 1.6cqw; font-family: var(--font-display); font-size: 6.2cqw; font-weight: 800; letter-spacing: -.02em; }
.dp-search__field {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  height: 11cqw;
  padding: 0 4cqw;
  border-radius: 5.5cqw;
  box-shadow: inset 0 0 0 1.5px var(--ink);
  font-weight: 500;
}
.dp-search__field svg { flex: none; width: 4.2cqw; height: auto; fill: none; stroke: var(--ink); stroke-width: 2.4; }
.dp-search__type, .dp-search__type > span { display: block; overflow: hidden; white-space: nowrap; }
.dp-search__tabs { display: flex; gap: 4.4cqw; margin: 2.6cqw 0 2.4cqw; color: var(--graphite); font-size: .9em; }
.dp-search__tabs b { padding-bottom: .8cqw; border-bottom: 2px solid var(--ink); color: var(--ink); font-weight: 600; }
.dp-search__map {
  position: relative;
  height: 44cqw; /* a real map's share of the screen, so the screen is full (fifth round) */
  overflow: hidden;
  border-radius: 3cqw;
  background: var(--concrete);
}
.dp-search__map i { /* roads */
  position: absolute;
  height: 1.6cqw;
  background: var(--white);
}
.dp-search__map i:nth-child(1) { top: 40%; left: -10%; width: 120%; transform: rotate(-8deg); }
.dp-search__map i:nth-child(2) { top: -10%; left: 38%; width: 1.6cqw; height: 130%; transform: rotate(14deg); }
.dp-search__map i:nth-child(3) { top: 74%; left: 30%; width: 90%; transform: rotate(6deg); }
.dp-pin { /* a map pin: a drop with a hole */
  position: absolute;
  width: 5cqw;
  height: 5cqw;
  border-radius: 50% 50% 50% 0;
  background: var(--graphite);
  transform: rotate(-45deg);
}
.dp-pin::after { content: ""; position: absolute; top: 32%; left: 32%; width: 36%; height: 36%; border-radius: 50%; background: var(--concrete); }
.dp-pin:nth-of-type(1) { top: 18%; left: 16%; }
.dp-pin:nth-of-type(2) { top: 52%; left: 70%; }
.dp-pin--hit { top: 26%; left: 50%; width: 6.4cqw; height: 6.4cqw; background: var(--ink); box-shadow: 0 0 0 1cqw var(--accent); }
.dp-places { margin: 1cqw 0 0; padding: 0; list-style: none; }
.dp-places li { display: grid; gap: .6cqw; padding: 2.4cqw 0; border-bottom: 1px solid var(--rule); line-height: 1.25; }
.dp-places i { display: block; height: 2.6cqw; border-radius: 1cqw; background: var(--rule); }
.dp-places i:first-child { width: 58%; }
.dp-places i:last-child { width: 38%; }
.dp-places .dp-places__hit {
  margin-inline: -2.4cqw;
  padding-inline: 2.4cqw;
  border-bottom: 0;
  border-radius: 2.4cqw;
  background: var(--accent-tint);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.dp-places__hit b { font-weight: 700; }
.dp-places__hit > span { color: var(--graphite); font-size: .9em; }
.dp-ai { /* the assistant, as a sheet over the lower part of the screen */
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: grid;
  gap: 2cqw;
  padding: 5cqw 4.5cqw 10cqw;
  border-top: 1px solid var(--rule);
  border-radius: 6cqw 6cqw 0 0;
  background: var(--concrete);
}
.dp-ai::before { /* the grabber */
  content: "";
  position: absolute;
  top: 1.8cqw;
  left: 50%;
  width: 10cqw;
  height: 1.1cqw;
  margin-left: -5cqw;
  border-radius: 1cqw;
  background: var(--rule);
}
.dp-ai__head { display: flex; align-items: center; gap: 2cqw; font-weight: 700; }
.dp-ai__head i { width: 4.4cqw; height: 4.4cqw; border-radius: 1.2cqw; background: var(--ink); box-shadow: inset 0 0 0 1.2cqw var(--ink), inset 0 0 0 4cqw var(--accent-text); }
.dp-ai .dp-msg { max-width: 92%; background: var(--white); }
.dp-ai .dp-msg--me { justify-self: end; max-width: 80%; background: var(--ink); }
.dp-ai__src { color: var(--graphite); font-size: max(10px, 3.4cqw); }

/* ---------- 3. Sms ved mistet opkald, 5. anmeldelser på sms: text threads ---------- */
/* The owner's phone (sms ved mistet opkald): its header in ink */
.dp--app .dp__bar, .dp-app__head { background: var(--ink); color: var(--night-text); }
.dp--app .dp-head { border-bottom: 0; }
.dp--app .dp-avatar { background: var(--night-rule); color: var(--night-text); }
.dp--app .dp-name small { color: var(--night-muted); }
.dp-app__body { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6cqw; padding: 4cqw 4.5cqw 0; }
.dp-event {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 2cqw;
  padding: 1.6cqw 3.6cqw;
  border-radius: 5cqw;
  background: var(--concrete);
  box-shadow: inset 0 0 0 1px var(--rule);
  font-size: .9em;
  font-weight: 600;
}
.dp-event svg { width: 4.2cqw; height: auto; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dp-app__body .dp-msg + .dp-meta { margin-bottom: 1.6cqw; }
.dp-app__body > .dp-event { margin-bottom: 2.4cqw; }
.dp-auto { /* "Sendt automatisk" under the sms */
  display: inline-flex;
  align-items: center;
  gap: 1.2cqw;
}
.dp-auto::before { content: ""; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 .5cqw var(--ink); }

/* ---------- 4. AI-chat on the website, at night: first the name and phone, then the chat ---------- */
.dp-chat-site { position: absolute; top: 14cqw; right: 0; left: 0; opacity: .35; }
.dp-chat-site img { width: 100%; height: auto; }
.dp-chat {
  position: absolute;
  top: 22cqw;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  border-radius: 6cqw 6cqw 0 0;
  background: var(--white);
  box-shadow: 0 -1px 0 var(--rule);
}
.dp-chat .dp-head { min-height: 16cqw; padding-top: 2cqw; padding-right: 4.5cqw; }
.dp-chat .dp-avatar { background: var(--dp-slate); }
.dp-chat__x { position: relative; flex: none; width: 4cqw; height: 4cqw; margin-left: auto; }
.dp-chat__x::before, .dp-chat__x::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; background: var(--ink); transform: rotate(45deg); }
.dp-chat__x::after { transform: rotate(-45deg); }
.dp-chat .dp-list { gap: 1.4cqw; }
.dp-chat .dp-day { padding-top: 2.6cqw; }

/* The chat's opening card: name and phone before the chat starts (the visitor's number is never shown) */
.dp-start {
  display: grid;
  gap: 1.4cqw;
  margin: 0 4.5cqw 1.6cqw;
  padding: 3cqw 3.6cqw;
  border-radius: 3cqw;
  background: var(--concrete);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.dp-start__head { font-weight: 700; }
.dp-start__field { display: flex; justify-content: space-between; gap: 2cqw; padding: 1.6cqw 2.4cqw; border-radius: 1.6cqw; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule); }
.dp-start__field > span { color: var(--graphite); }
.dp-start__go { justify-self: start; padding: 1.2cqw 3cqw; border-radius: var(--radius); background: var(--dp-slate); color: var(--white); font-weight: 700; }
/* The opt-out line at the end of a review sms */
.dp-msg small { display: block; margin-top: 1.4cqw; color: var(--graphite); font-size: .85em; }

/* The two text threads (sms ved mistet opkald, anmeldelser): message text at a real phone's reading size and calm
   spacing, so the thread fills its screen like a real one instead of leaving an empty field (fifth round). */
.dp[data-phone="sms-ved-mistet-opkald"] .dp-app__body { gap: 2cqw; }
.dp[data-phone="anmeldelser"] .dp-list { gap: 2.6cqw; }
.dp[data-phone="sms-ved-mistet-opkald"] .dp-msg { font-size: 4.9cqw; padding: 2.8cqw 4.2cqw 3cqw; }
.dp[data-phone="anmeldelser"] .dp-msg,
.dp[data-phone="anmeldelser"] .dp-link { font-size: 5.4cqw; padding: 3.2cqw 4.4cqw 3.4cqw; }
.dp[data-phone="sms-ved-mistet-opkald"] .dp-meta,
.dp[data-phone="anmeldelser"] .dp-meta { font-size: 3.8cqw; }
.dp[data-phone="sms-ved-mistet-opkald"] .dp-app__body { padding-top: 6cqw; }
.dp[data-phone="sms-ved-mistet-opkald"] .dp-app__body > .dp-event { margin-bottom: 4cqw; }
.dp[data-phone="anmeldelser"] .dp-day { padding: 5cqw 0 3.4cqw; }