/* Archive directory and reader only. The shared site navigation is unchanged. */
.archive-layout {
  display:grid;
  grid-template-columns:224px minmax(0,820px);
  align-items:start;
  gap:48px;
  max-width:1164px;
  margin:0 auto;
  padding:0 36px;
}
.archive-layout > .archive-sidebar-slot {
  position:sticky;
  top:var(--archive-nav-height,64px);
  align-self:start;
  height:calc(100dvh - var(--archive-nav-height,64px));
  min-height:0;
  min-width:0;
}
.archive-layout > .archive-reading {
  width:100%;
  min-width:0;
  max-width:820px;
  margin:0;
  padding:0 40px 100px;
  background:var(--paper);
  border-inline:1px solid #e0e5dd;
  box-shadow:none;
}
.archive-layout .arc-tools {
  top:var(--archive-nav-height,64px);
  min-height:66px;
  padding:12px 0;
  gap:10px;
  flex-wrap:nowrap;
  border-bottom:1px solid #e0e5dd;
  background:var(--paper);
  box-shadow:none;
}
.archive-layout .arc-tools .mode-bar {
  display:flex;
  gap:4px;
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.archive-layout .arc-tools .mode-bar button {
  min-height:36px;
  padding:5px 12px;
  font-size:13px;
  color:#69756b;
  border-radius:4px;
  background:transparent;
  box-shadow:none;
  text-shadow:none;
}
.archive-layout .arc-tools .mode-bar button.on {
  background:#eaf0e9;
  color:#344b42;
  font-weight:600;
}
.archive-layout .arc-tools .arc-progress {
  margin-left:auto;
  font-size:12px!important;
  color:var(--mute)!important;
}
.archive-layout .arc-tools #fToggle { display:none; }
.archive-layout .archive-back-top {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:36px;
  height:36px;
  padding:0;
  border:1px solid #dde2de;
  border-radius:8px;
  background:#f8faf6;
  color:#53615f;
  box-shadow:none;
}
.archive-layout .archive-back-top[hidden] { display:none; }
.archive-layout .archive-back-top:hover { background:#eaf0e9;color:#344b42; }
.archive-layout .archive-back-top:focus-visible { outline:2px solid #536e74;outline-offset:3px; }
.archive-layout #arcList[tabindex="-1"]:focus { outline:none; }
.archive-layout .archive-status {
  min-width:0;
  font-size:12px;
  color:var(--mute);
}
.archive-layout .archive-status:not(:has(.filter-status:empty)):not(:empty) {
  padding-block:5px;
}
.archive-layout #arcList > .post {
  padding:24px 0 30px;
  margin:0;
  background:transparent;
  border:0;
  border-bottom:1px solid #e0e5dd;
  border-radius:0;
  box-shadow:none;
  scroll-margin-top:calc(var(--archive-stack-height,133px) + 20px);
}
.archive-layout #arcList > .post:last-child { border-bottom:0; }
.archive-layout #arcList > .post .p-meta {
  gap:6px 12px;
  margin-bottom:18px;
  font-size:13px;
  color:#746b5d;
}
.archive-layout #arcList > .post .p-meta .p-date { font-size:13px; }
.archive-layout #arcList > .post .p-author {
  color:#795426;
  font-weight:600;
  text-shadow:none;
  box-shadow:none;
}
.archive-layout #arcList > .post .p-snid { font-size:12px; }
.archive-layout #arcList > .post .p-meta .p-topic {
  order:2;
  flex:0 0 100%;
  max-width:none;
  min-width:0;
  margin-top:8px;
  overflow:visible;
  white-space:normal;
  text-overflow:clip;
  overflow-wrap:anywhere;
  font-size:19px;
  font-weight:600;
  line-height:1.6;
  letter-spacing:0;
  color:var(--ink);
}
.archive-layout #arcList > .post .p-source {
  font-size:12px;
  color:var(--mute);
}
.archive-layout #arcList > .post > .p-body {
  font-size:var(--reading-size);
  line-height:1.85;
  font-weight:400;
  letter-spacing:normal;
  word-break:normal;
  color:var(--ink);
}
.archive-layout #arcList > .post > .p-body > p { margin:0 0 14px; }
.archive-layout #arcList > .post > .p-en { font-size:var(--reading-size); }
.archive-layout #arcList > .post :is(.p-body,.p-en) a { overflow-wrap:anywhere; }
.archive-layout #arcList > .post .p-actions {
  flex-wrap:wrap;
  gap:6px 18px;
  margin-top:18px;
  padding:0;
  font-size:13px;
}
.archive-layout #arcList > .thread-head { margin:28px 0 2px; }
.archive-layout #arcList > .thread-head h3 { font-size:19px;line-height:1.6; }
.archive-layout #arcEnd { color:var(--mute);font-size:14px; }

/* One directory is shared between the desktop column and the mobile dialog. */
:is(.archive-layout,#directoryDialog) .archive-directory {
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
  min-height:0;
  height:100%;
  padding:22px 0 0;
  color:#536159;
  background:transparent;
}
:is(.archive-layout,#directoryDialog) .directory-head {
  flex:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0 20px;
}
:is(.archive-layout,#directoryDialog) .directory-head h2 {
  margin:0;
  font-size:17px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.02em;
  color:#36433b;
}
:is(.archive-layout,#directoryDialog) .directory-total {
  display:block;
  margin-top:4px;
  font-size:12px;
  line-height:1.6;
  color:#778175;
}
:is(.archive-layout,#directoryDialog) #directoryClose { display:none; }
:is(.archive-layout,#directoryDialog) .directory-filters {
  flex:none;
  max-height:45%;
  overflow:auto;
  overscroll-behavior:contain;
  border-bottom:1px solid #dce2d8;
  scrollbar-width:thin;
}
:is(.archive-layout,#directoryDialog) :is(.directory-filters,.directory-entries) > summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:38px;
  list-style:none;
  cursor:pointer;
  font-size:13px;
  line-height:1.6;
  color:#68786d;
}
:is(.archive-layout,#directoryDialog) :is(.directory-filters,.directory-entries) > summary::after {
  content:'＋';
  flex:none;
  color:#7b897c;
  font-size:15px;
}
:is(.archive-layout,#directoryDialog) :is(.directory-filters,.directory-entries)[open] > summary::after { content:'−'; }
:is(.archive-layout,#directoryDialog) summary::-webkit-details-marker { display:none; }
:is(.archive-layout,#directoryDialog) .arc-adv {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  min-width:0;
  padding:10px 0 0;
}
:is(.archive-layout,#directoryDialog) .arc-adv label {
  display:grid;
  gap:5px;
  min-width:0;
  font-size:12px;
  color:#68786d;
}
:is(.archive-layout,#directoryDialog) .arc-adv label:first-child,
:is(.archive-layout,#directoryDialog) .arc-adv label:last-child { grid-column:1/-1; }
:is(.archive-layout,#directoryDialog) .arc-adv select {
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:38px;
  padding:6px 8px;
  border:1px solid #d9e0d6;
  border-radius:6px;
  color:#344745;
  background:var(--paper-2);
  font-size:13px;
  line-height:1.4;
}
:is(.archive-layout,#directoryDialog) .dialog-actions {
  display:flex;
  gap:8px;
  margin:12px 0 14px;
}
:is(.archive-layout,#directoryDialog) .dialog-actions button {
  flex:1;
  min-height:36px;
  padding:6px;
  font-size:13px;
  border:1px solid #d9e0d6!important;
  border-radius:6px;
  background:var(--paper-2)!important;
  color:var(--link);
  box-shadow:none;
  text-shadow:none;
}
:is(.archive-layout,#directoryDialog) .dialog-actions .primary {
  color:#fff;
  background:#354c59!important;
  border-color:#354c59!important;
}
:is(.archive-layout,#directoryDialog) .directory-scroll {
  flex:1;
  min-height:100px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#cbd4c7 transparent;
  padding:14px 8px 20px 0;
}
:is(.archive-layout,#directoryDialog) .directory-tabs {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin:0 0 14px;
  border-bottom:1px solid #dce2d8;
}
:is(.archive-layout,#directoryDialog) .directory-tabs button {
  position:relative;
  min-width:0;
  min-height:36px;
  padding:0 0 10px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  font-size:13px;
  line-height:1.5;
  white-space:nowrap;
  color:#788274;
}
:is(.archive-layout,#directoryDialog) .directory-tabs button[aria-pressed='true'] {
  color:#354f59;
  font-weight:600;
}
:is(.archive-layout,#directoryDialog) .directory-tabs button[aria-pressed='true']::after {
  content:'';
  position:absolute;
  inset:auto 0 -1px;
  height:2px;
  background:#536e74;
}
:is(.archive-layout,#directoryDialog) :is(.directory-row,.directory-entry) {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-width:0;
  min-height:36px;
  margin:2px 0;
  padding:7px 10px;
  border:0;
  border-radius:4px;
  background:transparent;
  color:#53665a;
  font-size:13px;
  font-weight:400;
  line-height:1.6;
  text-align:left;
  overflow-wrap:anywhere;
}
:is(.archive-layout,#directoryDialog) :is(.directory-row,.directory-entry):hover { background:#e8eee5; }
:is(.archive-layout,#directoryDialog) :is(.directory-row,.directory-entry):is([aria-current],[data-current='true']) {
  background:#e4ece4;
  color:#334f49;
  font-weight:600;
}
:is(.archive-layout,#directoryDialog) .directory-count {
  flex:none;
  margin-left:auto;
  padding-left:4px;
  font:11px var(--archive-mono,monospace);
  color:#7d8978;
}
:is(.archive-layout,#directoryDialog) .directory-year > summary {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:36px;
  padding:5px 10px;
  list-style:none;
  cursor:pointer;
  font-size:13px;
  color:#53665a;
}
:is(.archive-layout,#directoryDialog) .directory-year > summary::before {
  content:'›';
  transition:transform .15s ease;
}
:is(.archive-layout,#directoryDialog) .directory-year[open] > summary::before { transform:rotate(90deg); }
:is(.archive-layout,#directoryDialog) .directory-year > .directory-row { padding-left:28px; }
:is(.archive-layout,#directoryDialog) .directory-entries {
  margin-top:24px;
  padding-top:10px;
  border-top:1px solid #dce2d8;
}
:is(.archive-layout,#directoryDialog) .directory-entries > summary { font-size:12px; }
:is(.archive-layout,#directoryDialog) .directory-entry {
  display:block;
  padding-block:9px;
}
:is(.archive-layout,#directoryDialog) .directory-entry-title {
  display:-webkit-box;
  overflow:hidden;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  line-height:1.7;
}
:is(.archive-layout,#directoryDialog) .directory-entry-meta {
  display:block;
  margin-top:3px;
  font-size:11px;
  line-height:1.6;
  font-weight:400;
  color:#7d8978;
}
:is(.archive-layout,#directoryDialog) .directory-group {
  margin:8px 0;
  padding-bottom:8px;
  border-bottom:1px solid #dce2d8;
}
:is(.archive-layout,#directoryDialog) .directory-group > summary {
  position:relative;
  padding:8px 22px 8px 10px;
  font-size:13px;
  line-height:1.65;
  list-style:none;
  cursor:pointer;
  overflow-wrap:anywhere;
}
:is(.archive-layout,#directoryDialog) .directory-group > summary::after {
  content:'＋';
  position:absolute;
  top:8px;
  right:4px;
}
:is(.archive-layout,#directoryDialog) .directory-group[open] > summary::after { content:'−'; }
:is(.archive-layout,#directoryDialog) .directory-group.is-current > summary { color:#334f49;font-weight:600; }
:is(.archive-layout,#directoryDialog) .directory-more {
  display:block;
  width:100%;
  min-height:44px;
  padding:8px 10px;
  border:0;
  background:transparent;
  color:var(--link);
  font-size:13px;
  text-align:left;
}
:is(.archive-layout,#directoryDialog) .directory-more:hover { text-decoration:underline; }
:is(.archive-layout,#directoryDialog) .directory-group > summary small {
  display:block;
  margin-top:3px;
  font-size:11px;
  font-weight:400;
  color:#7d8978;
}
:is(.archive-layout,#directoryDialog) .directory-group .directory-entry { padding-left:20px; }
:is(.archive-layout,#directoryDialog) .directory-size {
  flex:none;
  display:flex;
  align-items:center;
  gap:8px;
  padding:16px 0 20px;
  border-top:1px solid #dce2d8;
  color:#6d7b6a;
  font-size:12px;
}
:is(.archive-layout,#directoryDialog) .directory-size > :first-child { flex:none;white-space:nowrap; }
:is(.archive-layout,#directoryDialog) .directory-size-options { display:flex;flex:1;gap:3px; }
:is(.archive-layout,#directoryDialog) .directory-size button {
  flex:1;
  min-width:0;
  min-height:34px;
  padding:4px;
  border:0!important;
  border-radius:4px;
  background:transparent!important;
  box-shadow:none;
  text-shadow:none;
  font-size:12px;
  color:#6d7b6a!important;
  white-space:nowrap;
}
:is(.archive-layout,#directoryDialog) .directory-size button[aria-pressed='true'] {
  background:#e4ece4!important;
  color:#334f49!important;
}
/* Override the site's generic bottom-sheet dialog without touching other dialogs. */
#directoryDialog {
  inset:0 auto 0 0;
  width:min(360px,calc(100vw - 32px));
  max-width:calc(100vw - 32px);
  height:100dvh;
  max-height:100dvh;
  margin:0;
  padding:0;
  overflow:hidden;
  border:0;
  border-right:1px solid #d4ddd3;
  border-radius:0;
  background:#f0f2ef;
  box-shadow:15px 0 50px #1c302526;
}
#directoryDialog::backdrop { background:#263a344a; }
#directoryDialog .archive-directory { padding:0 20px; }
#directoryDialog .directory-head { padding:max(20px,env(safe-area-inset-top)) 0 14px; }
#directoryDialog .directory-head h2 { font-size:19px; }
#directoryDialog .directory-total { display:none; }
#directoryDialog #directoryClose {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:44px;
  height:44px;
  padding:0;
  font-size:25px;
  line-height:1;
  color:#657069;
  border:0;
  border-radius:6px;
  background:transparent;
  box-shadow:none;
}
#directoryDialog .directory-filters { max-height:45%; }
#directoryDialog :is(.directory-filters,.directory-entries) > summary { min-height:44px;font-size:14px; }
#directoryDialog .arc-adv select { min-height:44px;font-size:16px; }
#directoryDialog .dialog-actions button { min-height:44px;font-size:14px; }
#directoryDialog .directory-scroll { padding-top:14px;padding-right:2px; }
#directoryDialog .directory-tabs { gap:8px; }
#directoryDialog .directory-tabs button { min-height:44px;font-size:14px; }
#directoryDialog :is(.directory-row,.directory-entry) { min-height:44px;font-size:14px;padding-block:9px; }
#directoryDialog .directory-count { font-size:12px; }
#directoryDialog .directory-year > summary { min-height:44px;font-size:14px; }
#directoryDialog .directory-entry-meta { font-size:12px; }
#directoryDialog .directory-group > summary { font-size:14px;padding-block:10px; }
#directoryDialog .directory-group > summary small { font-size:12px; }
#directoryDialog .directory-size {
  flex-wrap:wrap;
  gap:8px;
  padding:12px 0 max(16px,env(safe-area-inset-bottom));
  font-size:13px;
}
#directoryDialog .directory-size > :first-child { flex-basis:100%; }
#directoryDialog .directory-size-options { gap:7px; }
#directoryDialog .directory-size button {
  min-height:44px;
  font-size:14px;
  border:1px solid #d4ddd3!important;
  border-radius:6px;
  background:#f9fbf6!important;
}
#directoryDialog .directory-size button[aria-pressed='true'] {
  background:#e0e9e7!important;
  border-color:#9aaea8!important;
}
@media(min-width:980px) and (max-width:1120px) {
  .archive-layout { grid-template-columns:206px minmax(0,1fr);gap:32px;padding-inline:30px; }
  .archive-layout > .archive-reading { padding-inline:28px; }
}
@media(max-width:979px) {
  .archive-layout { display:block;max-width:860px;padding:0; }
  .archive-layout > .archive-sidebar-slot { display:none; }
  .archive-layout > .archive-reading { max-width:none;padding:0 24px 80px;border:0; }
  .archive-layout .arc-tools { min-height:60px;padding:8px 0;gap:8px; }
  .archive-layout .archive-back-top { width:44px;height:44px; }
  .archive-layout .arc-tools .mode-bar { gap:2px; }
  .archive-layout .arc-tools .mode-bar button { min-height:44px;font-size:14px;padding:6px 10px; }
  .archive-layout .arc-tools .lang-full { display:none; }
  .archive-layout .arc-tools .lang-short { display:inline; }
  .archive-layout .arc-tools #fToggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex:none;
    min-height:44px;
    margin:0;
    padding:6px 10px;
    font-size:14px;
    white-space:nowrap;
  }
  .archive-layout #arcList > .post { padding:22px 0 26px; }
  .archive-layout #arcList > .post .p-meta { gap:6px 10px;font-size:12px;margin-bottom:16px; }
  .archive-layout #arcList > .post .p-meta .p-date { font-size:12px; }
  .archive-layout #arcList > .post .p-meta .p-topic { font-size:19px;margin-top:6px; }
}
@media(max-width:500px) {
  .archive-layout > .archive-reading { padding-inline:18px; }
  .archive-layout .arc-tools .mode-bar button { padding-inline:8px; }
  .archive-layout .arc-tools .arc-progress { font-size:11px!important;gap:2px; }
  .archive-layout .arc-tools .progress-label { display:none; }
  .archive-layout .arc-tools #fToggle { padding-inline:9px; }
}
@media(max-width:350px) {
  .archive-layout > .archive-reading { padding-inline:14px; }
  .archive-layout .arc-tools { gap:5px; }
  .archive-layout .arc-tools .mode-bar button { padding-inline:7px; }
  .archive-layout .arc-tools #fToggle { padding-inline:8px; }
  #directoryDialog .archive-directory { padding-inline:16px; }
  #directoryDialog .directory-tabs { gap:5px; }
}
@media(prefers-reduced-motion:reduce) {
  :is(.archive-layout,#directoryDialog) .directory-year > summary::before { transition:none; }
}

/* Topic browsing has two levels: subjects, then complete discussions. */
:is(.archive-layout,#directoryDialog) .directory-entries[hidden] { display:none; }
:is(.archive-layout,#directoryDialog) .directory-topic-row {
  min-height:44px;
  padding-block:10px;
}
:is(.archive-layout,#directoryDialog) .directory-topic-row > span {
  flex:1;
  min-width:0;
  overflow-wrap:anywhere;
}
:is(.archive-layout,#directoryDialog) .directory-count-unit {
  font-family:var(--sans,system-ui,sans-serif);
}
:is(.archive-layout,#directoryDialog) .directory-topic-back {
  display:flex;
  align-items:center;
  gap:7px;
  min-height:44px;
  max-width:100%;
  padding:8px 8px;
  border:0;
  border-radius:4px;
  background:transparent;
  box-shadow:none;
  color:#62776c;
  font-size:13px;
  line-height:1.6;
  text-align:left;
}
:is(.archive-layout,#directoryDialog) .directory-topic-back:hover {
  color:#334f49;
  background:#e8eee5;
}
:is(.archive-layout,#directoryDialog) .directory-topic-heading {
  margin:4px 8px 14px;
  padding-bottom:14px;
  border-bottom:1px solid #dce2d8;
}
:is(.archive-layout,#directoryDialog) .directory-topic-heading h3 {
  margin:0;
  color:#364d41;
  font-size:15px;
  font-weight:600;
  line-height:1.65;
  overflow-wrap:anywhere;
}
:is(.archive-layout,#directoryDialog) .directory-topic-description {
  margin:7px 0 0;
  color:#738079;
  font-size:12px;
  line-height:1.75;
  overflow-wrap:anywhere;
}
:is(.archive-layout,#directoryDialog) .directory-question {
  display:block;
  min-height:44px;
  margin-block:3px;
  padding:10px;
}
:is(.archive-layout,#directoryDialog) .directory-question-title {
  display:block;
  min-width:0;
  line-height:1.7;
  white-space:normal;
  overflow-wrap:anywhere;
}
:is(.archive-layout,#directoryDialog) .directory-question-date {
  display:block;
  margin-top:4px;
  color:#7d8978;
  font:11px/1.6 var(--archive-mono,monospace);
  font-weight:400;
}
:is(.archive-layout,#directoryDialog) :is(.directory-topic-back,.directory-topic-row,.directory-question):focus-visible {
  outline:2px solid #536e74;
  outline-offset:2px;
}
#directoryDialog .directory-topic-back { font-size:14px; }
#directoryDialog .directory-topic-heading h3 { font-size:16px; }
#directoryDialog .directory-topic-description { font-size:13px; }
#directoryDialog .directory-question-date { font-size:12px; }
