/* The indexes: price diaries (/diaries/) and guides (/guides/) (step 6, batch 2, worker 4).
   Built from the desk's own parts (DESIGN.md §6–§7): the stamp strip of "Further along
   the row", a Filed folder tab over each row, and the receipt's look for the kits. No
   inline styles; owned by the index page types. */

/* ---------- the head ---------- */
.ix{--strip-pad:14px;--cell-pad:14px;--gtabs-in:calc(var(--strip-pad) + var(--cell-pad))}  /* the strip's white border and each stamp's inset */
.ix-head .sw{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;padding-block:30px 30px}
.ix-head .pm{margin-right:12px}
/* the head's rhythm (top line, h1, lede) is desk.css's, as on every page */

/* the rows on the desk: small folder tabs that jump to each row */
/* every tab starts on one line: the left edge of a row's first stamp (its pastel box) */
.ix-jump ul{list-style:none;margin:0;padding:0 0 0 calc(var(--strip-pad) + var(--cell-pad));display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.ix-jump a{display:flex;align-items:baseline;gap:8px;padding:8px 14px 9px;border-radius:9px 9px 0 0;text-decoration:none;font:var(--dw) 17px/1.05 var(--display);letter-spacing:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.ix-jump a b{font:400 11px/1 var(--label);letter-spacing:.1em;color:color-mix(in srgb,var(--ink) 74%,transparent)}
.ix-jump a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent)}
.ix-jump a{background:var(--tint)}  /* its row's pastel (tint-*) */

/* ---------- the rows: each its Filed tab on top of its strip, like a folder ---------- */
/* Rows sit on a four-column grid, each spanning as many columns as it has stamps (up to
   four), so a desk of small rows never leaves empty strip; a longer row wraps. */
.ix-rows{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row dense;gap:40px 28px;padding-block:30px 6px}  /* dense: a small row fills a gap left beside a longer one */
.ix-row{min-width:0;scroll-margin-top:12px}
.ix-row.s1{grid-column:span 1}.ix-row.s2{grid-column:span 2}.ix-row.s3{grid-column:span 3}.ix-row.s4{grid-column:1/-1}
/* the count rides on the tab's baseline; if a long name leaves no room, it moves above the
   tab (wrap-reverse), never between the tab and its strip */
.rowtop{display:flex;align-items:baseline;justify-content:space-between;gap:4px 14px;flex-wrap:wrap-reverse;padding-left:calc(var(--strip-pad) + var(--cell-pad))}
/* A filing tab: the row's name alone, short and wide (owner, 7 Oct). It sits behind the
   strip, as an index card's tab sits behind the card in front: its foot runs under the
   strip's top edge, 1 px short of the strip's white border, so the edge and its holes are
   drawn over it and it never reaches the stamps. Its row's pastel (tint-*). */
.rowtab{--tuck:calc(var(--strip-pad) - 1px);margin:0 0 calc(-1 * var(--tuck));padding:8px 30px calc(8px + var(--tuck));text-align:center;
  min-width:min(170px,100%);  /* short and wide; its count sits above it */
  /* never past its row's first-line stamps: the strip's border and the stamp's inset come
     off the right as well as the left (owner, 7 Oct); a long name wraps inside it */
  max-width:calc(100% - var(--strip-pad) - var(--cell-pad));text-wrap:balance;
  border-radius:9px 9px 0 0;background:var(--tint);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);position:relative;z-index:0;
  font-family:var(--display);font-weight:var(--dw);font-size:24px;line-height:1.1;letter-spacing:var(--dtrack);overflow-wrap:break-word}
.ix-row.s1 .rowtab{padding-inline:18px}  /* a one-stamp row: narrower sides, more room for a long name */
/* the count: always on its own line above the tab, at the right, so it sits the same way
   over a one-line and a two-line tab (review, 8 Oct); wrap-reverse keeps it above */
.rowtop .when{margin:0 0 6px auto;flex-basis:100%;text-align:right}

/* Rows side by side on one grid line are one height (owner, 7 Oct): each row stretches
   to the line, its strip fills the row below its tab, and its stamps fill the strip, so
   the cards' bottoms and the diary notes line up. Desktop only; phones keep their layout. */
@media (min-width:761px){
  .ix-rows{align-items:stretch}
  .ix-row{display:flex;flex-direction:column}
  .ix .rowwrap{flex:1;display:flex}
  .dstrip{flex:1}
  /* every note breaks the same way ("read its price / diary →"), whatever its card's width,
     so the notes share their baselines across the grid line */
  .dstrip .diarynote{max-width:150px}
}

/* the strip of stamps (as the product page's "Further along the row"); `c1`–`c4`: stamps
   across. Perforations between the stamps on a line, and between the lines. */
.ix .rowwrap{filter:drop-shadow(0 8px 16px var(--shadow));position:relative;z-index:1}  /* over its tab */
.dstrip{background:var(--white);padding:var(--strip-pad);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0}
.dstrip.c1{grid-template-columns:minmax(0,1fr)}.dstrip.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.dstrip.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dstrip .cell{position:relative;padding:10px var(--cell-pad);min-width:0}
.dstrip .cell::before,.dstrip .cell::after{content:"";position:absolute;display:none}
.dstrip .cell::before{left:-4px;top:0;bottom:0;width:8px;background:radial-gradient(circle 3.2px,var(--ground) 96%,transparent) 50% 0/8px 13px repeat-y}
.dstrip .cell::after{left:0;right:0;top:-4px;height:8px;background:radial-gradient(circle 3.2px,var(--ground) 96%,transparent) 0 50%/13px 8px repeat-x}
.dstrip.c2 .cell:nth-child(2n)::before,.dstrip.c3 .cell:not(:nth-child(3n+1))::before,.dstrip.c4 .cell:not(:nth-child(4n+1))::before{display:block}
.dstrip.c2 .cell:nth-child(n+3)::after,.dstrip.c3 .cell:nth-child(n+4)::after,.dstrip.c4 .cell:nth-child(n+5)::after{display:block}
.dstrip .in{background:var(--tint);padding:14px 14px 16px;height:100%;position:relative;border:1.5px solid color-mix(in srgb,var(--ink) 40%,transparent);display:flex;flex-direction:column}
.dstrip .in.nophoto{padding-top:22px}
.dstrip .mount{height:176px}
.dstrip .st{font:var(--dw) 19px/1.12 var(--display);letter-spacing:var(--dtrack);margin:10px 0 6px;overflow-wrap:break-word}
.dstrip .when{margin:0}
.dstrip .diarynote{display:block;margin-top:auto;padding-top:14px;font-size:24px;align-self:flex-start;text-wrap:balance}  /* block: the arrow follows the words when they wrap */
/* the whole stamp opens its diary; the note is the link */
.dstrip .diarynote::after{content:"";position:absolute;inset:0}
.dstrip .diarynote:focus-visible{outline:none}
.dstrip .cell:focus-within .in{outline:2px solid var(--ink2);outline-offset:2px}
.dstrip .cell:hover .diarynote{color:var(--ink2)}
.dstrip .cell:hover .diarynote .arr{transform:translateX(4px)}

/* ---------- the guides index: two parts, costed kits and round-ups (owner, 7 Oct) ---------- */
.ix-part{padding-block:30px 40px}
.ix-part .slips,.ix-part .rounds{margin-top:34px}
/* the round-ups on a paper band, so the two parts read as two */
.ix-rounds{background:var(--paper);border-block:1px solid var(--rule);padding-block:44px 54px}

/* ---------- the guides: each kit a slip in the receipt's look ---------- */
.slips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 34px;align-items:start}
.slip{position:relative;filter:drop-shadow(0 10px 18px var(--shadow))}
.slip.k0{transform:rotate(-.8deg)}.slip.k1{transform:rotate(.9deg);margin-top:18px}.slip.k2{transform:rotate(-.4deg);margin-top:6px}
.slip .face{position:relative;background:var(--white);padding:26px 26px 42px;font:400 14px/1.45 var(--label);--z:14px;display:flex;flex-direction:column}
.slip .num{position:absolute;left:-14px;top:-16px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--butter);font:var(--dw) 18px/1 var(--display);font-variant-numeric:lining-nums;z-index:3}  /* outside the face, so the pinked mask never cuts it */
.slip .rh{text-align:center;padding-bottom:12px;border-bottom:1px dashed color-mix(in srgb,var(--ink) 35%,transparent);margin-bottom:14px}
.slip .rh .wm{font-size:20px}
.slip .rh .when{margin-top:6px}
.slip .lbl{margin-top:2px}
.slip h3{font-size:clamp(24px,2.3vw,30px);margin-top:8px}
.slip .cover{text-decoration:none}
.slip .cover::after{content:"";position:absolute;inset:0}  /* the whole slip opens its guide */
.slip .cover:focus-visible{outline:none}
/* the focus ring sits on the slip itself: the face's pinked mask would cut it away */
.slip:focus-within{outline:2px solid var(--ink2);outline-offset:6px}
.slip .for{margin:10px 0 0;font:400 15px/1.5 var(--sans);color:color-mix(in srgb,var(--ink) 78%,transparent)}
.slip .ri{display:flex;justify-content:space-between;gap:12px;margin:18px 0 0;padding:10px 0;border-top:1px dotted color-mix(in srgb,var(--ink) 25%,transparent);border-bottom:2px solid var(--ink)}
.slip .ri .tnum{font-weight:500}
.slip .open{margin:14px 0 0;text-transform:uppercase;letter-spacing:.12em;font-size:12px}
.slip .open .arr{display:inline-block;color:var(--accent-ink);transition:transform .3s ease}
.slip:hover .cover{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--accent)}
.slip:hover .open .arr{transform:translateX(6px)}
@media (prefers-reduced-motion:no-preference){
  .slip{transition:transform .5s cubic-bezier(.16,1,.3,1)}
  .slip:hover{transform:rotate(0) translateY(-3px)}
}

/* ---------- the round-ups: each a small stack of find cards ---------- */
/* the first find's card on top (white, a stamp edge, a dashed inner rule, its photo in its
   frame), and the same two cards behind every stack, in its first find's category's pastel
   (tint-*, as its Pins; owner, 7 Oct). Stacks on one grid line are one height; a card
   without a photo centres its words in that height. */
.rounds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 38px;align-items:stretch}  /* stacks on a line one height: a photo-less one as big as its neighbours (owner, 7 Oct) */
.round{position:relative;isolation:isolate;filter:drop-shadow(0 8px 16px var(--shadow));display:flex}
.round::before,.round::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--tint);border:1.5px solid color-mix(in srgb,var(--ink) 18%,transparent)}
.round::before{transform:rotate(2.6deg) translate(7px,4px)}
.round::after{transform:rotate(-2deg) translate(-6px,6px);background:color-mix(in srgb,var(--tint) 60%,var(--white))}
.round .card{transform:rotate(-.6deg);flex:1;display:flex;min-width:0}
.round:nth-child(even) .card{transform:rotate(.5deg)}
.round .face{position:relative;background:var(--white);padding:22px 22px 24px;flex:1;display:flex;flex-direction:column}
.round .face.nophoto{justify-content:center}  /* no photo: its words centred in the card (owner, 7 Oct) */
.round .face::after{content:"";position:absolute;inset:9px;border:1.4px dashed color-mix(in srgb,var(--ink) 22%,transparent);pointer-events:none}
.round .mount{height:200px}
.round .lbl{margin-top:14px}
.round .nophoto .lbl{margin-top:0}
.round h3{font-size:clamp(22px,2.1vw,26px);margin-top:8px;overflow-wrap:break-word}
.round .when{margin-top:8px}
.round .cover{text-decoration:none}
.round .cover::after{content:"";position:absolute;inset:0;z-index:2}  /* the whole card opens the round-up */
.round .cover:focus-visible{outline:none}
/* on the card, not the stamp-masked face, which would cut the ring away (review, 7 Oct) */
.round:focus-within .card{outline:2px solid var(--ink2);outline-offset:6px}
.round:hover .cover{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  .round .card{transition:transform .5s cubic-bezier(.16,1,.3,1)}
  .round:hover .card{transform:rotate(0) translateY(-3px)}
}

/* ---------- the small print ---------- */
.ix-small{padding-block:34px 40px}
.ix-small p{margin:6px 0 0}

/* ---------- phone ---------- */
@media (max-width:900px){
  .slips,.rounds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .slip.k1,.slip.k2{margin-top:0}
}
@media (max-width:760px){
  /* two columns: a row of one stamp takes one, any longer row both, two stamps across */
  .ix-rows{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 16px}
  .ix-row.s2,.ix-row.s3{grid-column:1/-1}
  .dstrip.c3,.dstrip.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dstrip.c3 .cell::before,.dstrip.c4 .cell::before,.dstrip.c3 .cell::after,.dstrip.c4 .cell::after{display:none}
  .dstrip.c3 .cell:nth-child(2n)::before,.dstrip.c4 .cell:nth-child(2n)::before{display:block}
  .dstrip.c3 .cell:nth-child(n+3)::after,.dstrip.c4 .cell:nth-child(n+3)::after{display:block}
  .ix{--strip-pad:10px;--cell-pad:8px}
  .rowtab,.ix-row.s1 .rowtab{padding-inline:12px;min-width:min(120px,100%);font-size:19px}
  .dstrip .mount{height:140px}
  .dstrip .frame img{width:auto;max-height:108px}  /* keeps its shape: the width follows */
  .dstrip .cell{padding-block:8px}
  .dstrip .in{padding:10px 10px 12px}
  .dstrip .st{font-size:17px}
  .dstrip .diarynote{font-size:22px}
}
/* Rows side by side share their strips' top edge as well as their foot, whether or not a
   long name moved its count above its tab (correctness review, 7 Oct), at every width:
   each row takes two lines of the rows' grid (its top line, then its strip), the top lines
   sit at their line's foot on the strip, and the strip fills its line. */
@supports (grid-template-rows:subgrid){
  .ix-row{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
  .rowtop{align-self:end}
  .ix .rowwrap{display:flex}
  .dstrip{flex:1}
}
@media (max-width:620px){
  .slips,.rounds{grid-template-columns:minmax(0,1fr);gap:30px}
  .ix-rounds{padding-block:34px 44px}
  /* the cards behind stay inside the page's gutter */
  .round::before{transform:rotate(1.4deg) translate(3px,4px)}
  .round::after{transform:rotate(-1.1deg) translate(-3px,6px)}
  .ix-head .pm.lg{width:72px;height:72px}
}
@media (max-width:420px){
  /* a narrow stamp holds a long word whole ("Encouragement"): words wrap at spaces, and
     break inside only as a last resort (review, 8 Oct) */
  .dstrip .in{padding-inline:8px}
  .dstrip .st{font-size:15px}
  /* a long row name ("Party Decorations") stays whole on a phone, whatever the system's
     font rendering (it broke on Linux, CI 8 Oct) */
  .rowtab,.ix-row.s1 .rowtab{font-size:17px;padding-inline:10px}
  .ix-jump a{font-size:15px;padding-inline:11px}
  .ix-head .sw{grid-template-columns:minmax(0,1fr)}
  .ix-head .pm{justify-self:end;margin-top:-10px}
}

/* the round-ups' band as the current tab's drawer */
.ix-rhead{padding-bottom:22px}
.rnav .gtabs a[aria-current]{background:var(--paper);border-bottom-color:var(--paper)}
/* with group tabs, the round-ups sit in a paper box with rounded corners, as the price
   diaries' drawer (owner, 15 Oct: "the left corner of the box … should be rounded") */
.ix-rounds.tabbed{background:none;border-block:0;padding-block:0 40px}
.ix-rounds.tabbed .rbox{background:var(--paper);border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);border-radius:10px;padding:40px clamp(16px,3vw,36px) 46px}
.ix-rounds.tabbed .rounds{margin-top:0}
/* the index: each group's rows under its name */
.ix-group{padding-top:46px}
.ghead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:0;padding-bottom:10px;border-bottom:1px solid color-mix(in srgb,var(--ink) 22%,transparent);font-family:var(--display);font-weight:var(--dw);font-size:clamp(26px,2.8vw,34px);line-height:1.05;letter-spacing:var(--dtrack)}
.ghead a{text-decoration:none}
.ghead a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--accent)}
.ix-group .ix-rows{padding-top:26px}
@media (max-width:760px){
  .ix-group{padding-top:36px}
}