<div data-today-briefing-card style="font-family: var(--card-font, 'Iosevka', 'SF Mono', ui-monospace, Menlo, Consolas, monospace); background:var(--theme-card-neutral-bg); color:var(--theme-card-neutral-text); padding:14px; border:1px solid var(--theme-card-neutral-border);">
  <div data-today-date style="font-size:0.86rem; line-height:1.2; letter-spacing:0.02em; color:var(--theme-card-neutral-muted); font-weight:700; margin-bottom:10px; white-space:nowrap;">Today</div>

  <div>
    <div style="font-size:0.76rem; line-height:1.2; text-transform:uppercase; letter-spacing:0.05em; color:var(--theme-card-neutral-muted); font-weight:700;">Weather</div>

    <div style="display:flex; align-items:flex-end; gap:8px; margin-top:10px;">
      <span data-today-temp style="font-size:3rem; line-height:0.92; letter-spacing:-0.05em; font-weight:800;">--</span>
      <span data-today-unit style="font-size:1.05rem; line-height:1.1; color:var(--theme-card-neutral-subtle); font-weight:700; padding-bottom:0.32rem;">°F</span>
    </div>

    <div style="display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-top:8px; font-size:0.92rem; line-height:1.3;">
      <span style="color:var(--theme-card-neutral-muted); font-weight:700;">Feels like</span>
      <span data-today-feels-like style="color:var(--theme-card-neutral-text); font-weight:800;">--</span>
    </div>

    <div style="margin-top:8px;">
      <span data-today-aqi-chip style="display:inline-flex; padding:4px 8px; background:color-mix(in srgb, var(--theme-card-neutral-border) 65%, white); color:var(--theme-card-neutral-subtle); font-size:0.78rem; line-height:1.1; font-weight:800; text-transform:uppercase; letter-spacing:0.05em;">AQI --</span>
    </div>
  </div>

  <div style="margin-top:14px; padding-top:12px; border-top:1px solid color-mix(in srgb, var(--theme-card-neutral-border) 82%, transparent);">
    <div style="display:flex; align-items:flex-start; justify-content:space-between; gap:12px;">
      <div style="font-size:0.76rem; line-height:1.2; text-transform:uppercase; letter-spacing:0.05em; color:var(--theme-card-neutral-muted); font-weight:700;">Agenda</div>
      <div data-today-events-count style="font-size:0.82rem; line-height:1.2; color:var(--theme-card-neutral-subtle); font-weight:700;">--</div>
    </div>
    <div data-today-empty style="display:none; margin-top:8px; color:var(--theme-card-neutral-subtle); font-size:0.96rem; line-height:1.4;">Nothing scheduled today.</div>
    <ul data-today-events-list style="list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:0;"></ul>
  </div>

  <div style="margin-top:10px; font-size:0.8rem; line-height:1.3; color:var(--theme-card-neutral-muted);">Updated <span data-today-updated>--</span></div>
</div>
