/* Site chrome shared by every customer page (/, /sketch, /orders): header, footer and the home sections.
   The design stylesheets in css/designs/ set the tokens (colours, fonts, radius, shadows) and add their own
   personality on top; this file only knows the structure and the light/dark zones below.
   Loaded after style.css, before the design. */

:root {
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-body);
  --container: 1120px;
  --section-pad: 72px;
  --header-h: 58px;
}

body { font-family: var(--font-body); }

/* header */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--header-bg, var(--surface)); border-bottom: 1px solid var(--border); }
.site-header .inner { max-width: var(--container); margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 24px; position: relative; }
.site-header .logo { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--text); text-decoration: none; letter-spacing: var(--logo-tracking, 0); text-transform: var(--logo-case, none); white-space: nowrap; }
.site-header nav { display: flex; gap: 20px; align-items: center; margin-left: auto; }
.site-header .inner > .site-actions { margin-left: 4px; }
.site-header nav a { color: var(--muted); text-decoration: none; font-size: 0.95rem; font-weight: 500; white-space: nowrap; }
.site-header nav a:hover, .site-header nav a.active { color: var(--text); }
.site-header nav a.cta { color: var(--accent-text); }
.menu-btn { display: none; font-size: 1.2rem; padding: 4px 10px; }
.site-actions { display: flex; align-items: center; gap: 14px; }
/* the language switch: one flag per language, the current one lit, the others dimmed until hovered */
.lang-flags { display: flex; gap: 4px; }
.lang-flags button { display: grid; place-items: center; padding: 3px; border: 1px solid transparent; border-radius: 4px;
  background: none; cursor: pointer; opacity: 0.55; line-height: 0; }
.lang-flags button svg { width: 24px; height: 12px; display: block; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }
.lang-flags button[aria-pressed="true"] { opacity: 1; border-color: var(--border); cursor: default; }
.lang-flags button:hover, .lang-flags button:focus-visible { opacity: 1; }
.login-link { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.95rem; white-space: nowrap; }
.login-link:hover, .login-link.active { color: var(--text); }
/* light/dark switch: a pill with sun and moon; the knob slides over the active one */
.mode-switch { position: relative; width: 58px; height: 30px; padding: 0 7px; border-radius: 99px; border: 1px solid var(--border);
  background: var(--bg); display: inline-flex; align-items: center; justify-content: space-between; cursor: pointer;
  box-shadow: none; flex: none; }
.mode-switch svg { width: 15px; height: 15px; position: relative; z-index: 1; fill: none; stroke: var(--muted); stroke-width: 2;
  stroke-linecap: round; transition: stroke 0.2s; }
.mode-switch .moon { fill: var(--muted); stroke: none; }
.mode-switch .knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); transition: transform 0.2s ease; }
.mode-switch[aria-checked="true"] .knob { transform: translateX(28px); }
.mode-switch[aria-checked="false"] .sun { stroke: var(--accent-text); }
.mode-switch[aria-checked="true"] .moon { fill: var(--accent-text); }
.mode-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the full navigation needs about 1000 px next to the logo, Log in and the switch; below that it folds away */
@media (max-width: 1200px) {  /* the full navigation, the flags, the account link and the switch need about 1150 px */
  .menu-btn { display: inline-block; margin-left: auto; }
  .site-actions { gap: 10px; }
  .site-header nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; padding: 12px 16px 16px; background: var(--surface); border-bottom: 1px solid var(--border); gap: 12px; }
  .site-header nav.open { display: flex; }
}

/* footer */
.site-footer { border-top: 1px solid var(--border); padding: 32px 16px; color: var(--muted); font-size: 0.9rem; margin-top: 48px; background: var(--header-bg, transparent); }
.site-footer .inner { max-width: var(--container); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: flex-start; }
.site-footer a { color: inherit; }

/* home: hero */
.hero { padding: var(--section-pad) 16px; background: var(--hero-bg, transparent); }
.hero .inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: var(--hero-cols, minmax(0, 1.3fr) minmax(0, 1fr)); gap: 48px; align-items: center; }
/* three lines on a laptop, so the buttons under it are in view without scrolling */
.hero h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.05; margin: 0 0 18px; letter-spacing: var(--display-tracking, -0.02em); text-transform: var(--display-case, none); }
.hero .lead { font-size: 1.15rem; color: var(--muted); max-width: 560px; margin: 0; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero .actions .button { padding: 12px 22px; font-weight: 600; }
.hero .facts { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 32px; color: var(--muted); font-size: 0.9rem; }
.hero .facts strong { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--text); }
.hero-art { width: 100%; height: auto; max-width: 540px; justify-self: center; overflow: visible; }
/* The sketch is paper in every theme, written in pencil; its dimensions are in a pen of the site's accent colour
   (orange in light mode, blue in dark), darkened so it reads on the cream paper. The printed part takes the
   accent itself. */
.hero-art { --pen: color-mix(in srgb, var(--accent) 78%, #000); }
.hero-art .hand { font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; font-size: 17px; fill: #2f2c28; }
.hero-art .pen { fill: var(--pen); font-size: 19px; font-weight: 700; }
.hero-art .pen-tip { fill: var(--pen); }
.hero-art .ink { fill: none; stroke: #2f2c28; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.hero-art .hidden-line { fill: none; stroke: #2f2c28; stroke-width: 1.4; stroke-dasharray: 5 4; }
.hero-art .centre-line { fill: none; stroke: #2f2c28; stroke-width: 1; stroke-dasharray: 12 3 2 3; }
.hero-art .dim { fill: none; stroke: var(--pen); stroke-width: 1.2; }
.hero-art .hero-arrow { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.hero-art .part-fill { fill: var(--accent); }
.hero-art .part-edge { fill: none; stroke: rgba(0, 0, 0, 0.35); stroke-width: 1.2; }
.hero-art .layer { fill: none; stroke: rgba(0, 0, 0, 0.14); stroke-width: 1; }
.hero-art .caption { fill: var(--muted); font-family: var(--font-body); font-size: 13px; text-anchor: middle; }
@media (max-width: 800px) { .hero .inner { grid-template-columns: 1fr; } .hero-art { max-width: 360px; } }
/* Phones: everything in the header has to fit one row of 360 px - a smaller name, only the flag to switch to
   (with two languages that is one tap), and the menu button at the far right. */
@media (max-width: 520px) {
  .site-header .inner { gap: 10px; padding: 10px 12px; }
  .site-header .logo { font-size: 1rem; }
  .site-header .inner > .site-actions { margin-left: auto; }
  .site-actions { gap: 8px; }
  .menu-btn { order: 3; margin-left: 0; }
  .lang-flags button[aria-pressed="true"] { display: none; }
}

/* home: sections */
.section { padding: var(--section-pad) 16px; }
.section[id] { scroll-margin-top: var(--header-h, 64px); }  /* a section scrolled to starts below the sticky header */
.section .inner { max-width: var(--container); margin: 0 auto; }
.section h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 0 0 8px; letter-spacing: var(--display-tracking, -0.02em); text-transform: var(--display-case, none); }
.section .sub { color: var(--muted); margin: 0 0 32px; max-width: 640px; font-size: 1.05rem; }
.section.alt { background: var(--alt-bg, var(--surface)); }
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tile { background: var(--surface); border: var(--tile-border, 1px solid var(--border)); border-radius: var(--radius); padding: 24px; box-shadow: var(--tile-shadow, none); }
.tile h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.2rem; }
.tile p { margin: 0 0 12px; color: var(--muted); }
.tile ul { margin: 0; padding-left: 18px; color: var(--muted); }
.tile .badge { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--green-bg); color: var(--green-text); margin-bottom: 10px; }
.tile .badge.soon { background: var(--amber-bg); color: var(--amber-text); }
.tile .more { display: inline-block; margin-top: 8px; font-weight: 600; }
.steps-grid { counter-reset: s; }
.steps-grid .tile::before { counter-increment: s; content: counter(s, decimal-leading-zero); display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--accent); margin-bottom: 8px; }
.price-line { font-family: var(--font-display); font-size: clamp(1.3rem, 2.5vw, 1.9rem); margin: 0 0 8px; }
.contact dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; }
.contact dt { color: var(--muted); }

/* tool page: the step bar sits under the site header */
.subbar { position: sticky; top: var(--header-h); z-index: 20; }
.subbar .brand { font-weight: 600; }
/* Phones: the steps alone, on one line under the header - the name is in the header and My orders in its menu, and
   the two bars took a fifth of the screen. */
@media (max-width: 700px) {
  .subbar { padding: 6px 12px; gap: 8px; }
  .subbar .brand, .subbar > a { display: none; }
  .subbar .steps { flex-wrap: nowrap; overflow-x: auto; gap: 2px; }
  .subbar .steps li { white-space: nowrap; font-size: 0.85rem; padding: 2px 8px; }
}

/* orders page and the order timeline */
.page-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 24px 0 4px; }
.orders { width: 100%; border-collapse: collapse; }
.orders th, .orders td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.orders th { color: var(--muted); font-weight: 500; font-size: 0.85rem; }
.lookup { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lookup input { min-width: 220px; }
.timeline { list-style: none; margin: 12px 0 0; padding: 0; border-left: 2px solid var(--border); }
.timeline li { padding: 2px 0 10px 14px; position: relative; font-size: 0.9rem; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.timeline time { color: var(--muted); display: block; font-size: 0.8rem; }

/* ------------------------------------------------------------ light / dark per zone
   Every design defines a --light-* and a --dark-* palette. The owner picks a tone per zone on /superadmin
   (app/site_look.py); site.js writes it to <html data-page data-surface data-chrome>:
     page     the page background, sections and running text
     surface  cards, tiles, the 3D viewer and the forms inside them
     chrome   header, footer and the tool's step bar
   Each zone re-points the working tokens (--bg, --text, ...) at one palette. */
:root {
  --light-amber-bg: #fff4d6; --light-amber-line: #e0a100; --light-amber-text: #8a5a00;
  --light-red-bg: #fde4e2; --light-red-line: #d93025; --light-red-text: #a3221a;
  --light-green-bg: #dff5e6; --light-green-text: #1d6b3a;
  --dark-amber-bg: #3a2e10; --dark-amber-line: #c8900a; --dark-amber-text: #f2c566;
  --dark-red-bg: #3d1b19; --dark-red-line: #e2554b; --dark-red-text: #ff9b92;
  --dark-green-bg: #173323; --dark-green-text: #7fd39d;
}

html[data-page="light"],
html[data-surface="light"] :is(.card, .tile, .viewer),
html[data-chrome="light"] :is(.site-header, .site-footer, .subbar) {
  --bg: var(--light-bg); --surface: var(--light-surface); --text: var(--light-text); --muted: var(--light-muted);
  --border: var(--light-border); --grid-line: var(--light-grid); --accent-ink: var(--light-accent-ink, var(--accent));
  --amber-bg: var(--light-amber-bg); --amber-line: var(--light-amber-line); --amber-text: var(--light-amber-text);
  --red-bg: var(--light-red-bg); --red-line: var(--light-red-line); --red-text: var(--light-red-text);
  --green-bg: var(--light-green-bg); --green-text: var(--light-green-text);
  color-scheme: light;
}
html[data-page="dark"],
html[data-surface="dark"] :is(.card, .tile, .viewer),
html[data-chrome="dark"] :is(.site-header, .site-footer, .subbar) {
  --bg: var(--dark-bg); --surface: var(--dark-surface); --text: var(--dark-text); --muted: var(--dark-muted);
  --border: var(--dark-border); --grid-line: var(--dark-grid); --accent-ink: var(--dark-accent-ink, var(--accent));
  --amber-bg: var(--dark-amber-bg); --amber-line: var(--dark-amber-line); --amber-text: var(--dark-amber-text);
  --red-bg: var(--dark-red-bg); --red-line: var(--dark-red-line); --red-text: var(--dark-red-text);
  --green-bg: var(--dark-green-bg); --green-text: var(--dark-green-text);
  color-scheme: dark;
}
html[data-page="light"] { --alt-bg: var(--light-alt); --hero-bg: var(--light-hero); }
html[data-page="dark"] { --alt-bg: var(--dark-alt); --hero-bg: var(--dark-hero); }
html[data-chrome="light"] :is(.site-header, .site-footer, .subbar) { --header-bg: var(--light-header); }
html[data-chrome="dark"] :is(.site-header, .site-footer, .subbar) { --header-bg: var(--dark-header); }
/* A zone's text colour has to be set where the zone starts; inherited colour would still be the page's. */
html[data-surface] :is(.card, .tile, .viewer), html[data-chrome] :is(.site-header, .site-footer, .subbar) { color: var(--text); }
html[data-chrome] .subbar { background: var(--header-bg); }
a { color: var(--accent-ink, var(--accent)); }

/* The camera button of the upload form: phones and tablets only (a coarse pointer), where it opens the camera. */
.camera-button { display: none; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-bottom: 12px;
  padding: 14px; font-size: 1.05rem; }
.camera-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.camera-button svg { width: 24px; height: 24px; }
@media (pointer: coarse) { .camera-button { display: flex; } }

/* "Install the app": a button in the hero, a link-like button in the footer, and the iPhone steps */
.install-app { display: inline-flex; align-items: center; gap: 8px; }
.install-app svg { width: 18px; height: 18px; }
.link-button { background: none; border: 0; padding: 0; color: var(--accent-ink, var(--accent)); font: inherit;
  text-decoration: underline; cursor: pointer; }
.install-help { max-width: 360px; padding: 18px 22px; overflow: visible; border: 1px solid var(--border); border-radius: var(--radius, 8px);
  background: var(--surface); color: var(--text); }
.install-help::backdrop { background: rgba(0, 0, 0, 0.45); }

/* "Continue with Google": Google's colours on a plain button, as their branding asks */
.google-button { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; background: #fff; color: #1f1f1f;
  border: 1px solid #747775; }
.google-button svg { width: 18px; height: 18px; }

/* login page */
/* Log in: one card in the middle with the icon above it; the staff's links are a line below it, not half the page. */
main.login-page { max-width: 480px; padding-top: 40px; padding-bottom: 48px; }
.login-box { display: flex; flex-direction: column; gap: 14px; }
.login-icon { align-self: center; width: 56px; height: 56px; border-radius: 12px; }
.login-box .page-title { margin: 0; text-align: center; }
.login-box .card { margin: 0; padding: 24px; }
.login-box .card > div > p:first-child { margin-top: 0; }
.account-tabs { display: flex; gap: 4px; margin: -6px 0 16px; border-bottom: 1px solid var(--border); }
.account-tabs button { flex: 1; background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0;
  padding: 10px 6px; margin-bottom: -1px; font-weight: 600; color: var(--muted); }
.account-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.account-form { display: flex; flex-direction: column; gap: 12px; }
.account-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 0.92rem; }
.account-form input { width: 100%; padding: 11px 12px; font-weight: 400; }
.account-form p { margin: 0; }
.account-form button[type=submit], .login-box .google-button { width: 100%;
  justify-content: center; padding: 12px; }
.account-form .link-button { align-self: center; font-size: 0.92rem; }
#login-result { margin: 14px 0 0; }
.or-line { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; color: var(--muted); font-size: 0.9rem; }
.or-line::before, .or-line::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.or-line + .google-button { margin-top: 12px; }
.staff-links { margin: 6px 0 0; text-align: center; line-height: 1.7; }

/* The tint is the accent mixed into the page colour (light orange with workshop, light blue with studio, a warm
   dark shade in dark mode). In light mode cards are white on the warm page, so the accent is left for what to act
   on (every card in the accent tint made nothing stand out); rows of cards alternate, the "alt" one on a rounded
   tinted panel that sits just around the cards. Dark mode has tinted cards on every row and no panels. The tint
   applies when cards and page share a tone (a dark-cards-on-light look has its own contrast); the 3D viewer stays
   plain. Fields inside cards keep the brighter (light) or deeper (dark) colour, so they still read as fields. */
html[data-page="light"] { --tint: color-mix(in srgb, var(--accent) 18%, var(--light-bg)); }
html[data-page="dark"] { --tint: color-mix(in srgb, var(--accent) 16%, var(--dark-bg)); }
html[data-page] .section.alt { background: transparent; border-top: 0; border-bottom: 0; }
html[data-page="light"][data-surface="light"] :is(.card, .tile) { --surface: var(--light-surface); }
html[data-page="dark"][data-surface="dark"] :is(.card, .tile) { --surface: var(--tint); }
/* the panel: the cards' own grid, padded and rounded; the negative margin keeps the cards lined up with the
   heading above (16 px = the section's side padding, so it never overflows a phone screen) */
html[data-page="light"] .section.alt .grid { --offset: 16px; background: var(--tint); padding: var(--offset);
  margin-inline: calc(-1 * var(--offset)); border-radius: calc(var(--radius) + 14px); }
html[data-page="light"][data-surface="light"] :is(.card, .tile) :is(input, select, textarea) { background: var(--light-surface); }
html[data-page="dark"][data-surface="dark"] :is(.card, .tile) :is(input, select, textarea) { background: var(--dark-bg); }

/* ------------------------------------------------------------ the sides of wide screens
   The page column is --page-width wide. What is left on either side gets graph paper (it scrolls with the page,
   lines up with the hero's grid and slips under the hero), a ruler along the column and the drawings from
   js/margins.js: a part sketched on one side, the same part printed on the other. The owner can keep only the
   graph paper or switch the sides off (look "margins"); screens too narrow to have sides show none of it. */
:root { --page-width: calc(var(--container) + 32px); }  /* the home page column plus its card panels */
body:has(> main) { --page-width: 1320px; }  /* tool, orders and login pages: style.css main */
/* a short page (sign-in, the first tool step) still reaches the bottom of the screen, so the footer does not end
   the page halfway down with the side drawings carrying on below it */
body > main { min-height: calc(100vh - var(--header-h)); }
body { position: relative; }
html[data-margins="drawings"] body::before, html[data-margins="grid"] body::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  --side: max(0px, (100% - var(--page-width)) / 2 - 24px);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px; background-position: 0 var(--header-h);
  -webkit-mask-image: linear-gradient(90deg, #000 var(--side), transparent var(--side), transparent calc(100% - var(--side)), #000 calc(100% - var(--side)));
  mask-image: linear-gradient(90deg, #000 var(--side), transparent var(--side), transparent calc(100% - var(--side)), #000 calc(100% - var(--side)));
}
/* Fixed, so the drawings stay beside whatever is being read. It is the first thing in <body> and positioned: it
   paints over the hero's background, while the header, the footer and everything positioned later cover it. */
.margin-art { display: none; position: fixed; inset: var(--header-h) 0 0; pointer-events: none; }
html[data-margins="drawings"] .margin-art, html[data-margins="grid"] .margin-art { display: block; }
.site-footer { position: relative; }
.margin-art .side { position: absolute; top: 0; bottom: 0; width: max(0px, (100% - var(--page-width)) / 2 - 24px);
  overflow: hidden; container-type: inline-size; display: flex; flex-direction: column; justify-content: space-evenly;
  align-items: center; padding: 12px 0; }
.margin-art .left { left: 0; }
.margin-art .right { right: 0; }
/* a scale along the column: a tick every 8 px, a longer one every 40 px */
.margin-art .ruler { position: absolute; top: 0; bottom: 0; width: 13px; opacity: 0.55;
  background: repeating-linear-gradient(var(--muted) 0 1px, transparent 1px 8px) 0 0 / 6px 100% no-repeat,
              repeating-linear-gradient(var(--muted) 0 1px, transparent 1px 40px) 0 0 / 12px 100% no-repeat; }
.margin-art .left .ruler { right: 0; border-right: 1px solid var(--muted); background-position: right top, right top; }
.margin-art .right .ruler { left: 0; border-left: 1px solid var(--muted); }
.margin-art figure { margin: 0; width: min(210px, 100% - 32px); text-align: center; }
.margin-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.margin-art figcaption { margin-top: 4px; color: var(--muted); }
.margin-art .drawn-sketch figcaption { font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; font-size: 1.2rem; line-height: 1.1; }
.margin-art .drawn-print figcaption { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
html[data-margins="grid"] .margin-art figure { display: none; }
@container (width < 150px) { .margin-art figure { display: none; } }
@container (width < 40px) { .margin-art .ruler { display: none; } }  /* no sliver at the screen edge */
@media (max-height: 820px) { .margin-art figure:nth-of-type(3) { display: none; } }
/* pencil and pen for the sketches, the accent colour with layer lines for the printed parts */
.margin-art .sk-line { fill: none; stroke: var(--text); stroke-opacity: 0.55; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.margin-art .sk-hidden { fill: none; stroke: var(--text); stroke-opacity: 0.45; stroke-width: 1; stroke-dasharray: 4 3; }
.margin-art .sk-centre { fill: none; stroke: var(--text); stroke-opacity: 0.35; stroke-width: 0.8; stroke-dasharray: 10 3 2 3; }
.margin-art .sk-dim { fill: none; stroke: var(--accent-ink); stroke-opacity: 0.8; stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.margin-art .sk-value { font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; font-size: 17px; font-weight: 700; fill: var(--accent-ink); }
.margin-art .pt-face { stroke: rgba(0, 0, 0, 0.35); stroke-width: 0.8; stroke-linejoin: round; }
.margin-art .pt-layer { fill: none; stroke: rgba(0, 0, 0, 0.13); stroke-width: 0.7; }
.margin-art .pt-hole { fill: color-mix(in srgb, var(--accent) 45%, #000); stroke: rgba(0, 0, 0, 0.35); stroke-width: 0.8; }
@media print { .margin-art, body::before { display: none !important; } }

/* Legal pages: one readable column, and tables that stay readable on a phone. */
main.legal { max-width: 46rem; }
main.legal h2 { margin-top: 2rem; }
main.legal p, main.legal li { line-height: 1.6; }
.legal-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.95rem; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--line); }
@media (max-width: 40rem) {
  .legal-table, .legal-table tr, .legal-table td, .legal-table th { display: block; border: 0; padding-left: 0; }
  .legal-table tr { border-bottom: 1px solid var(--line); padding: 0.5rem 0; }
  .legal-table th { font-weight: 600; }
}

/* Not found (static/404.html): the sketch with its one number missing, beside the way back. */
main.not-found { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 56px; align-items: center;
  max-width: 920px; padding: 72px 20px 96px; }
.not-found .nf-art { max-width: 320px; }
.not-found .nf-ring { fill: none; stroke: var(--pen); stroke-width: 1.6; stroke-dasharray: 4 3; }
.not-found .nf-missing { font-size: 30px; }
.not-found .nf-code { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.2em; color: var(--accent-ink); margin: 0; }
.not-found .page-title { margin-top: 4px; }
.not-found .lead { font-size: 1.1rem; color: var(--muted); margin: 8px 0 28px; }
.not-found .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.not-found .actions .button { padding: 12px 22px; font-weight: 600; }
@media (max-width: 700px) {
  main.not-found { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; }
  .not-found .nf-art { max-width: 240px; }
}

/* Home: the two services that start online, big, with their button; the ones by email in one quieter row. */
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tile.service { display: flex; flex-direction: column; gap: 10px; padding: 28px 30px; }
.tile.service p { margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--text); }
.tile.service .button { align-self: flex-start; margin-top: auto; padding: 12px 22px; font-weight: 600; }
.service-top { display: flex; align-items: center; justify-content: space-between; }
.service-top .badge { margin: 0; }
.service-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--accent-ink, var(--accent));
  background: color-mix(in srgb, var(--accent) 14%, transparent); }
.service-icon svg { width: 26px; height: 26px; }
.tile.service h3 { margin: 6px 0 0; font-size: 1.6rem; }
.also { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 20px; padding: 20px 24px;
  border: 1px solid var(--border); border-radius: var(--radius); }
.also h3 { margin: 6px 0 4px; font-family: var(--font-display); font-size: 1.1rem; }
.also p { margin: 0 0 6px; color: var(--muted); }
.also .badge { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 2px 9px; border-radius: 99px;
  background: var(--amber-bg); color: var(--amber-text); }

/* Pricing: parts our slicer measured, priced at today's rates (js/home.js), beside the visitor's own. */
.examples-title { margin: 28px 0 12px; font-family: var(--font-display); font-size: 1.3rem; }
.examples { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tile.example { display: flex; flex-direction: column; gap: 4px; padding: 0 20px 20px; overflow: hidden; }
.tile.example .example-art { display: block; width: calc(100% + 40px); height: auto; max-width: none; margin: 0 -20px 12px;
  border-bottom: 1px solid var(--border); }
.tile.example h4 { margin: 0; font-family: var(--font-display); font-size: 1.15rem; }
.tile.example p { margin: 0; }
.example-price { margin-top: auto !important; padding-top: 10px; color: var(--muted); }
.example-price strong { font-size: 1.8rem; font-weight: 600; color: var(--text); margin-right: 6px; font-variant-numeric: tabular-nums; }
.tile.example .button { align-self: flex-start; margin-top: auto; }
.example-art .thin { stroke-width: 1.6; }
.yours-camera { fill: none; stroke: var(--pen, var(--accent)); stroke-width: 2; stroke-linejoin: round; }
.example-art { --pen: color-mix(in srgb, var(--accent) 78%, #000); }
@media (max-width: 800px) {
  .service-grid, .also { grid-template-columns: minmax(0, 1fr); }
  .tile.service { padding: 22px; }
}
/* Phones: the example parts and the presets swipe sideways, one card and a bit of the next in view, instead of
   stacking into a page twice as long. */
@media (max-width: 700px) {
  .grid.examples, #presets-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -16px; padding: 0 16px 10px; }
  .grid.examples > .tile, #presets-grid > .tile { flex: 0 0 80%; scroll-snap-align: start; }
}

/* My orders: one card per part - its picture, what it is, how far it has come on a track, the price. */
.order-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.order-card { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 18px; align-items: center; margin: 0; padding: 16px 20px; }
.order-card .pic { width: 88px; height: 88px; border-radius: var(--radius); background: var(--bg); overflow: hidden; display: grid; place-items: center; }
.order-card .pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.order-card h3 { margin: 0; font-family: var(--font-display); font-size: 1.15rem; }
.order-card h3 a { color: var(--text); text-decoration: none; }
.order-card h3 a:hover { text-decoration: underline; }
.order-card .meta { font-size: 0.85rem; color: var(--muted); }
.order-card .status { margin: 4px 0 0; font-size: 0.92rem; }
.order-card .side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.order-card .price { font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.track { display: flex; max-width: 440px; margin: 10px 0 2px; padding: 0; list-style: none; }
.track li { position: relative; flex: 1; padding-top: 16px; font-size: 0.8rem; color: var(--muted); }
.track li::before { content: ""; position: absolute; top: 4px; left: 0; right: 0; height: 3px; background: var(--border); }
.track li::after { content: ""; position: absolute; top: 0; left: 0; width: 11px; height: 11px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid var(--border); background: var(--surface); }
.track li.done::before, .track li.done::after { background: var(--accent); border-color: var(--accent); }
.track li.now { color: var(--text); font-weight: 600; }
.track li.now::after { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.track li.bad { color: var(--red-text); font-weight: 600; }
.track li.bad::after { border-color: var(--red-line); background: var(--red-line); }
.track li:last-child::before { right: auto; width: 11px; }
@media (max-width: 640px) {
  .order-card { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .order-card .pic { width: 64px; height: 64px; }
  .order-card .side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* Company: the orders beside the people and statements, each order with its picture; a card in the middle when
   there is one thing to say (signed out, an invitation, a member's note). */
main.company-page { padding-bottom: 48px; }
main.company-page.alone { max-width: 560px; }
.co-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin: 0 0 18px; }
.co-head .page-title { margin-bottom: 4px; }
.co-head p { margin: 0; }
.alone .co-head { flex-direction: column; align-items: center; text-align: center; }
.co-alone { margin: 0 0 14px; padding: 24px; }
.co-alone > :first-child { margin-top: 0; }
.co-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 20px; align-items: start; }
.co-layout .card { margin: 0; }
.co-side { display: flex; flex-direction: column; gap: 20px; }
.co-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.co-card-head h2 { margin: 0; }
.co-count { min-width: 24px; padding: 1px 8px; border-radius: 99px; background: var(--bg); border: 1px solid var(--border);
  font-size: 0.8rem; font-weight: 600; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.co-count:empty { display: none; }
.co-list { display: flex; flex-direction: column; }
.co-order { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0;
  border-top: 1px solid var(--border); }
.co-order:first-child { border-top: 0; }
.co-order .pic { width: 72px; height: 72px; border-radius: var(--radius); background: var(--bg); overflow: hidden; }
.co-order .pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* a black part on the near-black page tile disappears: dark mode lifts the tile a little */
html[data-mode="dark"] :is(.co-order, .order-card) .pic { background: color-mix(in srgb, var(--text) 16%, var(--surface)); }
.co-order h3 { margin: 0 0 2px; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-order .meta { font-size: 0.85rem; color: var(--muted); overflow-wrap: anywhere; }
.co-order .file { margin-top: 2px; font-family: ui-monospace, Consolas, monospace; font-size: 0.72rem; color: var(--muted);
  overflow-wrap: anywhere; }
.co-order .side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.co-order .bill { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.co-people, .co-statements { list-style: none; margin: 12px 0; padding: 0; }
.co-people li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 6px 12px; align-items: center; padding: 10px 0;
  border-top: 1px solid var(--border); }
.co-people li:first-child, .co-statements li:first-child { border-top: 0; }
.co-people .avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent-ink, var(--accent)); }
.co-people .person { display: flex; flex-direction: column; min-width: 0; }
.co-people .email { font-weight: 600; font-size: 0.92rem; overflow-wrap: anywhere; }
.co-people .who { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 0.8rem; color: var(--muted); }
.co-people .actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.co-people .actions button { padding: 4px 10px; font-size: 0.78rem; }
.co-add { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; }
.co-add input { width: 100%; }
.co-add .row { flex-wrap: nowrap; }
.co-add select { flex: 1; min-width: 0; }
.co-statements li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--border); }
.co-statements li > div { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 960px) {
  .co-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .co-head .button { width: 100%; justify-content: center; text-align: center; }
  .co-order { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
  .co-order .pic { width: 56px; height: 56px; }
  .co-order .side { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; text-align: left; }
}