/* The Quiet Bell. Uses the site's own tokens (site.css), with fallbacks. */
.pln-bellw { position: relative; display: inline-flex; align-items: center; }
.pl-util .pln-bellw { margin-left: auto; margin-block: -6px; }
.pl-util .pln-bellw + .pl-util-acct { margin-left: 4px; }
.pl-slim-bar .pln-bellw { margin-left: auto; }
.pl-slim-bar .pln-bellw + .pl-slim-acct { margin-left: -10px; }
.pln-bell { position: relative; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid transparent; background: transparent; color: #fff; cursor: pointer; }
.pln-bell:hover, .pln-bellw.is-open .pln-bell { background: #2a2a2a; border-color: #444; }
.pln-bell:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pln-bell svg { width: 19px; height: 19px; }
.pln-dot-new { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #e0233f; box-shadow: 0 0 0 2px var(--pl-mast, #121212); }

.pln-inbox { position: absolute; z-index: 1000; width: 380px; max-width: calc(100vw - 24px); background: var(--pl-paper, #fff); color: var(--pl-ink, #121212); border: 1px solid #cfc9d3; box-shadow: 0 18px 40px -16px rgba(0,0,0,.4); font-family: var(--pl-body, Georgia, serif); text-align: left; letter-spacing: 0; text-transform: none; }
.pln-inbox::before { content: ""; position: absolute; top: -7px; right: 19px; width: 12px; height: 12px; background: inherit; border-left: 1px solid #cfc9d3; border-top: 1px solid #cfc9d3; transform: rotate(45deg); }
.pln-top { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px 10px; border-bottom: 1px solid var(--pl-line, #e3e0e5); }
.pln-top h2 { margin: 0; font-family: var(--pl-head, Georgia, serif); font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: inherit; border: 0; padding: 0; }
.pln-top a, .pln-foot button { font-family: var(--pl-ui, Arial, sans-serif); font-size: 12.5px; color: var(--pl-muted, #5c5662); text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; }
.pln-list { list-style: none; margin: 0; padding: 0; max-height: min(64vh, 520px); overflow-y: auto; }
.pln-item { border-bottom: 1px solid var(--pl-line, #e3e0e5); margin: 0; }
.pln-item a { display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: 12px; padding: 12px 16px; color: inherit; text-decoration: none; }
.pln-item a:hover .pln-h { text-decoration: underline; }
.pln-item a:focus-visible { outline: 2px solid var(--pl-ink, #121212); outline-offset: -2px; }
.pln-bar { background: var(--pl-line, #e3e0e5); }
.pln-item.is-new .pln-bar { background: var(--pl-act, #c8102e); }
.pln-item.is-note { background: var(--pl-plum-soft, #f5f0f4); }
.pln-txt { display: grid; gap: 2px; min-width: 0; }
.pln-k { font-family: var(--pl-ui, Arial, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.pln-h { font-family: var(--pl-head, Georgia, serif); font-size: 16.5px; font-weight: 600; line-height: 1.25; }
.pln-b { font-size: 14px; line-height: 1.4; color: var(--pl-muted, #5c5662); }
.pln-when, .pln-sig { font-family: var(--pl-ui, Arial, sans-serif); font-size: 11.5px; color: var(--pl-muted, #5c5662); margin-top: 3px; }
.pln-sig { display: flex; align-items: center; gap: 7px; color: var(--pl-plum, #5a2a4c); }
.pln-face { width: 22px; height: 22px; border-radius: 50%; background: var(--pl-plum, #5a2a4c); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.pln-foot { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--pl-soft, #f5f4f6); font-family: var(--pl-ui, Arial, sans-serif); font-size: 12px; color: var(--pl-muted, #5c5662); }
.pln-foot button { color: var(--pl-ink, #121212); }
.pln-empty { margin: 0; padding: 18px 16px; font-size: 15px; color: var(--pl-muted, #5c5662); }
@media (max-width: 600px) {
	.pln-inbox { left: 8px; right: 8px !important; width: auto; max-width: none; }
	.pln-inbox::before { display: none; }
	.pl-util .pln-bellw { margin-block: -4px; }
}

/* Follow line */
.pln-follow-wrap { margin: 28px 0 8px; display: grid; gap: 12px; font-family: var(--pl-body, Georgia, serif); }
.pln-follow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--pl-line, #e3e0e5); border-bottom: 1px solid var(--pl-line, #e3e0e5); padding: 14px 0; }
.pln-ft { flex: 1 1 260px; min-width: 0; }
.pln-ft b { display: block; font-family: var(--pl-head, Georgia, serif); font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--pln-c); }
.pln-ft span { display: block; font-size: 15px; line-height: 1.4; color: var(--pl-muted, #5c5662); }
.pln-fbtn, .pln-yes, .pln-q { font-family: var(--pl-ui, Arial, sans-serif); font-weight: 700; font-size: 14px; line-height: 1.2; border-radius: 3px; padding: 10px 16px; cursor: pointer; border: 1.5px solid var(--pl-ink, #121212); background: var(--pl-ink, #121212); color: #fff; }
.pln-fbtn::before { content: "+"; margin-right: 8px; font-weight: 800; }
.pln-fbtn.is-on { background: #fff; color: var(--pl-ink, #121212); }
.pln-fbtn.is-on::before { content: "\2713"; }
.pln-fbtn:disabled { opacity: .6; }
.pln-yes { background: var(--pl-act, #c8102e); border-color: var(--pl-act, #c8102e); }
.pln-q { background: transparent; border-color: transparent; color: var(--pl-muted, #5c5662); text-decoration: underline; padding-inline: 6px; }
.pln-fbtn:focus-visible, .pln-yes:focus-visible, .pln-q:focus-visible, .pln-link:focus-visible { outline: 3px solid var(--pl-ink, #121212); outline-offset: 2px; }
.pln-ask { background: var(--pl-soft, #f5f4f6); padding: 16px 18px; display: grid; gap: 8px; border-left: 4px solid var(--pl-ink, #121212); }
.pln-ask[hidden] { display: none; }
.pln-ask b { font-family: var(--pl-head, Georgia, serif); font-size: 18px; font-weight: 700; }
.pln-ask p { margin: 0; font-size: 15.5px; line-height: 1.45; }
.pln-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pln-small { font-family: var(--pl-ui, Arial, sans-serif); font-size: 12.5px !important; color: var(--pl-muted, #5c5662); }

/* Since you were last here */
.pln-since { margin: 28px 0 8px; }
.pln-since-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 2px solid var(--pl-ink, #121212); padding-top: 10px; margin-bottom: 14px; }
.pln-since-top h2 { margin: 0; font-family: var(--pl-head, Georgia, serif); font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.pln-since-top span { font-family: var(--pl-ui, Arial, sans-serif); font-size: 12.5px; color: var(--pl-muted, #5c5662); }
.pln-since-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.pln-since-row > * { min-width: 0; margin: 0; }
@media (max-width: 900px) { .pln-since-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pln-since-row { grid-template-columns: minmax(0, 1fr); } }

/* Account › Notifications */
.pln-acct { display: grid; gap: 14px; }
.pln-acct p { margin: 0; }
.pln-scroll { overflow-x: auto; }
.pln-pref { border-collapse: collapse; width: 100%; min-width: 420px; font-family: var(--pl-ui, Arial, sans-serif); font-size: 14px; }
.pln-pref th { text-align: left; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--pl-muted, #5c5662); font-weight: 700; padding: 8px 10px; border-bottom: 2px solid var(--pl-ink, #121212); }
.pln-pref th.c, .pln-pref td.c { text-align: center; width: 96px; }
.pln-pref td { padding: 10px; border-bottom: 1px solid var(--pl-line, #e3e0e5); vertical-align: middle; }
.pln-d { display: block; font-family: var(--pl-body, Georgia, serif); font-size: 13.5px; color: var(--pl-muted, #5c5662); font-weight: 400; }
.pln-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.pln-na { color: #b3adb8; }
.pln-sw { appearance: none; -webkit-appearance: none; width: 38px; height: 22px; border-radius: 11px; background: #d4cfd8; position: relative; cursor: pointer; margin: 0; vertical-align: middle; border: 0; transition: background .15s; }
.pln-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.pln-sw:checked { background: var(--pl-ink, #121212); }
.pln-sw:checked::after { left: 19px; }
.pln-sw:focus-visible { outline: 3px solid var(--pl-ink, #121212); outline-offset: 2px; }
.pln-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.pln-caps label { display: grid; gap: 6px; font-family: var(--pl-ui, Arial, sans-serif); font-size: 13px; font-weight: 700; }
.pln-caps select { font: 400 14px var(--pl-ui, Arial, sans-serif); padding: 8px; border: 1.5px solid var(--pl-ink, #121212); background: #fff; color: var(--pl-ink, #121212); border-radius: 3px; }
.pln-device { font-family: var(--pl-ui, Arial, sans-serif); font-size: 14px; }
.pln-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--pl-ink, #121212); text-decoration: underline; cursor: pointer; }
.pln-pause { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--pl-soft, #f5f4f6); padding: 12px 14px; font-family: var(--pl-ui, Arial, sans-serif); font-size: 14px; color: var(--pl-muted, #5c5662); }
.pln-saved { font-family: var(--pl-ui, Arial, sans-serif); font-size: 13px; font-weight: 700; color: var(--pl-ink, #121212); min-height: 1em; }
@media (prefers-reduced-motion: reduce) { .pln-sw, .pln-sw::after { transition: none; } }
