/* HEY's squiggle: a drawn wave, used as a mask so it takes whatever colour it is given. */
:root {
  --wave-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 6 C 6 0 6 0 12 6 S 18 12 24 6' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E");
  --wave-y: 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' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E");
}

@layer components {
  .desk {
    display: grid; justify-content: center;
    padding: 0 calc(var(--inline-space) * 4) calc(var(--block-space) * 9);
  }

  /* Turning pages. */
  .turn {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 2ch;
    margin-block-end: 0.9rem;
    font-size: 0.78rem; color: var(--ink-soft);
  }
  .turn-side { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .turn-side.is-next { text-align: end; }
  .turn-link, .turn-count { text-decoration: none; }
  .turn-link:hover, .turn-count:hover { color: var(--ink); }
  .turn-count { padding: 0.15em 0.8em; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); }

  .sheet-column { display: grid; justify-items: center; min-width: 0; }
  .turn { width: 100%; }

  /* The sheet, with the sheets behind it showing as edges. */
  .paper {
    position: relative; background: var(--paper); border-radius: 2px; box-shadow: var(--shadow), 0 0 0 1px var(--sheet-edge);
    padding-block-start: calc(var(--block-space) * 2.25);
  }
  /* Text, the right squiggle, and the margin sit side by side on the same sheet. The margin
     column is closed until the right squiggle opens it, and then the sheet itself is wider. */
  .sheet-body {
    display: grid; align-items: stretch;
    grid-template-columns: minmax(0, calc(var(--measure) + 8ch)) 30px 0;
    transition: grid-template-columns 200ms ease-out;
  }
  html[data-margin=open] .sheet-body { grid-template-columns: minmax(0, calc(var(--measure) + 8ch)) 30px 36ch; }
  /* At 1080px and under: the text and the squiggle, with the margin as a layer (margin_layer.css). */
  .sheet-text { --sheet-start: calc(var(--inline-space) * 4); --sheet-end: calc(var(--inline-space) * 2); min-width: 0; padding-inline: var(--sheet-start) var(--sheet-end); }
  /* Two rows: the text, then the paper below the cut. The right squiggle and the margin run the
     full height, so with the margin out the right squiggle goes all the way down to the corner. */
  .sheet-text { grid-column: 1; grid-row: 1; }
  .sheet-body > .below { grid-column: 1; grid-row: 2; padding-inline: calc(var(--inline-space) * 4) calc(var(--inline-space) * 2); }
  /* The right squiggle stops as far above the sheet's bottom edge as it starts below its top. */
  .sheet-body > .edge-squiggle { grid-column: 2; grid-row: 1 / 3; margin-block-end: calc(var(--block-space) * 2.25); }
  .sheet-body > .margin { grid-column: 3; grid-row: 1 / 3; }
  .paper[data-behind="1"] { box-shadow: var(--shadow), 0 0 0 1px var(--sheet-edge), 5px 5px 0 -1px var(--paper), 5px 5px 0 0 var(--rule); }
  .paper[data-behind="2"] { box-shadow: var(--shadow), 0 0 0 1px var(--sheet-edge), 5px 5px 0 -1px var(--paper), 5px 5px 0 0 var(--rule), 10px 10px 0 -1px var(--paper), 10px 10px 0 0 var(--rule); }
  .paper[data-behind="3"] { box-shadow: var(--shadow), 0 0 0 1px var(--sheet-edge), 5px 5px 0 -1px var(--paper), 5px 5px 0 0 var(--rule), 10px 10px 0 -1px var(--paper), 10px 10px 0 0 var(--rule), 15px 15px 0 -1px var(--paper), 15px 15px 0 0 var(--rule); }
  .paper.is-old { background: color-mix(in oklab, var(--paper), var(--desk) 40%); }

  /* Old versions and proposed changes are read on the same paper, without the editor's margin. */
  .paper.is-old, .paper.is-review { max-width: calc(var(--measure) + 8ch); margin-inline: auto; padding: calc(var(--block-space) * 2.25) calc(var(--inline-space) * 4) calc(var(--block-space) * 2); }
  .paper.is-old .paper-head, .paper.is-review .paper-head { display: block; margin-block-end: calc(var(--block-space) * 1.5); }
  .paper-places { margin-block: 0.1rem 0.6rem; font-size: 0.78rem; color: var(--ink-soft); }
  .paper-places a { color: var(--ink); }
  .paper-unplace { margin-inline: 0.15rem 0.1rem; color: var(--ink-soft); font-size: 0.85rem; line-height: 1; }
  .paper-unplace:hover { color: var(--ink); }
  .paper-stays { margin-block: 0.2rem 0.8rem; padding: 0.35rem 0.7rem; border-inline-start: 3px solid var(--ink); font-size: 0.8rem; color: var(--ink); background: var(--desk); }
  .paper-stays[hidden] { display: none; }
  .paper-kind { font-size: 0.72rem; color: var(--ink-soft); margin-block-end: 0.4rem; }
  .paper-head .paper-title { font-size: 1.5rem; line-height: 1.25; margin-block-end: 0.5rem; }
  .paper-alert { font-size: 0.8rem; font-weight: 700; margin-block-end: var(--block-space); border-inline-start: 3px solid var(--ink); padding-inline-start: 0.7rem; }

  /* A proposed change, read like a marked-up proof: struck words out, the agent's words in its colour. */
  .review-diff { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--body-size); line-height: 1.6; --hand: var(--au, var(--ink)); }
  .diff-same { color: var(--ink-soft); }
  .diff-out { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--ink-red); text-decoration-thickness: 1.5px; /* a ballpoint strike */ }
  .diff-in { color: var(--hand); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--hand), transparent 50%); text-underline-offset: 3px; }
  .review-reasons { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.2rem; margin-block: -0.4rem 1.6rem; font-size: 0.92rem; }
  .review-reasons dt { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); padding-block-start: 0.2em; }
  .review-reasons dd { margin: 0; }
  .review-actions { display: flex; gap: 0.6rem; margin-block-start: calc(var(--block-space) * 1.75); padding-block-start: var(--block-space); border-block-start: 1px solid var(--rule); }
  .button.is-primary { border-color: var(--ink); font-weight: 700; }

  .paper-meta { font-size: 0.76rem; color: var(--ink-soft); margin-block-end: calc(var(--block-space) * 1.25); }
  .save-state { color: var(--ink-soft); }
  .paper-meta-line { margin: 0; }
  .paper-words + .save-state::before { content: " · "; }

  /* The bottom squiggle is the sheet's bottom edge, in the colour of the model last chosen. The
     name under it is the toggle. Clicking the squiggle opens more paper below it to write into. */
  .below { padding: calc(var(--block-space) * 1.5) calc(var(--inline-space) * 4) calc(var(--block-space) * 1); color: inherit; }
  /* Both squiggles answer the same way: the hand, and on hover (or while open) the wave thickens
     and comes to full strength. */
  .cut { display: block; width: 100%; padding-block: 6px; cursor: pointer; color: inherit; }
  .cut .wave { opacity: 0.75; }
  .cut:hover .wave, .below.is-open .wave { opacity: 1; }
  .wave {
    display: block; height: 12px; background: currentColor;
    mask: var(--wave-x) repeat-x 0 50% / 24px 12px; -webkit-mask: var(--wave-x) repeat-x 0 50% / 24px 12px;
  }
  .cut:hover .wave, .below.is-open .wave { transform: scaleY(1.3); }
  .below-row { display: flex; align-items: baseline; gap: 1.5ch; margin-block-start: 0.35rem; }
  .agent-toggle {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: inherit;
    padding: 0.1em 0.5em; margin-inline-start: -0.5em; border-radius: 999px;
  }
  .agent-toggle:hover { background: color-mix(in oklab, currentColor 12%, transparent); }
  .agent-toggle.is-fixed { cursor: default; }
  .agent-toggle.is-fixed:hover { background: none; }
  .below-starter { font-size: 0.72rem; color: var(--ink-soft); }
  .below-paper { margin-block-start: 1rem; animation: unfold 150ms ease-out; color: var(--ink); }
  .below-paper[hidden] { display: none; }
  .below-text {
    display: block; width: 100%; min-height: 4.65em; resize: none; overflow: hidden;
    border: 0; outline: none; background: transparent; padding: 0;
    font: inherit; font-size: 1em; line-height: 1.55; color: var(--ink); caret-color: var(--caret);
  }
  .below-text::placeholder { color: var(--ink-soft); opacity: 0.7; }
  .below-text[readonly] { opacity: 0.6; }
  .below-question { font-size: 0.9rem; margin-block-end: 0.6rem; color: var(--au, var(--ink)); }
  .below-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1ch; margin-block-start: 0.6rem; font-size: 0.8rem; color: var(--ink-soft); }
  .below-status[hidden] { display: none; }
  /* What a run did shows with the paper below open, or said again on a paper opened soon after. */
  .below:not(.is-open):not(.is-reopened) .below-status { display: none; }
  .below-status.is-working { color: inherit; }
  .below-said { color: var(--ink); }
  .below-status.is-working .below-said { color: inherit; }
  /* What the run offers, after what it did: small words, as a card's actions are. */
  .below-acts { display: inline-flex; flex-wrap: wrap; gap: 0.2rem 1ch; }
  .below-acts:empty { display: none; }
  .below-act { color: var(--ink-soft); font-size: 0.78rem; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }
  .below-act:hover { color: var(--ink); text-decoration-color: currentColor; }
  .below-cost { font-size: 0.72rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  /* @ names a paper: a short list of the binder's papers, under the words, as HEY draws a menu. */
  .below-menu { display: grid; width: min(24rem, 100%); margin-block-start: 0.2rem; padding: 0.3rem; background: var(--raised); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 12px 30px -12px oklch(var(--lch-shade) / 0.45); }
  .below-menu[hidden] { display: none; }
  .below-menu-row { text-align: start; padding: 0.35rem 0.6rem; border-radius: 5px; font-size: 0.88rem; color: var(--ink); }
  .below-menu-row.is-active, .below-menu-row:hover { background: var(--desk); }
  .below { color: var(--au, var(--ink)); }

  /* The right squiggle is the sheet's right edge; it opens the margin onto the paper. */
  .edge-squiggle { position: relative; width: 30px; color: var(--ink-soft); cursor: pointer; }
  .edge-squiggle::before {
    content: ""; position: absolute; inset: 0 9px; background: currentColor; opacity: 0.6;
    mask: var(--wave-y) repeat-y 50% 0 / 12px 24px; -webkit-mask: var(--wave-y) repeat-y 50% 0 / 12px 24px;
  }
  .edge-squiggle:hover::before, html[data-margin=open] .edge-squiggle::before { opacity: 1; color: var(--ink); }
  .edge-squiggle:hover::before, html[data-margin=open] .edge-squiggle::before { transform: scaleX(1.3); }
  .edge-count {
    position: absolute; top: -0.6rem; left: 50%; transform: translateX(-50%); white-space: nowrap;
    min-width: 1.5em; padding: 0.05em 0.45em; border-radius: 999px; background: var(--accent); color: var(--on-accent);
    font-size: 0.66rem; font-weight: 700; text-align: center;
  }

  /* With a keyboard up on a tablet or phone, the paper below sits on the keyboard, the squiggle on
     its top edge, and comes back under the text when the keyboard goes (below_controller.js). */
  @media (max-width: 1080px) {
    .below.is-docked .below-dock {
      position: fixed; z-index: 40; inset-inline: 0; bottom: var(--keyboard-inset, 0px);
      max-height: calc(var(--vv-height, 100dvh) - 2.5rem); overflow-y: auto; overscroll-behavior: contain;
      padding: 0.2rem 16px 0.7rem; background: var(--paper);
      box-shadow: 0 -1px 0 var(--rule), 0 -14px 28px -22px oklch(var(--lch-shade) / 0.55);
    }
    .below.is-docked .below-paper { margin-block-start: 0.5rem; animation: none; }
    .below.is-docked .below-row { margin-block-start: 0.1rem; }
  }

  /* Turning pages by hand, on a touch screen (turn_controller.js): the sheet follows the finger
     sideways while the page still scrolls up and down, and the paper turned to comes in from the
     side it was pulled from. The desk clips the sheet as it goes, so the page never scrolls sideways. */
  @media (pointer: coarse) {
    .sheet-column > .paper { touch-action: pan-y pinch-zoom; }
    .desk:has(> .sheet-column) { overflow-x: clip; }
  }
  .sheet-column > .paper.is-turning { transition: transform 200ms ease-in; }
  .sheet-column > .paper.is-springing { transition: transform 220ms ease-out; }
  html[data-turning=next] .sheet-column > .paper { animation: sheet-from-right 220ms ease-out; }
  html[data-turning=previous] .sheet-column > .paper { animation: sheet-from-left 220ms ease-out; }
  @keyframes sheet-from-right { from { transform: translateX(calc(100% + 24px)); } }
  @keyframes sheet-from-left { from { transform: translateX(calc(-100% - 24px)); } }

  @keyframes unfold { from { transform: scaleY(0.6); opacity: 0; transform-origin: top; } }

  @media (prefers-reduced-motion: reduce) {
    .sheet-body, .sheet-body .margin, .wave, .edge-squiggle::before { transition: none; }
    .below-paper { animation: none; }
    .sheet-column > .paper.is-turning, .sheet-column > .paper.is-springing { transition: none; }
    html[data-turning] .sheet-column > .paper { animation: none; }
  }

  @media (max-width: 60ch) {
    .desk { padding-inline: 0; }
    .turn { padding-inline: 16px; }
    .paper { padding-block-start: calc(var(--block-space) * 1.5); }
    .sheet-text { --sheet-start: 16px; --sheet-end: 16px; }
    .sheet-text, .below, .sheet-body > .below { padding-inline: 16px; }
    .paper[data-behind] { box-shadow: var(--shadow); }
  }
}