/* Southport Signal: w7-today.css (created by S0, owned by S1 (the rep's Today: web/src/views/today.js, today-parts.js)).
 *
 * Page rules for the Today page: header, Start here, the groups, the end line.
 * Everything shared (rows, kickers, the call block, the case, the sheet, sample
 * marks, freshness, the one-line notes) lives in w7.css and is not repeated here.
 * Tokens only (web/styles/tokens.css); no shadows on panels; the phone number
 * stays the largest text on every call block; nothing a rep reads on a phone
 * under 12px. Prefix every class w7 and the page's own letter, so the page's
 * rules never collide with the kit's or another page's.
 *
 * Two shapes from one DOM (DISPLAY §4.1 and §4.2):
 *   phone (under 1100px)  header, Start here as a card, each group in its own
 *                         rounded list, the notes as dashed lines, the end line
 *   desk (1100px and up)  one bordered list with group heads on the left (Start
 *                         here is its first, selected row), the compact case in
 *                         a sticky 720px pane on the right that scrolls inside
 *                         itself */

.w7tday{display:block;max-width:760px;margin:0 auto;padding-bottom:12px}
.w7t-pane{display:none}
.w7t-desk{display:none}
.w7t-sec{scroll-margin-top:72px}
.w7t-head{margin-bottom:4px}
.w7t-head .w7nl{margin-top:12px}
.w7t-head .w7legend-sample{margin-top:12px}
.w7t-eyebrow{margin:16px 2px 8px;font-size:12.5px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2);font-family:var(--font-ui)}
.w7t-sec .w7t-eyebrow+.w7t-phone{margin-bottom:12px}
.w7t-startsec .w7sech{margin-top:14px}
.w7tday .w7card .w7why{margin-bottom:0}
.w7tday .w7end{margin-top:26px}
.w7tday .w7row.w7hascall .w7call{padding-bottom:12px}
.w7tday .w7acts{padding-bottom:14px}
/* the phone never draws a selected row: selection is the desk's */
.w7tday .w7row.sel{background:transparent}
.w7tday .w7row.sel:before{display:none}
.w7t-panenote{display:flex;flex-direction:column;gap:4px;padding:22px 20px;border:1px dashed var(--rule2);border-radius:14px;font-size:14.5px;color:var(--mute)}
.w7t-panenote b{color:var(--ink);font-size:16px}
.w7tday .anim-leave{animation:sig-slide-out var(--dur-3) var(--ease) forwards;overflow:hidden;pointer-events:none}

/* ------------------------------------------------------------------ desk */
@media (min-width:1100px){
  .w7tday{display:grid;grid-template-columns:minmax(0,1fr) 720px;gap:0 24px;align-items:start;max-width:none;margin:0}
  .w7t-main{min-width:0}
  .w7t-phone{display:none}
  .w7t-desk{display:block}
  .w7row.w7t-desk{display:grid}

  .w7t-head .w7hd{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 16px;align-items:end;margin-bottom:10px}
  .w7t-head .w7hd>*{grid-column:1}
  .w7t-head .w7hd>.w7chips{grid-column:2;grid-row:2 / span 2;margin:0;align-self:end;flex-wrap:nowrap}
  .w7t-head .w7h1{font-size:26px;margin-top:4px}
  .w7t-head .w7sub{font-size:15.5px}
  .w7t-head .w7nl,.w7t-head .w7legend-sample{margin:0 0 10px}
  .w7t-head .w7legend-sample{padding:6px 12px}

  /* one list, group heads inside it */
  .w7t-body{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .w7t-body .w7list{border:0;border-radius:0;background:transparent}
  .w7t-body .w7sech{margin:0;padding:7px 16px 5px;background:var(--surf2);border-bottom:1px solid var(--line2);font-size:12px}
  .w7t-body .w7sech .w7n{font-size:15px}
  .w7t-sec+.w7t-sec{border-top:1px solid var(--line)}
  .w7t-body .w7nl{margin:0;border:0;border-top:1px dashed var(--rule2);border-radius:0;padding:8px 16px;font-size:13px;line-height:1.4}
  .w7t-body .w7nl.w7guard{border-top-color:var(--guard-line)}
  .w7tday{padding-bottom:0}
  .w7tday .w7row{padding-top:5px;padding-bottom:5px}
  .w7tday .w7row .w7rt,.w7tday .w7row .w7rq{margin:1px 0;line-height:1.38}
  .w7tday .w7row .w7kick{margin-top:1px}
  .w7tday .w7row .w7nm .w7name{line-height:1.25}
  .w7tday .w7row.w7hascall .w7call{padding-bottom:0}
  .w7tday .w7row .w7acts{padding-bottom:0}
  .w7tday .w7row.sel{background:var(--sel)}
  .w7tday .w7row.sel:before{display:block}
  .w7tday .w7row:hover:not(.sel){background:var(--surf2)}
  /* the number sits at the top of the right column, Claim it directly under it,
     so an up-for-grabs row is no taller than a call row */
  .w7tday .w7row .w7call{grid-row:1 / span 2;align-self:start;padding-top:2px}
  .w7tday .w7row:has(.w7acts){min-height:96px}
  .w7tday .w7row .w7acts{position:absolute;right:14px;bottom:10px;padding:0}
  .w7tday .w7row .w7acts .w7btn{min-height:32px}
  /* a sample item under a desk row keeps its label and source on one line
     (DISPLAY §3.1: desk rows at most 110px); the full sentence is its title and
     sits, numbered with its label, in the case pane beside the list */
  .w7tday .w7row .w7samples{margin:1px 0 2px;grid-column:1 / -1}
  .w7tday .w7row .w7sampleitem{display:flex;gap:8px;align-items:baseline;padding:1px 0 1px 9px;font-size:13px;white-space:nowrap;min-width:0}
  .w7tday .w7row .w7sampleitem .w7t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .w7tday .w7row .w7sampleitem .w7s{flex:none;margin:0}

  /* Gate (DISPLAY §9 check 19, <= 1,800px on the real book): a desk row reads in at most
     two lines of sentence and one of team line, the rest in its title and the pane beside
     it; an up-for-grabs row keeps Claim it clear of any sample line (those sit in the case). */
  .w7tday .w7row .w7tl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .w7tday .w7row .w7rt,.w7tday .w7row .w7rq,.w7tday .w7row .w7claim{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .w7tday .w7row:has(.w7acts) .w7samples{display:none}

  /* the case pane: sticky under the nav, scrolls inside itself */
  .w7t-pane{display:block;position:sticky;top:var(--w7t-top,76px);max-height:calc(100vh - var(--w7t-top,76px) - 12px);overflow:auto;overscroll-behavior:contain;border-radius:14px;scrollbar-width:thin}
  .w7t-pane .w6d.w7pane{padding:0;border:0;background:transparent}
  .w7tday .w7end{margin-top:6px}
  .w7t-main>.w7legend-sample{margin:8px 0 0;padding:5px 12px}
}

/* ------------------------------------------------------------- road mode */
/* w7.css raises the number to 36px and sentences to 17px; the page keeps the
   layout and only lets the Start here card breathe a little more. */
html[data-theme="road"] .w7tday .w7card{border-width:2px}
html[data-theme="road"] .w7t-body{border-color:var(--rule)}

/* the section's quiet aside ("nobody at Southport owns these") takes its own
   line on a phone rather than squeezing the label */
@media (max-width:1099px){
  .w7tday .w7sech{flex-wrap:wrap;row-gap:0}
  .w7tday .w7sech .w7aside{flex-basis:100%;margin-left:0;margin-top:1px}
}

/* The after-call sheet's four buttons sit two by two (DISPLAY §4.1). w7.css's
   four-across outcome rule outranks its own sheet rule on specificity, which
   cut "Left message" off at 390px; this restores the kit's intent without
   touching the kit. */
.w7sheetwrap .w7sheet .k4acts.w7og{grid-template-columns:1fr 1fr}
.w7sheetwrap .w7sheet:focus{outline:none}