/* Southport Signal: w7-manager.css (created by S0, owned by S3 (Danny's Today: web/src/views/manager.js)).
 *
 * Page rules for the manager page: the team table, Hand out this week, Needs you.
 * 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. */

/* ------------------------------------------------------------- the header */
.w7mhd{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin:0 0 14px}
.w7mhdl{min-width:0;max-width:640px}
.w7mhd .w7chips{margin:2px 0 0}

/* ------------------------------------------------------------- the boxes */
.w7mbox{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.w7mbox+.w7mbox{margin-top:12px}
.w7mboxh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:11px 16px 9px;border-bottom:1px solid var(--line2)}
.w7mboxh h2{font-size:15.5px;font-weight:700;color:var(--ink);margin:0;font-family:var(--font-ui)}
.w7maside{margin-left:auto;font-size:12.5px;color:var(--mute);line-height:1.4}
.w7mboxf{padding:8px 16px 10px;font-size:12.5px;color:var(--mute);border-top:1px solid var(--line2);line-height:1.5}
.w7mboxf a{font-weight:650;color:var(--blue);text-decoration:none}
.w7mend{color:var(--ink2)}
html[data-theme="road"] .w7mbox{border-color:var(--rule)}

/* ------------------------------------------------------------- the team table */
.w7mtblwrap{overflow-x:auto}
.w7mtbl{width:100%;border-collapse:collapse}
.w7mtbl th{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);text-align:left;padding:7px 14px;border-bottom:1px solid var(--line);background:var(--surf2);white-space:nowrap;font-family:var(--font-ui)}
.w7mtbl td{padding:6px 14px;border-bottom:1px solid var(--line2);font-size:14px;vertical-align:middle;color:var(--ink)}
.w7mtbl tr:last-child td{border-bottom:0}
.w7mr,.w7mtbl th.w7mr{text-align:right}
.w7mperson{white-space:nowrap}
.w7mpwrap{display:flex;align-items:center;gap:10px}
.w7mpwrap b{font-weight:650;white-space:nowrap;color:var(--ink)}
.w7msub{display:block;font-size:12.5px;color:var(--mute);margin-top:1px}
.w7mbig{font-family:var(--font-num);font-weight:700;font-size:22px;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.w7mbig.guard{color:var(--guard)}
.w7mquiet{color:var(--mute)}
.w7mbwname{font-weight:650;color:var(--ink)}
.w7mtr .w7btn{min-height:34px;padding:0 12px}

/* --------------------------------------------------------- the two-up split */
.w7msplit{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:16px;align-items:start;margin-top:12px}
.w7mside{display:flex;flex-direction:column;gap:12px;min-width:0}
@container w7mpage (max-width:900px){.w7msplit{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.w7msplit{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------------------- hand-out rows
 * Six rows share the box (the open one and up to five closed), inside
 * DISPLAY §9 check 20's 1,500px page budget, so every one is deliberately
 * tight: less top/bottom air than a case's own rows, never less type size
 * (still >= 12px on a phone) and never a dropped field. */
.w7mhlist .w7row+.w7row{border-top:1px solid var(--line2)}
.w7mhopen{padding:8px 16px 10px}
.w7mhopen .w7nm{margin-top:1px}
.w7mhopen .w7rt{margin:3px 0 1px}
.w7mhopen .w7call{padding:2px 0 4px}
.w7mhopen .w7tn{font-size:18px}
.w7mhopen .w7dial{width:34px;height:34px}
.w7mhopen .w7dial .w7i{width:16px;height:16px}
.w7mhopanel{margin-top:6px;border:1px solid var(--found-line);background:var(--found-tint);border-radius:9px;padding:7px 9px}
.w7mhoacts{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.w7mhowhy{font-size:12px;color:var(--ink2);line-height:1.3;margin-top:5px}
.w7mhopreview{margin-top:5px;padding:6px 8px;border-radius:7px;background:var(--card);border:1px solid var(--line);font-size:12px;line-height:1.35;color:var(--ink2)}
.w7mhopreview b{color:var(--ink)}
.w7msel{min-height:32px;padding:0 8px;border:1px solid var(--line);border-radius:7px;background:var(--card);font:600 13px/1 var(--font-ui);color:var(--ink)}

/* Closed hand-out rows: one compact grid row (content | picker). */
.w7mhrow{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:2px 12px;align-items:center;padding:6px 16px}
.w7mhleft{min-width:0}
.w7mhleft .w7nm{margin-top:0}
.w7mhrow .w7mhleft .w7rt{margin:2px 0 0}
/* The name and its meta share one line here (this box's rows are wide enough,
 * and there are up to six of them to a budget of 1,500px) rather than w7.css's
 * default of wrapping the meta beneath the name; the meta still drops to its
 * own line if the column is ever too narrow to hold both (`flex-wrap:wrap`
 * is still on `.w7nm`, untouched). */
.w7mhrow .w7nm>.w7rm,.w7mhopen .w7nm>.w7rm{flex-basis:auto;margin-top:0}
.w7mclamp{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.w7mhright{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.w7mhreason{font-size:12px;color:var(--mute);text-align:right}
@media (max-width:560px){.w7mhrow{grid-template-columns:minmax(0,1fr)}.w7mhright{align-items:flex-start;margin-top:8px}}

/* ------------------------------------------------------------- needs you */
.w7mneedlist .w7row+.w7row{border-top:1px solid var(--line2)}
.w7mneedrow{cursor:default;padding-top:11px}
.w7mneedrow .w7rt{-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.w7macts{display:flex;gap:8px;flex-wrap:wrap;padding:0 0 12px}
.w7macts .w7btn{min-height:38px}

/* ------------------------------------------------------------- freshness */
.w7mside .w7fresh{margin-top:0}

/* Gate (DISPLAY §4.5, §9 check 20 at <= 1,500px on the real book): Needs you reads as
   compact cards, name and town on one line; one sample line in the hand-out box. */
.w7mneedrow{padding:10px 16px}
.w7mneedrow .w7nm{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.w7mneedrow .w7nm .w7name{font-size:15px;line-height:1.3}
.w7mneedrow .w7nm>.w7rm{flex-basis:auto;font-size:13px}
.w7mneedrow .w7rt{font-size:14px;margin:3px 0 7px;line-height:1.4}
.w7mneedrow .w7macts{gap:6px}
.w7mneedrow .w7macts .w7btn{min-height:30px;padding:4px 10px;font-size:13px}
.w7mhrow .w7mhreason{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:250px}
.w7mneedrow{padding:8px 16px}
.w7mneedrow .w7rt{margin:2px 0 6px}
.w7mhandout>.w7legend-sample{margin:8px 16px 0;padding:5px 12px}