/* ============================================================
   Terms — "The Schedule of Undertakings".

   The agreement printed as a legal instrument rather than a wall of
   numbered prose: an execution block stating how it takes effect, a
   board of four schedules grouped by *who undertakes what*, the
   schedules themselves as addressable articles each carrying the
   mechanism behind it in the margin, and a closing appendix listing
   what this revision struck out of the text before it.

   Loads on top of sheet_core.css and owns only what is this surface's.
   The head bar is the world's .dhead device and is not redeclared here.
   ============================================================ */

/* ---------- Head ---------- */
.tm-head{ padding-top:clamp(38px,5vw,72px) }
/* The sub-clause steps down rather than matching the statement line for line:
   at display size a longer second line reads louder than the sentence it hangs
   off. Set as a fraction of the H1 so it tracks the same clamp to phone widths
   — the same setting the privacy register and the sign-in slip use. */
.tm-head h1 .thin{ margin-top:12px; font-size:.46em; letter-spacing:-0.01em }

/* ---------- The execution block (signature) ----------
   How this agreement takes effect, stated as the instrument's own record.
   It carries the world's earned field and its notch because a record does
   stand behind it: this revision is the operative text. It is the surface's
   one gold field above the close, and the only one in this viewport. */
.exec{ margin-top:clamp(26px,3.4vw,44px) }
.exec .panel{ --panel-face:var(--foil-wash) }
.exec > .panel > .face{ position:relative }
.exec > .panel > .face::after{
  content:""; position:absolute; top:0; right:0; width:26px; height:26px;
  background:var(--foil); clip-path:polygon(100% 0,100% 100%,0 0);
  transform-origin:100% 0;
}
/* The heavier field wants a heavier rule under its head than a crease gives —
   the same promotion the contact receipt and the countersigned half make. */
.exec .dhead{ border-bottom-color:var(--rule) }

/* The record reads as two columns of rows rather than one long ladder: this is
   a control block, and a control block is scanned, not read. */
.exec-rows{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(24px,4vw,72px);
  padding:clamp(16px,1.9vw,22px) 20px clamp(18px,2.2vw,24px);
}
.exec .spec{ font-size:13px }
.exec .spec dt{ letter-spacing:.1em }
.exec .spec div{ padding:3px 0 }
/* On the foil wash the leader would disappear into the field, so it takes the
   ink alpha the world uses for spec lists on a saturated ground. */
.exec .spec .dots{ border-bottom-color:rgba(14,14,14,.26) }

/* ---------- The schedule board (signature) ----------
   The agreement's shape before a word of it is read: four schedules, each
   declaring the party it binds and what it costs to read. The party is the
   object each schedule is about, so it is set at the world's branch-name
   rank — display oblique, the same setting `dev` and `prod` take. */
.board{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gap); margin-top:clamp(20px,2.6vw,30px);
}
.scard{ display:flex }
.scard > .face{ display:flex; flex-direction:column; width:100%; flex:1 }
/* On the board the letter is the whole head — the schedule's name is set below
   it as the card's own line. The world's referent middot separates a referent
   from the heading that follows it, so with nothing following it is dropped
   rather than left pointing at empty sheet. */
.scard .dhead .ref::after{ content:none }
.scard-body{ padding:clamp(16px,1.8vw,20px) 20px clamp(18px,2vw,22px); flex:1 }
.scard .party{
  display:block; margin:0 0 2px;
  font:italic 700 clamp(24px,2.4vw,30px)/1 var(--display);
  letter-spacing:.02em; text-transform:uppercase; color:var(--ink);
}
.scard .nm{
  display:block; margin:0 0 14px;
  font-size:12.5px; line-height:1.5; color:var(--ink-2);
}
.scard .spec{ font-size:12px }
.scard .spec dt{ letter-spacing:.1em; font-size:10px }

/* The whole card is the link to its schedule; it is a link, so it never grows
   a second boundary — it washes, the way the world's channel row does. */
.scard a.face-link{
  display:flex; flex-direction:column; height:100%; text-decoration:none;
  color:inherit; background:var(--panel-face);
  transition:background .18s var(--ease);
}
.scard a.face-link:hover{ background:var(--sheet-2) }
.scard a.face-link:hover .party{ color:var(--valley-ink) }

/* ---------- The schedules ---------- */
.schedules .panel + .panel{ margin-top:var(--gap) }
.sched{ scroll-margin-top:96px }
/* The party is carried on the heading line itself, in the world's
   answer-on-the-heading-line device: which side this schedule binds *is* the
   information, not a label floating above it. It rides at the far end of the
   bar, so the head reads schedule-then-party across the panel's whole width.
   Declared for any head on this surface, not only the schedules: the appendix
   states its own extent the same way. */
.dhead .who{ color:var(--ink); letter-spacing:.16em; margin-left:auto; flex:0 0 auto }

/* An article is its number, its undertaking, and the mechanism standing behind
   it in the margin. The margin is where this document is honest: a clause with
   nothing enforcing it says so rather than leaving the column empty. */
.art{
  display:grid; align-items:start;
  grid-template-columns:58px minmax(0,1fr) minmax(0,232px);
  gap:0 clamp(20px,2.4vw,40px);
  padding:16px 20px 18px;
  scroll-margin-top:96px;
}
.art + .art{ border-top:1px solid var(--mountain) }
.art .no{ font:700 12px/1.75 var(--mono); letter-spacing:.1em; color:var(--ink-2) }
.art .txt{ margin:0; max-width:62ch; font-size:15px; line-height:1.6; color:var(--ink) }

.art .mar{ margin:0; display:flex; flex-direction:column; gap:5px; padding-top:1px }
.art .mk{
  font:700 10px/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2);
}
/* A mechanism the system actually has takes the world's data blue. */
.art .mv{ font:700 12.5px/1.5 var(--mono); color:var(--valley-ink); overflow-wrap:anywhere }
/* Nothing stands behind this one, so it is not dressed as a value the system
   knows. This is the mark that makes the margin worth scanning. */
.art .mv.none{ color:var(--ink-2); font-weight:500 }
.art .mv a{ color:var(--valley-ink) }

/* Arriving from the board, the landing schedule or article is marked in the
   world's focus colour rather than by a wash it has not earned. */
.sched:target > .face,
.art:target{ outline:2px solid var(--valley-ink); outline-offset:-2px }

/* ---------- Schedule E — the appendix of struck claims ----------
   Not part of the operative agreement, so it is not dressed as one: a sunk
   panel, no field, no notch. What the previous text claimed and could not
   support is printed rather than deleted. */
.struck-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap }
.strike{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,232px);
  gap:0 clamp(20px,2.4vw,40px);
  padding:14px 20px 15px;
}
.strike + .strike{ border-top:1px dotted var(--mountain) }
.strike .claim{ margin:0; max-width:62ch; font-size:13.5px; line-height:1.65; color:var(--ink) }
.strike .why{
  margin:0; font:500 12px/1.5 var(--mono); color:var(--ink-2); padding-top:2px;
}

/* ---------- The surface's one authored moment ----------
   The stamp seats on the execution block: the agreement is in force, and that
   is the one thing this surface has to say before any of it is read. It sits
   in the first viewport, so it needs no observer and no controller — the same
   pure-CSS arrival the sign-in slip's notch takes.

   The notch is painted at rest and the zero state is armed only inside the
   animation itself, so a renderer that never plays the keyframes still gets
   the stamped sheet. Nothing here gates content. */
@media (prefers-reduced-motion:no-preference){
  .exec > .panel > .face::after{ animation:seat-exec 520ms var(--ease) both }
}
@keyframes seat-exec{
  from{ transform:scale(0) }
  to{ transform:scale(1) }
}

/* ---------- Adaptation ---------- */

/* Four schedules stop reading as four peers well before the articles do. */
@media (max-width:1080px){
  .board{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}

@media (max-width:900px){
  /* Two columns of control rows stop being scannable as columns once neither
     has room to hold its leader. */
  .exec-rows{ grid-template-columns:minmax(0,1fr); gap:0 }
}

/* The margin note stops being a margin once the article has no room beside it:
   it drops under the undertaking it references, inline, key beside value. Same
   width and same behaviour as the privacy register's clause. */
@media (max-width:820px){
  .art{ grid-template-columns:58px minmax(0,1fr); gap:0 clamp(16px,2vw,28px) }
  .art .txt{ max-width:none }
  .art .mar{
    grid-column:2; flex-direction:row; align-items:baseline; gap:10px;
    margin-top:11px; padding-top:9px; border-top:1px dotted var(--mountain);
  }
  .art .mk{ flex:0 0 auto; line-height:1.5 }

  .strike{ grid-template-columns:minmax(0,1fr); gap:0 }
  .strike .why{ margin-top:7px; padding-top:0 }
}

@media (max-width:560px){
  .board{ grid-template-columns:minmax(0,1fr) }
  .art{ grid-template-columns:minmax(0,1fr); padding-inline:15px; gap:0 }
  .art .no{ margin-bottom:7px }
  .art .mar{ grid-column:1 }
  .exec-rows,
  .scard-body,
  .strike,
  .dhead{ padding-inline:15px }
  /* The party keeps its rank — it is the object the card is about — but stops
     competing with the H1 on a phone. */
  .scard .party{ font-size:22px }
  /* The schedule head's party would wrap to its own line against the name at
     this width; it ranges under it instead of being squeezed onto the line. */
  .sched .dhead{ flex-wrap:wrap; gap:4px 11px }
  .sched .dhead .who{ margin-left:0 }
}