/*
 * THE CART DRAWER'S OWN BLOCK — W192.
 *
 * The FRAME is the shell's (`modal.css`, including the side anchor): the scrim
 * wash, the panel ground, the shadow, the slide, the header row and the
 * scrolling content row. What is here is what is genuinely this drawer's — its
 * width, its rows and its money moment.
 *
 * NOT COMPILER-CHECKED, like every sheet under `public/`: after editing, sweep
 * for orphaned `sf-` classes and re-count the brace balance.
 */

/*
 * ITS OWN WIDTH, which is the one thing the shell leaves to each caller. 420 is
 * wide enough for the rail's row — a 44px tile, a name that does not wrap on
 * "Professional installation", and a right-aligned amount — without becoming a
 * page. The phone rung takes the whole screen; see modal.css.
 */
.sf-cart-drawer__panel {
  width: 420px;
  /*
   * ═══ W195: THE DRAWER'S TEXT BASE IS THE FLOW'S ═══
   *
   * `.sf-flow` restates the board's 16px/normal once for the whole flow,
   * "rather than per element", because globals.css sets the site body to
   * 17/1.65 and the board's unstyled runs would otherwise render bigger than
   * drawn. The drawer is outside `.sf-flow` and inherited the 17 — measured:
   * the same row read 17px here against 16px in the rail. Same restatement,
   * same reason, one element.
   */
  font-size: var(--text-emphasis);
  line-height: normal;
}

/*
 * ═══ W195: THE PANEL HAS A GUTTER ═══
 *
 * The shell deliberately gives its content row NO padding — every other pop-up
 * pads its own sections (`delivery.css` writes `36px` on each of its five) —
 * and this drawer padded none of its children at all. Ryan's walk shows the
 * result and it is not subtle: the amounts run into the panel's right edge and
 * clip, "Subtotal" starts at x=0, and the Checkout button spans edge to edge.
 *
 * THE RAIL'S OWN NUMBERS, BOTH RUNGS. `.sf-flow-rail__body` pads `20px 22px`
 * at desktop and `16px var(--sf-gutter)` below 768 — so the drawer is not
 * "roughly the same measure", it is the same measure, and a shopper who opens
 * the drawer over the flow reads the two at one rhythm.
 *
 * ═══ W199 ITEM 1: AND IT IS THE BODY'S, NOT THE SCROLLER'S ═══
 *
 * W195 stated it on `.sf-modal__content` ITSELF — "so a row added later cannot
 * forget it" — and that reason is still good, but the ROW was the wrong element
 * to say it on and Ryan's walk found the cost: "the bottom scroll cue is not
 * full width and not at the drawer's bottom." Measured at 390 before the move,
 * the cue spanned 313px inside a 343px panel.
 *
 * THE CUE IS AN `::after` ON THE CONTENT ROW (modal.css, W141), so its block box
 * is that row's CONTENT box. Padding the row put the shell's own full-bleed cue
 * inside this drawer's gutter, where nothing else on the storefront puts it, and
 * left 16px of padding under it so it floated above blank space instead of
 * sitting on the panel's edge. No change to the cue could have fixed that — it
 * was never the cue's geometry, it was the box it was measured against.
 *
 * SO THE GUTTER MOVES ONE ELEMENT IN and the content row goes back to being what
 * the shell says it is. W195's property survives intact: still one element,
 * still one declaration, still the rail's own numbers.
 *
 * NO PADDING-BOTTOM. The money moment's own 14px lead used to be the air between
 * the last line and the rule; it is the dock's top edge now (W199 item 2), so
 * the scroller ends where the bar begins and the cue sits directly on it.
 */
.sf-cart-drawer__body {
  padding: 20px 22px 0;
}

@media (max-width: 767.98px) {
  .sf-cart-drawer__body {
    padding: 16px var(--sf-gutter, 15px) 0;
  }
}

/*
 * ═══ W199 ITEM 2: THE DOCKED BAND — SUBTOTAL, CHECKOUT, AFFIRM ═══
 *
 *   "Consider the subtotal bar + Checkout as a STICKY footer of the drawer, so
 *    Checkout is always visible while the lines scroll."
 *
 * The FRAME is the shell's (`.sf-modal__dock`, `flex: none`, last row of the
 * panel's column, clipped by the panel's own radius). What is here is what is
 * genuinely this drawer's: the same gutter the body carries, and the bottom air
 * the body no longer needs.
 *
 * A GROUND OF ITS OWN, and it is load-bearing rather than decorative: the
 * content row scrolls UNDER this band, so a transparent dock would show line
 * items sliding beneath the Checkout button.
 */
.sf-cart-drawer__dock {
  background: var(--brand-color-surface, #ffffff);
  padding: 0 22px 20px;
}

@media (max-width: 767.98px) {
  .sf-cart-drawer__dock {
    padding: 0 var(--sf-gutter, 15px) 16px;
  }
}

/*
 * PLACEMENT ONLY — the properties that are about WHERE the row is rather than
 * what it looks like.
 *
 * `.sf-flow-rail__total` keeps its own 2px rule, its own 14px lead under that
 * rule and its own type: this band must not become a second opinion about the
 * money moment (that is the twin W196 deleted, and this sheet's own header says
 * a row property reappearing here is the tell). What goes is the 14px that held
 * the rule off the LAST LINE — in a docked band the scrolling row above is that
 * air, and keeping the margin would have put a strip of blank band between the
 * scroll cue and the bar Ryan ruled it must sit immediately above.
 *
 * ═══ W200 ITEM 2 (Ryan, 2026-09-06): AND THE BAR REACHES BOTH EDGES ═══
 *
 *   "The subtotal's horizontal bar goes FULL BLEED to the drawer edges —
 *    always, not only while scrolling."
 *
 * THE COMPLAINT IS A MISMATCH, not a preference, and W199 is what created it.
 * The scroll cue is an `::after` on the content row, which carries no padding
 * (item 1's own fix), so the cue spans the panel's full 343px. The money
 * moment sits inside THIS band, which pads the rail's gutter, so its 2px rule
 * spanned 313px — measured at 390 before this change: cue 343.2, bar 313.2,
 * inset 15px each side, the two stacked directly on top of each other. One
 * full-bleed line immediately above one inset line is what "looks odd" is
 * describing.
 *
 * NEGATIVE MARGIN AND THE PADDING BACK, which is the whole technique: the
 * element's BORDER box grows to the dock's padding box so the rule reaches both
 * panel edges, and the same distance returns as padding so "Subtotal" and the
 * figure stay on the gutter every other row in this panel starts on. Nothing
 * moves vertically, so W198 item 8's air between the bar and the Checkout is
 * the 20px it was ruled at.
 *
 * SCOPED TO THE DOCK, DELIBERATELY. The rail draws the same component inside a
 * CARD — `.sf-flow-rail__body` has a hairline border and a radius — where a bar
 * running to the card's edge would cross its own frame. There is no cue above
 * it there to mismatch, so the rail keeps its inset bar and this is a fact
 * about the drawer's band rather than a change to the money moment.
 */
.sf-cart-drawer__dock .sf-flow-rail__total {
  margin-top: 0;
  /* The dock's own 22px, given back as padding — one number, stated twice,
   * because the margin has to be negative and the padding positive. */
  margin-inline: -22px;
  padding-inline: 22px;
}

@media (max-width: 767.98px) {
  /* THE PHONE RUNG'S GUTTER, in the same expression the body and the dock
   * already use — so the bar bleeds to the panel's edge at both rungs and the
   * words stay on the same 15px spine the rows above them do. */
  .sf-cart-drawer__dock .sf-flow-rail__total {
    margin-inline: calc(-1 * var(--sf-gutter, 15px));
    padding-inline: var(--sf-gutter, 15px);
  }
}

/*
 * ═══ W196: THE ROWS AND THE MONEY MOMENT ARE NOT THIS SHEET'S ═══
 *
 * `.sf-cart-drawer__lines`, `__total`, `__total-label` and `__total-money` are
 * RETIRED BY NAME. They dressed a stack of rows and a subtotal this drawer drew
 * itself — the parallel implementation Ryan named ("I don't think you're sharing
 * code there"). The drawer mounts `order-view.tsx` now, which brings the rail's
 * own `.sf-flow-rail__total` and `.sf-flow-edit__line` rhythm with it, so a rule
 * here would be a second opinion about a layout the shared component owns.
 *
 * WHAT IS LEFT IS THE WRAPPER'S: the panel's width and text base, the content
 * row's gutter, the header row's arrangement, the Checkout's lead, and the
 * empty state. If a row property ever reappears in this file, the twin is
 * coming back.
 */

/*
 * ═══ W198 ITEMS 4–6: THE HEADER ROW HOLDS THE PANEL'S NAME AND ITS MODE ═══
 *
 * The shell draws `.sf-modal__header` as a plain block with the title's own
 * padding inside it and the close cross absolutely positioned at the panel's
 * top-right. That is right for a pop-up whose header holds only a name; this
 * one holds a name, a glyph and Edit/Done, so the drawer's own block class
 * makes the row a flex line.
 *
 * THE 52px OF TRAILING ROOM IS THE CROSS — the same reservation
 * `.sf-modal__header-title` makes for itself in the shell (the cross is
 * `position: absolute` and takes no space in the row, so something has to keep
 * out of its way). It moves from the TITLE to the ROW here, because the last
 * thing in the row is now the button rather than the words.
 */
.sf-cart-drawer__header {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding-right: 52px;
}

/* The title is a flex line of its own so the cart glyph sits on the words'
 * centre rather than on their baseline — an inline SVG in a line box picks up
 * the descender (playbook §5). Its own trailing 52px is the row's now. */
.sf-cart-drawer__header .sf-modal__header-title {
  align-items: center;
  display: flex;
  padding-right: 0;
}

/*
 * EDIT / DONE, IN THE HEADER ROW (item 6). It wears `.sf-flow-rail__edit` —
 * the rail's own compact 40px ghost — so the control a shopper meets at the top
 * of the order is the same control on both surfaces. `flex: none` is already
 * that rule's; this only keeps it off the row's own baseline stretch.
 */
.sf-cart-drawer__edit-toggle {
  flex: none;
}

/*
 * ═══ W198 ITEM 8: AIR BETWEEN THE MONEY MOMENT AND THE ACTION ═══
 *
 * Ryan wanted breathing room under the subtotal. 20px is the RAIL'S OWN
 * vertical rhythm number — `.sf-flow-rail__body`'s block padding, the distance
 * that panel puts between its edge and its content — rather than a new value:
 * the money moment already takes the rail's 14px above its rule and 14px under
 * it, and 16 underneath read as the same gap as the rows above rather than as
 * the break between reading the order and acting on it.
 *
 * IT MUST OUT-SPECIFY `.sf-flow-btn--block`, which declares its own 14px lead
 * for the rail's Checkout link. Two single-class rules on one element are
 * settled by sheet order, and the order these two `<link>`s hoist in is not
 * this file's to know — so the panel scopes it and the question stops being
 * a race. (W199 moved the pair into the dock; the distance between them is the
 * same 20px it was ruled at, and the selector still reaches them there.)
 */
.sf-cart-drawer__panel .sf-cart-drawer__checkout {
  margin-top: 20px;
}

/*
 * `.sf-cart-drawer__edit` IS RETIRED BY NAME (W198 item 7). It dressed the
 * "Edit in flow" door under the Checkout button — Ryan: "nobody's got to know
 * what that means." Since W197 the panel edits every line in place, so the door
 * led somewhere the shopper did not need and named a surface only we have words
 * for. Deleted rather than reworded.
 */

.sf-cart-drawer__empty {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 0;
  text-align: center;
}

.sf-cart-drawer__empty-body {
  color: var(--brand-color-ink-soft, #44464a);
  font-size: var(--text-support);
  margin: 0;
}

/*
 * ═══ W202 ITEM 6a (Ryan, 2026-09-09): THE TRUST ROW, SIZED FOR THE PANEL ═══
 *
 *   "Drawer trust copy: source = the checkout page's block BELOW the Place
 *    Order button; reuse those indicators, single-source."
 *
 * THE ROW ITSELF IS THE CHECKOUT'S — `.sf-flow-ck__trust`, drawn by the shared
 * `flow-trust-row.tsx`, with the checkout's own strings. What is here is the one
 * thing that genuinely differs: the measure it has to fit.
 *
 * THE CHECKOUT DRAWS IT ON A 900px COLUMN, where three indicators and two
 * separators sit on one centred line. This panel's content box is 313px at the
 * phone rung, so the same row wraps to three lines — and the `|` separators,
 * which exist to divide items ON A LINE, end up stranded at the ends of lines
 * dividing nothing. A stack of three reassurances under a Checkout button reads
 * as clutter rather than as reassurance.
 *
 * SO THE SEPARATORS GO AND THE ROW BECOMES A STACK, deliberately rather than by
 * wrapping: `column` states the arrangement the width was going to force anyway,
 * and once each indicator owns its line the rule between them has nothing left
 * to separate. They are `aria-hidden` already, so nothing spoken changes.
 *
 * THE 40px LEAD IS THE CHECKOUT'S OWN and it is far too much under a dock that
 * is already carrying a subtotal, a button and the Affirm line; 14px is the
 * distance the money moment puts under its own rule, so the band keeps one
 * rhythm rather than acquiring a second.
 */
/*
 * SCOPED TO THE PANEL, AND THAT IS NOT DECORATION — MEASURED (W202).
 *
 * The first draft wrote these as `.sf-cart-drawer__trust`, a single class
 * against `.sf-flow-ck__trust`'s single class: equal specificity, settled by
 * whichever `<link>` React hoisted last, which is not this sheet's to know.
 * flow.css won, and the driven reading said so — `align-items: center`,
 * `gap: 12px 22px`, `margin-top: 40px`, every one of them the checkout's.
 * Only `flex-direction` applied, because nothing was competing for it, which
 * is exactly how a half-applied override hides: the row DID stack, so it
 * looked like the rule had landed.
 *
 * THE PANEL'S OWN CLASS IS THE PRECEDENT — `.sf-cart-drawer__panel
 * .sf-cart-drawer__checkout` above solves the identical race for the same
 * reason, in the same words. Two classes beat one wherever the sheets land.
 */
.sf-cart-drawer__panel .sf-cart-drawer__trust {
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
  justify-content: flex-start;
  margin-top: 14px;
}

.sf-cart-drawer__panel .sf-cart-drawer__trust .sf-flow-ck__trust-rule {
  display: none;
}