/* ============================================================================
   notification-list — DESKTOP enhancement (loaded media="(min-width:768px)").
   ----------------------------------------------------------------------------
   Light-2026 layout to sit beside the shared AppShell sidebar: a centred,
   readable single column (header + tabs + list all share one max-width). The
   notification list is a FLAT list — transparent rows on the page canvas,
   separated by a hairline divider (no per-row white card / border / shadow),
   with a subtle hover. Layout/skin only — no new UX. Mobile (<768) never loads
   this file, so the phone Source-of-Truth is untouched.
   ============================================================================ */

/* header: drop the back arrow (sidebar handles nav) + light bar */
.page-header .ib{display:none}
.page-header{background:#fff;border-bottom:1px solid #EAE4DB}

@media (min-width:768px){
  body.ptshell{background:#F4F5F7}

  /* header flows with the content column (shell topbar owns the fixed chrome) */
  body.ptshell .page-header{position:static;background:transparent;border-bottom:none;padding:6px 0 0}
  body.ptshell .page-header .hd{max-width:760px;margin-inline:auto;padding-left:24px;padding-right:24px}
  body.ptshell .page-header .htitle{font-size:22px}
  body.ptshell .readall{height:38px;padding:0 16px;border-radius:12px;font-size:13.5px;
    background:linear-gradient(120deg,var(--sun),var(--sun-deep));color:#fff;border:none;
    box-shadow:0 12px 24px -14px rgba(239,95,6,.6)}
  body.ptshell .readall svg{color:#fff}
  body.ptshell .readall:disabled{background:#EDE7DF;color:var(--muted);box-shadow:none}

  /* filter tabs centred in the reading column (wrap instead of scroll) */
  body.ptshell .tabs{max-width:760px;margin-inline:auto;padding:14px 24px 4px;flex-wrap:wrap;overflow:visible}
  body.ptshell .tab{transition:transform .12s ease,box-shadow .12s ease,border-color .12s}
  body.ptshell .tab:hover{border-color:#FFD8BE}
  body.ptshell .tab:active{transform:translateY(1px)}

  /* content column */
  body.ptshell main.page{max-width:760px;margin-inline:auto;padding:0 24px 48px}

  /* ---- notification list: FLAT list (light-2026) ----------------------------
     Owner review: each row rendered as a separate WHITE card floating on the
     gray canvas. Fix = flat rows — transparent background (canvas shows
     through), a hairline divider between rows, no per-row border / shadow /
     lift, subtle hover. Day group headers, icon, title/body, the unread dot &
     mark-read behaviour all stay. (Mirrors the approved .navrow pattern.)      */
  body.ptshell .list{gap:0}
  body.ptshell .nt,
  body.ptshell .nt.unread{
    background:transparent;border:none;border-bottom:1px solid #EEF0F3;
    border-radius:12px;box-shadow:none;padding:16px 12px;
    transition:background .12s ease;
  }
  body.ptshell .nt:hover{background:#F7F8FA;transform:none;box-shadow:none}
  body.ptshell .nt:active{transform:none}
  body.ptshell .list .nt:last-child{border-bottom:none}

  /* group heading aligns with the row padding */
  body.ptshell .grp{margin:18px 12px 4px;font-size:13px}
  body.ptshell .grp:first-child{margin-top:8px}

  /* loading skeleton matches the flat rhythm (no card chrome) */
  body.ptshell .sk{
    background:transparent;border:none;border-bottom:1px solid #EEF0F3;
    border-radius:0;box-shadow:none;padding:16px 12px;
  }
  body.ptshell .empty{padding:64px 20px}
}

@media (min-width:1280px){
  body.ptshell main.page{max-width:1080px}
  body.ptshell .tabs,body.ptshell .page-header .hd{max-width:1080px}
}