/* Deferred styles — below-the-fold / component styles. Loaded non-blocking after first paint.
   See docs/v2.0.0/architecture/frontend-architecture.md. */
.card{background:var(--surface,#fff);border:1px solid var(--border,#E6E9EC);border-radius:10px;padding:24px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
/* Unified heading scale — headings size by element level (not by class) so a given level looks the
   same on every page: page title (h1) > section (h2) > subsection (h3). Component titles (post cards,
   list items, sidebar) deliberately override with their own smaller fixed size below. */
h1,h2,h3,h4,h5,h6{line-height:1.3;font-weight:700;color:var(--ink,#23272B)}
h1{font-size:1.8rem;margin:0 0 .5rem}
h2{font-size:1.4rem;margin:.5rem 0}
h3{font-size:1.2rem;margin:.5rem 0}
h4{font-size:1.05rem;margin:.5rem 0}
.lead{font-size:1.15rem}
.muted{color:var(--muted,#5B6470)}
code{background:var(--surface-subtle,#F5F8F9);padding:.1rem .35rem;border-radius:4px;font-size:.9em}

@media (min-width: 768px){
    .site-main{padding:32px 0}
}

/* Forms: textareas and selects match the input styling. */
.form-row textarea,.form-row select{width:100%;padding:.55rem .7rem;font-size:1rem;border:1px solid var(--border,#E6E9EC);border-radius:8px;background:var(--surface,#fff);color:inherit;font-family:inherit}
.form-row textarea:focus,.form-row select:focus{outline:2px solid var(--brand-teal,#12A4B4);outline-offset:1px;border-color:var(--brand-teal,#12A4B4)}
.status-message{color:#1B7E4B;font-weight:600}

/* Posts. */
.post-list{list-style:none;padding:0;margin:0}
.post-list>li{padding:.8rem 0;border-bottom:1px solid var(--border,#E6E9EC)}
.post-meta{font-size:.92rem}
.post-content img{max-width:100%;height:auto;border-radius:8px}
.post-image img{max-width:100%;height:auto;border-radius:10px}
.post-video{position:relative;padding-top:56.25%;margin:1rem 0}
.post-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:10px}

/* Right panel / search refinements (structural layout is inlined critical CSS). */
.search-row input:focus{outline:2px solid #fff;outline-offset:1px}
.search-row button:hover{background:#dd8a14;text-decoration:none}
.site-aside > * + *{margin-top:16px}
/* Same rule for the content column: a tiny, consistent gap between stacked boxes on every page. */
.content > * + *{margin-top:16px}

/* Forms (account pages) — mobile-first, single column. */
.form-row{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem;max-width:28rem}
.form-row label{font-weight:600;font-size:.95rem}
.form-row input[type=text],.form-row input[type=email],.form-row input[type=password],.form-row input:not([type]){
    width:100%;padding:.6rem .7rem;font-size:1rem;border:1px solid var(--border,#E6E9EC);border-radius:8px;background:var(--surface,#fff);color:inherit}
.form-row input:focus{outline:2px solid var(--brand-teal,#12A4B4);outline-offset:1px;border-color:var(--brand-teal,#12A4B4)}
.form-row.form-check{flex-direction:row;align-items:center}
.form-row small{font-size:.82rem}
/* New post form (UAT 7174): full-width fields + image crop preview. */
.form-row-wide{max-width:none}
.image-editor{margin-top:.6rem;max-width:100%;max-height:70vh}
.image-editor img{display:block;max-width:100%}
/* Square editor for profile avatars (UAT 7174) — keep the crop box compact, not full-width. */
.image-editor-square{max-width:320px}
/* Markdown editor: toolbar + textarea wrapper, and the live preview pane (UAT 7174). */
.md-editor{border:1px solid var(--border,#E6E9EC);border-radius:var(--radius,8px);overflow:hidden}
.md-editor textarea{border:0;border-top:1px solid var(--border,#E6E9EC);border-radius:0;display:block;width:100%}
.md-editor textarea:focus{outline:2px solid var(--focus,#12A4B4);outline-offset:-2px}
/* Preview toggle: [hidden] must win over the textarea's display:block so the hidden field truly collapses
   and the preview takes its place (rather than stacking below it). */
.md-editor [hidden]{display:none}
.md-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:4px;background:var(--surface-subtle,#F5F8F9)}
.md-btn{min-width:32px;height:32px;padding:0 .5rem;border:1px solid transparent;border-radius:6px;background:none;color:var(--ink,#23272B);font-size:.95rem;line-height:1;cursor:pointer}
.md-btn:hover{background:var(--surface,#fff);border-color:var(--border,#E6E9EC)}
.md-sep{width:1px;align-self:stretch;margin:4px 2px;background:var(--border,#E6E9EC)}
/* Preview pane sits inside the editor and toggles with the textarea (same area, scrolls if long). */
.md-editor .md-preview{border:0;border-top:1px solid var(--border,#E6E9EC);border-radius:0;padding:.75rem 1rem;overflow:auto;background:var(--surface,#fff)}
.md-btn:disabled{opacity:.4;cursor:default}
.md-btn-active{background:var(--surface,#fff);border-color:var(--brand-teal,#12A4B4);color:var(--brand-teal,#12A4B4)}
/* Full-screen editor overlay: fills the viewport; toolbar stays on top, textarea/preview fill the rest. */
.md-editor.md-editor--fullscreen{position:fixed;inset:0;z-index:1000;border-radius:0;display:flex;flex-direction:column;background:var(--surface,#fff)}
.md-editor.md-editor--fullscreen textarea{flex:1 1 auto;min-height:0;height:auto}
.md-editor.md-editor--fullscreen .md-preview{flex:1 1 auto;min-height:0;height:auto!important}
body.md-editor-fs-open{overflow:hidden}
/* Current profile picture + remove button (UAT 7174). */
.profile-image-current{display:flex;align-items:center;gap:14px;margin-bottom:1.25rem}
.profile-image-current p{margin:0 0 .4rem}
.field-validation-error,.validation-summary{color:#B3261E;font-size:.9rem}
.validation-summary ul{margin:.25rem 0 .75rem;padding-left:1.1rem}
.validation-summary:empty,.validation-summary-valid{display:none}
.form-row input.input-validation-error{border-color:#B3261E}
.form-row input.input-validation-error:focus{outline-color:#B3261E}
.btn-primary,.btn-secondary,.btn-danger{display:inline-block;font:inherit;font-weight:600;padding:.6rem 1.1rem;border-radius:8px;border:1px solid transparent;cursor:pointer;text-align:center}
.btn-primary{background:var(--brand-teal,#12A4B4);color:#fff}
.btn-primary:hover{background:#0e8a98;text-decoration:none}
.btn-secondary{background:var(--surface-subtle,#F5F8F9);border-color:var(--border,#E6E9EC);color:var(--ink,#23272B)}
.btn-secondary:hover{text-decoration:none;border-color:var(--brand-teal,#12A4B4)}
/* Danger/safety actions (Report, delete, restrict) — outlined red, fills on hover. */
.btn-danger{background:var(--surface,#fff);border-color:var(--danger,#B3261E);color:var(--danger,#B3261E)}
.btn-danger:hover{background:var(--danger,#B3261E);color:#fff;text-decoration:none}
/* Full-width stacked button, e.g. inside the sidebar Actions box. */
.btn-block{display:block;width:100%}
.link-button{background:none;border:none;padding:.5rem .6rem;color:var(--ink,#23272B);font:inherit;cursor:pointer}
.link-button:hover{text-decoration:underline}
.nav-inline-form{display:inline}

/* Sidebar "Actions" box (UAT 7174) — page-level actions as full-width stacked buttons, below search. */
.action-panel{background:var(--surface,#fff);border:1px solid var(--border,#E6E9EC);border-radius:var(--radius-lg,12px);padding:12px;margin-top:16px;display:flex;flex-direction:column;gap:8px}
/* Author disclaimer — last box on the post-detail side panel (UAT 7174). */
.disclaimer-panel{margin-top:16px;padding:12px;border:1px solid var(--border,#E6E9EC);border-radius:var(--radius-lg,12px);background:var(--surface-subtle,#F5F8F9)}
.disclaimer-panel .disclaimer-text{margin:0;font-size:.85rem;line-height:1.5;color:var(--muted,#5B6470)}
.action-panel form{margin:0}
.action-panel .btn-sm{margin-top:0}

/* Generic confirmation dialog (UAT 7174) — shared modal in _Layout, driven by data-confirm forms. */
.modal-backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);padding:1rem}
.modal-backdrop[hidden]{display:none}
.modal-box{background:var(--surface,#fff);border:1px solid var(--border,#E6E9EC);border-radius:var(--radius-lg,12px);padding:20px;max-width:24rem;width:100%;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.modal-message{margin:0 0 1.1rem;font-size:1rem;line-height:1.5}
.modal-actions{display:flex;justify-content:flex-end;gap:.6rem;flex-wrap:wrap}

/* --- F04 Community & Engagement --- */
.notice{background:#E8F6F8;border:1px solid var(--brand-teal,#12A4B4);color:#0e6470;border-radius:8px;padding:.6rem .9rem;margin:.5rem 0 1rem}
.small{font-size:.85rem}
/* Honeypot — hidden from humans and assistive tech; bots fill it. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn-xs{padding:.2rem .55rem;font-size:.8rem;font-weight:600;border-radius:6px}
.follow-form{margin:0}
.form-grid-2{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:520px){.form-grid-2{grid-template-columns:1fr 1fr;gap:1rem}.form-grid-2 .form-row{max-width:none}}
/* Narrow control + wide field on one row (e.g. static-page Section + Slug). */
.form-grid-narrow-wide{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:520px){.form-grid-narrow-wide{grid-template-columns:minmax(8rem,12rem) 1fr;gap:1rem}.form-grid-narrow-wide .form-row{max-width:none}}

/* Comments */
.comments h2{margin-top:0}
.comment-list,.comment-replies{list-style:none;margin:0;padding:0}
.comment-list{margin-top:.5rem}
.comment{padding:.75rem 0;border-top:1px solid var(--border,#E6E9EC)}
.comment-replies{margin-top:.5rem;padding-left:1.1rem;border-left:2px solid var(--surface-subtle,#F5F8F9)}
.comment-head{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.comment-author{font-weight:600}
.comment-date{font-size:.82rem}
.comment-body{margin:.35rem 0;white-space:pre-wrap;overflow-wrap:anywhere}
.comment-reply{padding:.15rem 0;font-size:.85rem;color:var(--brand-teal,#12A4B4)}
/* Comment actions: reply link on the left, complaint as a tiny badge floating right (UAT 7174). */
.comment-actions{display:flex;align-items:center;gap:.5rem}
.comment-report,.reply-cancel{margin-left:auto;font:inherit;font-size:.68rem;font-weight:700;line-height:1.5;padding:0 .45rem;border:1px solid var(--danger,#B3261E);background:none;color:var(--danger,#B3261E);border-radius:999px;cursor:pointer}
/* The own-comment delete is a form; display:contents lets its button be the flex item so the pill's
   margin-left:auto still pushes it to the right edge like the complaint badge. */
.comment-action-form{display:contents}
.comment-report:hover,.reply-cancel:hover{background:var(--danger,#B3261E);color:#fff;text-decoration:none}
.comment-form{margin-top:1.5rem;border-top:2px solid var(--border,#E6E9EC);padding-top:1rem;max-width:none}
/* While replying, the form sits under the target comment, indented like a reply (UAT 7174). */
.comment-form.comment-form--reply{margin-top:.5rem;padding-top:0;border-top:0;padding-left:1.1rem;border-left:2px solid var(--surface-subtle,#F5F8F9)}
.comment-form-title{margin:0 0 .75rem}
.comment-form textarea{max-width:none}
.reply-banner{display:flex;align-items:center;gap:.6rem;background:var(--surface-subtle,#F5F8F9);border-radius:8px;padding:.4rem .7rem;font-size:.9rem}
/* The hidden attribute must win over the flex display so the banner only shows while replying. */
.reply-banner[hidden]{display:none}

/* Owner/staff pending-comment review section (UAT 7174). */
.pending-comments{border:1px solid var(--warning,#B8860B)}
.pending-comment{padding:.75rem 0;border-top:1px solid var(--border,#E6E9EC)}
.pending-comment:first-child{border-top:0}
.pending-comment-body{margin:.35rem 0 .6rem;white-space:pre-wrap}
.pending-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.pending-actions form{margin:0}

.post-card-list{list-style:none;margin:0;padding:0}

/* --- F05 Discovery & Public Experience --- */
/* .section-title / .section-subtitle carry no font-size: they inherit the element scale above, so a
   .section-title on an h1 is a page title and on an h2 is a section heading (no more identical sizes). */
.section-title{margin:0 0 1rem}
.home-intro .section-title{margin-bottom:.5rem}
.home-intro-lead{margin:0;font-size:1.05rem;line-height:1.6;color:var(--ink,#23272B)}
.list-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.rss-link{display:inline-block;font-size:.75rem;font-weight:700;color:var(--accent-orange,#F39A1F);border:1px solid currentColor;border-radius:5px;padding:.05rem .4rem}
.rss-link:hover{text-decoration:none;color:#fff;background:var(--accent-orange,#F39A1F)}

/* Post cards (homepage/category/author/search listings) */
.post-card{display:flex;gap:14px;padding:1rem 0;border-top:1px solid var(--border,#E6E9EC)}
.post-card:first-child{border-top:0}
/* Featured posts (e.g. sorted to the top of category lists) get a warm highlight so they stand out;
   the bottom margin separates adjacent featured cards with a gap instead of a divider line. */
.post-card--featured{background:var(--surface-featured,#FFF7E6);border-top:0;border-radius:8px;padding:1rem 12px;margin-bottom:12px}
.post-card--featured:last-child{margin-bottom:0}
/* .post-card-thumb + its <img> sizing (and the mobile aspect) live in critical.css (UAT 7174) so
   thumbnails never flash at full size before this deferred sheet loads. Play badge stays here. */
/* Play badge on video (YouTube) thumbnails so they're distinguishable from photo posts (UAT 7174). */
.post-card-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;pointer-events:none}
.post-card-play::before{content:"";width:0;height:0;margin-left:3px;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #fff}
.post-card-main{min-width:0}
.post-card-title{margin:0 0 .25rem;font-size:1.2rem;line-height:1.3}
/* Status-tinted titles so non-published posts stand out in the owner/staff profile list (UAT 7174). */
.post-card-title--restricted a{color:var(--danger,#B3261E)}
.post-card-title--pending a{color:var(--warning,#B26A00)}
.post-card-meta{margin:0 0 .35rem;font-size:.85rem}
.post-card-excerpt{margin:0;color:var(--ink,#23272B);white-space:pre-line}
/* Phones (smaller than tablet): stack the image above the title, full-width, instead of a narrow
   left column that squeezes the text into a long thin block (UAT 7174). The thumb full-width/aspect
   overrides are in critical.css alongside the base thumb rules. */
@media(max-width:767px){
  .post-card{flex-direction:column;gap:8px}
}

/* Sidebar category nav (UAT 7174) — lives in the aside, below the search box */
.category-nav{background:var(--surface,#fff);border:1px solid var(--border,#E6E9EC);border-radius:var(--radius-lg,12px);padding:16px}
.aside-title{margin:0 0 .5rem;font-size:1rem;font-weight:700;color:var(--ink,#23272B)}
/* Generic side-panel info box (e.g. register benefits) rendered below the search box (UAT 7174). */
.info-panel{background:var(--surface,#fff);border:1px solid var(--border,#E6E9EC);border-radius:var(--radius-lg,12px);padding:12px 14px;margin-top:16px}
.info-panel-list{margin:0;padding-left:1.15rem;display:flex;flex-direction:column;gap:.45rem;font-size:.9rem;line-height:1.45;color:var(--ink,#23272B)}
.aside-user-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem;font-size:.9rem;line-height:1.4}
.category-list{list-style:none;margin:0;padding:0}
.category-list li + li{margin-top:2px}
.category-link{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.4rem .5rem;border-radius:var(--radius,8px);color:var(--ink,#23272B)}
.category-link:hover{text-decoration:none;background:var(--surface-subtle,#F5F8F9);color:var(--brand-teal,#12A4B4)}
.category-link-name{min-width:0;overflow-wrap:anywhere}
.category-count{flex:none;font-size:.78rem;font-weight:700;color:#fff;background:var(--brand-teal,#12A4B4);border-radius:999px;padding:0 .45rem}

/* Pager */
.pager{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.25rem}
.pager-link{font-weight:600}
.pager-status{color:var(--muted,#5B6470);font-size:.9rem}

/* Author profile header */
.author-header .author-id{display:flex;align-items:center;gap:14px}
/* Square avatar with the same rounded corners as the post-list thumbnails (8px), not a circle. */
.author-avatar{width:72px;height:72px;border-radius:8px;object-fit:cover}
.author-name{margin:0}
.author-meta{margin:.25rem 0 0;font-size:.85rem}
.author-bio{margin:1rem 0 .25rem}
.author-extra{margin:0;font-size:.9rem;display:flex;gap:.4rem;flex-wrap:wrap}
.btn-sm{padding:.35rem .8rem;font-size:.9rem;margin-top:.75rem}

/* Search — federated People + Posts sections (UAT 7174) */
.section-subtitle{margin:1.5rem 0 .5rem}
.section-subtitle:first-of-type{margin-top:.5rem}
.person-card-list{list-style:none;margin:0;padding:0}
.person-card{border-top:1px solid var(--border,#E6E9EC)}
.person-card:first-child{border-top:0}
.person-card-link{display:flex;align-items:center;gap:12px;padding:.75rem 0;color:var(--ink,#23272B)}
.person-card-link:hover{text-decoration:none}
.person-card-link:hover .person-card-name{color:var(--brand-teal,#12A4B4)}
.person-card-avatar{flex:0 0 auto;width:48px;height:48px;border-radius:8px;object-fit:cover}
/* No profile image: a grayed user silhouette on the subtle surface, so it reads as an avatar placeholder. */
.person-card-avatar-empty{background:var(--surface-subtle,#F5F8F9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239AA3AD'%3E%3Ccircle cx='12' cy='9' r='4'/%3E%3Cpath d='M4 20c0-3.6 3.6-6.4 8-6.4s8 2.8 8 6.4z'/%3E%3C/svg%3E") center/62% no-repeat;border:1px solid var(--border,#E6E9EC)}
.person-card-main{display:flex;flex-direction:column;min-width:0}
.person-card-name{font-weight:600}
.person-card-meta{font-size:.85rem}
.person-card-bio{font-size:.9rem;margin-top:.15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* Dashboard */
.stat-tiles{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.25rem}
.stat-tile{flex:1 1 120px;background:var(--surface-subtle,#F5F8F9);border:1px solid var(--border,#E6E9EC);border-radius:10px;padding:1rem;text-align:center}
.stat-value{display:block;font-size:1.8rem;font-weight:700;color:var(--brand-teal,#12A4B4)}
.stat-label{display:block;font-size:.85rem;color:var(--muted,#5B6470)}
.quick-links{display:flex;flex-wrap:wrap;gap:.6rem}

/* Share bar */
.share-bar{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border,#E6E9EC)}
.share-label{font-weight:600;font-size:.9rem}
.share-btn{font:inherit;font-size:.85rem;padding:.3rem .7rem;border:1px solid var(--border,#E6E9EC);border-radius:6px;background:var(--surface,#fff);color:var(--ink,#23272B);cursor:pointer}
.share-btn:hover{text-decoration:none;border-color:var(--brand-teal,#12A4B4)}

/* Inline search form */
.search-inline{display:flex;gap:.5rem;margin-bottom:1rem;max-width:32rem}
.search-inline input{flex:1;min-width:0;padding:.55rem .7rem;border:1px solid var(--border,#E6E9EC);border-radius:8px;font-size:1rem}

/* --- F06 Moderation, Trust & Safety --- */
.badge{display:inline-block;font-size:.75rem;font-weight:700;padding:.1rem .5rem;border-radius:999px;background:var(--surface-subtle,#F5F8F9);border:1px solid var(--border,#E6E9EC);color:var(--muted,#5B6470);margin-left:.3rem}
/* Alert variant — orange accent (matches the .notif-badge nav badge) for non-zero counts (UAT 7174). */
.badge--alert{background:var(--accent-orange,#F39A1F);border-color:var(--accent-orange,#F39A1F);color:#fff}
/* Admin user list — a plain data table that scrolls horizontally on narrow screens (UAT 7174). */
.admin-table-wrap{overflow-x:auto;margin-top:.5rem}
.admin-table{width:100%;border-collapse:collapse;font-size:.9rem}
.admin-table th,.admin-table td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--border,#E6E9EC);white-space:nowrap}
.admin-table th{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--muted,#5B6470)}
.admin-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin:.25rem 0 1rem}
.mod-queue-links{display:flex;flex-wrap:wrap;gap:.75rem}
.mod-queue{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border:1px solid var(--border,#E6E9EC);border-radius:10px;background:var(--surface,#fff);color:var(--ink,#23272B);font-weight:600}
.mod-queue:hover{text-decoration:none;border-color:var(--brand-teal,#12A4B4)}
.mod-list{list-style:none;margin:0;padding:0}
.mod-item{padding:1rem 0;border-top:1px solid var(--border,#E6E9EC)}
.mod-item:first-child{border-top:0}
.mod-item-title{margin:0 0 .25rem;font-size:1.2rem}
.mod-item-excerpt{margin:.35rem 0;white-space:pre-wrap;overflow-wrap:anywhere}
.mod-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.5rem}
.mod-restrict-form{display:flex;gap:.4rem;flex-wrap:wrap;margin:0}
.mod-restrict-form input{padding:.35rem .6rem;border:1px solid var(--border,#E6E9EC);border-radius:6px;font-size:.9rem;min-width:12rem}
.report-link{color:var(--muted,#5B6470)}

/* Activity feed */
.activity-list{list-style:none;margin:0;padding:0}
.activity-item{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;padding:.5rem 0;border-top:1px solid var(--border,#E6E9EC);font-size:.9rem}
.activity-item:first-child{border-top:0}
.activity-type{font-weight:600;color:var(--brand-blue,#2F6FD8)}
.activity-time{margin-left:auto;font-size:.8rem;white-space:nowrap}
@media(max-width:600px){.activity-time{margin-left:0}}

/* --- F07 Notifications --- */
.notif-badge{display:inline-block;min-width:1.1rem;padding:0 .35rem;margin-left:.25rem;font-size:.7rem;font-weight:700;line-height:1.1rem;text-align:center;color:#fff;background:var(--accent-orange,#F39A1F);border-radius:999px}
.notif-list{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.notif-item{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;padding:.85rem 12px;border:1px solid var(--border,#E6E9EC);border-radius:8px}
.notif-unread{background:#F0FAFB;border-color:var(--brand-teal,#12A4B4)}
.notif-title{display:block}
.notif-message{margin:.2rem 0}
.notif-time{font-size:.8rem}
.notif-actions{display:flex;align-items:center;gap:.6rem;white-space:nowrap}
.notif-actions .btn-sm,.list-header .btn-sm{margin-top:0}

/* --- F11.4 Bangla typography ---
   Bangla renders with the reader's installed system fonts (Noto Sans Bengali / Bangla Sangam MN /
   Vrinda — see --font-bn in critical.css). No web font is downloaded, so there's no FOUT and no
   extra request. Long-form prose gets a touch more line height for readability. */
.post-content,.comment-body,.static-page .post-content{line-height:1.85}

/* --- F11.1 Rainbow brand accent (decorative, from the logo mark) --- */
.site-header{border-bottom:3px solid transparent;border-image:linear-gradient(90deg,var(--rb-red),var(--rb-orange),var(--rb-yellow),var(--rb-green),var(--rb-blue),var(--rb-violet)) 1}

/* --- F10.1 Language switch — styled as a badge (UAT 7174).
   Higher specificity than critical.css's `.site-nav a` so the pill wins on desktop and mobile. --- */
.site-nav a.lang-switch{display:inline-block;align-self:center;padding:.28rem .6rem;border:1px solid var(--brand-teal,#12A4B4);border-radius:999px;font-size:.8rem;font-weight:700;line-height:1.15;color:var(--brand-teal,#12A4B4);background:transparent}
.site-nav a.lang-switch:hover{text-decoration:none;background:var(--brand-teal,#12A4B4);color:#fff}
@media(max-width:719px){.site-nav a.lang-switch{align-self:flex-start;margin:.5rem 0 .25rem}}

/* --- F10.3 Bangla typing control (English / অভ্র / ইউনিজয় segmented option buttons) --- */
.bk-bar{display:inline-flex;margin-bottom:.4rem;border:1px solid var(--border,#E6E9EC);border-radius:6px;overflow:hidden;background:var(--surface,#fff)}
.bk-opt{font:inherit;font-size:.8rem;font-weight:600;line-height:1;padding:.3rem .7rem;border:0;border-right:1px solid var(--border,#E6E9EC);background:var(--surface,#fff);color:var(--ink,#23272B);cursor:pointer}
.bk-opt:last-child{border-right:0}
.bk-opt:hover{background:var(--surface-subtle,#F5F8F9)}
.bk-opt.is-active{background:var(--brand-teal,#0E8A98);color:#fff}
/* The side search panel has a teal background; keep the picker readable as a white chip on it. */
.search-panel .bk-bar{border-color:rgba(255,255,255,.55)}
/* In a form-row the picker floats to the top-right, on the label's line, directly above the input
   (UAT 7174) — instead of being a block that could get squished inside a .form-grid-2 cell. */
.bk-anchored{position:relative}
.bk-anchored>.bk-bar{position:absolute;top:0;right:0;margin-bottom:0;z-index:1}

/* --- F12.1 AdSense ad containers (rendered only when AdSense is configured + page is indexable) --- */
/* Prefix-matched (div[class^="ad-"]) so Google Auto-Ads side rails — injected as direct <body>
   children with no ad- class — never match the width rule below, which would otherwise stretch an
   invisible <ins> across the viewport and swallow page clicks. contain:layout paint isolates the ad
   for INP; overflow:hidden + line-height:0 avoid stray gaps around the iframe. */
div[class^="ad-"]{margin:20px auto;max-width:100%;text-align:center;contain:layout paint;overflow:hidden;line-height:0}
div[class^="ad-"] .adsbygoogle{display:block;width:100%;margin:0}
div[class^="ad-"] iframe{display:block;max-width:100%;margin:0 auto}
/* ATF content unit: reserve height on every viewport (horizontal/rectangle creatives run up to 280px) to avoid CLS. */
.ad-wide-atf{height:280px}
/* ATF panel unit: reserve height only where the aside is a desktop sidebar (>=1024px, matching .layout);
   below that the aside stacks under the content (below the fold) so no reservation is needed. */
@media(min-width:1024px){.ad-box-atf{height:250px}}
@media(min-width:1200px){.ad-box-atf{height:280px}}
/* The panel scrolls normally with the page; only the bottom tower sticks on desktop (the aside is
   stretched to the content height in critical.css, giving the sticky tower room to travel). */
@media(min-width:1024px){.ad-tower{position:sticky;top:16px}}
/* An ad that is the first element in the content column or the side panel gets no top margin. */
.content > div[class^="ad-"]:first-child,
.site-aside > div[class^="ad-"]:first-child{margin-top:0}