/* ============================================================
   PARTNERS · Territory Partner Program, web facing
   Doc No. ICON-WEB-CSS-P01 · loads after tokens.css and main.css

   Everything structural comes from the archetype library in
   main.css. This file only carries the page level compositions
   that library has no class for: the hero crop, the territory
   board, and the application plate. If it grows much past this
   the page is inventing patterns that belong in the system.
   ============================================================ */

/* ---------- AR-6 press marks on paper ----------
   Ferrari is a shield, not a wordmark: it is taller than it is wide
   and its colour IS the mark, so it keeps its own height and takes no
   filter. Autostrada is 7.71:1, far wider than the rest, so it is
   capped on width instead of height to keep the row optically level. */
/* Both selectors carry .on-paper so they outrank the shared
   `.on-paper .pressrow img` rule in main.css, which is (0,2,1). */
.on-paper .pressrow .press-ferrari {
  height: 40px;
  opacity: 1;
  filter: none;
}
/* The Autostrada asset is white on transparency, delivered that way so it
   reads on black. On paper the shared rule only dims it, which leaves it
   pale beside four near-black marks, so here it is inverted to black. */
.on-paper .pressrow .press-autostrada {
  height: auto;
  width: min(170px, 40vw);
  filter: invert(1) brightness(0.3);
  opacity: 0.85;
}

/* ---------- AR-1 hero crop ----------
   The application photograph is 2000x1125 and its left half is empty
   dark bay on purpose, so the headline and buttons sit on field and
   the technician stays clear of the type. At 390 and 768 the frame is
   narrow enough to show only a slice of the plate, so the crop walks
   left as the viewport widens: at 1280 almost the whole frame is
   visible and only the vertical needs setting. */
.p-hero { --hero-pos: 60% 50%; }
@media (min-width: 768px) { .p-hero { --hero-pos: 44% 50%; } }
@media (min-width: 1024px) { .p-hero { --hero-pos: 50% 50%; } }
/* Main.css only caps the hero column at 1024, so between 768 and 1023
   the headline runs the full width and its last word walks onto the
   technician. Capped here for the tablet range: the line breaks after
   "One shop." and the type keeps to the empty half of the bay. The
   button row is exempt, two buttons need more than the measure.
   At 390 the frame is too narrow for any crop that holds both the
   applicator pad and a clear field, so the type sits on his black
   shirt there, which is the darkest thing in the picture. */
@media (min-width: 768px) and (max-width: 1023px) {
  .p-hero .hero-inner .d1 { max-width: 13ch; }
}

/* ---------- rhythm for a second chapter inside one band ---------- */
.p-beam-mid { margin-top: var(--s-7); }
.p-os-note { margin-bottom: var(--s-5); }
.p-os-note .b2 { max-width: 92ch; }
/* ---------- AR-2b: the stack as tiles ----------
   Client note, Aug 20 2026: this section is a scan point and a visual
   break, so it is a tile set rather than a ledger. DESIGN-SYSTEM 3b.

   Five tiles in a 3-up grid means every tile in a row is the height of
   the tallest note in that row. Letting the note row take the slack
   drops the OS reference onto the foot of each tile, so the five refs
   line up across the row instead of sitting ragged under five notes of
   different lengths. */
.p-os .tile {
  grid-template-rows: auto 1fr auto;
  align-content: stretch;
}
/* The set closes with the same M4 foot line the ledgers on this page
   use, so it needs the seam the tile riser would otherwise eat. */
.tilegrid + .ledger-foot { margin-top: var(--s-4); }
.p-net-lede { margin-bottom: var(--s-6); }

/* ---------- AR-2 variant: a ledger in a narrow column ----------
   Ref, label and one mono value. No note column, because the
   argument for each line is carried by the prose beside it. */
.p-fit .ledger-row {
  grid-template-columns: 62px minmax(0, 1fr) auto;
  column-gap: var(--s-4);
  padding-block: 12px;
}
.p-fit-note { justify-self: end; text-align: right; }
/* On a phone the third column squeezes the label into three lines, so the
   value drops under it instead. */
@media (max-width: 559px) {
  .p-fit .ledger-row { grid-template-columns: 56px minmax(0, 1fr); row-gap: 3px; }
  .p-fit-note { grid-column: 2; justify-self: start; text-align: left; }
}

/* ---------- AR-9 variant: the territory board ----------
   Two ledgers side by side, open against held. The comparison is
   the whole point, so they sit level rather than stacking. */
.p-net { display: grid; gap: var(--s-6); }
.p-net .city-row { padding-block: 8px; }
.p-net-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
}
.p-net-shut { color: var(--fg-muted); }
.p-net-foot { display: grid; gap: var(--s-5); margin-top: var(--s-6); }

/* ---------- AR-10 application plate ----------
   The form is a grid item inside .cta-left, which justifies its
   children to the start, so it has to be told to fill the column. */
.p-apply-form,
.p-form-status { justify-self: stretch; width: 100%; }
.p-apply-form .btn { justify-self: start; }
.p-apply-form textarea { min-height: 86px; }
.p-apply-aside { display: grid; gap: var(--s-5); align-content: start; }
.p-aside-head { margin-bottom: var(--s-3); }
.p-apply-form.sent { display: none; }

/* Fail safe status panel. With no endpoint configured the form does
   not pretend to submit: this panel carries the direct route. */
.p-form-status {
  display: none;
  margin-top: var(--s-2);
  padding: var(--s-5);
  background: var(--surface-well);
  border-top: var(--plate-rule) solid var(--gold);
  font-size: var(--b2-size);
  line-height: var(--b2-lh);
  color: var(--fg-dense);
}
.p-form-status.show { display: block; }
.p-form-status strong {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--disp);
  font-weight: 700;
  font-size: var(--d4-size);
  letter-spacing: var(--d4-ls);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* The board goes side by side as early as it fits, because open against
   held is the comparison the section exists to make. Below 720 the two
   ledgers stack and the heads keep them apart. */
@media (min-width: 720px) {
  .p-net { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); }
  .p-net-foot { grid-template-columns: 1.15fr 0.85fr; column-gap: var(--s-6); align-items: center; }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .p-net .city-row { grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--s-3); }
  .p-net .city-index { font-size: var(--m4-size); letter-spacing: var(--m4-ls); }
  .p-net .city-name { font-size: var(--b2-size); }
}

/* .tblock is a 1px gap over a gold backing, so an incomplete final row
   shows as a solid gold cell. Three fields need three columns wherever
   the plate is wide enough to carry them. */
@media (min-width: 560px) and (max-width: 1023px) {
  .p-apply-aside .tblock { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .p-net { column-gap: var(--s-7); }
  .p-net-foot { column-gap: var(--s-7); }
}

@media (min-width: 1024px) {
  /* The form column is always the taller of the two. Spreading the aside
     keeps the plate from opening a hole under the title block. */
  .p-apply-aside { align-content: space-between; max-width: 460px; }
}


/* ---------- FIVE-UP FIGURE SET AT PHONE WIDTH ----------
   main.css lays a figure tile out in two columns below 560, figure
   left and label right, so a stacked tile does not run taller than
   the ledger row it replaced. That rule assumes a full width tile.
   The client's Aug 20 2026 change put .tilegrid--5 two up at 390,
   which leaves a 170px tile: column one is minmax(76px, auto) and the
   figure inside it is white-space: nowrap, so it takes its max content
   and the label column collapses to nothing. "Automotive warranty"
   then painted 33px past the viewport and the home render gate
   measured 403 against a 390 client width.

   A two up five set stacks its tiles below 560, exactly as a 4-up set
   already does in main.css, and the figure is allowed to drop its unit
   to a second line rather than run out of the tile. The unit itself
   still never breaks. Same markup, no page has to know.
   ============================================================ */
@media (max-width: 559px) {
  .tilegrid--5 .tile--figure { grid-template-columns: minmax(0, 1fr); }
  .tilegrid--5 .tile--figure .tile-figure,
  .tilegrid--5 .tile--figure .tile-label,
  .tilegrid--5 .tile--figure .tile-note { grid-column: 1; grid-row: auto; }
  .tilegrid--5 .tile-figure { white-space: normal; }
  .tilegrid--5 .tile-figure .unit { white-space: nowrap; }
}