/* ---- T6 · the plug and the Map (E12d) ------------------------------------
   Two halves, each its label and one line, then the product at true size
   (plug.js): the pane's Formula tree with the typed 2.5 chosen, and Excel's
   Model sheet over the pane's Map tab, framed from its tabs to its legend.
   A phone draws them smaller and whole (g-mobile-films, below). */
/* E21: "Don’t miss hardcoded values." reads on one line on a computer; at
   13em, "values." wrapped alone */
.plug .h2{max-width:16em;margin:0 auto}
/* and on a phone "hardcoded values." keeps to one line, the highlighter
   unbroken (340 px at 36 px, in 338 at 390) */
@media (max-width:600px){.plug .h2{font-size:min(36px,8.7vw)}}
.plugs{--s:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,44px);margin-top:clamp(44px,5vw,68px);align-items:stretch}
.plugcard{display:grid;gap:14px;align-content:start;min-width:0;padding:20px;border-radius:var(--r-card);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.plugcard .cap{display:flex;align-items:center;gap:10px;font:600 14px/1 var(--ui);color:rgba(255,255,255,.75)}
.plugcard .pline{font-size:17.5px;line-height:1.45;color:rgba(255,255,255,.86);max-width:30em;margin-bottom:8px}
/* the pane, whole: its window at the card's width (--pw), down to its
   formula box; beside the Map, as tall as the card, the window's paper
   under it, as a pane drawn taller has */
.plugpane{--pw:540;--ph:580;position:relative;width:100%;height:calc(var(--ph) * var(--s) * 1px)}
.pp-box{position:absolute;left:0;top:0;width:calc(var(--pw) * 1px);height:calc(var(--ph) * 1px);transform:scale(var(--s));transform-origin:0 0}
.plugcard .xk-tr{width:calc(var(--pw) * 1px)}
.plugpane .xk-trwin{height:calc(var(--ph) * 1px)}
/* Element wide enough for Pricing's formula and its 2.5, whole (234 points at
   its depth), Info for "+ term" and the "hardcoded" pill */
.plugcard .xk-trth,.plugcard .xk-trrow{grid-template-columns:236px 130px 68px minmax(70px,1fr)}
.plugcard .xk-trbar i{left:236px;width:130px}
/* the Map: Excel's top left, then the pane from its tabs to the legend's last line */
.plugmap{position:relative}
.pm-inner{position:relative;display:grid;gap:10px}
/* Excel's rows end on a row's line: 236 points with the headings, row 8;
   240 on a phone, without them, row 10, Price increase, whole (S6) */
.pm-xl{--xh:236;position:relative;height:calc(var(--xh) * var(--s) * 1px);border-radius:var(--r-win);overflow:hidden;background:#F5F5F5;box-shadow:0 0 0 1px rgba(255,255,255,.14);transform:translateZ(0)}
.pm-xl>.xk-win{border-radius:0;box-shadow:none}
.pm-legend{--pw:540;--top:166;--ph:352;position:relative;height:calc(var(--ph) * var(--s) * 1px);border-radius:var(--r-win);overflow:hidden;background:#F7F5EE}
.pm-legend .pp-box{height:calc((var(--top) + var(--ph)) * 1px);transform:scale(var(--s)) translateY(calc(var(--top) * -1px))}
.pm-legend .xk-trwin{height:calc((var(--top) + var(--ph)) * 1px);border-radius:0;box-shadow:none}
html.nojs .plugpane,html.nojs .plugmap{display:none}
/* G12: side by side, the two cards share their rows (a subgrid), so the
   labels, the lines and the pictures start level however each line wraps,
   and the pictures end level: the tree's pane is drawn as tall as the Map */
@media (min-width:1280px){
  .plugs{grid-template-rows:auto auto 1fr;row-gap:14px}
  .plugcard{grid-row:span 3;grid-template-rows:subgrid}
  .plugpane{height:auto;min-height:calc(var(--ph) * 1px)}
  .plugpane .pp-box,.plugpane .xk-trwin{height:100%}
}
@media (max-width:1279px){.plugs{grid-template-columns:minmax(0,1fr);max-width:640px;margin-left:auto;margin-right:auto}}
@media (max-width:600px){
  /* g-mobile-films: nothing is cropped on a phone any more; each film is
     drawn smaller to fit, by the steps below: the tree's pane whole at 480
     points or more (where the real pane folds its rows, page.css), the
     Map's sheet to column D (404 points), its pane as wide as the card. The
     cards take 10 px more of the room each side, and the Map runs to its
     card's edges as the tree does: each is the screen less 34 px, so at 360
     their rows and cells stay at 8 px */
  .plugs{--s:.9;margin-inline:-10px}
  .pm-xl{--xh:240}
  .plugcard{padding:16px 14px}
  .plugmap{margin-inline:-14px}
  .plugpane,.pm-legend{overflow:hidden}
  /* G11: the pane runs to the card's edges, so the formula and its
     "hardcoded" pill read as large as they can */
  .plugpane{width:calc(100% + 28px);margin-inline:-14px}
  /* at 480 points, Location takes what Element, Info and Value leave; the
     "hardcoded" pill, the plug's point, half a point larger, so at 360 it
     draws at 7 px, and Info 4 points wider to hold it; Element keeps the
     236 that Pricing's formula needs whole */
  .plugpane .xk-trth,.plugpane .xk-trrow{grid-template-columns:236px 134px 68px minmax(0,1fr)}
  .plugpane .xk-trbar i{left:236px;width:134px}
  .plugpane .xk-trhc,.plugpane .xk-trk,.plugpane .xk-trtab i{font-size:10.5px}
  .plugpane .xk-trth span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* the Map's pane, narrower, wraps its description to three lines: its
     window 26 points taller, so "Mapped 176 cells" stays whole */
  .pm-legend{--ph:378}
}
@media (max-width:471px){.plugpane{--s:.84}}
@media (max-width:443px){.plugpane{--s:.78}}
@media (max-width:414px){.plugpane{--s:.74}}
@media (max-width:397px){.plugmap{--s:.86}}
@media (max-width:395px){.plugpane{--s:.71}}
@media (max-width:381px){.plugmap{--s:.82}}
@media (max-width:374px){.plugpane{--s:.67}}
@media (max-width:365px){.plugmap{--s:.78}}
@media (max-width:355px){.plugpane{--s:.63}}
@media (max-width:349px){.plugmap{--s:.74}}
@media (max-width:336px){.plugpane{--s:.6}}
@media (max-width:332px){.plugmap{--s:.7}}
@media (max-width:321px){.plugpane{--s:.57}}