/* The margin on a tablet or a phone (1080px wide and under). There is no room beside the text, so
   the right squiggle stays the sheet's right edge, narrow, and brings the margin over the whole page
   as a layer from the right, the squiggle travelling with it as the layer's cut left edge. The layer
   is the desk, and the cards lie on it as a loose pile of papers, each in its own shape and colour
   (margin.css), a little askew, showing its top (its first line, the words it rings, its writer's
   mark) and lying over the bottom of the one before. A tap lifts a card where it lies, straight and
   open in full; the cards below make room (margin_controller.js eases them there).
   The same rules serve a paper's margin and a binder's (`.binder-paper`).

   Unlayered, so it wins over the binder page's own narrow rules (stack.css, in @layer components)
   without a race of selectors; everything here is inside the one media query, so the desk at full
   width is untouched. Open state lives on <html>: data-margin="open", "closing" while it slides
   away, data-margin-drag while a finger pulls it (margin_controller.js). */
@media (max-width: 1080px) {
  :root {
    --layer-w: min(100vw, 30rem);  /* the whole page on a phone; a wide sheet on a tablet */
    --edge: 28px;                  /* the right squiggle's width: the tap, not the drawing */
    --cut: 21px;                   /* where the desk begins: the far side of the squiggle's wave */
    --edge-travel: calc(var(--layer-w) - var(--edge));
    --inset: calc(var(--edge) + 1.1rem); /* the layer's content, clear of the squiggle */
    --peek: 3.6rem;                /* how tall a card in the pile is, shut: its top */
    --overlap: 0.8rem;             /* and how much of that the next card covers */
    --settle: cubic-bezier(.2, .8, .2, 1);
    /* Papers on a desk: each edge just shaded, a soft shadow under; lifted, a deeper one. */
    --pile-edge: light-dark(oklch(var(--lch-shade) / 0.07), oklch(var(--lch-glint) / 0.07));
    --pile-shadow: 0 0 0 0.5px var(--pile-edge), 0 1px 3px light-dark(oklch(var(--lch-shade) / 0.1), oklch(var(--lch-night) / 0.35)), 0 8px 18px -12px light-dark(oklch(var(--lch-shade) / 0.35), oklch(var(--lch-night) / 0.7));
    --lifted-shadow: 0 0 0 0.5px var(--pile-edge), 0 3px 8px -3px light-dark(oklch(var(--lch-shade) / 0.2), oklch(var(--lch-night) / 0.45)), 0 24px 40px -22px light-dark(oklch(var(--lch-shade) / 0.6), oklch(var(--lch-night) / 0.85));
    /* The desk's side of the squiggle's wave: the cut edge of the layer, filled to the right. */
    --wave-y-desk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 24'%3E%3Cpath d='M6 0 C 0 6 0 6 6 12 S 12 18 6 24 H12 V0 Z' fill='black'/%3E%3C/svg%3E");
  }

  /* The sheet: the text, then the squiggle as its right edge, top to bottom. */
  .sheet-body { grid-template-columns: minmax(0, 1fr) var(--edge); }
  .sheet-body > .edge-squiggle {
    display: block; width: var(--edge); grid-column: 2; grid-row: 1 / 3;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  .edge-squiggle::before { inset: 0 calc((var(--edge) - 14px) / 2); mask-size: 14px 28px; -webkit-mask-size: 14px 28px; }

  /* Brought out: the squiggle leaves the sheet and becomes the layer's left edge, coming in from
     where it stood (--edge-travel, measured on opening) and going back there on closing. */
  html[data-margin] .sheet-body > .edge-squiggle {
    position: fixed; z-index: 46; inset-block: 0; inset-inline-end: calc(var(--layer-w) - var(--edge));
    height: auto; margin: 0; transition: transform 220ms ease-out;
  }
  html[data-margin=open] .sheet-body > .edge-squiggle { animation: edge-in 220ms ease-out; }
  html[data-margin=closing] .sheet-body > .edge-squiggle { transform: translateX(var(--edge-travel)); }
  html[data-margin] .sheet-body > .edge-squiggle .edge-count { display: none; }
  @keyframes edge-in { from { transform: translateX(var(--edge-travel)); } }
  /* The desk runs up to the wave and no further: left of it is whatever lies under the layer (the
     sheet on a phone, the dimmed page on a tablet), so the layer's edge is the squiggle itself. */
  html[data-margin] .sheet-body > .edge-squiggle::after {
    content: ""; position: absolute; z-index: -1; inset-block: 0; inset-inline: calc((var(--edge) - 14px) / 2) calc(var(--edge) - var(--cut));
    background: var(--desk);
    mask: var(--wave-y-desk) repeat-y 0 0 / 14px 28px; -webkit-mask: var(--wave-y-desk) repeat-y 0 0 / 14px 28px;
  }

  /* The layer: the desk. Put away it waits off the right edge, unseen. */
  .sheet-body > .margin {
    position: fixed; z-index: 45; inset-block: 0; inset-inline: auto 0; width: var(--layer-w); height: auto; max-height: none;
    align-self: stretch; justify-self: stretch; /* a fixed box aligned to start would shrink to its cards */
    display: flex; flex-direction: column; gap: 0; align-content: normal;
    margin: 0; border: 0; padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 3rem) var(--inset);
    background: linear-gradient(to right, transparent var(--cut), var(--desk) var(--cut)); box-shadow: none;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
    opacity: 1; pointer-events: auto; visibility: hidden; transform: translateX(100%);
    transition: transform 220ms ease-out, visibility 0s linear 220ms;
  }
  html[data-margin=open] .sheet-body > .margin { visibility: visible; transform: none; transition: transform 220ms ease-out, visibility 0s; }

  /* Pulled by a finger: layer and squiggle follow it, with nothing easing behind. */
  html[data-margin-drag] .sheet-body > .margin,
  html[data-margin-drag] .sheet-body > .edge-squiggle { transform: translateX(var(--margin-drag, 0px)); transition: none; animation: none; }

  /* With the keyboard up the layer is the part of the screen above it, so a card being written in
     scrolls into view inside it (lib/viewport.js). */
  html[data-keyboard] .sheet-body > .margin,
  html[data-keyboard][data-margin] .sheet-body > .edge-squiggle { inset-block: var(--vv-top, 0px) auto; height: var(--vv-height, 100dvh); }

  /* Opened or closed without being seen to (arriving on a page, a page left with it open). */
  html[data-margin-snap] .sheet-body > .margin,
  html[data-margin-snap] .sheet-body > .edge-squiggle { transition: none !important; animation: none !important; }

  /* On a phone the layer is the whole screen, and what lies left of its edge is the sheet's own. */
  @media (max-width: 30rem) {
    .sheet-body > .margin { background: linear-gradient(to right, var(--paper) var(--cut), var(--desk) var(--cut)); }
  }

  /* The page behind holds still; on a tablet, where the layer does not cover it, it dims, and a tap
     on it puts the margin away. */
  html[data-margin=open], html[data-margin=open] body { overflow: hidden; }
  html[data-margin=open] .desk::after { content: ""; position: fixed; inset: 0; z-index: 44; background: oklch(var(--lch-shade) / 0.28); }

  /* At the top, staying there: what the margin shows, as Home's pills in one row that slides
     sideways, the dashed + at its end, and a drawn line under them. */
  .sheet-body > .margin > .margin-head {
    position: sticky; inset: auto; top: 0; z-index: 900; order: -2; flex: none; align-items: center; gap: 0.7rem;
    margin: 0 -16px 1.5rem calc(var(--cut) - var(--inset));
    padding: calc(env(safe-area-inset-top, 0px) + 0.8rem) 16px 1.15rem calc(var(--inset) - var(--cut));
    background: var(--desk); font-size: 0.8rem;
  }
  .sheet-body > .margin > .margin-head::after {
    content: ""; position: absolute; inset-inline: calc(var(--inset) - var(--cut)) 16px; inset-block-end: 0.3rem; height: 8px;
    background: var(--rule);
    mask: var(--wave-x) repeat-x 0 50% / 16px 8px; -webkit-mask: var(--wave-x) repeat-x 0 50% / 16px 8px;
  }
  .sheet-body > .margin .margin-filters {
    flex-wrap: nowrap; gap: 0.2rem; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin: -0.4rem -0.3rem; padding: 0.4rem 0.3rem;
  }
  .sheet-body > .margin .margin-filters::-webkit-scrollbar { display: none; }
  .sheet-body > .margin .margin-filter {
    flex: none; padding: 0.3rem 0.75rem; border-radius: 999px; color: var(--ink-soft); background: none; font-weight: 400;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  .sheet-body > .margin .margin-filter.is-chosen {
    color: var(--ink); background: var(--paper); font-weight: 700;
    box-shadow: 0 1px 0 var(--rule), 0 3px 8px -5px oklch(var(--lch-shade) / 0.35);
  }
  @media (hover: hover) { .sheet-body > .margin .margin-filter:hover { color: var(--ink); background: var(--paper); } }
  /* Adding, as Basecamp draws it: a dashed, rounded square with a + in it, and no word. */
  .sheet-body > .margin .margin-plus {
    flex: none; width: 2.2rem; height: 2.2rem; border-radius: 9px; font-size: 1.15rem;
    border: 1.5px dashed color-mix(in oklab, var(--ink-soft), transparent 30%); color: var(--ink-soft);
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  .sheet-body > .margin .margin-plus:active { scale: 0.94; }

  /* Nothing in it: a line in soft ink in the middle of the desk, and the + under it. */
  .sheet-body > .margin:not(:has(> .slip:not([hidden]))) > .margin-head .margin-add {
    position: absolute; inset-inline: 0; inset-block-start: calc(100% + 24dvh);
    display: grid; justify-items: center; gap: 1rem;
  }
  .sheet-body > .margin:not(:has(> .slip:not([hidden]))) .margin-empty {
    display: block; padding-inline: 2rem; text-align: center; font-size: 0.95rem; color: var(--ink-soft);
  }
  .sheet-body > .margin:not(:has(> .slip:not([hidden]))) .margin-plus { width: 3rem; height: 3rem; border-radius: 11px; font-size: 1.4rem; }
  .sheet-body > .margin:not(:has(> .slip:not([hidden]))) .margin-add-menu { right: auto; left: 50%; translate: -50% 0; }

  /* The pile. Each card in the reading order of its passage (the margin sets order and z-index),
     shut to its top, a little askew (its lean, --tilt and --shift, comes with it: margin/_slip),
     and lying over the bottom of the one before. */
  .sheet-body > .margin > .slip {
    position: relative; inset: auto; flex: none; font-size: 0.9rem;
    min-height: var(--peek); margin-block: calc(var(--overlap) * -1) 0;
    rotate: var(--tilt, 0deg); translate: var(--shift, 0px) 0;
    cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: rotate 260ms var(--settle), translate 260ms var(--settle), box-shadow 260ms var(--settle), scale 140ms ease-out;
  }
  /* A card in the pile is a thing to pick up, not words to select: a press sinks it a little. */
  .sheet-body > .margin > .slip:not(.is-lifted, .is-editing) { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  .sheet-body > .margin > .slip:not(.is-lifted, .is-editing):active { scale: 0.985; }
  .sheet-body > .margin > .slip a { -webkit-tap-highlight-color: transparent; }

  /* Each keeps its own paper (margin.css); those that have none of their own on the sheet, a note
     pencilled in the margin, a line of where else it is mentioned, are given a slip of it here, and
     the papers that can carry a shadow carry the desk's. A sticky note and a tag are cut to their
     shapes, which a shadow cannot follow, so they lie flat. */
  .sheet-body > .margin > .card.is-note { background: var(--paper); padding: 0.65rem 0.8rem 0.65rem 0.9rem; }
  .sheet-body > .margin > .slip.is-mention,
  .sheet-body > .margin > .slip.is-history,
  .sheet-body > .margin > .slip.is-mention { min-height: 0; color: var(--ink-soft); }
  .sheet-body > .margin > :is(.card.is-note, .card.is-decision, .card.is-evidence, .slip.is-mention, .slip.is-history) { box-shadow: var(--pile-shadow); }
  /* Pointed at from the sheet, a card in the pile is lifted rather than nudged aside. */
  .sheet-body > .margin > .card.is-pointed { transform: none; }

  /* Shut, a card is its top: the rest waits until it is lifted, and the foot the next card covers
     is blank paper. */
  .sheet-body > .margin > .slip:not(.is-lifted, .is-editing) { padding-block-end: calc(var(--overlap) + 0.55rem); }
  .sheet-body > .margin > .slip:not(.is-lifted, .is-editing) :is(.card-body, .card-meta, .card-actions, .slip-why, .slip-meta, .timeline) { display: none; }
  .sheet-body > .margin > .slip:not(.is-lifted, .is-editing) :is(.card-title, .slip-line) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* The writer's mark, at the top right. */
  .sheet-body > .margin .slip-who { display: grid; position: absolute; inset-block-start: 0.55rem; inset-inline-end: 0.65rem; width: 1.4rem; height: 1.4rem; font-size: 0.5rem; }
  .sheet-body > .margin > .slip:has(.slip-who) :is(.card-title, .slip-line) { padding-inline-end: 1.9rem; }

  /* The words a card is about, small, ringed in ballpoint as the sheet rings them (the ring is
     drawn by margin_controller.js with the sheet's own recipe, lib/circles). */
  .sheet-body > .margin .slip-quote {
    display: block; position: relative; margin-block-start: 0.4rem; font-family: var(--font); font-size: 0.72rem; font-weight: 400;
    line-height: 1.3; color: var(--ink-soft); --ballpoint: var(--ink-blue);
  }
  .sheet-body > .margin .card.is-decision .slip-quote { margin-block-start: 0; line-height: var(--pitch); }
  .sheet-body > .margin .slip-quote-words { display: inline-block; max-width: 100%; vertical-align: top; padding: 0.1rem 0.55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sheet-body > .margin .card.is-decision .slip-quote-words { padding-block: 0; }
  .sheet-body > .margin .slip-quote.is-ink-black { --ballpoint: var(--ink-black); }
  .sheet-body > .margin .slip-quote.is-ink-red { --ballpoint: var(--ink-red); }
  .sheet-body > .margin .slip-quote.is-ink-green { --ballpoint: var(--ink-green); }
  .sheet-body > .margin .slip-ring { position: absolute; overflow: visible; pointer-events: none; color: var(--ballpoint); }
  .sheet-body > .margin .slip-ring path { fill: none; stroke: currentColor; stroke-opacity: var(--ring-strength); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

  /* History is not a card in the pile but the log itself, open, under its name, lying on the desk:
     nothing to lift (margin_controller passes it over). */
  .sheet-body > .margin > .slip.is-history { rotate: 0deg; translate: none; background: none; box-shadow: none !important; cursor: auto; padding: 0.4rem 0 0; margin-block: 0.5rem 0; min-height: 0; color: var(--ink); }
  .sheet-body > .margin > .slip.is-history:not(.is-lifted, .is-editing) .timeline { display: block; margin-block-start: 0.4rem; }
  .sheet-body > .margin > .slip.is-history:not(.is-lifted, .is-editing) { padding-block-end: 0; user-select: text; -webkit-user-select: text; }

  /* Lifted where it lies: straight, a little raised, open in full with its words, who and when,
     and what can be done, the cards below moved down to give it room. */
  .sheet-body > .margin > .slip:is(.is-lifted, .is-editing) {
    z-index: 800 !important; rotate: 0deg; translate: 0 -2px; cursor: auto;
    margin-block: 0.5rem calc(var(--overlap) + 0.8rem);
  }
  .sheet-body > .margin > :is(.card.is-note, .card.is-decision, .card.is-evidence, .slip.is-mention, .slip.is-history):is(.is-lifted, .is-editing) { box-shadow: var(--lifted-shadow); }
  .sheet-body > .margin > .slip.is-lifted .card-actions { opacity: 1; }
  .sheet-body > .margin > .slip.is-lifted .card-act { padding-block: 0.3rem; font-size: 0.8rem; }
  .sheet-body > .margin > .card.is-editing { cursor: text; }

  @media (prefers-reduced-motion: reduce) {
    .sheet-body > .margin, html[data-margin] .sheet-body > .edge-squiggle, .sheet-body > .margin > .slip { transition: none; animation: none; }
  }
}

/* A phone: the sheet runs to the screen's edges, so the text gives the squiggle its own room. */
@media (max-width: 60ch) {
  .sheet-body > .sheet-text, .sheet-body > .below { padding-inline-end: 4px; }
}