/* ============================================================
   CONCEPTO P — THE LEDGER (rooms/ledger.js)
   Members' first place, on the Members paper (vault.css .mbr tokens): the
   ledger's two ways of seeing its negatives, List · Light table (the current
   one in the gloss, the other plain black), and under them one title,
   Ledger, in the house's largest voice; the register (filing.css) or the
   light table (ledger-stage.css .lt); the materials map in the same place when the
   ledger's second volume is open; a frame's file (file.css).

   Only the house's tokens move here: settle, breath and lift; touch, slow,
   slower. No colour but the ink and its alphas, no gradient, no icon.
   ============================================================ */
.ldg{ position:relative; margin:0; color:var(--mb-ink, #1A1814); }

/* ---------- the head: the two ways of seeing, centred under the letterhead, and under them the title ----------
   23 October: Ledger is the room's one title, in the house's largest voice (.t-hero) and its gloss. Over it, two
   words that act, List · Light table: the current one in the vinyl, the other in plain black, both in the full ink
   (no grey, no pill, nothing drawn round them). The two words stand in the same place in both ways of seeing. */
.ldg-head{ margin:0; display:flex; flex-direction:column; align-items:center; text-align:center; }
.ldg-title{
  /* the descender of its g is given room over the holdings line under it */
  margin:clamp(2px, .8vh, 12px) 0 .14em; line-height:1.02; padding:0 .06em;
  color:var(--mb-ink, #1A1814); -webkit-text-fill-color:currentColor;
}
/* the title's letters carry a wide reach for the hand (type.js), which rose over the two words and took their press:
   the two words stand on a plane above it */
.ldg-views{ position:relative; z-index:2; display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:.32em; margin:0; }
.ldg-views[hidden]{ display:none; }
.ldg-view{
  margin:0; padding:2px 0; border:0; background:none; cursor:pointer;
  color:var(--mb-ink, #1A1814); -webkit-text-fill-color:currentColor;
}
.ldg-view[aria-pressed="true"]{ cursor:default; }
/* plain black: the vinyl is the current word's alone */
.ldg-view[aria-pressed="false"]{ filter:none; }
/* the keyboard's place is told by ink: the word thickens a hair (fluid.css does the same for Negative · Positive) */
.ldg-view:focus-visible{ outline:none; -webkit-text-stroke:.022em currentColor; }
/* the point between them is set in the words' own voice and size, so it sits on their line */
.ldg-views-dot{ color:var(--mb-ink, #1A1814); font-family:var(--display); font-size:var(--t-title); line-height:1.04; }
@media (pointer:coarse){ .ldg-view{ min-height:44px; display:inline-flex; align-items:center; } }
/* the two words arrive with the body, after the title's letters (rooms/ledger.js up) */
.ldg-views{ transition:opacity var(--slow) var(--settle), transform var(--slow) var(--settle); }
.ldg-head:not(.is-in) .ldg-views{ opacity:0; transform:translate3d(0, -10px, 0); }
.ldg-head.is-now .ldg-views{ transition:none; }
/* where the two words stood on the paper while they stand in the light table's head: their place is kept */
.ldg-park{ display:block; visibility:hidden; pointer-events:none; }

/* the materials, hosted on the paper under the title and the holdings: the map's own module draws in it and
   sets its own height (a screen under the letterhead and the menu as a circle, the journey's length as a spine,
   longer with a material's card beside it), so nothing of it is ever cut by this host. The map reads the room
   it must leave under the letterhead as --mm-menu, so its circle is laid in the screen under it. */
.ldg-map{
  --mm-menu:40px;
  position:relative; margin:36px 0 0;
  isolation:isolate;
  opacity:1; transform:none;
  transition:opacity var(--slow) var(--settle), transform var(--slow) var(--settle);
}
.ldg-map.is-arriving{ opacity:0; transform:translate3d(0, 14px, 0); transition:none; }
.ldg-map.is-waiting{ opacity:0; transform:translate3d(0, 14px, 0); }
.ldg.is-now .ldg-map{ transition:none; }
.ldg-map.is-lifting{ opacity:0; transform:translate3d(0, -8px, 0); transition:opacity var(--touch) var(--lift), transform var(--touch) var(--lift); }
@media (pointer:coarse){ .ldg-map{ --mm-menu:50px; } }
/* nothing is laid under the letterhead: the map's own band of ground (matmap.css) is not drawn here */
.ldg-map .mm:not(.is-narrow) .mm-sheet-col::before{ display:none; }

/* a frame's file stands in the register's place; the register is hidden while it is read */
.ldg-file[hidden], .ldg .lg[hidden]{ display:none !important; }
.ldg-file{ opacity:1; transition:opacity var(--touch) var(--lift); }
.ldg-file.is-lifting{ opacity:0; }

/* the one quiet line where a module is not on the page */
.ldg-bare{ padding:calc(var(--nav-h) + 120px) var(--gutter) 120px; }
.ldg-absent{ margin:24px 0 0; line-height:1.5; color:var(--mb-ink-2, rgba(26,24,20,.64)); }

@media (max-width:759px){
  .ldg-map{ margin-top:28px; }
  .ldg-bare{ padding-top:calc(var(--nav-h) + 96px); }
}

/* reduced motion: everything is simply there */
@media (prefers-reduced-motion:reduce){
  .ldg-map, .ldg-file, .ldg-view, .ldg-views{ transition:none !important; }
}

/* ============================================================
   28 OCTOBER: THE THREE WAYS AS THREE DRAWINGS (P: "the way that text is displayed, i hate it")
   A plate (One by one), an index (List), a contact sheet (Light table): small, side by side, the one seen in full
   ink and the others quiet. The hand over one shows its name under it, in the italic of a caption. The drawing
   is a mask, so it is always the ink of the room it stands in (the light table's own, ledger-stage.css).
   ============================================================ */
.ldg-views.is-drawn{ gap:2px; align-items:center; }
.ldg-views.is-drawn .ldg-views-dot{ display:none; }
.ldg-view[data-k]{
  position:relative; width:46px; height:40px; padding:0; font-size:0; line-height:0; color:transparent;
  -webkit-text-fill-color:transparent; filter:none !important;
}
.ldg-view[data-k]::before{
  content:""; position:absolute; left:50%; top:50%; width:26px; height:20px; margin:-10px 0 0 -13px;
  background:var(--mb-ink, #1A1814);
  -webkit-mask:var(--glyph) center / contain no-repeat; mask:var(--glyph) center / contain no-repeat;
  opacity:.28; transition:opacity var(--touch) var(--settle), transform var(--touch) var(--settle);
}
.lt .ldg-view[data-k]::before{ background:var(--lt-ink, #F4F2EE); }
.ldg-view[data-k="one"]{ --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 20'%3E%3Crect x='4' y='3' width='18' height='13' rx='.6'/%3E%3C/svg%3E"); }
.ldg-view[data-k="list"]{ --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 20'%3E%3Crect x='3' y='3.5' width='4' height='2.4'/%3E%3Crect x='9' y='3.5' width='14' height='2.4'/%3E%3Crect x='3' y='8.8' width='4' height='2.4'/%3E%3Crect x='9' y='8.8' width='11' height='2.4'/%3E%3Crect x='3' y='14.1' width='4' height='2.4'/%3E%3Crect x='9' y='14.1' width='13' height='2.4'/%3E%3C/svg%3E"); }
.ldg-view[data-k="light"]{ --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 20'%3E%3Crect x='3' y='3.5' width='5.6' height='5.6'/%3E%3Crect x='10.2' y='3.5' width='5.6' height='5.6'/%3E%3Crect x='17.4' y='3.5' width='5.6' height='5.6'/%3E%3Crect x='3' y='10.9' width='5.6' height='5.6'/%3E%3Crect x='10.2' y='10.9' width='5.6' height='5.6'/%3E%3Crect x='17.4' y='10.9' width='5.6' height='5.6'/%3E%3C/svg%3E"); }
.ldg-view[data-k][aria-pressed="true"]::before{ opacity:1; }
@media (hover:hover){ .ldg-view[data-k]:hover::before{ opacity:.72; } .ldg-view[data-k][aria-pressed="true"]:hover::before{ opacity:1; } }
.ldg-view[data-k]:focus-visible{ -webkit-text-stroke:0; }
.ldg-view[data-k]:focus-visible::before{ opacity:1; transform:scale(1.12); }
/* its name, under it, while the hand is on it */
.ldg-view[data-k]::after{
  content:attr(data-word); position:absolute; left:50%; top:100%; transform:translate(-50%, -4px);
  font-family:var(--display); font-style:italic; font-size:15px; line-height:1; letter-spacing:0; white-space:nowrap;
  color:var(--mb-ink, #1A1814); -webkit-text-fill-color:currentColor; opacity:0; pointer-events:none;
  transition:opacity var(--touch) var(--settle), transform var(--touch) var(--settle);
}
.lt .ldg-view[data-k]::after{ color:var(--lt-ink, #F4F2EE); }
@media (hover:hover){ .ldg-view[data-k]:hover::after{ opacity:1; transform:translate(-50%, 0); } }
.ldg-view[data-k]:focus-visible::after{ opacity:1; transform:translate(-50%, 0); }
@media (pointer:coarse){ .ldg-view[data-k]{ min-height:44px; width:50px; display:inline-block; } }