/* =====================================================================
   Paper and Ink · essays/two-suppliers-one-failure.css
   "Two Suppliers Can Share One Failure": the figures only this essay uses.
   Loaded after the shared stylesheets; everything shared lives in css/.
   ===================================================================== */

/* Layout: one 64ch reading column on grained paper; two paper objects break out to 860px:
   two invoices whose service paths meet at one shared box (Figure 1)
   and an independence worksheet on graph paper with one slider (Figure 2).
   Gold = supplier diversity (the contracts); blue = failure-path independence (the paths). */

/* ---- footnote markers -------------------------------------------------- */
sup.ref { font-family: var(--sans); font-size: .62em; line-height: 0; margin-left: 1px; }
sup.ref a { text-decoration: none; color: var(--life); padding: 0 1px; }
sup.ref a:hover { text-decoration: underline; }
.sources li:target { color: var(--ink); background: var(--life-soft); }

/* ---- Figure 1: two invoices, one dependency ------------------------------ */
/* a compact vertical drawing: invoices, then each one's path, then the box both paths meet;
   no column gap, so each path's centre sits at a quarter of the width where the joining curves start;
   left-aligned with the caption and the text column, like every other figure */
.depfig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; max-width: 640px; overflow-x: clip; overflow-clip-margin: 14px; padding-top: 6px; }
.inv {
  position: relative; background: var(--noise), var(--slip); padding: .9rem 1rem 1rem; border-top: 5px solid var(--slip-once);
  font-family: var(--mono); font-size: .72rem; line-height: 1.45; animation: fade .6s ease both;
  margin-inline: clamp(6px, 3vw, 36px);
}
.ia { transform: rotate(-1deg); animation-delay: .1s; }
.ib { transform: rotate(.8deg); animation-delay: .4s; }
.ih { font-family: var(--sans); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; margin: 0; opacity: .75; }
.iv { font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.2; color: var(--slip-once); margin: .2rem 0 .1rem; }
.il { margin: 0 0 .6rem; }
.inv .tag {
  display: inline-block; font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--slip-once); border: 1.5px solid currentColor; padding: .2rem .45rem; transform: rotate(-3deg);
}
/* each path: three steps joined by short blue rules */
.lane { list-style: none; margin: 0; padding: 1.2rem clamp(6px, 3vw, 36px) 0; display: grid; justify-items: center; color: var(--life); animation: fade .6s ease .8s both; }
.lane li {
  position: relative; width: min(100%, 12rem); text-align: center; font-family: var(--mono); font-size: .74rem;
  padding: .4rem .5rem; border: 1.4px solid currentColor; margin-top: 1.4rem; color: var(--ink);
}
.lane li::before { content: ""; position: absolute; left: 50%; top: calc(-1.4rem - 1px); height: 1.4rem; border-left: 1.5px solid var(--life); }
.lane li:first-child { margin-top: 0; }
.lane li:first-child::before { top: -1.2rem; height: 1.2rem; border-left-style: dashed; }
.lane li.si { border-color: var(--life); color: var(--life); }
.join { grid-column: 1 / -1; height: 3rem; color: var(--life); animation: fade .5s ease 1.4s both; }
.join svg { display: block; width: 100%; height: 100%; overflow: visible; }
.join path { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.shared {
  grid-column: 1 / -1; justify-self: center; text-align: center; background: var(--noise), var(--sheet); color: var(--slip-life);
  border: 2px solid var(--slip-life); padding: .5rem .9rem .55rem; box-shadow: 0 1px 1px var(--shadow), 0 8px 18px -12px var(--shadow-deep);
  animation: thump .45s cubic-bezier(.3, 1.6, .5, 1) 1.8s both;
}
.sv { margin: 0; font-family: var(--mono); font-size: .8rem; font-weight: 600; }
.sl { margin: .15rem 0 0; font-family: var(--serif); font-style: italic; font-size: .95rem; }
/* hidden state: the paths end at sign-in and the shared box is not yet drawn */
.depfig.pending .join, .depfig.pending .shared { visibility: hidden; }

/* ---- Figure 2: the independence worksheet --------------------------------- */
.ctl { display: grid; gap: .4rem; max-width: 640px; margin: 0 0 1.2rem; font-family: var(--sans); font-size: .86rem; color: var(--ink); }
.ctl .cap { display: flex; justify-content: space-between; gap: .8rem; color: var(--life); }
.ctl output { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.ctl input[type=range] { width: 100%; margin: 0; accent-color: var(--life); }
.ctl input:focus-visible { outline: 2px solid var(--life); outline-offset: 3px; }
.ctl .fixed { margin: 0; font-size: .8rem; color: var(--muted); }
.wks {
  position: relative; padding: 1.6rem 1.2rem 1.1rem; transform: rotate(.4deg); color: var(--slip-ink);
  background:
    var(--noise),
    linear-gradient(var(--grid-major) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(var(--grid-minor) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px) 0 0 / 12px 12px,
    var(--sheet);
  box-shadow: 0 1px 1px var(--shadow), 0 10px 24px -12px var(--shadow-deep);
}
.wks::before, .wks::after { content: ""; position: absolute; top: -11px; width: 92px; height: 26px; background: var(--noise), var(--tape); }
.wks::before { left: 22px; transform: rotate(-4deg); }
.wks::after { right: 22px; transform: rotate(5deg); }
.wh { font-family: var(--sans); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .7rem; opacity: .8; }
.wrow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 6.5rem minmax(0, 1.2fr); gap: .3rem 1rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid color-mix(in srgb, var(--slip-ink) 15%, transparent); animation: fade .5s ease both; }
.wrow:nth-of-type(1) { animation-delay: .2s; }
.wrow:nth-of-type(2) { animation-delay: .5s; }
.wrow:nth-of-type(3) { animation-delay: .8s; }
.wrow:nth-of-type(4) { animation-delay: 1.1s; }
.wrow p { margin: 0; min-width: 0; }
.wl { font-family: var(--sans); font-size: .8rem; font-weight: 600; line-height: 1.3; }
.wf { font-family: var(--mono); font-size: .74rem; }
.wv { font-family: var(--mono); font-size: .9rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.wrow.once { color: var(--slip-once); }
.wrow.life { color: var(--slip-life); }
.wrow.tot .wv { font-size: 1rem; }
.bar { display: block; height: .8rem; border-left: 1px solid color-mix(in srgb, var(--slip-ink) 40%, transparent); }
.bar i { display: block; height: 100%; background: currentColor; opacity: .75; transition: width .25s ease; }
.wn { margin: 1.1rem 0 0; color: var(--slip-ink); }
.wn b { color: var(--slip-life); }

@media (max-width: 760px) {
  .wrow { grid-template-columns: minmax(0, 1fr) 6.5rem; }
  .wf { grid-column: 1; grid-row: 2; }
  .bar { grid-column: 1 / -1; }
}

/* Phone mode: the drawing keeps its two columns with smaller paper; the worksheet stacks each
   row into label, formula and value with its bar beneath. */
@media (max-width: 560px) {
  .inv { padding: .75rem .7rem .85rem; }
  .ih, .wh { font-size: .7rem; }
  .ih { letter-spacing: .08em; }
  .iv { font-size: 1.1rem; }
  .il, .lane li { font-size: .7rem; }
  .lane li { padding: .35rem .3rem; }
  .inv .tag { font-size: .7rem; letter-spacing: .08em; }
  .wks { padding: 1.4rem .9rem 1rem; }
  .wrow { grid-template-columns: minmax(0, 1fr) 5.6rem; }
  .wl { font-size: .78rem; }
  .wv { font-size: .82rem; }
  .wrow.tot .wv { font-size: .9rem; }
}