/* 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-preview{display:flex;align-items:baseline;gap:6px 16px;flex-wrap:wrap;margin:0 0 14px;padding:11px 15px;border:1px solid var(--line);border-left:4px solid var(--blue,#2463a6);border-radius:10px;background:var(--surf2);font-size:13px;line-height:1.45;color:var(--ink2)}
.w7t-preview b{font-size:14px;color:var(--ink)}
.w7tday[data-preview="1"] .w7tn{cursor:default;text-decoration:none}
.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:1300px){
  .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}
  /* At a normal laptop width the 720px case leaves the list below the shared
     kit's 560px container breakpoint. Without this the left column switches
     back to its phone cards and repeats the entire case beside the case. Keep
     it a scannable desk list at every width where the pane is visible. */
  .w7t-body .w7list .w7row{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:1px 12px;align-items:start;padding:8px 12px 8px 16px}
  .w7t-body .w7list .w7row .w7nm{order:1;grid-column:1;min-width:0;margin:0;flex-wrap:wrap;gap:1px 6px}
  .w7t-body .w7list .w7row .w7nm .w7name{font-size:15px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .w7t-body .w7list .w7row .w7nm>.w7rm{flex-basis:100%;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
  .w7t-body .w7list .w7row .w7kick{order:3;grid-column:1;font-size:12.5px;margin:1px 0 0}
  .w7t-body .w7list .w7row .w7rt,.w7t-body .w7list .w7row .w7rq,.w7t-body .w7list .w7row .w7tl,.w7t-body .w7list .w7row .w7samples{order:2;grid-column:1}
  .w7t-body .w7list .w7row .w7call{grid-column:2;grid-row:1 / span 4;border-top:0;align-self:start;justify-content:flex-end;text-align:right;padding:0}
  .w7t-body .w7list .w7row .w7call .w7wl{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .w7t-body .w7list .w7row .w7call .w7tn{font-size:19px;line-height:1.15}
  .w7t-body .w7list .w7row .w7dial{display:none}
  .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:1299px){
  .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}


/* Salesperson work queues: compact evidence, visible source and next action. */
.w7tday.w7t-organized .w7t-coverage { margin:7px 0 0; font-size:12px; color:var(--mute); }
.w7tday.w7t-organized .w7t-sec { border-radius:7px; }
.w7tday.w7t-organized .w7t-sec .w7sech { padding:10px 14px; color:var(--ink); background:color-mix(in srgb,var(--blue) 7%,var(--card)); letter-spacing:.02em; font-size:12px; font-weight:750; }
.w7tday.w7t-organized [data-section=due] .w7sech { background:color-mix(in srgb,var(--warning) 10%,var(--card)); border-left:3px solid var(--warning); }
.w7tday.w7t-organized [data-section=assigned] .w7sech { border-left:3px solid var(--blue); }
.w7tday.w7t-organized :is([data-section=research],[data-section=grabs]) .w7sech { background:var(--surface-2); border-left:3px solid var(--ink-muted); }
.w7tday.w7t-organized .w7t-sec .w7sech .w7aside { color:var(--ink2); font-size:11.5px; font-weight:500; letter-spacing:0; text-transform:none; }
.w7tday.w7t-organized .w7t-body .w7row .w7rq,
.w7tday.w7t-organized .w7t-body .w7row .w7rt { font-size:13px; line-height:1.45; -webkit-line-clamp:3; margin:5px 0; }
.w7tday.w7t-organized .w7t-body .w7row .w7rq { padding-left:9px; border-left:2px solid var(--blue); }
.w7tday.w7t-organized .w7t-body .w7row .w7kick { font-size:11.5px; color:var(--ink2); }
.w7tday.w7t-organized .w7t-body .w7row .w7nm .w7name { color:var(--ink); font-size:15px; font-weight:750; white-space:normal; line-height:1.3; }
.w7tday.w7t-organized .w7t-body .w7row .w7t-next { grid-column:1 / -1; order:6; display:flex; align-items:baseline; gap:7px; padding:7px 0 3px; color:var(--ink2); font-size:12px; line-height:1.35; }
.w7tday.w7t-organized .w7t-next>span { color:var(--blue); font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.w7tday.w7t-organized .w7t-next>b { font-weight:600; }
.w7tday.w7t-organized .w7t-body .w7row:has(.w7acts) .w7t-next { padding-bottom:40px; }
.w7tday.w7t-organized .w7t-body .w7row.sel { background:color-mix(in srgb,var(--blue) 6%,var(--card)); }
.w7tday.w7t-organized .w7t-context:empty { display:none; }
@media(min-width:1300px) {
  .w7tday.w7t-organized { grid-template-columns:minmax(0,1.1fr) minmax(450px,1fr); }
  .w7tday.w7t-organized .w7t-body .w7list .w7row { padding:10px 14px; gap:2px 12px; }
  .w7tday.w7t-organized .w7t-body .w7list .w7row .w7kick { order:4; }
  .w7tday.w7t-organized .w7t-body .w7row .w7tl { font-size:12px; color:var(--ink2); }
}
@media(max-width:1299px) {
  .w7tday.w7t-organized .w7t-body .w7row .w7t-next { padding:6px 0 10px; }
  .w7tday.w7t-organized .w7t-body .w7row .w7kick { font-size:12px; }
  .w7tday.w7t-organized .w7t-next>span { font-size:11px; }
}