/* =====================================================================
   Paper and Ink · essays/the-profit-depends-on-the-perimeter.css
   "The Profit Depends on the Perimeter": the figures only this dispatch 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:
   the reported segment reconciliation on a ledger slip with the corporate row circled in pencil (Figure 1)
   and an allocation worksheet whose rules move a shared cost between two units (Figure 2).
   Gold = segment operating result; blue = consolidated operating result; the shared row is pencil. */

/* ---- 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: the reported reconciliation ------------------------------- */
/* clip sideways overflow so a stamp's starting scale can never widen the page on a phone */
.recon { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 28px 44px; align-items: start; overflow-x: clip; overflow-clip-margin: 14px; padding-top: 6px; }
.recon .rledger {
  position: relative; background: var(--noise), var(--slip); padding: 1.3rem 1.4rem 1.5rem; transform: rotate(-1deg);
  font-family: var(--mono); font-size: .8rem; line-height: 1.55; animation: fade .6s ease .1s both;
}
.recon .rh { font-family: var(--sans); font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.recon .rn { font-size: .68rem; opacity: .65; margin: .15rem 0 .8rem; padding-bottom: .5rem; border-bottom: 1px dashed currentColor; }
.recon .rrow { position: relative; display: flex; justify-content: space-between; gap: 1rem; padding: .32rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.recon .rrow b { font-weight: 500; }
.recon .seg { color: var(--slip-once); animation: fade .5s ease both; }
.recon .seg:nth-of-type(1) { animation-delay: .4s; }
.recon .seg:nth-of-type(2) { animation-delay: .7s; }
.recon .seg:nth-of-type(3) { animation-delay: 1s; }
.recon .lvl { color: var(--graphite); margin: .35rem 0; animation: fade .5s ease 1.4s both; }
.recon .tot { color: var(--slip-life); border-top: 1.5px solid currentColor; border-bottom: 3px double currentColor; margin-top: .3rem; font-weight: 500; animation: fade .5s ease 2.6s both; }
/* the pencil loop around the corporate row: unclosed, overshooting, drawn after the row appears */
.recon .loop { position: absolute; inset: -8px -14px -8px -18px; width: calc(100% + 32px); height: calc(100% + 16px); left: -18px; top: -8px; overflow: visible; pointer-events: none; }
.recon .loop path {
  fill: none; stroke: var(--graphite); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1600; stroke-dashoffset: 0; animation: ink 1.2s ease 1.8s both;
}
.recon .stamp.s1 { display: table; margin: 1rem 0 0 auto; color: var(--slip-life); transform: rotate(-5deg); animation-delay: 3s; }
.recon .rnotes { display: grid; gap: 52px; padding-top: 74px; }
.recon .rnotes .mnote p { color: var(--ink); }
.recon .n1 { animation: fade .7s ease 1.1s both; }
.recon .n2 { animation: fade .7s ease 2.2s both; }
.recon .n3 { animation: fade .7s ease 2.9s both; }
.recon .n1 .pen path { animation-delay: 1.1s; }
.recon .n2 .pen path { animation-delay: 2.2s; }
.recon .n3 .pen path { animation-delay: 2.9s; }
.recon .n1 b { color: var(--once); }
.recon .n2 b { color: var(--graphite); }
.recon .n3 b { color: var(--life); }

/* ---- Figure 2: the allocation worksheet ------------------------------------ */
.alloc {
  position: relative; background: var(--noise), var(--sheet); padding: 1.5rem 1.4rem 1.2rem; transform: rotate(.4deg);
  overflow-x: clip; overflow-clip-margin: 14px; animation: fade .6s ease .1s both;
}
.alloc::before, .alloc::after { content: ""; position: absolute; top: -11px; width: 80px; height: 24px; background: var(--noise), var(--tape); }
.alloc::before { left: 20px; transform: rotate(-5deg); }
.alloc::after { right: 20px; transform: rotate(4deg); }
.alloc .ah { font-family: var(--sans); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .8rem; color: var(--slip-ink); opacity: .75; }
.alloc .arules { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.alloc .arules button {
  font-family: var(--sans); font-size: .76rem; color: var(--slip-ink); background: transparent; cursor: pointer;
  border: 1.4px solid color-mix(in srgb, var(--slip-ink) 45%, transparent); padding: .35rem .7rem; border-radius: 0;
}
.alloc .arules button[aria-pressed="true"] { border-color: var(--slip-ink); outline: 1px solid var(--slip-ink); outline-offset: 2px; font-weight: 600; }
.alloc .arules button:focus-visible { outline: 2px solid var(--life); outline-offset: 3px; }
.alloc .arows { display: grid; gap: .55rem; }
.alloc .arow { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 3rem; gap: .9rem; align-items: center; }
.alloc .al { font-family: var(--sans); font-size: .76rem; color: var(--slip-ink); }
.alloc .av { font-family: var(--mono); font-size: .95rem; font-weight: 500; text-align: right; }
.alloc .abar { position: relative; height: 18px; border-bottom: 1px solid color-mix(in srgb, var(--slip-ink) 25%, transparent); }
.alloc .abar i { position: absolute; left: 0; top: 2px; bottom: 2px; width: 0; background: currentColor; opacity: .82; transition: width .5s ease; }
.alloc .ua, .alloc .ub { color: var(--slip-once); }
.alloc .ugr { color: var(--slip-life); padding-top: .4rem; border-top: 1.5px solid var(--slip-ink); }
.alloc .ush { color: var(--graphite); }
.alloc .ush .abar i { background: repeating-linear-gradient(-38deg, currentColor 0 1.2px, transparent 1.2px 6px); opacity: 1; }
.alloc .ush.zero { opacity: .45; }
/* the hurdle: a pencil tick at 15 of 40 on Unit B's bar */
.alloc .hurdle {
  position: absolute; left: 37.5%; top: -6px; bottom: -6px; border-left: 1.5px dashed var(--graphite);
  font-family: var(--serif); font-size: .8rem; color: var(--graphite); padding-left: .3rem; line-height: 1; white-space: nowrap;
}
.alloc .anarr { margin: 1.1rem 0 0; color: var(--slip-ink); font-size: 1.1rem; max-width: 52ch; min-height: 3em; }

@media (max-width: 640px) {
  .recon { grid-template-columns: minmax(0, 1fr); }
  .recon .rnotes { gap: .9rem; padding-top: 0; }
  .recon .rnotes .pen { display: none; }
}

/* Phone mode: the ledger and its notes stack; the worksheet's rule buttons wrap two to a row
   and each bar row puts its label above the bar. Small text rises to 11px or more. */
@media (max-width: 560px) {
  .recon .rledger { padding: 1.1rem 1rem 1.3rem; font-size: .76rem; }
  .recon .rn, .recon .rh { font-size: .7rem; }
  .alloc { padding: 1.4rem .95rem 1rem; }
  .alloc .arules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alloc .arules button { font-size: .72rem; }
  .alloc .arow { grid-template-columns: minmax(0, 1fr) 3rem; gap: .2rem .7rem; }
  .alloc .al { grid-column: 1 / -1; font-size: .72rem; }
  .alloc .ah { font-size: .7rem; }
  .alloc .anarr { font-size: 1.05rem; }
}