/* ═══════════════════════════════════════════════════════════════════════════
   BLEND.CSS - the seam layer.

   rounded.css took the points off every corner. This sheet takes the EDGES
   off the shell: the places where one surface stopped and the next one began
   on a single hard pixel.

   Four of them were on screen at once:

     1. The sidebar's sticky caps - the brand row at the top and the
        search + account block at the bottom - painted --surface (a 76% white)
        on a --bg-sidebar (pale green) column. That drew two white rectangles
        with four square corners each, inset inside the column by the sidebar's
        own padding, and neither of them is a card: they are the column, held
        still while the nav scrolls behind them.
     2. The footer cap added a 1px rule and a drop shadow on top of that, so
        the same boundary was stated three times.
     3. The sidebar closed on a hairline against a canvas six values away
        from its own fill - the line was the entire edge.
     4. The top bar was pure white over that pale-green canvas and closed the
        same way, as did the composer at the foot of a chat.

   The fix is the same in all four: a surface paints the colour it sits on,
   and where it has to stop it ENDS IN A GRADIENT instead of a line. Nothing
   here changes layout, type or spacing - only how a surface stops.

   It loads after phone.css and before rounded.css, which stays the last word
   on shape.
   ═══════════════════════════════════════════════════════════════════════════ */

/* This sheet defines NO tokens. --seam - how long a surface takes to stop -
   is declared in redesign.css with the rest of the shell's geometry; a
   component sheet that minted its own would fork the system. Distance is
   spent here, never minted. */

/* ── 1. The sidebar's sticky caps ──────────────────────────────────────────
   Same fill as the column, so there is no rectangle and no corner to soften.
   Both are position:sticky already, which makes each its own containing block
   for the fade below. */
.sidebar > .brand,
.sidebar > .sidebar-footer {
  background: var(--bg-sidebar);
}

/* A sticky cap sticks to the SCROLLPORT, and the sidebar's scrollport starts
   inside its own padding - so there is a ~10px band above the brand where a
   scrolled nav row slid out into the open above the cap. Same fill again,
   carried up with the cap, and the band closes. (Below the footer the same
   band exists and gets the same treatment.) */
.sidebar > .brand::before,
.sidebar > .sidebar-footer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 24px;
  background: var(--bg-sidebar);
  pointer-events: none;
}
.sidebar > .brand::before { bottom: 100%; }
.sidebar > .sidebar-footer::after { top: 100%; }

/* The gradients live OUTSIDE each cap - below the brand, above the footer -
   so the cap's own fill stays opaque under its content and only the overlap
   with scrolled nav rows is soft. */
.sidebar > .brand::after,
.sidebar > .sidebar-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--seam);
  pointer-events: none;
}
.sidebar > .brand::after {
  top: 100%;
  background: linear-gradient(to bottom, var(--bg-sidebar), transparent);
}
.sidebar > .sidebar-footer::before {
  bottom: 100%;
  background: linear-gradient(to top, var(--bg-sidebar), transparent);
}

/* The rule and the shadow the footer used to close with. The fade above is
   now the only thing marking that boundary, and one marking is enough.
   [data-theme] rather than a colour name: the rules being replaced are
   written against the light theme with !important, and this has to outrank
   them in both themes. */
.sidebar > .sidebar-footer,
html[data-theme] .sidebar-footer,
body[data-theme] .sidebar-footer {
  border-top: 0 !important;
  box-shadow: none !important;
}

/* ── 2. The sidebar / canvas seam ──────────────────────────────────────────
   --bg-sidebar and --bg are six values apart. Without a hairline drawn on top
   of them the two columns already meet flush; the line was the whole edge. */
html[data-theme] .sidebar,
body[data-theme] .sidebar {
  border-right: 0 !important;
}

/* ── 3. The topbar ─────────────────────────────────────────────────────────
   It is a grid row, not an overlay - nothing scrolls under it - so the fade
   can be fully opaque: white where the title sits, the page's own canvas
   colour by the time it reaches the bottom edge. The hairline goes with it.

   background-image, not background: the rule being overridden is a
   `background:` shorthand with !important, which resets the image longhand;
   its colour is left alone because the gradient covers the box.

   Two layers, and the order matters - the first is painted on top. The bar
   is the only thing in the right-hand column light enough to butt hard
   against the sidebar, so its leading edge carries the column seam: pale
   green at x=0, gone by the time the page title starts. Everything below the
   bar is canvas against sidebar, six values apart, and needs nothing. */
html[data-theme] .topbar,
body[data-theme] .topbar {
  background-image:
    linear-gradient(to right, var(--bg-sidebar) 0, transparent calc(var(--seam) * 2)),
    linear-gradient(
      to bottom,
      var(--surface-strong) 0,
      var(--surface-strong) calc(100% - var(--seam)),
      var(--bg) 100%
    ) !important;
  border-bottom: 0 !important;
}

/* Dark theme reads the same way, but --surface-strong there is a lifted
   panel colour rather than white, so the bar keeps its own elevation and
   still lands on the canvas. No extra rule needed - both stops are tokens. */

/* ── 4. The composer ───────────────────────────────────────────────────────
   The bar at the foot of a chat is the top bar's opposite number and closed
   the same way, on a hairline. It is glass - a 70% white over a blur - so it
   cannot simply paint the canvas or it stops being glass. Instead the canvas
   is carried DOWN over its leading edge and fades out inside it, which leaves
   the pane translucent everywhere the student is actually reading. */
html[data-theme] .composer,
body[data-theme] .composer {
  background-image: linear-gradient(to bottom, var(--bg), transparent var(--seam)) !important;
  border-top: 0 !important;
}

/* ── 5. Reduced transparency ───────────────────────────────────────────────
   Someone who asked the OS to cut transparency gets flat surfaces instead of
   fades. The caps already match the column, so removing the gradients costs
   nothing but the softness. */
@media (prefers-reduced-transparency: reduce) {
  .sidebar > .brand::after,
  .sidebar > .sidebar-footer::before { display: none; }

  html[data-theme] .topbar,
  body[data-theme] .topbar {
    background-image: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  html[data-theme] .composer,
  body[data-theme] .composer {
    background-image: none !important;
    border-top: 1px solid var(--border) !important;
  }
}