/* static/css/site.css */

/* === Design tokens === */
:root{
  --bg:#fff; --ink:#111; --muted:#666; --line:#e7e7eb; --chip:#f3f4f6;
  --wrap:980px; --section-max:560px; --verified:#3b82f6; --danger:#b91c1c;
  --bottom-bar-space:0px; --topbar-offset:0px;
}

/* === Base === */
*{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.55;
  padding-bottom:var(--bottom-bar-space);
}
a{ color:#0b57d0; text-decoration:none }
a:hover{ text-decoration:underline }
.muted{ color:var(--muted) }
.small{ font-size:12px }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0) }

/* === Layout === */
.wrap{ max-width:var(--wrap); margin:0 auto; padding:16px }

/* === Headings === */
h1{ font-size:22px; margin:6px 0 12px }
h2,.section-title{ font-size:18px; margin:18px 0 8px }

/* === Generic card/list === */
.list{ list-style:none; padding:0; margin:0 }
.item{
  padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.03); margin:8px 0;
  transition:transform .06s, box-shadow .12s, border-color .12s;
}
.item:hover{ transform:translateY(-1px); box-shadow:0 2px 10px rgba(0,0,0,.06); border-color:#cbd5e1; }

/* === Person cards (year/search pages) === */
.person-grid{
  display:grid; gap:12px; margin:8px 0 6px; width:100%;
  max-width:var(--section-max); margin-inline:auto;
}
.pcard{
  display:flex; align-items:center; gap:10px;
  padding:10px; border:1px solid var(--line); border-radius:12px;
  background:#fff; text-decoration:none; color:inherit;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  transition:transform .06s, box-shadow .12s, border-color .12s;
}
.pcard:hover{ transform:translateY(-1px); box-shadow:0 2px 10px rgba(0,0,0,.06); border-color:#cbd5e1; }

.avatar-wrap{
  flex:0 0 44px; width:44px; height:44px; border-radius:999px;
  overflow:hidden; border:1px solid var(--line); background:#f6f7f9;
  display:grid; place-items:center; font-weight:700; /* fallback initial */
}
.avatar{ display:block; width:100%; height:100%; object-fit:cover; }

.pmeta{ min-width:0 } /* person meta container */
.name-row{ display:flex; align-items:center; gap:8px }
.pname{
  font-size:14px; font-weight:700; line-height:1.25; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.psub{
  font-size:12px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Mobile wrapping for person cards */
@media (max-width:700px){
  .pcard{ align-items:flex-start }
  .pmeta{ flex:1 1 auto; min-width:0 }
  .pname,.psub{ white-space:normal; overflow:visible; overflow-wrap:anywhere; word-break:break-word; hyphens:auto }
  .psub{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; max-height:calc(1.4em * 3); overflow:hidden }
}

/* === Chips (buttons/links/counters) === */
.chip, button.chip, a.chip, span.chip, summary.chip{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--chip); border:1px solid var(--line);
  border-radius:999px; padding:4px 10px; font-size:12px;
  line-height:1.2; color:var(--ink); text-align:center; vertical-align:middle;
  cursor:pointer; text-decoration:none;
}
.chip-primary{ background:var(--ink); border-color:var(--ink); color:#fff }
.chip-secondary{ background:var(--chip); border-color:var(--line); color:var(--ink) }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff }
button.chip:disabled{ background:#f0f0f0; color:var(--muted); cursor:not-allowed; opacity:.7 }
[data-comment-count].chip{ background:var(--chip); border-color:var(--line); color:var(--ink) }

/* Active chip via aria-current (sort) */
.wall-sort .chip[aria-current="true"],
.wall-sort .chip[aria-current="page"]{ background:var(--ink); border-color:var(--ink); color:#fff }
.wall-sort a.chip[aria-current="true"]:link,
.wall-sort a.chip[aria-current="true"]:visited{ color:#fff }

/* === Guestbook / Wall === */
.guestbook{ max-width:var(--section-max); margin:24px auto; }
.section-sep{ border:0; border-top:1px solid var(--line); margin:24px 0 }

/* Inline auth (guestbook) */
.guestbook-login{ max-width:var(--section-max) }
.inline-login-panel{
  border:1px solid var(--line); border-radius:10px; background:#fff;
  padding:10px 12px; margin:8px 0; box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.inline-login-panel .tb-label{ font-size:12px; color:var(--muted); display:block; margin-bottom:4px }
.inline-login-panel input{
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font:inherit;
}

/* Compose + counters */
.guestbook textarea{ resize:none }
.char-counter{
  display:flex; justify-content:flex-start;
  font-size:12px; color:var(--muted); margin:0 0 4px; padding-left:8px;
}
.char-counter.is-max{ color:var(--danger) }
.wall-new textarea, .reply-form textarea{
  width:100%; border:1px solid var(--line); border-radius:8px;
  padding:8px; font-size:14px; font-family:inherit;
}

/* Post & comments */
.wall-list, .comment-list{ list-style:none; margin:0; padding:0 }
.post-card, .comment{
  border:1px solid var(--line); border-radius:10px; background:#fff;
  padding:10px 12px; margin:8px 0; box-shadow:0 1px 0 rgba(0,0,0,.03);
  transition:transform .06s, box-shadow .12s, border-color .12s;
}
.post-card:hover, .comment:hover{ transform:translateY(-1px); box-shadow:0 2px 10px rgba(0,0,0,.06); border-color:#d7dbe3 }
.post-head, .comment-head{ display:flex; gap:12px; align-items:center; margin-bottom:6px }
.post-body, .comment-body{ font-size:14px; line-height:1.45; margin:4px 0 6px }
.post-meta, .comment-meta{ font-size:12px; color:var(--muted) }

/* Text wrapping safety */
.post-body,
.comment-body,
.wall-new textarea,
.reply-form textarea{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}

/* Flex shrink safety inside action rows */
.post-head, .comment-head, .post-actions, .comment-actions{ min-width:0 }
.post-actions, .comment-actions{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px;
  min-height:30px;
}

/* Reply panel & threading */
.reply-panel{ margin-top:8px }
.reply-panel .reply-form{ margin-top:0 }
.comment.is-reply{ margin-left:24px; border-left:2px solid var(--line) }
/* Enforce one-level replies */
.comment.is-reply .js-reply-toggle{ display:none !important; pointer-events:none }

/* Summary chip normalize */
summary.chip{ list-style:none }
summary.chip::-webkit-details-marker{ display:none }

/* Comments container */
.comments-wrap{ margin-top:6px }
.comment-toggle-row{ display:flex }

/* === Anchor offset for fixed topbar (desktop) === */
@media (min-width:701px){
  section[id], .year-section[id], .office-section[id], [id^="office-"], [id^="mag-"]{
    scroll-margin-top:calc(var(--topbar-offset, 64px) + 12px);
  }
}

/* === Topbar & mobile layout === */
.topbar__row{ width:100% } /* chips row full width */

@media (max-width:700px){
  /* Bottom-docked bar padding so content is not obscured (incl. iOS safe area) */
  html, body{
    padding-bottom:calc(var(--bottom-bar-space, 0px) + env(safe-area-inset-bottom, 0px));
  }
  .wrap, main, .content{
    padding-bottom:calc(var(--bottom-bar-space, 0px) + 16px);
  }

  /* Ensure wall/login area clears the bar and scrolls above it */
  #wall, #wall-login, .inline-login-panel{
    margin-bottom:calc(var(--bottom-bar-space, 0px) + 24px);
    scroll-margin-bottom:calc(var(--bottom-bar-space, 0px) + 12px);
  }

  /* 3-zone bottom bar layout */
  .topbar__inner{
    display:grid; grid-template-columns:auto 1fr auto;
    align-items:center; column-gap:8px;
  }
  .topbar__slot--left{ grid-column:1 }
  .topbar__slot--center{ grid-column:2; justify-self:center; min-width:0 }
  .topbar__slot--right{
    grid-column:3; justify-self:end;
    display:flex; align-items:center; gap:1px !important; /* tighter avatar+search cluster */
  }

  /* Tighten internal paddings so cluster feels grouped */
  header.topbar .tb-auth .tb-chip{ padding-inline:6px; margin:0 !important }
  header.topbar .topbar__search-btn{ padding:4px; margin:0 !important }

  /* Slightly smaller avatar on mobile */
  header.topbar .tb-avatar{
    width:22px; height:22px; line-height:22px; font-size:12px;
  }

  /* Hide verbose year text next to arrows; keep arrows + title */
  .topbar__nav--inline .topbar__nav-text{ display:none }
  .topbar__centerline{ display:flex; align-items:center; gap:8px }
  .topbar__title{ white-space:nowrap }
  .topbar__home{ white-space:nowrap }

  /* Larger tap targets for year arrows */
  .topbar__nav--inline{ padding:6px 8px; border-radius:10px }
  .topbar__nav--inline span[aria-hidden="true"]{
    font-size:18px; line-height:1; display:inline-block; transform:translateY(1px);
  }
}

/* Year view: keep pcard width stable on mobile; wrap long names */
@media (max-width:700px){
  .year-view { overflow-x: hidden; }

  /* Let flex children actually shrink inside the card */
  .year-view .pcard { max-width: 100%; min-width: 0; }

  /* Text container + text can shrink and wrap */
  .year-view .pcard .pmeta { min-width: 0; }
  .year-view .pcard .pname,
  .year-view .pcard .psub,
  .year-view .pcard a {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}


/* Ensure the final block on the page clears the bottom bar on mobile */
@media (max-width:700px){
  .content > :last-child,
  main > :last-child {
    margin-bottom: calc(var(--bottom-bar-space) + 18px);
  }
}

@media (max-width:700px){
  /* Years index (30s BCE row was getting clipped) */
  .years-index .years-grid,
  .years-index .year-table,
  .years-index .person-grid {
    padding-bottom: calc(var(--bottom-bar-space) + 20px);
    margin-bottom: 12px;
  }

  /* Single year view (last magistrate card clipped) */
  .year-view .mag-list,
  .year-view .person-grid {
    padding-bottom: calc(var(--bottom-bar-space) + 20px);
    margin-bottom: 12px;
  }
}

@media (min-width:701px){
  section[id], .year-section[id], .office-section[id], [id^="office-"], [id^="mag-"]{
    scroll-margin-top: calc(var(--topbar-offset, 64px) + 16px);
  }
}

/* Desktop: reserve space for fixed topbar */
@media (min-width:701px){
  body{
    padding-top: var(--topbar-offset, 64px);
  }
}

/* Year view spacing tidy — shrink stacked margins between office sections */
.year-view .year-section,
.year-view .office-section{
  margin-top: 14px;     /* tighter top margin */
  margin-bottom: 10px;  /* tighter bottom margin */
}

/* Lists inside sections (cards of magistrates) */
.year-view .person-grid,
.year-view .mag-list{
  margin-top: 6px;
  margin-bottom: 8px;
}

/* Headings inside the year view a bit tighter */
.year-view h2,
.year-view .section-title{
  margin: 10px 0 6px;
}

/* Mobile: still ensure bottom content clears the bottom bar */
@media (max-width:700px){
  .year-view{
    padding-bottom: calc(var(--bottom-bar-space) + 20px);
  }
  /* safety net if a section is the last element */
  .year-view > :last-child{
    margin-bottom: calc(var(--bottom-bar-space) + 16px);
  }
}


/* Year view: collapse default section spacing */
.year-view section {
  margin-top: 8px;     /* much smaller than browser default */
  margin-bottom: 8px;
  padding: 0;          /* ensure no hidden padding */
}

.year-view h2,
.year-view .section-title {
  margin-top: 6px;
  margin-bottom: 4px;
  font-size: 16px;     /* a little more compact */
}

.year-view .person-grid,
.year-view ul,
.year-view ol {
  margin-top: 4px;
  margin-bottom: 6px;
  padding: 0; /* reset list padding */
}

.year-view section > *:first-child {
  margin-top: 0;
}
.year-view section > *:last-child {
  margin-bottom: 0;
}


.term-sources summary { cursor:pointer; font-weight:600; color:#444; font-size:12px; }

/* Sources list indentation (tighter layout) */
.sources-list {
  margin: .25rem 0 0 0;       /* remove left margin entirely */
  padding-left: 0;             /* flush to left edge */
  font-size: 12px;
  line-height: 1.4;
}

.sources-list > li {
  margin-left: 0;
  list-style-position: inside; /* keep bullet close to text */
}

.sources-list > li > strong {
  color: #222;
}

.subsources {
  margin: .2rem 0 .3rem .75rem; /* smaller indent for sub-bullets */
  list-style-type: circle;
  padding-left: 0;
}