/* Luke's Stuff with its sections folded. This sits on top of depth.css and
   only changes what lies in the cobalt well: instead of cards, each section is
   one long strip of paper folded down to its cover, the way the paper folds
   in the Fold game. The crease, the turned-away shade and the little handle
   glyph are Fold's. A strip is one piece of paper, so its panels touch; the
   dashed lines between them are the creases it was folded on. */
html[data-fold][data-depth][data-board-style] {
  --paper-back:#d7d5ce; --paper-edge:#aaa79f; --paper-crease:#77736c;

  .folds { display:grid; gap:14px; margin:0; padding:0; list-style:none; }
  .fold { position:relative; }

  /* The cover: the section's name, three places to start, how many pages. */
  .fold-cover { position:relative; z-index:2; display:flex; align-items:center; gap:6px 26px; min-height:56px; padding:0 0 0 14px; background:var(--hue,var(--paper)); color:var(--ink); box-shadow:var(--slip-shadow); cursor:pointer; }
  .fold-toggle { order:2; display:flex; align-items:center; gap:10px; min-height:56px; margin:0 0 0 auto; padding:0 12px 0 10px; border:0; background:none; color:var(--ink); font:inherit; cursor:pointer; }
  /* The name is the button's label but is drawn at the cover's left edge. */
  .fold-toggle .cat-icon { position:absolute; left:14px; top:18px; font-size:18px; }
  .fold-name { position:absolute; left:46px; top:0; display:flex; align-items:center; height:56px; font-size:19px; line-height:1; font-weight:700; letter-spacing:-.025em; }
  .fold-count { min-width:2.6ch; padding:5px 6px 4px; border:1.5px solid var(--ink); font:600 12px/1 var(--mono); text-align:center; }
  .fold-toggle svg,.fold-more svg,.leaf-more svg { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
  .fold-toggle[aria-expanded="true"] svg,.fold-more[aria-expanded="true"] svg,.leaf-more[aria-expanded="true"] svg { transform:rotate(180deg); }
  .fold-toggle:focus-visible,.fold-more:focus-visible { outline:2px solid var(--ink); outline-offset:-6px; }
  .fold-picks { order:1; display:flex; flex-wrap:wrap; gap:0 22px; margin:0 0 0 190px; padding:0; list-style:none; }
  .fold-picks a { display:inline-flex; align-items:center; min-height:44px; color:var(--ink); font-size:15px; line-height:1.2; text-decoration:underline; text-decoration-color:rgba(21,21,21,.4); text-decoration-thickness:1px; text-underline-offset:5px; }
  .fold-picks a:hover { text-decoration-color:var(--ink); }
  .fold-picks a:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }

  /* The folded stack under a closed cover: one thin edge for every page. */
  .fold:not(.is-open) > .fold-cover::after { content:""; position:absolute; z-index:-1; left:2px; right:2px; top:100%; height:calc(var(--plies) * 1.5px + 1px);
    background:repeating-linear-gradient(to bottom,var(--paper-back) 0 2px,var(--paper-edge) 2px 3px); box-shadow:0 2px 3px rgba(0,0,0,.3); clip-path:polygon(0 0,100% 0,calc(100% - 2px) 100%,2px 100%); }
  .fold:not(.is-open) { padding-bottom:calc(var(--plies) * 1.5px + 1px); }

  /* The strip, unfolded. */
  .strip { margin:0; padding:0; list-style:none; box-shadow:0 2px 3px rgba(0,0,0,.24),0 12px 18px -8px rgba(0,0,0,.3); }
  .strip[hidden] { display:none; }
  .seg { position:relative; display:flex; flex-direction:column; justify-content:flex-start; }
  .seg:nth-child(even) { justify-content:flex-end; }
  .face { position:relative; z-index:2; flex:none; display:grid; grid-template-columns:minmax(0,1fr) auto; background:var(--paper); color:var(--ink); transform-origin:50% 0; }
  .seg:nth-child(even) > .face { transform-origin:50% 100%; background:color-mix(in srgb,var(--paper) 97%,#000); }
  /* The crease it was folded on: a dashed line with a lit lower lip. */
  .face::before { content:""; position:absolute; z-index:1; inset:0 0 auto; border-top:1px dashed var(--paper-crease); opacity:.6; box-shadow:0 1px 0 #fff; pointer-events:none; }
  /* A panel leaning away from the light, while the strip is turning. */
  .face::after { content:""; position:absolute; z-index:3; inset:0; background:#000; opacity:var(--shade,0); pointer-events:none; }
  .fold-row { display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:14px; min-height:58px; padding:9px 14px; color:var(--ink); text-decoration:none; }
  .fold-row:hover { background:#fff; }
  .fold-row:focus-visible { outline:2px solid var(--ink); outline-offset:-3px; }
  .fold-art { position:relative; display:block; width:64px; height:40px; overflow:hidden; background:var(--paper-back); }
  .fold-art::after { content:""; position:absolute; inset:10px 22px; background:var(--ink); opacity:.55; -webkit-mask:var(--icon) center / contain no-repeat; mask:var(--icon) center / contain no-repeat; }
  .fold-art img { position:absolute; z-index:1; inset:0; width:100%; height:100%; object-fit:cover; }
  .fold-copy { display:grid; gap:2px; min-width:0; }
  .fold-copy strong { font-size:16px; line-height:1.25; font-weight:700; letter-spacing:-.015em; }
  .fold-copy span { color:var(--muted); font-size:13px; line-height:1.4; }
  .fold-from { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; white-space:nowrap; }
  .fold-more { display:flex; align-items:center; gap:8px; min-width:44px; min-height:44px; margin:0; padding:0 12px 0 8px; border:0; background:none; color:var(--ink); cursor:pointer; }
  .fold-more b { min-width:2.6ch; padding:5px 6px 4px; border:1.5px solid var(--ink); font:600 12px/1 var(--mono); text-align:center; }
  /* A page's own pages: a narrower strip folded out of the same panel. */
  .strip.inner { grid-column:1 / -1; margin:0 0 12px 78px; box-shadow:0 1px 2px rgba(0,0,0,.22),0 6px 10px -6px rgba(0,0,0,.3); }
  .strip.inner .face { background:#fff; }
  .strip.inner .seg:nth-child(even) > .face { background:color-mix(in srgb,#fff 96%,#000); }
  .strip.inner .fold-row { grid-template-columns:48px minmax(0,1fr); gap:12px; min-height:48px; padding:7px 12px; }
  .strip.inner .fold-art { width:48px; height:30px; }
  .strip.inner .fold-copy strong { font-size:15px; font-weight:600; }

  /* ---- One sheet of folded sections (wide screens). The sheet is the middle
     half of the well, two cells across and four down, with a cell's width of
     room to either side and a row of room above. A section's three arms are
     each the size of its cell, hinged on its left, right and top edges, and
     lie folded over it until it opens. The left arm is folded last, so its
     back is the face of the closed section. ---- */
  .folds.as-sheet { --r:136px; --dash:rgba(119,115,108,.6); --turned:#e3e1da; position:relative; display:block; height:calc(var(--r) * 5 + 8px); }
  .folds.as-sheet::before { content:""; position:absolute; left:25%; top:var(--r); width:50%; height:calc(var(--r) * 4); box-shadow:var(--slip-shadow),0 14px 22px -10px rgba(0,0,0,.4);
    background:repeating-linear-gradient(0deg,var(--dash) 0 5px,transparent 5px 9px) 50% 0 / 1px 100% no-repeat,
      linear-gradient(to bottom,var(--paper) calc(100% - 1px),transparent 0) 0 0 / 100% var(--r),
      repeating-linear-gradient(90deg,var(--dash) 0 5px,transparent 5px 9px) 0 0 / 100% var(--r),var(--paper); }
  .leaf { --x:calc(25% + var(--col) * 25%); --y:calc((var(--row) + 1) * var(--r)); position:absolute; inset:0; pointer-events:none; }
  .leaf > * { pointer-events:auto; }
  .sheet-note { position:absolute; left:50%; top:calc(var(--r) * 4); display:flex; align-items:center; width:25%; height:var(--r); padding:0 18px; color:var(--muted); font-size:13px; line-height:1.45; }
  /* Printed on the sheet under the arms: the section, and a line about it. */
  .beneath { position:absolute; left:var(--x); top:var(--y); display:grid; grid-template-rows:44px minmax(0,1fr); width:25%; height:var(--r); color:var(--ink); }
  .beneath-head { display:flex; align-items:center; gap:9px; padding:0 14px; background:var(--hue); font-size:18px; line-height:1; font-weight:700; letter-spacing:-.025em; }
  .beneath-head code,.arm-back code { margin-left:auto; min-width:2.6ch; padding:5px 6px 4px; border:1.5px solid var(--ink); font:600 12px/1 var(--mono); letter-spacing:0; text-align:center; }
  .beneath-about { margin:0; padding:12px 14px 0; font-size:14px; line-height:1.4; }
  /* An image card: the page's picture with its name on a paper tab. */
  .leaf-card { position:relative; display:block; height:100%; overflow:hidden; background:var(--paper-back); color:var(--ink); text-decoration:none; }
  .leaf-card .fold-art { position:absolute; inset:0; width:auto; height:auto; }
  .leaf-card strong { position:absolute; z-index:2; left:0; bottom:0; max-width:100%; padding:5px 9px 4px; background:var(--paper); font-size:14px; line-height:1.2; font-weight:700; letter-spacing:-.01em; }
  .leaf-card strong small,.leaf-row strong small { display:block; margin-top:1px; color:var(--muted); font-size:11px; line-height:1.2; font-weight:400; letter-spacing:0; }
  .leaf-card:focus-visible { outline:2px solid var(--ink); outline-offset:-2px; }
  /* The best match of a search. */
  .leaf-card.is-hit { outline:3px solid var(--ink); outline-offset:-3px; }
  /* An arm has two faces and is drawn where it lies when open; closed, it is turned over onto the cell. */
  .arm { position:absolute; width:25%; height:var(--r); transform-style:preserve-3d; }
  .arm.left { z-index:4; left:calc(var(--x) - 25%); top:var(--y); transform-origin:100% 50%; transform:perspective(1700px) rotateY(180deg); }
  .arm.right { z-index:3; left:calc(var(--x) + 25%); top:var(--y); transform-origin:0 50%; transform:perspective(1700px) rotateY(-180deg); }
  .arm.up { z-index:2; left:var(--x); top:calc(var(--y) - var(--r)); transform-origin:50% 100%; transform:perspective(1700px) rotateX(-180deg); }
  .leaf.is-open :is(.arm.left,.arm.right) { transform:perspective(1700px) rotateY(0deg); }
  .leaf.is-open .arm.up { transform:perspective(1700px) rotateX(0deg); }
  /* The open section lies over its neighbours, and stays there until it has folded away. */
  .leaf.is-top .arm.left { z-index:14; } .leaf.is-top .arm.right { z-index:13; } .leaf.is-top .arm.up { z-index:12; }
  .arm-in,.arm-back { position:absolute; inset:0; overflow:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; background:var(--paper); color:var(--ink); box-shadow:var(--slip-shadow); }
  .arm-in { padding:8px; }
  /* An arm with nothing to show is the plain inside of the paper. */
  .arm-in:empty::after { content:""; position:absolute; inset:34px; background:var(--ink); opacity:.07; -webkit-mask:var(--icon) center / contain no-repeat; mask:var(--icon) center / contain no-repeat; }
  .arm-back { transform:rotateY(180deg); background:var(--turned); }
  .arm.up .arm-back { transform:rotateX(180deg); }
  .arm.left .arm-back { display:flex; align-items:center; gap:10px; padding:0 18px; background:var(--hue); }
  /* A section with nothing found in it fades. */
  .leaf.is-empty .arm.left .arm-back { filter:saturate(.25); }
  .arm-back .cat-icon { font-size:22px; }
  .leaf-name { font-size:23px; line-height:1; font-weight:700; letter-spacing:-.035em; }
  /* What is printed inside the arm shows through its back, the wrong way round. */
  .ghost { position:absolute; inset:auto 16px 12px auto; transform:scaleX(-1); color:#151515; font-size:14px; line-height:1.2; font-weight:700; white-space:nowrap; opacity:.13; filter:blur(.7px); pointer-events:none; }
  /* The list: the concertina, falling from the cell's bottom edge over the sections below. */
  .strip.side { position:absolute; z-index:15; left:var(--x); top:calc(var(--y) + var(--r)); width:25%; }
  .leaf-row { display:grid; grid-template-columns:44px minmax(0,1fr); align-items:center; gap:10px; min-height:46px; padding:0 12px; color:var(--ink); font-size:14px; line-height:1.2; text-decoration:none; }
  .leaf-row:hover { background:#fff; }
  .leaf-row:focus-visible { outline:2px solid var(--ink); outline-offset:-3px; }
  .leaf-row .fold-art { width:44px; height:28px; }
  .leaf-row .fold-art::after { inset:6px 14px; }
  .leaf-row strong { overflow:hidden; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
  .strip.side .strip.inner { margin:0 0 8px 22px; }
  .strip.side .fold-more { padding:0 8px 0 2px; }
  .leaf-toggle { position:absolute; z-index:5; left:var(--x); top:var(--y); width:25%; height:var(--r); margin:0; padding:0; border:0; background:none; cursor:pointer; }
  .leaf.is-open .leaf-toggle { z-index:16; height:44px; }
  .leaf-toggle:focus-visible { outline:2px solid var(--ink); outline-offset:-5px; }
  /* One control beside the heading puts away whatever is open. */
  #groups .on { display:inline-block; margin-right:16px; }
  .fold-all { min-height:44px; margin:-12px 0 -2px; padding:0; border:0; background:none; color:var(--paper); font:500 13px/1 inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; cursor:pointer; }
  .fold-all:focus-visible { outline:2px solid var(--paper); outline-offset:2px; }
  .fold-all[hidden] { display:none; }
  /* On the sheet there is no list underneath. */
  &.sheet-only .board { display:none; }
  @media(prefers-reduced-motion:no-preference) {
    /* Opening: left, then right, then up. Closing: the other way round. */
    .arm { transition:transform .48s cubic-bezier(.3,.05,.2,1); }
    .leaf.is-open .arm.right { transition-delay:.17s; }
    .leaf.is-open .arm.up { transition-delay:.34s; }
    .leaf:not(.is-open) .arm.right { transition-delay:.1s; }
    .leaf:not(.is-open) .arm.left { transition-delay:.2s; }
    .folds.as-sheet { transition:min-height .3s ease; }
  }

  @media(max-width:900px) {
    /* The three places to start drop to a second line of the cover. */
    .fold-cover { flex-wrap:wrap; padding-left:0; }
    .fold-toggle { order:1; width:100%; justify-content:flex-end; }
    .fold-picks { order:2; margin:0; padding:0 14px 8px; border-top:1px dashed var(--line); width:100%; }
    .fold-from { display:none; }
  }
  @media(max-width:700px) {
    .fold-row { grid-template-columns:52px minmax(0,1fr); gap:12px; padding:9px 12px; }
    .fold-art { width:52px; height:34px; }
    .strip.inner { margin-left:20px; }
  }
  @media(forced-colors:active) {
    .fold-cover,.face { border:1px solid CanvasText; box-shadow:none; }
    .fold:not(.is-open) > .fold-cover::after,.face::after { display:none; }
    .fold-picks a { color:LinkText; }
  }
}