/* Grass skirts (tools/grass-skirts.html and the sheet pages under
   tools/grass-skirts/): the illustrated how-it-works, the builder, the sheet
   as it prints, and the print itself. The class builders' shared look is
   css/tabs/class-builder.css. */

/* ---------- the illustrated how-it-works (tools/grass-skirts-demo.js) ---------- */
.gs-how { margin: 0 0 34px; padding: 14px; background: var(--paper-white); border: 1.5px solid var(--ink); border-radius: 16px; box-shadow: 6px 6px 0 var(--riso-green); }
.gs-how-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin: 2px 4px 10px; }
.gs-how-h h2 { margin: 0; font-family: var(--font-display); font-size: 22px; letter-spacing: -.01em; }
.gs-how-h button { padding: 4px 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper-white); color: var(--ink); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.gs-demo { position: relative; aspect-ratio: 720 / 400; border: 1.5px solid var(--ink); border-radius: 10px; overflow: hidden; background: var(--paper); }
.gs-demo svg { display: block; width: 100%; height: 100%; }
.gs-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.gs-steps li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: start; padding: 10px 12px; border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--paper-white); color: var(--ink-dim); font-size: 14px; line-height: 1.4; transition: border-color .25s, box-shadow .25s, color .25s; }
.gs-steps li b { display: block; color: var(--ink); font-family: var(--font-display); font-size: 15px; }
.gs-steps li svg { grid-row: span 2; width: 34px; height: 34px; }
.gs-steps li.on { border-color: var(--ink); box-shadow: 3px 3px 0 var(--riso-pink); color: var(--ink); }
@media (max-width: 760px) { .gs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .gs-steps { grid-template-columns: minmax(0, 1fr); } .gs-how { padding: 10px; } }

/* the drawing's parts */
.gs-demo .gs-wall { fill: var(--paper); }
.gs-demo .gs-floor { fill: color-mix(in srgb, var(--riso-yellow) 26%, var(--paper)); }
.gs-demo .gs-skirting { stroke: var(--ink); stroke-width: 2.5; }
.gs-demo .gs-board { fill: var(--paper-white); stroke: var(--ink); stroke-width: 3; }
.gs-demo .gs-board-shadow { fill: var(--riso-pink); }
.gs-demo .gs-tray { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.gs-demo .gs-pen { fill: var(--riso-green-deep); stroke: var(--ink); stroke-width: 1.4; }
.gs-demo .gs-pen.b { fill: var(--riso-pink-deep); }
.gs-demo .gs-board-title { font-family: var(--font-display); font-size: 12.5px; font-weight: 700; fill: var(--ink); }
.gs-demo .gs-strip-shadow { fill: color-mix(in srgb, var(--ink) 16%, transparent); }
.gs-demo .gs-band { fill: var(--paper-white); stroke: var(--ink); stroke-width: 1.5; }
.gs-demo .gs-band-stripe.s0 { fill: var(--riso-pink); }
.gs-demo .gs-band-stripe.s1 { fill: var(--riso-yellow); }
.gs-demo .gs-band-stripe.s2 { fill: var(--riso-green); }
.gs-demo .gs-tape { fill: color-mix(in srgb, var(--riso-yellow) 70%, transparent); stroke: color-mix(in srgb, var(--ink) 35%, transparent); stroke-width: .8; }
.gs-demo .gs-team-dot { fill: var(--ink); }
.gs-demo .gs-team-letter { font-family: var(--font-display); font-size: 10.5px; font-weight: 800; fill: var(--paper-white); text-anchor: middle; }
.gs-demo .gs-strip { fill: #fff; stroke: var(--ink); stroke-width: 1.1; stroke-dasharray: 3 1.6; }
:root[data-theme="dark"] .gs-demo .gs-strip { fill: #f4faf6; stroke: #1a3a2a; }
.gs-demo .gs-words { stroke: color-mix(in srgb, #1a3a2a 45%, transparent); stroke-width: 1.5; stroke-linecap: round; }
.gs-demo .gs-line { stroke: color-mix(in srgb, #1a3a2a 20%, transparent); stroke-width: .8; }
.gs-demo .gs-s { transition: opacity .25s, transform .25s; transform-box: fill-box; transform-origin: 50% 0; }
.gs-demo .gs-s.gone { opacity: 0; transform: translateY(6px) rotate(8deg); }
.gs-demo .gs-card { fill: var(--paper-white); stroke: var(--ink); stroke-width: 2; }
.gs-demo .gs-card-shadow { fill: var(--riso-yellow); }
.gs-demo .gs-card-title { font-family: var(--font-display); font-size: 14px; font-weight: 750; fill: var(--ink); }
.gs-demo .gs-clock circle { fill: var(--paper-white); stroke: var(--ink); stroke-width: 2; }
.gs-demo .gs-clock-hand { stroke: var(--riso-pink-deep); stroke-width: 2.4; stroke-linecap: round; }
.gs-demo .gs-row-l { font-family: var(--font-display); font-size: 13px; font-weight: 800; fill: var(--ink); }
.gs-demo .gs-row-n { font-family: var(--font-display); font-size: 13px; font-weight: 800; fill: var(--ink); text-anchor: middle; transform-box: fill-box; transform-origin: 50% 50%; }
.gs-demo .gs-row-n.bump { animation: gsBump .5s ease-out; }
@keyframes gsBump { 0% { transform: scale(1); } 40% { transform: scale(1.6); fill: var(--riso-pink-deep); } 100% { transform: scale(1); } }
.gs-demo .gs-track { fill: color-mix(in srgb, var(--ink) 9%, transparent); }
.gs-demo .gs-bar { stroke: var(--ink); stroke-width: 1.4; transition: width .4s cubic-bezier(.3, 1.4, .5, 1); }
.gs-demo .gs-bar.t0, .gs-demo .gs-team-dot.t0 { fill: var(--riso-pink); }
.gs-demo .gs-bar.t1 { fill: var(--riso-green); }
.gs-demo .gs-bar.t2 { fill: var(--riso-yellow); }
.gs-demo .gs-team-dot.t0 { fill: var(--riso-pink-deep); }
.gs-demo .gs-team-dot.t1 { fill: var(--riso-green-deep); }
.gs-demo .gs-team-dot.t2 { fill: color-mix(in srgb, var(--riso-yellow) 60%, var(--ink)); }
.gs-demo .gs-table { fill: var(--riso-yellow); stroke: var(--ink); stroke-width: 2.5; }
.gs-demo .gs-table-shadow { fill: var(--riso-pink); }
.gs-demo .gs-legs, .gs-demo .gs-chair path { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; fill: none; }
.gs-demo .gs-chair path { stroke: color-mix(in srgb, var(--ink) 55%, transparent); }
.gs-demo .gs-sign-post { stroke: var(--ink); stroke-width: 3; }
.gs-demo .gs-sign-board { fill: var(--riso-green); stroke: var(--ink); stroke-width: 2; }
.gs-demo .gs-sign-text { font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-anchor: middle; fill: #1a3a2a; }

/* people */
.gs-demo .gs-floorshadow { fill: color-mix(in srgb, var(--ink) 16%, transparent); }
.gs-demo .gs-trouser { stroke: #23364a; stroke-width: 9.5; stroke-linecap: round; fill: none; }
.gs-demo .gs-teacher .gs-trouser { stroke: #3d3a36; }
.gs-demo .gs-shoe { stroke: #1a1a1a; stroke-width: 6; stroke-linecap: round; }
.gs-demo .gs-shirt { stroke: #1a3a2a; stroke-width: 2.4; stroke-linejoin: round; }
.gs-demo .gs-shirt-shadow { opacity: .55; }
.gs-demo .gs-runner .gs-shirt { fill: #ff7eb6; }
.gs-demo .gs-runner .gs-shirt-shadow { fill: #2db876; }
.gs-demo .gs-partner .gs-shirt { fill: #2db876; }
.gs-demo .gs-partner .gs-shirt-shadow { fill: #ff7eb6; }
.gs-demo .gs-teacher .gs-shirt { fill: #f0c33d; }
.gs-demo .gs-teacher .gs-shirt-shadow { fill: #ff8a6b; }
.gs-demo .gs-collar { fill: none; stroke: #1a3a2a; stroke-width: 1.6; stroke-linecap: round; }
.gs-demo .gs-sleeve { stroke-width: 9; stroke-linecap: round; fill: none; }
.gs-demo .gs-runner .gs-sleeve { stroke: #e3589c; }
.gs-demo .gs-partner .gs-sleeve { stroke: #1a8a55; }
.gs-demo .gs-teacher .gs-sleeve { stroke: #d9a51f; }
.gs-demo .gs-cuff { stroke: #1a3a2a; stroke-width: 0; }
.gs-demo .gs-skin { stroke: #1a3a2a; stroke-width: 2; }
.gs-demo .gs-hair { stroke: #1a3a2a; stroke-width: 1.4; stroke-linejoin: round; }
.gs-demo .gs-eye { fill: #1a1a1a; }
.gs-demo .gs-mouth { fill: none; stroke: #1a1a1a; stroke-width: 1.5; stroke-linecap: round; }
.gs-demo .gs-cheek { fill: #ff7eb6; opacity: .45; }
.gs-demo .gs-scissors path { stroke: #1a3a2a; stroke-width: 2.6; stroke-linecap: round; }
.gs-demo .gs-scissors circle { fill: #fff; stroke: #e3589c; stroke-width: 2.2; }
.gs-demo .gs-scissors .gs-pivot { fill: #1a3a2a; stroke: none; }
.gs-demo .gs-pencil-body { fill: #f0c33d; stroke: #1a3a2a; stroke-width: 1.3; stroke-linejoin: round; }
.gs-demo .gs-pencil-tip { fill: #1a3a2a; }
.gs-demo .gs-board-clip { fill: #f4faf6; stroke: #1a3a2a; stroke-width: 1.8; }
.gs-demo .gs-clip { fill: #557063; }
.gs-demo .gs-key-lines { stroke: #2db876; stroke-width: 2; stroke-linecap: round; }
.gs-demo .gs-scribble { fill: none; stroke: #e3589c; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1 1; }
.gs-demo .gs-stamp circle { fill: #2db876; stroke: #1a3a2a; stroke-width: 1.4; }
.gs-demo .gs-stamp path { fill: none; stroke: #1a3a2a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gs-demo .gs-spark { stroke-width: 2.6; stroke-linecap: round; }
.gs-demo .gs-spark.s0 { stroke: var(--riso-pink-deep); }
.gs-demo .gs-spark.s1 { stroke: var(--riso-green-deep); }
.gs-demo .gs-spark.s2 { stroke: color-mix(in srgb, var(--riso-yellow) 70%, var(--ink)); }
@media (prefers-reduced-motion: reduce) { .gs-demo .gs-s, .gs-demo .gs-bar, .gs-steps li { transition: none; } .gs-demo .gs-row-n.bump { animation: none; } }

/* ---------- the page ---------- */
.gs-hero h1 em { white-space: nowrap; }
.gs-sec { margin: 0 0 34px; scroll-margin-top: 110px; }
.gs-made[hidden] { display: none; }
.gs-made-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 12px; }
.gs-made-h h2 { margin: 0; font-family: var(--font-display); font-size: 26px; letter-spacing: -.01em; }
.gs-made-h a { color: var(--riso-pink-deep); font-weight: 650; font-size: 14px; }
.gs-lbl { font-size: 13.5px; font-weight: 650; color: var(--ink-dim); }
.gs-sizes button { min-width: 42px; font-variant-numeric: tabular-nums; }
.gs-sizes button:disabled { opacity: .4; cursor: not-allowed; }
.gs-sizes button + button { border-left: 1px solid var(--line); }

/* the sheet beside its settings */
.gs-sheet-wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(250px, 1fr); gap: 24px; align-items: start; padding: 18px; background: var(--paper-white); border: 1.5px solid var(--ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--riso-green); }
.gs-preview { container-type: inline-size; max-width: 520px; width: 100%; justify-self: center; }
.gs-preview .gs-page { box-shadow: 0 1px 1px rgba(20, 45, 32, .18), 0 10px 26px rgba(20, 45, 32, .18), 6px 6px 0 var(--riso-pink); border-radius: 3px; }
.gs-empty { margin: 0; padding: 30px; color: var(--ink-dim); text-align: center; }
.gs-controls { display: grid; gap: 14px; align-content: start; }
.gs-ctl { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0; padding: 0; border: 0; }
.gs-ctl > .gs-lbl:first-child { min-width: 82px; }
.gs-ctl[hidden] { display: none; }
.gs-ctl small { color: var(--ink-faint); font-size: 13px; }
.gs-size-txt { font-size: 14px; }
.gs-link { padding: 0; border: 0; background: none; color: var(--riso-pink-deep); font: inherit; font-size: 13.5px; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gs-step { display: inline-flex; align-items: center; border: 1.5px solid var(--ink); border-radius: 999px; overflow: hidden; }
.gs-step button { width: 34px; height: 32px; border: 0; background: var(--paper-white); color: var(--ink); font-size: 18px; font-weight: 700; cursor: pointer; }
.gs-step button:disabled { opacity: .35; cursor: not-allowed; }
.gs-step output { min-width: 30px; text-align: center; font-family: var(--font-display); font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums; }
.gs-check { align-items: flex-start; cursor: pointer; }
.gs-check input { margin-top: 4px; accent-color: var(--riso-pink-deep); }
.gs-check span { display: grid; font-size: 14.5px; }
.gs-check b { font-weight: 650; }
.gs-parts legend { float: left; min-width: 82px; margin-right: 10px; }
.gs-parts label { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; cursor: pointer; }
.gs-parts input { accent-color: var(--riso-pink-deep); }
.gs-print-btn { justify-self: start; font-size: 16px; padding: 12px 20px; }
.gs-print-btn svg { flex: none; }
.gs-print-sum { margin: -4px 0 0; color: var(--ink-dim); font-size: 13.5px; }
@media (max-width: 860px) { .gs-sheet-wrap { grid-template-columns: minmax(0, 1fr); padding: 12px; } }

/* a sheet's own page */
.gs-crumbs { margin: 4px 0 12px; font-size: 14px; color: var(--ink-dim); }
.gs-crumbs a { color: inherit; }
.gs-sheet-head { display: grid; gap: 10px; margin: 0 0 20px; }
.gs-sheet-head h1 { margin: 0; font-family: var(--font-display); font-size: clamp(30px, 4.6vw, 46px); line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
.gs-sheet-head h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--riso-pink-deep); }
.gs-sheet-head p { margin: 0; max-width: 66ch; color: var(--ink-dim); font-size: 16.5px; line-height: 1.55; }
.gs-sheet-head .cb-seg[hidden] { display: none; }
.gs-strips-list { columns: 2 300px; column-gap: 28px; margin: 0; padding-left: 1.6em; font-size: 15px; line-height: 1.45; }
.gs-strips-list li { break-inside: avoid; margin: 0 0 5px; }
.gs-strips-list li.hl::after { content: "HL"; margin-left: 6px; padding: 0 5px; border: 1px solid var(--line-strong); border-radius: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); }
.gs-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.gs-more a { display: grid; gap: 2px; height: 100%; padding: 12px 14px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--paper-white); color: var(--ink); text-decoration: none; transition: transform .12s, box-shadow .12s; }
.gs-more a:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--riso-pink); }
.gs-more small { color: var(--ink-dim); font-size: 13px; }
.gs-more b { font-family: var(--font-display); font-size: 15.5px; }

/* the ready-made sheets, by course */
.gs-ready-tabs { margin: 0 0 14px; }
.gs-ready-pane[hidden] { display: none; }
.gs-ready-group { margin: 0 0 20px; }
.gs-ready-group h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 17px; }
.gs-ready-group h3 small { margin-left: 8px; color: var(--ink-dim); font-family: var(--font-body, inherit); font-size: 13.5px; font-weight: 500; }
.gs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.gs-cards a { display: grid; grid-template-columns: 30px 1fr; gap: 0 10px; align-items: center; height: 100%; padding: 10px 12px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--paper-white); color: var(--ink); text-decoration: none; transition: transform .12s, box-shadow .12s; }
.gs-cards a:hover, .gs-cards a:focus-visible { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--riso-green); }
.gs-cards svg { grid-row: span 2; width: 30px; height: 36px; }
.gs-cards b { font-family: var(--font-display); font-size: 14.5px; line-height: 1.25; }
.gs-cards small { color: var(--ink-dim); font-size: 12.5px; }
.gs-cards .whole a { background: color-mix(in srgb, var(--riso-yellow) 22%, var(--paper-white)); }
.gs-mini .w { fill: var(--riso-pink); stroke: var(--ink); stroke-width: 1.4; }
.gs-mini .s { fill: var(--paper); stroke: var(--ink); stroke-width: 1.1; stroke-dasharray: 2 1.2; }

/* running it: the teacher's notes */
.gs-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.gs-notes > div { padding: 14px 16px; background: var(--paper-white); border: 1.5px solid var(--ink); border-radius: 12px; }
.gs-notes h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 17px; }
.gs-notes ul { margin: 0; padding-left: 1.2em; color: var(--ink-dim); font-size: 14.5px; line-height: 1.5; }
.gs-notes li { margin: 0 0 4px; }

/* ---------- the sheet, on screen and in print ----------
   One unit (--u) is a millimetre of the paper: in print it is 1mm, and on
   screen the preview's width over the paper's, so the preview is the print. */
.gs-page { --u: calc(100cqw / 210); --pw: 210; --ph: 297; --row: 22.6;
  --pk: #ff7eb6; --pkd: #e3589c; --gr: #2db876; --grd: #1a8a55; --ye: #f0c33d; --ik: #1a3a2a; --dim: #557063;
  position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: calc(var(--u) * 3);
  box-sizing: border-box; width: 100%; aspect-ratio: 210 / 297; padding: calc(var(--u) * 10); overflow: hidden;
  background: #fff; color: var(--ik); font-family: var(--font-display); line-height: 1.25;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
[data-paper="letter"] .gs-page { --u: calc(100cqw / 215.9); --pw: 215.9; --ph: 279.4; --row: 20.8; aspect-ratio: 215.9 / 279.4; }
.gs-page[data-ink="saver"] { --pk: #fff; --pkd: #1a3a2a; --gr: #fff; --grd: #1a3a2a; --ye: #fff; }
.gs-ph { display: flex; gap: calc(var(--u) * 6); justify-content: space-between; align-items: flex-start; }
.gs-ph-t { display: grid; gap: calc(var(--u) * 1); min-width: 0; }
.gs-kicker { font-family: var(--font-mono); font-size: calc(var(--u) * 2.7); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.gs-ph h3 { margin: 0; font-size: calc(var(--u) * 6.6); line-height: 1.05; letter-spacing: -.01em; }
.gs-ph p { margin: 0; max-width: 62em; color: var(--dim); font-size: calc(var(--u) * 3.1); line-height: 1.35; }
.gs-ph-team { flex: none; display: grid; place-items: center; align-content: center; width: calc(var(--u) * 19); height: calc(var(--u) * 19); border: calc(var(--u) * .6) solid var(--ik); border-radius: calc(var(--u) * 3); background: var(--pk); box-shadow: calc(var(--u) * 1.3) calc(var(--u) * 1.3) 0 var(--gr); }
.gs-page[data-ink="saver"] .gs-ph-team { box-shadow: none; }
.gs-ph-team small { font-family: var(--font-mono); font-size: calc(var(--u) * 2.5); letter-spacing: .14em; text-transform: uppercase; }
.gs-ph-team b { font-size: calc(var(--u) * 11); line-height: .9; }
.gs-ph-team.key { background: var(--gr); box-shadow: calc(var(--u) * 1.3) calc(var(--u) * 1.3) 0 var(--pk); }
.gs-how-line { margin: 0; padding: calc(var(--u) * 1.6) calc(var(--u) * 3); border-radius: calc(var(--u) * 2); background: color-mix(in srgb, var(--ye) 40%, #fff); font-size: calc(var(--u) * 3.3); font-weight: 650; }
.gs-page[data-ink="saver"] .gs-how-line { border: calc(var(--u) * .3) solid var(--ik); }
.gs-skirt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 5); align-items: start; min-height: 0; }
.gs-col { display: grid; grid-template-rows: calc(var(--u) * 9) repeat(var(--rows), calc(var(--u) * var(--row))); }
.gs-waist { position: relative; display: grid; place-items: center; border: calc(var(--u) * .45) solid var(--ik); border-radius: calc(var(--u) * 2) calc(var(--u) * 2) 0 0;
  background: repeating-linear-gradient(90deg, var(--pk) 0 calc(var(--u) * 5), var(--ye) calc(var(--u) * 5) calc(var(--u) * 10), var(--gr) calc(var(--u) * 10) calc(var(--u) * 15)); }
.gs-page[data-ink="saver"] .gs-waist { background: repeating-linear-gradient(-45deg, #fff 0 calc(var(--u) * 1.6), #c9d3cd calc(var(--u) * 1.6) calc(var(--u) * 2.2)); }
.gs-waist span { padding: 0 calc(var(--u) * 2); border: calc(var(--u) * .3) solid var(--ik); border-radius: 99px; background: #fff; font-family: var(--font-mono); font-size: calc(var(--u) * 2.3); letter-spacing: .14em; text-transform: uppercase; line-height: 1.6; }
.gs-q { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 0 calc(var(--u) * 2); padding: calc(var(--u) * 2) calc(var(--u) * 2.4) calc(var(--u) * 1.6);
  border: calc(var(--u) * .35) dashed var(--ik); border-top: 0; background: #fff; }
.gs-n { display: grid; place-items: center; width: calc(var(--u) * 6.2); height: calc(var(--u) * 6.2); border: calc(var(--u) * .4) solid var(--ik); border-radius: 50%; background: var(--pk); font-size: calc(var(--u) * 3.1); font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.gs-q:nth-child(odd) .gs-n { background: var(--gr); }
.gs-page[data-ink="saver"] .gs-n { background: #fff; }
.gs-q p { margin: 0; font-size: calc(var(--u) * 3.55); font-weight: 600; line-height: 1.22; overflow-wrap: anywhere; }
.gs-ans { grid-column: 1 / -1; height: calc(var(--u) * 4.4); border-bottom: calc(var(--u) * .3) dotted var(--dim); }
.gs-tag { position: absolute; right: calc(var(--u) * 1.6); bottom: calc(var(--u) * .4); font-family: var(--font-mono); font-size: calc(var(--u) * 2.1); font-style: normal; color: var(--dim); }
.gs-pf { display: flex; justify-content: space-between; gap: calc(var(--u) * 4); font-family: var(--font-mono); font-size: calc(var(--u) * 2.4); color: var(--dim); }
.gs-snip { display: inline-flex; gap: calc(var(--u) * 1.2); align-items: center; }
.gs-snip svg { width: calc(var(--u) * 4); height: calc(var(--u) * 4); color: var(--ik); }
/* the key and the tick sheet */
.gs-key-t, .gs-tick-t { width: 100%; border-collapse: collapse; font-size: calc(var(--u) * 3.3); align-self: start; }
.gs-key-t th, .gs-tick-t th { padding: calc(var(--u) * 1.6) calc(var(--u) * 2); border-bottom: calc(var(--u) * .5) solid var(--ik); font-family: var(--font-mono); font-size: calc(var(--u) * 2.6); font-weight: 500; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.gs-key-t td { padding: calc(var(--u) * 1.25) calc(var(--u) * 2); border-bottom: calc(var(--u) * .25) solid #c9d3cd; vertical-align: top; }
.gs-key-t tr:nth-child(even) td { background: color-mix(in srgb, var(--gr) 10%, #fff); }
.gs-page[data-ink="saver"] .gs-key-t tr:nth-child(even) td { background: #f2f4f3; }
.gs-key-t .n, .gs-tick-t .n { width: calc(var(--u) * 9); font-weight: 800; font-variant-numeric: tabular-nums; }
.gs-key-t .a { font-size: calc(var(--u) * 3.9); font-weight: 800; color: var(--grd); }
.gs-key-t .alt { color: var(--dim); font-size: calc(var(--u) * 2.9); }
.gs-key-t .q { color: var(--dim); font-size: calc(var(--u) * 2.8); font-family: var(--font-body, var(--font-display)); }
.gs-tick-t th { text-align: center; font-size: calc(var(--u) * 3.4); font-family: var(--font-display); font-weight: 800; }
.gs-tick-t th:first-child { text-align: left; }
.gs-tick-t td { height: calc(var(--u) * 6.6); border: calc(var(--u) * .3) solid #9fb0a7; }
.gs-tick-t td.n { border-left: 0; text-align: left; padding-left: calc(var(--u) * 2); }
.gs-tick-t .tot th { padding-top: calc(var(--u) * 2); border-bottom: 0; text-align: left; font-family: var(--font-mono); font-size: calc(var(--u) * 2.6); }
.gs-tick-t .tot td { height: calc(var(--u) * 10); border: calc(var(--u) * .5) solid var(--ik); }

/* print: only the sheets, a page each, at the paper's own size */
.gs-print { display: none; }
@media print {
  html.gs-printing, html.gs-printing body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  html.gs-printing body > *:not(#gsPrint) { display: none !important; }
  html.gs-printing #gsPrint { display: block !important; }
  .gs-print .gs-page { --u: 1mm; width: 210mm; height: 297mm; aspect-ratio: auto; break-after: page; page-break-after: always; box-shadow: none; }
  .gs-print[data-paper="letter"] .gs-page { --u: 1mm; width: 215.9mm; height: 279.4mm; }
  .gs-print .gs-page:last-child { break-after: auto; page-break-after: auto; }
}

/* the hero's drawing: a team sheet with a strip snipped off */
.gs-hero-skirt { justify-self: end; width: min(100%, 300px); height: auto; overflow: visible; }
.gs-hero-skirt .band { fill: var(--paper-white); stroke: var(--ink); stroke-width: 2.4; }
.gs-hero-skirt .sh { fill: var(--riso-green); }
.gs-hero-skirt .p { fill: var(--riso-pink); }
.gs-hero-skirt .y { fill: var(--riso-yellow); }
.gs-hero-skirt .g { fill: var(--riso-green); }
.gs-hero-skirt .tape { fill: color-mix(in srgb, var(--riso-yellow) 70%, transparent); stroke: color-mix(in srgb, var(--ink) 35%, transparent); }
.gs-hero-skirt .col rect, .gs-hero-skirt .strip { fill: #fff; stroke: #1a3a2a; stroke-width: 1.6; stroke-dasharray: 4 2.4; }
.gs-hero-skirt .nums circle { stroke: #1a3a2a; stroke-width: 1.4; }
.gs-hero-skirt .words path, .gs-hero-skirt .cut .w { stroke: color-mix(in srgb, #1a3a2a 40%, transparent); stroke-width: 2.4; stroke-linecap: round; }
.gs-hero-skirt .cut { filter: drop-shadow(4px 4px 0 var(--riso-pink)); }
.gs-hero-skirt .scissors path { stroke: var(--ink); stroke-width: 3.4; stroke-linecap: round; }
.gs-hero-skirt .scissors circle { fill: var(--paper-white); stroke: var(--riso-pink-deep); stroke-width: 3; }
@media (prefers-reduced-motion: no-preference) {
  .gs-hero-skirt .cut { animation: gsSway 4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
  @keyframes gsSway { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
}
@media (max-width: 760px) { .gs-hero-skirt { justify-self: start; width: min(70%, 240px); } }
/* each team's badge in its own colour */
.gs-team[data-t="1"] .gs-ph-team { background: var(--gr); box-shadow: calc(var(--u) * 1.3) calc(var(--u) * 1.3) 0 var(--pk); }
.gs-team[data-t="2"] .gs-ph-team { background: var(--ye); box-shadow: calc(var(--u) * 1.3) calc(var(--u) * 1.3) 0 var(--gr); }
.gs-page[data-ink="saver"].gs-team .gs-ph-team { box-shadow: none; }
.gs-sheet-head .cb-seg { justify-self: start; }