/* Notifications page and morning summary (2026-11-08, part 6). Uses the Skinpop tokens from skinpop-ui.css. */
.nt{max-width:760px}
.nt-today{background:var(--sp-cream,#FFF6EE);border:1px solid var(--sp-line,#eadfd6);border-radius:20px;padding:18px 18px 16px;margin:4px 0 6px}
.nt-today h2{margin:0;font:700 22px/1.2 var(--sp-display);color:var(--sp-ink);text-wrap:balance}
.nt-today p{margin:6px 0 14px;color:var(--sp-muted);font:500 13px/1.4 var(--sp-body)}
.nt-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(96px,100%),1fr));gap:8px}
.nt-tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:12px 12px 10px;border-radius:14px;border:1px solid var(--sp-line,#eadfd6);background:#fff;color:var(--sp-ink);text-align:left;cursor:pointer;font:inherit;transition:transform .15s var(--sp-ease,ease),border-color .15s}
.nt-tile:hover{border-color:var(--sp-red)}
.nt-tile:focus-visible{outline:2px solid var(--sp-red);outline-offset:2px}
.nt-tile b{font:700 26px/1 var(--sp-display);font-variant-numeric:tabular-nums}
.nt-tile span{font:600 12px/1.25 var(--sp-body);color:var(--sp-muted)}
.nt-tile.late:not(.zero) b{color:var(--sp-red)}
.nt-tile.late:not(.zero){border-color:color-mix(in srgb,var(--sp-red) 35%,transparent);background:color-mix(in srgb,var(--sp-red) 5%,#fff)}
.nt-tile.ready:not(.zero) b{color:var(--sp-ok-ink,#1F7A45)}
.nt-tile.zero b{color:var(--sp-muted)}
.nt .od-sect .mn-link{background:none;border:0;padding:4px 0;color:var(--sp-red);font:600 13px/1 var(--sp-body);cursor:pointer}
.nt-list{display:flex;flex-direction:column;gap:6px}
.nt-item{display:flex;align-items:center;gap:12px;width:100%;min-width:0;padding:12px 12px 12px 10px;border-radius:14px;border:1px solid var(--sp-line,#eadfd6);background:#fff;color:var(--sp-ink);text-align:left;font:inherit;cursor:pointer;position:relative}
.nt-item:hover{border-color:var(--sp-red)}
.nt-item:focus-visible{outline:2px solid var(--sp-red);outline-offset:2px}
.nt-item>svg{flex:none;width:16px;height:16px;color:var(--sp-muted)}
.nt-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--sp-sky-soft,#E6F1FC);color:var(--sp-sky-ink,#1d4f80)}
.nt-ic svg{width:18px;height:18px}
.nt-item.k-late .nt-ic,.nt-item.k-budget .nt-ic{background:color-mix(in srgb,var(--sp-red) 12%,#fff);color:var(--sp-red)}
.nt-item.k-soon .nt-ic,.nt-item.k-setup .nt-ic{background:var(--sp-butter-soft,#FFF1C2);color:var(--sp-butter-ink,#7a5600)}
.nt-item.k-ready .nt-ic{background:var(--sp-ok-soft,#E3F3E9);color:var(--sp-ok-ink,#1F7A45)}
.nt-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nt-main b{font:600 14px/1.3 var(--sp-body)}
.nt-main span{font:500 12.5px/1.35 var(--sp-body);color:var(--sp-muted);overflow-wrap:anywhere}
.nt-item:not(.new){background:transparent}
.nt-item:not(.new) .nt-main b{font-weight:500}
.nt-item.new::before{content:"";position:absolute;left:-4px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--sp-pop,#E01445);box-shadow:0 0 0 2px #fff}
.nt-prefs{margin:22px 0 8px}
.nt-prefs summary{cursor:pointer;font:600 13px/1.4 var(--sp-body);color:var(--sp-muted);padding:6px 0}
.nt-prefs summary:hover{color:var(--sp-ink)}
.nt-prefs .st-card{margin-top:8px}
.nt-prefs small{display:block;color:var(--sp-muted);font-weight:500}
@media (prefers-reduced-motion:reduce){.nt-tile{transition:none}}