/* Public-site layout + component styles.
 *
 * Must live in an external file: CSP `style-src-elem 'self'` rejects
 * inline <style> blocks (no 'unsafe-inline' / nonce), so anything placed
 * in a <style> element inside a template is silently dropped by the
 * browser. Inline `style=""` attributes still work (style-src-attr
 * 'unsafe-inline'), which is how page.html's per-page grid-template-*
 * is applied — but display:grid and child-combinator rules must be
 * reachable, so they live here. */

/* ── Base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, sans-serif;
  color: #18181b;
  background: #fafafa;
  line-height: 1.6;
}

/* ── Header / nav ──────────────────────────────────────────────── */
.pub-header {
  background: #fff; border-bottom: 1px solid #e4e4e7;
  padding: .75rem 1.5rem; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
}
.pub-brand { font-weight: 700; font-size: 1.1rem; color: #111; text-decoration: none; }

.pub-nav { display: flex; gap: 1rem; align-items: center; font-size: .875rem; }
.pub-nav a { color: #71717a; text-decoration: none; }
.pub-nav a:hover { color: #111; }
.pub-nav span { font-size: .875rem; color: #71717a; }
.pub-nav button { font-size: .875rem; }

.pub-menu-wrap { display: contents; }
.pub-menu-wrap > summary {
  display: none; list-style: none; background: none; border: none;
  font-size: 1.5rem; cursor: pointer; color: #71717a; padding: .25rem; line-height: 1;
}
.pub-menu-wrap > summary::-webkit-details-marker { display: none; }

.pub-notif-link { position: relative; color: #71717a; text-decoration: none; }
.pub-notif-link:hover { color: #111; }
.pub-notif-bell { font-size: 1rem; }
.pub-notif-badge { display: none; }
.pub-notif-badge.has-unread {
  display: inline-block; position: absolute; top: -.45rem; right: -.55rem;
  background: #ef4444; color: #fff; font-size: .65rem; font-weight: 700;
  min-width: 1rem; height: 1rem; line-height: 1rem; text-align: center;
  border-radius: 9999px; padding: 0 .25rem;
}

@media (max-width: 640px) {
  .pub-menu-wrap > summary { display: block; }
  .pub-menu-wrap .pub-nav {
    display: none; flex-direction: column; align-items: flex-start;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid #e4e4e7;
    padding: .75rem 1.5rem; gap: .5rem; z-index: 50;
  }
  .pub-menu-wrap[open] .pub-nav { display: flex; }
  .pub-header { position: relative; flex-wrap: nowrap; }
}

.pub-main { max-width: 960px; margin: 1.5rem auto; padding: 0 1rem; }

.pub-footer {
  margin-top: 3rem; padding: 1.5rem; text-align: center;
  color: #a1a1aa; font-size: .75rem; border-top: 1px solid #e4e4e7;
}

/* ── Notifications page ───────────────────────────────────────── */
.pub-notif-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.pub-notif-header h1 { font-size: 1.25rem; }
.pub-notif-mark-all { background: none; border: 1px solid #d4d4d8; border-radius: .375rem; padding: .25rem .75rem; font-size: .8rem; color: #52525b; cursor: pointer; }
.pub-notif-mark-all:hover { background: #f4f4f5; }
.pub-notif-list { display: flex; flex-direction: column; gap: .5rem; }
.pub-notif-item { background: #fff; border: 1px solid #e4e4e7; border-radius: .5rem; padding: .75rem 1rem; }
.pub-notif-item.pub-notif-unread { border-left: 3px solid #3b82f6; }
.pub-notif-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .25rem; font-size: .75rem; color: #a1a1aa; }
.pub-notif-type { background: #f4f4f5; border-radius: .25rem; padding: .1rem .4rem; font-size: .7rem; }
.pub-notif-title { font-weight: 600; font-size: .9rem; }
.pub-notif-body { font-size: .85rem; color: #52525b; margin-top: .15rem; }
.pub-notif-actor { font-size: .8rem; color: #71717a; margin-top: .15rem; }
.pub-notif-read-btn { background: none; border: 1px solid #d4d4d8; border-radius: .25rem; padding: .15rem .5rem; font-size: .75rem; color: #52525b; cursor: pointer; margin-top: .35rem; }
.pub-notif-read-btn:hover { background: #f4f4f5; }
.pub-notif-empty { color: #a1a1aa; text-align: center; padding: 2rem 0; }

/* ── Page layout (design zones) ──────────────────────────────── */
.pub-page-title { font-size: 1.6rem; font-weight: 700; color: #111; margin-bottom: 1.5rem; }

.pub-design-layout { display: grid; gap: 1.25rem; }
.pub-design-layout > .pub-zone-top    { grid-area: top;    min-width: 0; }
.pub-design-layout > .pub-zone-bottom { grid-area: bottom; min-width: 0; }
.pub-design-layout > .pub-zone-left   { grid-area: left;   min-width: 0; }
.pub-design-layout > .pub-zone-center { grid-area: center; min-width: 0; }
.pub-design-layout > .pub-zone-right  { grid-area: right;  min-width: 0; }

/* ── Board post list ─────────────────────────────────────────── */
.pub-board {
  background: #fff; border: 1px solid #e4e4e7; border-radius: 8px;
  padding: 1rem 1.25rem; margin-bottom: 1rem;
}
.pub-board-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .75rem; }
.pub-board-title { font-size: 1rem; font-weight: 700; color: #111; }
.pub-board-new {
  padding: .4rem .9rem; background: #111; color: #fff; border-radius: 6px;
  text-decoration: none; font-size: .8rem; font-weight: 600;
}
.pub-board-new:hover { background: #333; }

.pub-post-item { padding: .6rem 0; border-bottom: 1px solid #f4f4f5; }
.pub-post-item:last-child { border-bottom: none; }
.pub-post-row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.pub-post-link { color: #111; text-decoration: none; font-size: .9rem; font-weight: 600; }
.pub-post-link:hover { color: #2563eb; }
.pub-post-meta { color: #a1a1aa; font-size: .72rem; white-space: nowrap; }
.pub-post-snippet { color: #71717a; font-size: .8rem; margin-top: .15rem; }
.pub-pin-badge {
  display: inline-block; padding: .1rem .4rem; border-radius: 4px;
  font-size: .55rem; font-weight: 700; text-transform: uppercase;
  background: #fef3c7; color: #92400e; border: 1px solid #fde68a;
  margin-right: .25rem; vertical-align: middle;
}
.pub-empty { color: #a1a1aa; font-style: italic; padding: 1rem 0; }
.pub-author-link { color: inherit; text-decoration: none; font-weight: 600; }
.pub-author-link:hover { color: #2563eb; }

/* ── Post view (post.html) ───────────────────────────────────── */
.pub-post-back { display: inline-block; color: #71717a; font-size: .8rem; text-decoration: none; margin-bottom: .75rem; }
.pub-post-back:hover { color: #111; }

.pub-post-head h1 { font-size: 1.4rem; font-weight: 700; color: #111; margin-bottom: .25rem; }
.pub-post-head .meta { color: #a1a1aa; font-size: .8rem; margin-bottom: 1rem; }
.pub-post-body { color: #3f3f46; font-size: .95rem; white-space: pre-wrap; word-break: break-word; line-height: 1.7; margin-bottom: 1.5rem; }

.pub-post-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .75rem; margin-bottom: 2rem;
}
.pub-post-gallery a { display: block; border-radius: 8px; overflow: hidden; border: 1px solid #e4e4e7; }
.pub-post-gallery img { width: 100%; height: auto; display: block; }

.pub-post-actions { display: flex; gap: .5rem; margin-bottom: 2rem; }
.pub-post-actions a {
  padding: .35rem .8rem; border: 1px solid #e4e4e7; border-radius: 6px;
  font-size: .8rem; color: #111; text-decoration: none;
}
.pub-post-actions a:hover { background: #f4f4f5; }

.pub-comments-title { font-size: 1rem; font-weight: 700; color: #111; margin-bottom: .75rem; }
.pub-cmt {
  background: #fff; border: 1px solid #e4e4e7; border-radius: 8px;
  padding: .65rem .9rem; margin-bottom: .4rem;
  margin-left: calc(var(--d, 0) * 20px);
}
.pub-cmt.depth-gt-0 { border-left: 3px solid #e4e4e7; }
.pub-cmt-meta { color: #a1a1aa; font-size: .7rem; margin-bottom: .25rem; }
.pub-cmt-body { color: #3f3f46; font-size: .85rem; white-space: pre-wrap; word-break: break-word; }
.pub-cmt-actions { display: flex; gap: .35rem; margin-top: .35rem; align-items: center; }
.pub-cmt-actions form { display: inline; }
.pub-cmt-actions button, .pub-cmt-actions a {
  padding: .2rem .5rem; border-radius: 4px; font-size: .7rem;
  border: 1px solid #e4e4e7; background: #f4f4f5; color: #71717a;
  cursor: pointer; text-decoration: none;
}
.pub-cmt-actions button:hover, .pub-cmt-actions a:hover { background: #e4e4e7; color: #111; }
.pub-cmt-actions .voted { color: #2563eb; border-color: #93c5fd; background: #eff6ff; }

.pub-badge {
  display: inline-block; padding: .1rem .4rem; border-radius: 4px;
  font-size: .55rem; font-weight: 700; text-transform: uppercase;
  margin-right: .2rem;
}
.pub-badge-pinned { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.pub-badge-auto   { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }

.pub-cmt-form { margin-top: 1rem; }
.pub-cmt-form textarea {
  width: 100%; min-height: 80px; padding: .5rem .65rem;
  border: 1px solid #d4d4d8; border-radius: 6px; font-size: .85rem;
  font-family: inherit; resize: vertical;
}
.pub-cmt-form textarea:focus { outline: none; border-color: #111; }
.pub-cmt-form button {
  margin-top: .4rem; padding: .45rem 1rem; background: #111; color: #fff;
  border: none; border-radius: 6px; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.pub-cmt-form button:hover { background: #333; }

.pub-no-comments { color: #a1a1aa; font-style: italic; padding: .5rem 0; }

.pub-report-wrap { display: inline; }
.pub-report-wrap > summary { list-style: none; cursor: pointer; }
.pub-report-wrap > summary::-webkit-details-marker { display: none; }
.pub-report-wrap[open] > summary { display: none; }
.pub-report-wrap form { display: inline-flex; gap: .25rem; align-items: center; }

/* ── Post form (post_form.html) ─────────────────────────────── */
.pub-form-back { display: inline-block; color: #71717a; font-size: .8rem; text-decoration: none; margin-bottom: .75rem; }
.pub-form-back:hover { color: #111; }
.pub-form-title { font-size: 1.2rem; font-weight: 700; color: #111; margin-bottom: 1rem; }
.pub-form-error {
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
  border-radius: 6px; padding: .75rem 1rem; font-size: .875rem; margin-bottom: 1rem;
}
.pub-form { display: flex; flex-direction: column; gap: .75rem; max-width: 640px; }
.pub-form label {
  display: block; font-size: .75rem; font-weight: 600; color: #71717a;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: .25rem;
}
.pub-form input[type="text"] {
  width: 100%; padding: .5rem .65rem; border: 1px solid #d4d4d8;
  border-radius: 6px; font-size: .9rem;
}
.pub-form textarea {
  width: 100%; min-height: 200px; padding: .5rem .65rem;
  border: 1px solid #d4d4d8; border-radius: 6px; font-size: .9rem;
  font-family: inherit; resize: vertical;
}
.pub-form input:focus, .pub-form textarea:focus { outline: none; border-color: #111; }
.pub-form button[type="submit"] {
  align-self: flex-start; padding: .55rem 1.25rem; background: #111; color: #fff;
  border: none; border-radius: 6px; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.pub-form button[type="submit"]:hover { background: #333; }

.pub-media-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.post-media-item {
  position: relative; width: 80px; height: 80px; border-radius: 6px; overflow: hidden;
  border: 1px solid #e4e4e7;
}
.post-media-item img { width: 100%; height: 100%; object-fit: cover; }
.post-media-item .media-remove {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px;
  border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff;
  font-size: .75rem; line-height: 1; cursor: pointer; display: flex;
  align-items: center; justify-content: center; padding: 0;
}
.pub-media-browse-btn {
  padding: .35rem .8rem; border: 1px solid #d4d4d8; border-radius: 6px;
  background: #fff; font-size: .8rem; cursor: pointer; color: #111;
}
.pub-media-browse-btn:hover { background: #f4f4f5; }
.pub-media-upload { margin-top: .35rem; }
.pub-media-upload input[type="file"] { font-size: .8rem; }
.pub-media-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: .35rem; margin-top: .5rem;
}
.pub-media-grid .media-thumb {
  border: none; background: none; padding: 0; cursor: pointer;
  border-radius: 4px; overflow: hidden; aspect-ratio: 1;
}
.pub-media-grid .media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pub-media-grid .media-thumb:hover { outline: 2px solid #111; }
.pub-media-empty { color: #a1a1aa; font-size: .8rem; font-style: italic; }
.pub-media-more {
  margin-top: .35rem; padding: .3rem .7rem; border: 1px solid #d4d4d8;
  border-radius: 6px; background: #fff; font-size: .75rem; cursor: pointer;
}

/* ── Profile page (profile.html) ────────────────────────────── */
.pub-profile { max-width: 680px; margin: 0 auto; }
.pub-profile-card {
  background: #fff; border: 1px solid #e4e4e7; border-radius: 8px;
  padding: 1.5rem; margin-bottom: 1.5rem;
}
.pub-profile-name { font-size: 1.3rem; font-weight: 700; color: #111; margin-bottom: .15rem; }
.pub-profile-username { font-size: .85rem; color: #71717a; margin-bottom: .5rem; }
.pub-profile-bio { font-size: .875rem; color: #3f3f46; line-height: 1.5; margin-bottom: .75rem; white-space: pre-line; }
.pub-profile-meta { font-size: .75rem; color: #a1a1aa; }
.pub-profile-role {
  display: inline-block; background: #f4f4f5; border: 1px solid #e4e4e7;
  border-radius: .25rem; padding: .1rem .45rem; font-size: .7rem; font-weight: 500;
  margin-left: .35rem; vertical-align: middle;
}
.pub-profile-section-title { font-size: 1rem; font-weight: 700; color: #111; margin-bottom: 1rem; }
.pub-profile-posts {
  background: #fff; border: 1px solid #e4e4e7; border-radius: 8px;
  padding: 1rem 1.25rem;
}
.pub-profile-post { padding: .65rem 0; border-bottom: 1px solid #f4f4f5; }
.pub-profile-post:last-child { border-bottom: none; }
.pub-profile-post-row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.pub-profile-post-link { color: #111; text-decoration: none; font-size: .9rem; font-weight: 600; }
.pub-profile-post-link:hover { color: #2563eb; }
.pub-profile-post-meta { color: #a1a1aa; font-size: .72rem; white-space: nowrap; }
.pub-profile-post-board { color: #71717a; font-size: .75rem; margin-top: .1rem; }
.pub-profile-post-snippet { color: #71717a; font-size: .8rem; margin-top: .15rem; }
.pub-profile-empty { color: #a1a1aa; font-style: italic; padding: 1rem 0; }
.pub-profile-pager { display: flex; justify-content: center; gap: .75rem; margin-top: 1.25rem; }
.pub-profile-pager a {
  display: inline-block; padding: .35rem .85rem; background: #f4f4f5;
  border: 1px solid #e4e4e7; border-radius: 6px;
  font-size: .8rem; color: #111; text-decoration: none;
}
.pub-profile-pager a:hover { background: #e4e4e7; }

/* ── Search (search.html) ───────────────────────────────────── */
.search-wrap { max-width: 720px; }
.search-title { font-size: 1.4rem; font-weight: 700; color: #111; margin-bottom: 1rem; }
.search-form { display: flex; gap: .5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.search-input {
  flex: 1; min-width: 200px; padding: .5rem .75rem; border: 1px solid #d4d4d8;
  border-radius: 6px; font-size: .875rem;
}
.search-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
.search-select {
  padding: .5rem .75rem; border: 1px solid #d4d4d8; border-radius: 6px;
  font-size: .8rem; background: #fff; color: #52525b;
}
.search-btn {
  padding: .5rem 1rem; background: #111; color: #fff; border: none;
  border-radius: 6px; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.search-btn:hover { background: #333; }
.search-meta { color: #71717a; font-size: .8rem; margin-bottom: 1rem; }
.search-error { color: #dc2626; font-size: .8rem; margin-bottom: 1rem; }
.search-results { display: flex; flex-direction: column; gap: .75rem; }
.search-item {
  padding: .85rem 1rem; background: #fff; border: 1px solid #e4e4e7;
  border-radius: 8px;
}
.search-item-title { font-size: .9rem; font-weight: 600; }
.search-item-title a { color: #111; text-decoration: none; }
.search-item-title a:hover { color: #2563eb; }
.search-item-info { font-size: .72rem; color: #a1a1aa; margin-top: .2rem; }
.search-item-snippet { font-size: .8rem; color: #52525b; margin-top: .3rem; line-height: 1.5; }
.search-item-snippet b { background: #fef08a; color: #111; font-weight: 600; padding: 0 2px; border-radius: 2px; }
.search-filters { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.search-date, .search-author {
  padding: .5rem .75rem; border: 1px solid #d4d4d8; border-radius: 6px;
  font-size: .8rem; background: #fff; color: #52525b;
}
.search-empty { color: #a1a1aa; font-style: italic; padding: 1.5rem 0; }
.search-pager { display: flex; gap: .5rem; margin-top: 1.25rem; }
.search-pager a, .search-pager span {
  padding: .35rem .75rem; border: 1px solid #d4d4d8; border-radius: 4px;
  font-size: .8rem; text-decoration: none; color: #52525b;
}
.search-pager a:hover { background: #f4f4f5; }
.search-pager .current { background: #111; color: #fff; border-color: #111; }

/* ── Account settings (account_settings.html) ──────────────── */
.acct-container { max-width: 520px; margin: 2rem auto; }
.acct-heading { font-size: 1.25rem; font-weight: 700; margin-bottom: .25rem; }
.acct-sub { font-size: .85rem; color: #71717a; margin-bottom: 1.5rem; }
.acct-section { background: #fff; border: 1px solid #e4e4e7; border-radius: .5rem; padding: 1.25rem; margin-bottom: 1.25rem; }
.acct-section-title { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }
.acct-field { margin-bottom: .75rem; }
.acct-label { display: block; font-weight: 600; font-size: .8rem; margin-bottom: .2rem; }
.acct-hint { font-size: .75rem; color: #a1a1aa; margin-bottom: .2rem; }
.acct-input { width: 100%; padding: .45rem .65rem; border: 1px solid #d4d4d8; border-radius: .375rem; font-size: .875rem; font-family: inherit; }
.acct-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.15); }
.acct-textarea { width: 100%; padding: .45rem .65rem; border: 1px solid #d4d4d8; border-radius: .375rem; font-size: .875rem; font-family: inherit; resize: vertical; min-height: 4rem; }
.acct-textarea:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.15); }
.acct-error { background: #fef2f2; color: #dc2626; padding: .45rem .65rem; border-radius: .375rem; font-size: .85rem; margin-bottom: .75rem; }
.acct-ok { background: #f0fdf4; color: #166534; padding: .45rem .65rem; border-radius: .375rem; font-size: .85rem; margin-bottom: .75rem; }
.acct-btn { background: #18181b; color: #fff; border: none; padding: .45rem 1rem; border-radius: .375rem; font-size: .85rem; font-weight: 600; cursor: pointer; }
.acct-btn:hover { background: #3f3f46; }
.acct-link-danger { display: inline-block; margin-top: .5rem; font-size: .85rem; color: #dc2626; text-decoration: none; }
.acct-link-danger:hover { text-decoration: underline; }
.acct-readonly { font-size: .875rem; color: #3f3f46; padding: .3rem 0; }
.acct-role-pill { display: inline-block; background: #f4f4f5; border: 1px solid #e4e4e7; border-radius: .25rem; padding: .1rem .45rem; font-size: .75rem; font-weight: 500; }

/* ── Delete account (delete_account.html) ─────────────────── */
.da-container { max-width: 480px; margin: 2rem auto; }
.da-heading { font-size: 1.25rem; font-weight: 700; color: #dc2626; margin-bottom: .5rem; }
.da-warning { background: #fef2f2; border: 1px solid #fecaca; border-radius: .5rem; padding: 1rem; margin-bottom: 1.5rem; font-size: .875rem; color: #991b1b; line-height: 1.5; }
.da-warning ul { margin: .5rem 0 0 1.25rem; }
.da-label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: .25rem; }
.da-input { width: 100%; padding: .5rem .75rem; border: 1px solid #d4d4d8; border-radius: .375rem; font-size: .875rem; }
.da-input:focus { outline: none; border-color: #dc2626; box-shadow: 0 0 0 2px rgba(220,38,38,.15); }
.da-error { background: #fef2f2; color: #dc2626; padding: .5rem .75rem; border-radius: .375rem; font-size: .875rem; margin-bottom: 1rem; }
.da-actions { display: flex; gap: .75rem; margin-top: 1.25rem; }
.da-btn-delete { background: #dc2626; color: #fff; border: none; padding: .5rem 1.25rem; border-radius: .375rem; font-size: .875rem; font-weight: 600; cursor: pointer; }
.da-btn-delete:hover { background: #b91c1c; }
.da-btn-cancel { background: #f4f4f5; color: #3f3f46; border: 1px solid #d4d4d8; padding: .5rem 1.25rem; border-radius: .375rem; font-size: .875rem; font-weight: 500; text-decoration: none; cursor: pointer; }
.da-btn-cancel:hover { background: #e4e4e7; }