/* Bluejack: Morning Report screen. All classes prefixed mr-. Colors come from tokens.css only. */
.mr-root{container-type:inline-size;container-name:mrroot;min-width:0}
.mr-root *{box-sizing:border-box}
.mr-title h2{margin:0 0 4px}
.mr-title .sub{margin:0 0 22px}
.mr-eyebrow{margin:0;font:600 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--pine)}

/* layout: list left, report right */
.mr-wrap{display:grid;grid-template-columns:220px minmax(0,1fr);gap:22px;align-items:start}
.mr-list{display:grid;gap:8px;position:sticky;top:0}
.mr-day{display:grid;gap:4px;width:100%;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px 14px;cursor:pointer;color:var(--ink);font:inherit}
.mr-day:hover{border-color:var(--pine)}
.mr-day[aria-current="true"]{border-color:var(--pine);box-shadow:0 0 0 1px var(--pine)}
.mr-day-d{font:700 14px/1.2 var(--body);display:flex;align-items:center;gap:8px}
.mr-today{font:600 10px/1 var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--pine);border:1px solid currentColor;border-radius:999px;padding:3px 6px}
.mr-day-h{color:var(--muted);font-size:13px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* report */
.mr-report{min-width:0;container-type:inline-size;container-name:mrrep;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px}
.mr-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 18px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.mr-head-t{min-width:0}
.mr-date{margin:6px 0 4px;font:850 clamp(26px,4vw,36px)/1.02 var(--display);font-stretch:88%;letter-spacing:-.02em}
.mr-meta{margin:0;color:var(--muted);font-size:14px}
.mr-seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg);flex:none;max-width:100%}
.mr-seg button{border:0;background:transparent;color:var(--muted);padding:9px 13px;font:600 13px/1.1 var(--body);cursor:pointer;white-space:nowrap}
.mr-seg button+button{border-left:1px solid var(--line)}
.mr-seg button[aria-pressed="true"]{background:var(--pine);color:var(--pine-ink)}

/* headline: the one yellow element */
.mr-headline{background:var(--signal);color:var(--signal-ink);border-radius:14px;padding:18px 20px;margin-bottom:22px}
.mr-hl-k{margin:0 0 6px;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.mr-hl-t{margin:0 0 6px;font:850 22px/1.15 var(--display);font-stretch:92%;letter-spacing:-.01em}
.mr-hl-x{margin:0 0 14px;font-size:15px;line-height:1.5;max-width:60ch}
.mr-headline .num{font-weight:700}
.mr-hl-btn{border:0;border-radius:10px;padding:10px 15px;background:var(--signal-ink);color:var(--signal);font:600 14px/1.1 var(--body);cursor:pointer}
.mr-hl-btn:hover{opacity:.9}
.mr-headline :focus-visible{outline-color:var(--signal-ink)}

/* blocks */
.mr-block{margin-bottom:22px}
.mr-block-h{margin-bottom:10px}
.mr-block-h h4,.mr-card h4{margin:3px 0 0;font:800 18px/1.2 var(--display)}
.mr-needs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mr-needs li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--bg)}
.mr-n{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--pine);color:var(--pine-ink);font-size:14px}
.mr-need-b{min-width:0}
.mr-need-t{margin:0;font-weight:600}
.mr-need-d{margin:2px 0 0;color:var(--muted);font-size:14px;line-height:1.45}
.mr-mini{border:1.5px solid var(--pine);background:transparent;color:var(--pine);border-radius:999px;padding:7px 12px;font:600 13px/1.1 var(--body);cursor:pointer;white-space:nowrap}
.mr-mini:hover{background:var(--pine);color:var(--pine-ink)}

/* stat tiles */
.mr-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px;margin-bottom:22px}
.mr-stat{display:grid;gap:4px;align-content:start;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface-2);min-width:0}
.mr-stat-l{font:600 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mr-stat-v{font-size:24px;line-height:1.1;letter-spacing:-.02em;color:var(--ink);overflow-wrap:anywhere}
.mr-stat-v.mr-warn{color:var(--warn)}
.mr-stat-c{font-size:12.5px;line-height:1.35;color:var(--muted)}

/* section cards */
.mr-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:22px}
@container mrrep (min-width:560px){.mr-grid{grid-template-columns:1fr 1fr}}
.mr-card{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--surface);min-width:0}
.mr-gl{margin:12px 0 4px;font:600 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mr-card h4+.mr-ul{margin-top:10px}
.mr-ul{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.45}
.mr-ul li{padding:6px 0;border-top:1px solid var(--line)}
.mr-ul li:first-child{border-top:0;padding-top:2px}
.mr-ul b{font-weight:600}
.mr-li-g{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mr-li-g .grade{flex:none}

/* text-message mode */
.mr-phone-wrap{display:grid;justify-items:center;gap:10px;margin-bottom:22px}
.mr-phone{width:100%;max-width:340px;border:1px solid var(--line);border-radius:34px;background:var(--bg);padding:12px 12px 18px;box-shadow:0 18px 40px -26px rgba(16,34,30,.5)}
.mr-phone-top{display:grid;justify-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:12px}
.mr-notch{width:84px;height:6px;border-radius:999px;background:var(--line)}
.mr-sender{display:grid;justify-items:center;gap:2px;text-align:center}
.mr-sender-av{width:34px;height:34px;border-radius:9px;background:var(--pine);display:grid;place-items:center}
.mr-sender-av i{width:11px;height:11px;border-radius:50%;background:var(--signal)}
.mr-sender b{font-size:14px}
.mr-sender small{font:400 11px/1.3 var(--mono);color:var(--muted)}
.mr-thread{display:grid;gap:8px;padding:0 4px}
.mr-bubble{justify-self:start;max-width:92%;background:var(--surface-2);color:var(--ink);border-radius:18px 18px 18px 6px;padding:9px 13px;font-size:13.5px;line-height:1.42}
.mr-bubble p{margin:0}
.mr-bubble p+p{margin-top:5px}
.mr-note{margin:0;font:400 11.5px/1.4 var(--mono);color:var(--muted);text-align:center;max-width:340px}

/* customize */
.mr-custom{border-top:1px solid var(--line);padding-top:18px}
.mr-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.mr-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:7px 12px 7px 10px;font:600 13px/1.1 var(--body);cursor:pointer}
.mr-chip:hover{border-color:var(--pine)}
.mr-chip[aria-pressed="true"]{background:color-mix(in srgb,var(--pine) 12%,transparent);border-color:var(--pine);color:var(--ink)}
.mr-tick{font:700 12px/1 var(--mono);width:12px;text-align:center;color:var(--pine)}
.mr-chip[aria-pressed="false"] .mr-tick{color:var(--muted)}
.mr-sends{margin:0;color:var(--muted);font-size:13.5px}
.mr-link{border:0;background:none;padding:0;color:var(--pine);font:600 13.5px/1.4 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mr-foot{margin-top:18px;padding-top:12px;border-top:1px dashed var(--line);font:400 11.5px/1.45 var(--mono);color:var(--muted)}

/* narrow: list turns into a horizontal date strip above the report */
@container mrroot (max-width:760px){
  .mr-wrap{grid-template-columns:minmax(0,1fr);gap:14px}
  .mr-list{position:static;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 6px;margin:0 -2px;scrollbar-width:thin}
  .mr-day{flex:none;width:auto;padding:9px 13px;border-radius:999px;scroll-snap-align:start}
  .mr-day-h{display:none}
  .mr-day-d{font-size:13.5px;white-space:nowrap}
}
@container mrroot (max-width:560px){.mr-report{padding:16px;border-radius:16px}}
@container mrrep (max-width:520px){
  .mr-headline{padding:16px}
  .mr-hl-t{font-size:20px}
  .mr-needs li{grid-template-columns:30px minmax(0,1fr);padding:12px;align-items:start}
  .mr-n{width:28px;height:28px}
  .mr-mini{grid-column:2;justify-self:start}
  .mr-seg{width:100%}
  .mr-seg button{flex:1;padding:9px 8px}
  .mr-stats{grid-template-columns:1fr 1fr}
  .mr-stat:last-child:nth-child(odd){grid-column:1/-1}
  .mr-stat-v{font-size:21px}
}