/* Home, in the customer page's style (Chase, 13 Oct 2026): one line, the deck
   with the Top of the Chute beside it, three cards across, one tabbed card,
   two folds. The boxes themselves (.ui-card, .ui-cards-row, .ui-summary,
   .ui-next-bar, .ui-msg-tabs) are the customer page's own; only what Home
   adds is here. */

/* THE ONE LINE: Howdy and the date at the left, then the location choice, the
   starts and the ⋯ menu. They wrap under the name on a phone. */
.r2-home-first { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem 1rem; }
.r2-home-starts { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; min-width:0; }
.r2-home-where form { flex-wrap:wrap; }
.r2-home-where-select { width:auto; min-width:8rem; max-width:min(14rem, 100%); }
.r2-home-tutorials { display:inline-flex; align-items:center; min-height:44px; padding:.5rem .85rem; border:1px solid var(--color-line); border-radius:999px; background:var(--color-card); font-size:.875rem; }

/* UNDER THE DECK (26 Oct night, the deck first): the quiet summary card with
   a super admin's small Walkthrough chip beside it where there is room, under
   it on a phone; the Home Screen nudge, when a phone shows it, under both. */
.r2-home-after-deck { display:flex; flex-wrap:wrap; align-items:flex-start; gap:.5rem 1rem; min-width:0; }
.r2-home-after-deck > [data-home-part=summary] { flex:1 1 20rem; min-width:0; }
.r2-home-after-deck > [data-home-walkthrough] { flex:0 1 auto; max-width:100%; margin:0; }

/* THE CARDS: the figures inside them. Four across in a phone's full-width
   card; two across while three cards share a narrow row. */
.r2-home-pipeline-counts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.35rem; }
.r2-home-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem; }
.r2-home-triple { grid-template-columns:repeat(3,minmax(0,1fr)); }
.r2-home-stat { display:flex; min-height:72px; flex-direction:column; align-items:center; justify-content:center; text-align:center; border-radius:.5rem; padding:.25rem; }
.r2-home-stat:hover { background:var(--color-accent-soft); }
.r2-home-stat-number { font-size:1.625rem; line-height:1.2; font-weight:600; font-variant-numeric:tabular-nums; }
.r2-home-stat-warn .r2-home-stat-number { color:var(--color-warn); }
@media (min-width:48rem) and (max-width:79.99rem) {
  .r2-home-pipeline-counts { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Today's search results are a card of their own; inside Today's card they
   are plain, so a card is not boxed twice. */
[data-home-schedules] .ui-card { border:0; box-shadow:none; border-radius:0; }

/* THE TOP ROW (Chase, 2 Nov: "option 1 on top of the chute"): the Next up
   deck, the Top of the Chute, then the quiet area under the deck. A phone:
   one column in that order, the chute straight under the Next up card. From
   1024px: the deck at the left (up to 46rem), the chute's column at the
   right (20rem to 26rem), its top level with the Next up card while the
   deck's head shows, the summary and the Walkthrough chip staying under the
   deck. The board keeps its 20rem first: from 1024px to about 1230px it is
   the deck that gives way (about 532px wide at 1024, 690px at 1180, still
   wider than a phone, where the deck already works); from about 1230px the
   deck has its 46rem and the board grows to 26rem, then the spare room goes
   between them.
   The books desk has no chute, so no second column.
   --r2-deck-head-h is the Next up head (next_up/_head: "Next up · 1 of 12
   today" on one line, then the thin orange line) and the deck's gap under
   it; change the two together. A head that wraps, or the yes that stays
   (#next_up_done_line) after a card's action, sets the card a little lower
   than the board's top: a small step, accepted. */
.r2-home-top { --r2-deck-head-h:2.84375rem; display:grid; grid-template-columns:minmax(0,1fr); row-gap:1rem; min-width:0; }
.r2-home-top-deck { display:flex; flex-direction:column; gap:1rem; min-width:0; }
.r2-home-top-deck:not(:has(*)) { display:none; }
.r2-home-chute-col { min-width:0; }
/* Nobody wrote and no chip: no empty row (and no double gap) under the card. */
.r2-home-after-deck:not(:has(*)) { display:none; }
@media (min-width:40rem) {
  .r2-home-top { row-gap:1.25rem; }
  .r2-home-top-deck { gap:1.25rem; }
}
@media (min-width:64rem) {
  .r2-home-top-chute { grid-template-columns:minmax(0,46rem) minmax(20rem,1fr); grid-template-rows:auto 1fr; grid-template-areas:"deck chute" "after chute"; column-gap:1.5rem; align-items:start; }
  .r2-home-top-chute > .r2-home-top-deck { grid-area:deck; }
  .r2-home-top-chute > .r2-home-after-deck { grid-area:after; }
  /* The board's right edge on the page's own, like the cards under it (a
     wide screen leaves its spare room between the deck and the board). */
  .r2-home-top-chute > .r2-home-chute-col { grid-area:chute; width:100%; max-width:26rem; justify-self:end; align-self:stretch; display:flex; flex-direction:column; }
  /* Level with the Next up card, not its "Next up · 1 of 12 today" head:
     only while that head shows (not on an empty deck, the Next bar or the
     first day's card above the deck). */
  .r2-home-top-chute:has(> .r2-home-top-deck > .ui-deck:first-child [data-next-up-head]) > .r2-home-chute-col { padding-top:var(--r2-deck-head-h); }
  /* The board runs the height of the deck and the summary under it, any
     spare room going above its foot, so its bottom lines up with theirs. */
  .r2-home-chute-col > .r2-chute { flex:1 1 auto; }
  .r2-chute > .r2-home-chute-line { margin-bottom:auto; }
}

/* THE TOP OF THE CHUTE, THE RODEO SCOREBOARD (option A): a dark arena board
   in the band's own ink with a warm gold glow, marquee bulbs along the top
   edge, this week's top three as lit places (first place a gold belt buckle,
   with how far ahead it is), a thin gold bar for each rep against the
   leader, and Chase's motto as a small sign beside the way in. The title
   uses the app's slab stack (first_login.css). The bars are <progress>, so
   no length is ever written inline. */
.r2-home-chute-line { display:flex; flex-wrap:wrap; align-items:flex-start; gap:.25rem 1rem; min-width:0; margin-top:.375rem; }
/* Nothing on the line is wider than the card. With nobody ranked, the
   sentence keeps a real width and never runs out of the card (25 Oct: at
   390px it was squeezed to a sliver and Home scrolled sideways). */
.r2-home-chute-line > * { max-width:100%; }
.r2-home-chute-nobody { flex:1 1 16rem; min-width:0; margin:0; overflow-wrap:anywhere; }
.r2-chute-list { flex:1 1 100%; min-width:0; margin:0; padding:0; list-style:none; }

.r2-chute { --r2-chute-gold:#d99b1c; --r2-chute-gold-hi:#f6c453; --r2-chute-gold-lit:#ffe39a; --r2-chute-sand:#f1e7d6; --r2-chute-sand-dim:#bcae97; --r2-chute-rule:rgb(255 255 255 / .08);
  --r2-chute-slab:"Zilla Slab", Rockwell, "Roboto Slab", "Rockwell Nova", Charter, "Bitstream Charter", Georgia, serif;
  position:relative; display:flex; flex-direction:column; min-width:0; max-width:46rem; overflow:hidden;
  padding:.9375rem 1rem .625rem; border:1px solid #3b2f21; border-radius:.875rem; color:var(--r2-chute-sand);
  background:
    radial-gradient(130% 60% at 50% -8%, rgb(217 155 28 / .2), transparent 64%),
    radial-gradient(70% 45% at 105% 108%, rgb(180 83 9 / .18), transparent 70%),
    linear-gradient(180deg, #2b2219 0%, #1f1a14 46%, #19140f 100%);
  box-shadow:var(--shadow-lift), inset 0 1px 0 rgb(255 236 190 / .08), inset 0 0 0 1px rgb(0 0 0 / .25); }
/* a stitched leather edge */
.r2-chute::after { content:""; position:absolute; inset:4px; border:1px dashed rgb(217 155 28 / .24); border-radius:.6875rem; pointer-events:none; }
/* the marquee bulbs, strung along the top stitch (no row of their own) */
.r2-chute-bulbs { position:absolute; top:0; left:1.125rem; right:1.125rem; z-index:1; height:9px; pointer-events:none;
  background:radial-gradient(circle, #fff7dc 0 1px, var(--r2-chute-gold-hi) 1.5px 2.1px, rgb(246 196 83 / .2) 2.7px, transparent 3.8px) 0 50% / 14px 9px space no-repeat; }
.r2-chute-head { display:flex; align-items:center; gap:.625rem; min-width:0; }
.r2-chute-head > div { min-width:0; flex:1 1 auto; }
.r2-chute-title { margin:0; font-family:var(--r2-chute-slab); font-size:1.25rem; line-height:1.5rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--r2-chute-gold-hi); text-shadow:0 0 9px rgb(246 196 83 / .25), 0 1px 0 #5c3505; text-wrap:balance; }
.r2-chute-sub { margin:.125rem 0 0; font-size:.8125rem; line-height:1.125rem; font-weight:500; color:var(--r2-chute-sand-dim); }
.r2-chute-shoe { width:2rem; height:2rem; flex:none; color:var(--r2-chute-gold-hi); filter:drop-shadow(0 0 4px rgb(246 196 83 / .3)); }
.r2-chute-nails { fill:#2a2018; }
/* the places: the top three. The score column is at least 6rem and as wide
   as the widest figure (a year's "$1,166,620" too): the names give way and
   truncate, a figure is never cut off. The three rows share that one column
   (subgrid), so every bar stops at the same edge; a browser without subgrid
   sizes each row's own. */
.r2-chute-list { --r2-chute-cols:2.5rem minmax(0,1fr) minmax(6rem,auto); --r2-chute-gap:.625rem; }
.r2-chute-row { display:grid; grid-template-columns:var(--r2-chute-cols); align-items:center; column-gap:var(--r2-chute-gap); min-height:2.75rem; padding:.25rem 0; }
@supports (grid-template-columns:subgrid) {
  .r2-chute-list { display:grid; grid-template-columns:var(--r2-chute-cols); column-gap:var(--r2-chute-gap); }
  .r2-chute-row { grid-column:1 / -1; grid-template-columns:subgrid; }
}
.r2-chute-row + .r2-chute-row { border-top:1px solid var(--r2-chute-rule); }
.r2-chute-rank { display:flex; width:1.75rem; height:1.75rem; justify-self:center; align-items:center; justify-content:center; border:2px dotted var(--r2-chute-gold-hi); border-radius:999px; font-size:.8125rem; line-height:1; font-weight:800; font-variant-numeric:tabular-nums; color:var(--r2-chute-gold-lit); background:radial-gradient(circle, rgb(246 196 83 / .18), rgb(246 196 83 / .03) 70%); box-shadow:0 0 7px rgb(246 196 83 / .18); }
.r2-chute-who { min-width:0; }
.r2-chute-name { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9375rem; line-height:1.25rem; font-weight:600; color:var(--r2-chute-sand); }
.r2-chute-bar { display:block; width:100%; height:3px; margin-top:.3125rem; border:0; border-radius:2px; appearance:none; -webkit-appearance:none; background:rgb(255 255 255 / .09); color:var(--r2-chute-gold); overflow:hidden; }
.r2-chute-bar::-webkit-progress-bar { background:rgb(255 255 255 / .09); border-radius:2px; }
.r2-chute-bar::-webkit-progress-value { background:linear-gradient(90deg, #b45309, var(--r2-chute-gold) 55%, var(--r2-chute-gold-hi)); border-radius:2px; }
.r2-chute-bar::-moz-progress-bar { background:linear-gradient(90deg, #b45309, var(--r2-chute-gold) 55%, var(--r2-chute-gold-hi)); border-radius:2px; }
.r2-chute-score { min-width:0; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.r2-chute-dollars { display:block; font-size:1rem; line-height:1.125rem; font-weight:700; color:#f5d27e; letter-spacing:-.005em; }
.r2-chute-jobs { display:block; font-size:.75rem; line-height:.875rem; font-weight:500; color:var(--r2-chute-sand-dim); }
/* a login shown no dollars: the jobs are the score */
.r2-chute-count { display:block; font-size:.9375rem; line-height:1.125rem; font-weight:700; color:#f5d27e; }
/* first place: a gold belt buckle, lit, and how far ahead */
.r2-chute-first { padding:.1875rem 0 .3125rem; }
.r2-chute-buckle { position:relative; display:flex; width:2.5rem; height:1.8125rem; justify-self:center; align-items:center; justify-content:center; border-radius:50%; font-size:1rem; line-height:1; font-weight:800; color:#3a2207; font-variant-numeric:tabular-nums;
  background:radial-gradient(ellipse at 35% 30%, #fff1bf 0 12%, transparent 45%), linear-gradient(135deg, #ffe08a 0%, #e3a92c 42%, #a8690f 100%);
  box-shadow:inset 0 0 0 2px #8a5409, inset 0 0 0 3.5px #ffd877, 0 0 11px rgb(246 196 83 / .36); outline:2px dotted rgb(255 227 154 / .8); outline-offset:2px; }
.r2-chute-first .r2-chute-name { font-size:1.0625rem; line-height:1.375rem; font-weight:700; color:#fff8ea; }
.r2-chute-ahead { display:block; font-size:.75rem; line-height:1rem; font-weight:600; color:var(--r2-chute-gold-hi); font-variant-numeric:tabular-nums; }
.r2-chute-first .r2-chute-bar { height:4px; margin-top:.25rem; box-shadow:0 0 6px rgb(246 196 83 / .24); }
.r2-chute-first .r2-chute-dollars { font-size:1.375rem; line-height:1.5rem; font-weight:800; color:var(--r2-chute-gold-lit); text-shadow:0 0 9px rgb(246 196 83 / .3); }
.r2-chute-first .r2-chute-count { font-size:1.125rem; line-height:1.375rem; font-weight:800; color:var(--r2-chute-gold-lit); }
/* the viewer's own place on the board */
.r2-chute-you .r2-chute-name { color:var(--r2-chute-gold-lit); }
/* The quiet lines in the foot, on the dark board: the shared partials keep
   their own words and marks, in the board's sand and gold. */
.r2-chute .text-muted { color:var(--r2-chute-sand-dim); }
.r2-chute .r2-home-chute-nobody { padding:.5rem 0; color:var(--r2-chute-sand); }
/* the company line (who may see company money) and the sales on nobody's name */
.r2-chute-total { margin-top:.25rem; padding-top:.4375rem; border-top:1px dashed rgb(217 155 28 / .3); font-size:.8125rem; line-height:1.125rem; color:var(--r2-chute-sand-dim); font-variant-numeric:tabular-nums; }
.r2-chute [data-chute-company] { margin:0; color:var(--r2-chute-sand-dim); }
.r2-chute [data-chute-off-board], .r2-chute [data-chute-unplaced], .r2-chute [data-chute-source] { font-size:.75rem; line-height:1rem; color:var(--r2-chute-sand-dim); }
/* a rep's own place ("You: #4 · 1 job · $6,200 this week") */
.r2-chute .r2-chute-you-line { margin:.375rem 0 0; padding:.3125rem .625rem; border-radius:var(--radius-ui); background:rgb(246 196 83 / .1); box-shadow:inset 0 0 0 1px rgb(246 196 83 / .4); font-size:.875rem; line-height:1.25rem; font-weight:400; color:var(--r2-chute-sand); font-variant-numeric:tabular-nums; }
.r2-chute .r2-chute-you-line .text-accent-strong { font-weight:700; color:var(--r2-chute-gold-hi); }
/* the motto, a small sign beside the way in */
.r2-chute-foot { display:flex; align-items:center; justify-content:space-between; gap:.625rem; margin-top:.3125rem; }
.r2-chute .r2-chute-motto { min-width:0; margin:0; padding-left:.5rem; border-left:2px solid rgb(217 155 28 / .65); font-family:var(--r2-chute-slab); font-size:.8125rem; line-height:1rem; font-weight:700; letter-spacing:.01em; color:var(--r2-chute-gold-hi); text-wrap:balance; }
.r2-chute-see { display:inline-flex; min-height:var(--spacing-tap); flex:none; align-items:center; gap:.125rem; padding:0 .5rem 0 .75rem; border:1px solid rgb(246 196 83 / .5); border-radius:var(--radius-ui); font-size:.875rem; line-height:1.25rem; font-weight:600; color:var(--r2-chute-gold-lit); background:rgb(246 196 83 / .07); }
.r2-chute-see:hover { background:rgb(246 196 83 / .14); }
.r2-chute-see svg { width:1rem; height:1rem; }
/* the narrowest phones: the sign's title steps down instead of clipping */
@media (max-width:22.5rem) {
  .r2-chute-title { font-size:1.0625rem; letter-spacing:.035em; }
  .r2-chute-list { --r2-chute-cols:2.25rem minmax(0,1fr) minmax(5.25rem,auto); --r2-chute-gap:.5rem; }
  .r2-chute-first .r2-chute-dollars { font-size:1.25rem; }
}

.r2-tutorial-list { list-style: none; padding: 0; margin: 0; }
.r2-tutorial-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 0; border-bottom: 1px solid var(--color-line, #e2e8f0); }
.r2-tutorial-list > li > :first-child { flex: 1 1 17rem; }
.r2-tutorial-list > li:last-child { border-bottom: 0; }
.r2-tutorial-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.r2-tutorial-about { padding: .75rem 0; margin-bottom: .5rem; border-bottom: 1px solid var(--color-line, #e2e8f0); }