/* notifications: the bell of the top bar (dropdown) and the Bildirimler page. Every icon (P.icon: a Font Awesome mask,
   assets/css/icons.css) has an explicit size here AND on the element (views/notifications.js), so nothing can render at
   another size. Colours are the theme tokens, dark and light alike; small text keeps WCAG AA (4.5:1): the texts are --muted or --text; the badge is calm.css's
   neutral one (--panel3 / --text) in both themes, no light-theme override here (e2e measures them).
   v3 (docs/superpowers/specs/2026-10-25-panel-ux-v3-design.md "Bildirimler"): a row, in the bell and on the page alike,
   is the severity dot, then the title on ONE line, the body on at most TWO lines, one grey line of facts; the cut is CSS
   only (the whole title and body stay in the DOM and in their title; the side panel shows them whole). A list is compact
   for every role, the owner included (decision C): the clamp rules below are more specific than full-view.css's
   `html.full-view .ntf-b`, which undoes line clamps for an owner elsewhere. */
.ntf-wrap{position:relative;display:flex}
.ntf-bell{position:relative}
.ntf-bell span:where(.ic){width:18px;height:18px}
/* the unread badge: a 16 px circle (one digit) on the button's top-right corner, its 2 px ring included (border-box), so it
   covers only a corner of the 18 px bell even at "99+" (e2e checks the size and the overlap) */
.ntf-badge{position:absolute;top:-6px;right:-5px;min-width:16px;height:16px;padding:0 3px;border-radius:999px;background:var(--info);color:var(--info-ink);
  font:700 10px/12px var(--mono);letter-spacing:-.02em;text-align:center;border:2px solid var(--bg);box-sizing:border-box;pointer-events:none}
.ntf-pop{position:absolute;right:0;top:44px;z-index:45;width:380px;max-height:min(560px,calc(100vh - var(--top) - 24px));display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.ntf-pop-h{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line)}
.ntf-pop-h b{font-size:13.5px}
.ntf-pop-h .ntf-all{margin-left:auto;font-size:12.5px;padding:2px 0}
.ntf-pop-h .ntf-all:disabled{color:var(--faint);cursor:default;text-decoration:none}
.ntf-list{list-style:none;margin:0;padding:4px;overflow-y:auto;flex:1;min-height:0}
.ntf-pop-f{border-top:1px solid var(--line);padding:9px 14px;text-align:center;font-size:12.5px}
.ntf-pop-f a{color:var(--text);font-weight:600}
@media (hover:hover){.ntf-pop-f a:hover{text-decoration:underline}}
.ntf-item{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:9px;color:inherit;position:relative}
@media (hover:hover){.ntf-item:hover{background:var(--panel2)}}
.ntf-item:focus-visible{background:var(--panel2);outline-offset:-2px}
.ntf-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 12px;color:var(--muted);font-size:13px;text-align:center}
.ntf-empty span:where(.ic){width:22px;height:22px;color:var(--faint)}
/* the row anatomy (bell and page): the severity dot (panel.css .st: 8 px, grey; warn and critical here), aligned with the
   middle of the title's 18 px line */
.ntf-sev{flex:none;margin-top:5px}
.ntf-sev.st-warn i{background:var(--warn)}
.ntf-sev.st-bad i{background:var(--bad)}
.ntf-t{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
/* the title: one line, cut with "…" (the whole title in its title attribute); semibold and --text when unread */
.ntf-t b,.ntf-row-t,a.ntf-row-t{display:block;min-width:0;font-size:13px;line-height:18px;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unread .ntf-t b,.unread .ntf-row-t,.unread a.ntf-row-t{font-weight:600;color:var(--text)}
.ntf-row-h{display:flex;min-width:0}
@media (hover:hover){a.ntf-row-t:hover{text-decoration:underline;text-underline-offset:3px}}
/* the body: in the bell at most two lines (the whole text in its title and in the side panel), for every role */
.ntf-item .ntf-t .ntf-b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;line-height:18px;color:var(--muted);overflow-wrap:anywhere}
.ntf-meta{font-size:11.5px;line-height:16px;color:var(--muted);min-width:0;overflow-wrap:anywhere}
/* the page (live 1, the owner 2026-10-26: its rows were three lines): a row is ONE line from 901 px: the title (at most
   45 % of the line, cut with "…") · the text cut on the same line (whole in its title and in Ayrıntılar) · the facts
   (time · category · who) whole at its end; on a narrower screen two lines: the title, then the text · the facts */
.ntf-row .ntf-t{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:2px}
.ntf-row .ntf-row-h{flex:0 1 auto;max-width:45%}
.ntf-row .ntf-t .ntf-b{display:block;flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12.5px;line-height:18px;color:var(--muted)}
.ntf-row .ntf-t .ntf-meta{flex:none;margin-left:auto;white-space:nowrap;overflow-wrap:normal}
.ntf-meta .ntf-sep{color:var(--faint)}
.ntf-dot{width:8px;height:8px;border-radius:50%;background:var(--info);flex:none;margin-top:6px}
/* the page: the settings behind "Tercihler ▸" (the disclosure's section sits under the page head, across the page) */
.ntf-prefs-body{margin:-8px 0 20px}
/* "Tercihler ▸" with the settings' state on its line (panel.css .disc is a column: here a row, wrapping on a phone) */
.ntf-disc{flex-direction:row;align-items:center;flex-wrap:wrap;gap:2px 10px}
.ntf-pstate{font-size:12.5px;color:var(--muted)}
.ntf-pstate[hidden]{display:none}
.ntf-pref-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ntf-rows{list-style:none;margin:0;padding:0}
.ntf-row{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.ntf-row:last-child{border-bottom:0}
@media (hover:hover){.ntf-row:hover{background:var(--panel2)}}
/* the ⋯ (P.menu's .p-more, 30 px) centred on the title's line */
.ntf-row-a{display:flex;align-items:center;flex:none;margin:-6px 0 -6px auto}
.ntf-none{list-style:none;cursor:default}
.ntf-whole{white-space:pre-wrap;overflow-wrap:anywhere}
.ntf-note{margin:0;font-size:12.5px}
.ntf-prefs{display:flex;flex-direction:column;gap:9px}
.ntf-prefs .check span:where(.ic){width:15px;height:15px;color:var(--muted);flex:none}
.card .ntf-rows + .pager{border-top:1px solid var(--line)}
@media (max-width:900px){.ntf-pref-grid{grid-template-columns:1fr} .ntf-row .ntf-row-h{flex:1 1 100%;max-width:none}}
@media (max-width:560px){
  .ntf-pop{position:fixed;left:8px;right:8px;top:calc(var(--top) - 4px);width:auto;max-height:calc(100vh - var(--top) - 12px)}
  .ntf-row{padding:10px 12px}
  .ntf-row-a .p-more{min-width:44px;min-height:44px;margin:-13px 0}
}