/* ====================================================================
   Design tokens — a scholarly, slate + serif palette.
   Light values live in :root; .dark (further down) redefines them.
   ==================================================================== */
:root {
  /* Toyo Bunko brand (臙脂 enji #76161b on warm cream). See @toyo/design-system. */
  --primary:       #76161b;   /* 臙脂 — header / footer / headings */
  --primary-dark:  #5f1216;
  --primary-mid:   #8c2a2f;
  --accent:        #76161b;   /* enji — links, borders, accents */
  --accent-light:  #8c2a2f;
  --accent-fill:   #76161b;   /* solid backgrounds that carry white text */
  --accent-wash:   #fbf2f2;   /* faint enji tint behind external-link cards */
  --text:          #1a1714;
  --text-light:    #5a5a5a;
  --text-muted:    #8a857c;
  --border:        #e0d8cf;
  --bg:            #f5f0ed;
  --bg-alt:        #ece4dd;
  --card:          #ffffff;
  --font-serif: "EB Garamond", "BIZ UDPMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-sans:  "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-serif);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}
button, input, select, textarea { font-family: var(--font-sans); }

/* ---- shared header — slate band ---- */
.site-header {
  width: 100%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 100%);
  padding: .75rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.site-title {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .05em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.site-title:hover { color: rgba(255,255,255,.7); }
.site-nav {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.site-nav a {
  font-family: var(--font-sans);
  font-size: .85rem;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.site-nav a:hover { color: #fff; }
.site-nav-github { display: flex; align-items: center; }

.lang-btn {
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 500;
  padding: .25rem .6rem;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 4px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.85);
  cursor: pointer;
  transition: background .15s;
}
.lang-btn:hover { background: rgba(255,255,255,.22); }
.lang-btn:active { transform: scale(.97); }

.page-title {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: .04em;
  text-align: center;
  margin: 2.4rem 0 .3rem;
  padding: 0 1rem;
}

.subtitle {
  font-size: .85rem;
  color: #86868b;
  margin: 2rem 0 1.5rem;
  text-align: center;
  padding: 0 1rem;
}
.page-title + .subtitle {
  margin-top: .3rem;
}
.subtitle a { color: #86868b; }

/* ---- landing: hero band ---- */
.hero {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  text-align: center;
  padding: 4rem 2rem 3rem;
  border-bottom: 1px solid var(--border);
}
.hero-inner { max-width: 720px; margin: 0 auto; }
.hero-title {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.4;
  margin-bottom: 1.4rem;
  padding-bottom: .9rem;
  color: var(--primary);
  position: relative;
}
.hero-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 64px;
  height: 2px;
  background: var(--accent);
}
.hero-desc {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text-light);
  max-width: 540px;
  margin: 0 auto;
}

/* ---- landing: news / お知らせ ---- */
.news-section {
  max-width: 680px;
  margin: 4rem auto 0;
  padding: 0 1rem;
}
.news-title {
  display: block;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: .06em;
  padding-bottom: .7rem;
  margin-bottom: 1.6rem;
  position: relative;
}
.news-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: var(--accent);
}
.news-list { list-style: none; }
.news-item {
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
  padding: .9rem .2rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: .9rem;
}
.news-item:last-child { border-bottom: none; }
.news-date {
  flex: none;
  min-width: 6.2rem;
  color: var(--accent);
  font-weight: 600;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
.news-text { color: var(--text-light); line-height: 1.7; }

.note-box {
  max-width: 700px;
  margin: 0 auto 1.5rem;
  padding: .9rem 1.2rem;
  background: #fef9e7;
  border: 1px solid #f0d97a;
  border-radius: 8px;
  font-size: .85rem;
  line-height: 1.6;
  color: #5a4e2f;
}
.note-box a { color: #7a6a2f; }

/* ---- main content ---- */
.main-content {
  flex: 1;
  width: 100%;
  max-width: 860px;
  padding: 0 1.5rem 2rem;
}

/* ---- landing process flow ---- */
/* Desktop: the 3 steps sit side by side. Stacks to one column below 820px
   (see media query) so phones / small tablets read it top-to-bottom. */
.main-content:has(.process-flow) { max-width: 1200px; }
.process-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
  align-items: start;
}
.process-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1rem;
}
.process-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--accent-fill);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
}
.process-head h2 { font-size: 1.2rem; font-weight: 600; }
.ext-mark { font-size: .8em; color: #6e6e73; }

/* ---- landing page cards ---- */
.landing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}
.landing-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 2rem;
  background: #fff;
  border: 1px solid #e5e5ea;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
a.landing-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  border-color: var(--accent);
}
.landing-card-icon { font-size: 3rem; margin-bottom: 1rem; }
.landing-card h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: .6rem; }
.landing-card p { font-size: .85rem; color: #6e6e73; line-height: 1.5; }
/* a card that is not itself a link (holds its own links, e.g. TEI Scanner) */
.landing-card .tool-links { justify-content: center; margin-top: 1rem; }
/* external destinations (open in a new tab) get a faint blue wash — the
   site's "link / info" tint (cf. .pub-badge); white cards are this site's
   own pages. Blue reads as "link out", not "disabled" (which grey implies). */
.landing-card-ext { background: var(--accent-wash); }
a.landing-card-ext:hover { background: #fff; }

/* ---- per-step established tools ---- */
.step-tools {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px dashed #d2d2d7;
}
.step-tools-label {
  font-size: .76rem;
  font-weight: 600;
  color: #86868b;
  margin-bottom: .65rem;
}
.tool-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .7rem;
}
.tool-card {
  display: block;
  padding: .85rem 1rem;
  background: var(--accent-wash);
  border: 1px solid #e5e5ea;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
a.tool-card:hover {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.tool-card h3 { font-size: .9rem; font-weight: 600; margin-bottom: .3rem; }
.tool-card p { font-size: .78rem; color: #6e6e73; line-height: 1.5; }
/* a tool with more than one destination (e.g. GitHub + App Store) */
.tool-links {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  margin-top: .55rem;
}
.tool-links a {
  font-size: .78rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.tool-links a:hover { text-decoration: underline; }

/* ---- drop zone ---- */
.dropzone {
  border: 2px dashed #c7c7cc;
  border-radius: 16px;
  background: #fff;
  padding: 3rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.dropzone.dragover { border-color: var(--accent); background: var(--accent-wash); }
.dropzone.has-file { border-color: #34c759; background: #f0faf3; }
.dropzone-icon { font-size: 2.5rem; margin-bottom: .8rem; }
.dropzone-text { font-size: .95rem; color: #6e6e73; line-height: 1.6; }
.dropzone-text strong { color: #1d1d1f; }
.file-name {
  margin-top: .8rem;
  font-size: .9rem;
  font-weight: 500;
  color: #1d1d1f;
  word-break: break-all;
}
.file-input { display: none; }

/* ---- sample button ---- */
.sample-link {
  display: block;
  text-align: center;
  margin-top: .6rem;
  font-size: .78rem;
  color: #6e6e73;
  cursor: pointer;
  text-decoration: underline;
  background: none;
  border: none;
}
.sample-link:hover { color: var(--accent); }
.sample-link:active { transform: none; }

/* ---- buttons ---- */
.actions {
  display: flex;
  justify-content: center;
  gap: .8rem;
  margin-top: 1.2rem;
}
button {
  font-size: .9rem;
  font-weight: 500;
  border: none;
  border-radius: 10px;
  padding: .7rem 1.8rem;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}
button:active { transform: scale(.97); }
button:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { background: var(--accent-fill); color: #fff; }
.btn-secondary { background: #e8e8ed; color: #1d1d1f; }

/* ---- progress ---- */
.progress { display: none; margin-top: 1.2rem; text-align: center; }
.progress.active { display: block; }
.spinner {
  width: 28px; height: 28px;
  border: 3px solid #e8e8ed;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 0 auto .6rem;
}
@keyframes spin { to { transform: rotate(360deg); } }
.progress-text { font-size: .85rem; color: #6e6e73; }

/* ---- error ---- */
.error {
  display: none;
  margin-top: 1rem;
  padding: .8rem 1rem;
  background: #fff0f0;
  border: 1px solid #ff3b30;
  border-radius: 10px;
  color: #ff3b30;
  font-size: .85rem;
}
.error.active { display: block; }

/* ---- result ---- */
.result { display: none; margin-top: 1.5rem; }
.result.active { display: block; }
.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .6rem;
  flex-wrap: wrap;
  gap: .5rem;
}
.result-header h2 { font-size: 1rem; font-weight: 600; }
.result-actions { display: flex; gap: .5rem; }
.result-actions button { font-size: .8rem; padding: .45rem 1rem; }

/* ---- XML code view ---- */
.xml-preview {
  background: #1d1d1f;
  color: #e8e8ed;
  border-radius: 12px;
  padding: 1.2rem;
  overflow: auto;
  max-height: 520px;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: .8rem;
  line-height: 1.55;
  white-space: pre;
  tab-size: 2;
}
.xml-preview .tag { color: #ff7ab2; }
.xml-preview .attr-name { color: #6bdfff; }
.xml-preview .attr-val { color: #ffa14f; }
.xml-preview .comment { color: #7f8c8d; font-style: italic; }
.xml-preview .decl { color: #b4d273; }

/* ---- tab switcher ---- */
.tabs {
  display: flex;
  gap: 0;
  margin-bottom: .6rem;
}
.tab-btn {
  font-size: .85rem;
  font-weight: 500;
  padding: .5rem 1.2rem;
  border: 1px solid #d2d2d7;
  background: #f5f5f7;
  color: #6e6e73;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tab-btn:first-child { border-radius: 8px 0 0 8px; }
.tab-btn:last-child  { border-radius: 0 8px 8px 0; }
.tab-btn.active {
  background: var(--accent-fill);
  color: #fff;
  border-color: var(--accent-fill);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---- TEI preview ---- */
.tei-preview {
  background: #fff;
  border: 1px solid #d2d2d7;
  border-radius: 12px;
  padding: 1.5rem 2rem;
  overflow: auto;
  max-height: 520px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #1d1d1f;
}

/* CETEIcean element styles */
.tei-preview tei-tei { display: block; }
.tei-preview tei-teiheader { display: none; }
.tei-preview tei-text { display: block; }
.tei-preview tei-front { display: block; margin-bottom: 1.5em; }
.tei-preview tei-body { display: block; }
.tei-preview tei-back { display: block; }
.tei-preview tei-div { display: block; margin-bottom: 1em; }
.tei-preview tei-head {
  display: block;
  font-weight: bold;
  margin: 1em 0 .5em;
}
.tei-preview tei-body > tei-div > tei-head { font-size: 1.5em; }
.tei-preview tei-div > tei-div > tei-head { font-size: 1.3em; }
.tei-preview tei-div > tei-div > tei-div > tei-head { font-size: 1.15em; }
.tei-preview tei-p {
  display: block;
  margin: .6em 0;
  text-align: justify;
}
.tei-preview tei-hi[rend~="bold"] { font-weight: bold; }
.tei-preview tei-hi[rend~="italic"] { font-style: italic; }
.tei-preview tei-hi[rend~="underline"] { text-decoration: underline; }
.tei-preview tei-list {
  display: block;
  margin: .8em 0 .8em 1.5em;
  padding: 0;
}
.tei-preview tei-list[rend="bulleted"] { list-style-type: disc; }
.tei-preview tei-list[rend="numbered"] { list-style-type: decimal; }
.tei-preview tei-item { display: list-item; margin: .3em 0; }
.tei-preview tei-table {
  display: table;
  border-collapse: collapse;
  margin: 1em 0;
  width: 100%;
}
.tei-preview tei-row { display: table-row; }
.tei-preview tei-cell {
  display: table-cell;
  border: 1px solid #d2d2d7;
  padding: .4em .6em;
}
.tei-preview tei-titlepage {
  display: block;
  text-align: center;
  margin-bottom: 2em;
}
.tei-preview tei-titlepart[type="Title"] {
  display: block;
  font-size: 1.8em;
  font-weight: bold;
  margin: .5em 0;
}
.tei-preview tei-docauthor { display: block; text-align: center; }
.tei-preview tei-doctitle { display: block; text-align: center; }
.tei-preview tei-note {
  display: inline;
  font-size: .8em;
  color: var(--accent);
  cursor: pointer;
  position: relative;
}
.tei-preview tei-note::before {
  content: "[" attr(n) "]";
  vertical-align: super;
}
.tei-preview tei-note > * { display: none; }
.tei-preview tei-note:hover > * {
  display: block;
  position: absolute;
  bottom: 1.5em;
  left: 0;
  background: #1d1d1f;
  color: #fff;
  padding: .6em .8em;
  border-radius: 8px;
  font-size: .9rem;
  line-height: 1.5;
  white-space: normal;
  min-width: 200px;
  max-width: 350px;
  z-index: 10;
  cursor: default;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.tei-preview tei-figure { display: block; text-align: center; margin: 1em 0; }
.tei-preview tei-graphic { display: block; }
.tei-preview tei-lb::after { content: "\a"; white-space: pre; }
.tei-preview tei-l { display: block; }
.tei-preview tei-lg { display: block; margin: 1em 0; }
.tei-preview tei-q::before { content: "\201C"; }
.tei-preview tei-q::after { content: "\201D"; }
.tei-preview tei-emph { font-style: italic; }
.tei-preview tei-ref { color: var(--accent); text-decoration: underline; cursor: pointer; }
.tei-preview tei-bibl { display: block; margin: .5em 0; padding-left: 2em; text-indent: -2em; }
.tei-preview tei-listbibl { display: block; margin: 1em 0; }
.tei-preview tei-closer { display: block; margin-top: 1em; }
.tei-preview tei-opener { display: block; margin-bottom: 1em; }
.tei-preview tei-salute { display: block; }
.tei-preview tei-signed { display: block; text-align: right; }
.tei-preview tei-dateline { display: block; }
.tei-preview tei-ab { display: block; margin: 1em 0; }
.tei-preview tei-seg { display: inline; }
.tei-preview tei-fw { display: none; }
.tei-preview tei-pb {
  display: block;
  border-top: 1px dashed #d2d2d7;
  color: #86868b;
  font-size: .8em;
  padding-top: .3em;
  margin: 1em 0;
}
.tei-preview tei-pb::before { content: "[p. " attr(n) "]"; }

/* ---- examples page: section headings ---- */
.section-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 2rem 0 .9rem;
}
.section-title:first-child { margin-top: 0; }

/* ---- examples page: XSL catalog ---- */
.xsl-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.xsl-card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.1rem 1.2rem;
  background: #fff;
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.xsl-card:hover { border-color: var(--accent); }
.xsl-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0,113,227,.25);
}
.xsl-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.xsl-card-head h3 { font-size: .95rem; font-weight: 600; }
.xsl-badge {
  flex: none;
  font-size: .68rem;
  font-weight: 500;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent);
  white-space: nowrap;
}
.xsl-card-desc {
  font-size: .82rem;
  line-height: 1.6;
  color: #6e6e73;
  flex: 1;
}
.xsl-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.xsl-card-actions .btn-primary,
.xsl-card-actions .btn-secondary {
  font-size: .78rem;
  padding: .4rem .9rem;
}
.xsl-path {
  width: 100%;
  font-size: .7rem;
  color: #aeaeb2;
  font-family: "SF Mono", Menlo, Consolas, monospace;
}

/* anchors styled as buttons (download / open-in-tab) */
a.btn-primary, a.btn-secondary {
  display: inline-block;
  text-decoration: none;
  border-radius: 10px;
  padding: .7rem 1.8rem;
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 500;
}
.result-actions a.btn-secondary { font-size: .8rem; padding: .45rem 1rem; }

/* ---- examples page: input controls ---- */
.input-extra {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem .9rem;
  margin-top: .8rem;
}
.input-extra .file-input { display: none; }
.input-extra .btn-secondary { font-size: .82rem; padding: .5rem 1rem; }
.input-hint { font-size: .78rem; color: #86868b; }

/* ---- examples page: result ---- */
.applied-xsl {
  align-self: center;
  margin-right: .3rem;
  font-size: .8rem;
  color: #6e6e73;
}
.render-frame {
  width: 100%;
  min-height: 360px;
  border: 1px solid #d2d2d7;
  border-radius: 12px;
  background: #fff;
}

/* ---- publisher: two-pane layout ---- */
/* Wider layout with slimmer side margins, to fit more of both lists. */
.main-content:has(.publisher) {
  max-width: none;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ---- publisher: numbered step head (shared by the two panes and the open bar) ---- */
.pub-pane-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .55rem;
}
.pub-pane-headtext { min-width: 0; }
.pub-pane-hint {
  font-size: .76rem;
  color: #86868b;
  line-height: 1.45;
  font-weight: 400;
  margin-left: .25rem;
}

/* number badge in every step head */
.pub-pane-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--accent-fill);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
}

.publisher {
  display: grid;
  /* minmax(0, 1fr) — the explicit 0 minimum prevents a long unbreakable
     title or chip from inflating its column past the viewport, which
     otherwise causes horizontal overflow at narrow widths. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
}
.pub-pane {
  background: #fff;
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
.pub-pane.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,113,227,.12); }
.pub-pane.done .pub-pane-num { background: #1a7f37; }
.pub-pane-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4rem;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  min-width: 0;
}
.pane-count { color: #86868b; font-weight: 400; font-size: .85rem; }
/* Controls block: filter input + facets, grouped visually so the user
   reads them as one "narrow this list" tool before scanning the cards. */
.pub-filter {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .5rem;
}
.pub-filter input[type="search"] {
  flex: 1;
  min-width: 0;
  font-size: .85rem;
  padding: .45rem .65rem;
  border: 1px solid #e5e5ea;
  border-radius: 7px;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}
.pub-filter input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,113,227,.18);
  background: #fff;
}
.pub-filter-count { color: #86868b; font-size: .78rem; flex: none; }
.pub-facets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .4rem;
  margin: 0 0 1rem;
  padding: 0;
}
.pub-facets:empty { display: none; }
.pub-facet-label {
  font-size: .72rem;
  color: #86868b;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-right: .15rem;
  margin-left: .15rem;
}
.pub-facet-label:first-child { margin-left: 0; }
.pub-chip {
  font: inherit;
  font-size: .75rem;
  cursor: pointer;
  padding: .22rem .55rem;
  border: 1px solid #d1d1d6;
  border-radius: 999px;
  background: #fff;
  color: #1d1d1f;
  display: inline-flex;
  align-items: center;
  gap: .3em;
  line-height: 1.2;
}
.pub-chip:hover { border-color: var(--accent); color: var(--accent); }
.pub-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.pub-chip-n {
  font-size: .68rem;
  color: #86868b;
  font-variant-numeric: tabular-nums;
}
.pub-chip.active .pub-chip-n { color: rgba(255,255,255,.85); }
.pub-facet-clear {
  font: inherit;
  font-size: .72rem;
  color: var(--accent);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0 .3rem;
}
.pub-facet-clear:hover { text-decoration: underline; }
.subtitle-with-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .35rem 1.2rem;
}
.meta-inline-link {
  font-size: .82rem;
  color: var(--accent) !important;
  text-decoration: none;
  white-space: nowrap;
}
.meta-inline-link:hover { text-decoration: underline; }
.pub-share {
  font: inherit;
  font-size: .78rem;
  color: #1d1d1f;
  background: transparent;
  border: 1px solid #d1d1d6;
  border-radius: 7px;
  padding: .42rem .75rem;
  cursor: pointer;
  margin-left: .5rem;
  white-space: nowrap;
}
.pub-share:hover { border-color: var(--accent); color: var(--accent); }
.pub-share.pub-share-ok { color: #1a7f37; border-color: #1a7f37; }
.pub-section-head {
  margin: 1.3rem 0 .45rem;
  padding: 0;
  font-size: .78rem;
  font-weight: 700;
  color: #6e6e73;
  text-transform: uppercase;
  letter-spacing: .06em;
  list-style: none;
}
.pub-section-head::after {
  content: "";
  display: block;
  height: 1px;
  background: #e5e5ea;
  margin-top: .35rem;
}
.pub-section-head:first-child { margin-top: .25rem; }
.pub-empty {
  color: #a1a1a6;
  font-size: .85rem;
  font-style: italic;
  padding: .8rem .2rem;
  text-align: center;
}
.pub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.pub-item {
  border: 1px solid #e5e5ea;
  border-radius: 9px;
  padding: .7rem .85rem .75rem;
  cursor: pointer;
  min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
.pub-item:hover { border-color: var(--accent); }
.pub-item.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0,113,227,.25);
}
.pub-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-width: 0;
}
.pub-item-title { font-size: .85rem; font-weight: 600; min-width: 0; overflow: hidden; }
.pub-item-title-text {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.pub-item-note {
  font-size: .78rem;
  line-height: 1.55;
  color: #6e6e73;
  margin-top: .4rem;
  overflow-wrap: anywhere;
}
/* Compact "↗ XML を見る" / "↗ XSL を見る" link sitting at the right
   end of .pub-item-head (replaces the old bottom action row). */
a.pub-open {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .72rem;
  font-weight: 500;
  color: var(--accent);
  background: transparent;
  padding: .22rem .5rem;
  border-radius: 6px;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}
a.pub-open:hover { background: rgba(0,113,227,.08); }
.pub-open-icon { flex: none; opacity: .8; }

/* ---- category / language chips + license line ---- */
.pub-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .5rem;
}
.pub-cat {
  font-size: .7rem;
  padding: .12rem .5rem;
  border-radius: 999px;
  background: #eef1f6;
  color: #4a4a52;
}
.pub-lang {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .12rem .45rem;
  border-radius: 4px;
  background: #f0f0f2;
  color: #6e6e73;
}
.pub-license {
  font-size: .72rem;
  line-height: 1.5;
  color: #8a8a8f;
  margin-top: .45rem;
  overflow-wrap: anywhere;
}
.pub-license-label { font-weight: 600; color: #6e6e73; }

/* Recommended XML × XSL pairing — shown on an XML card when
   catalog.recommendedXsl is set: an "open full-screen" link aligned to
   the card's bottom-right. */
.pub-recommend-row {
  display: flex;
  justify-content: flex-end;
  margin-top: .6rem;
}
a.pub-recommend {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  max-width: 100%;
  font-size: .74rem;
  font-weight: 500;
  color: var(--accent);
  background: rgba(118,22,27,.06);
  border: 1px solid rgba(118,22,27,.18);
  padding: .3rem .6rem;
  border-radius: 999px;
  line-height: 1.3;
  text-decoration: none;
}
a.pub-recommend:hover { background: rgba(118,22,27,.11); }
.pub-recommend-label { flex: none; font-weight: 600; }
.pub-recommend-label::after { content: ':'; }
.pub-recommend-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #4a4a52;
}

.pub-add {
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid #e5e5ea;
}
.pub-add > summary {
  font-size: .8rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
}
.pub-add > summary::-webkit-details-marker { display: none; }
.pub-add > summary::before { content: "＋ "; }
.pub-add[open] > summary::before { content: "− "; }
.pub-add-body { margin-top: .7rem; }
.pub-add-row { display: flex; gap: .5rem; margin-bottom: .5rem; }
.pub-add-row input {
  flex: 1;
  min-width: 0;
  font-size: .8rem;
  padding: .45rem .6rem;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  background: #fff;
  color: #1d1d1f;
}
.pub-add .btn-secondary { font-size: .78rem; padding: .42rem .9rem; }

/* ---- publisher: step 3 — open bar ---- */
/* Sticks to the viewport bottom so the open button is always reachable. */
.pub-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .8rem 1.5rem;
  margin-top: 1.25rem;
  padding: 1rem 1.2rem;
  background: #fff;
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  box-shadow: 0 -4px 16px rgba(0,0,0,.07);
  transition: border-color .15s, box-shadow .15s;
}
.pub-bar .pub-pane-head { margin-bottom: 0; }
.pub-bar.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,113,227,.12), 0 -4px 16px rgba(0,0,0,.07);
}
.pub-bar-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .8rem 1.25rem;
}
.pub-selection {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  font-size: .83rem;
}
.pub-selection strong { color: #6e6e73; font-weight: 600; margin-right: .35rem; }
.pub-none { color: #aeaeb2; }

/* ---- "where the metadata comes from" link (under a page subtitle) ---- */
.meta-link { text-align: center; margin-top: -.3rem; margin-bottom: 1.5rem; }
.meta-link a { font-size: .82rem; color: var(--accent); text-decoration: none; }
.meta-link a:hover { text-decoration: underline; }

/* ---- metadata guide page ---- */
.meta-section { margin-top: 2.2rem; }
.meta-section > h2 { font-size: 1.15rem; font-weight: 600; margin-bottom: .35rem; }
.meta-section > p {
  font-size: .87rem;
  color: #6e6e73;
  line-height: 1.6;
  margin-bottom: .9rem;
}
.meta-table-wrap { overflow-x: auto; }
.meta-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.meta-table th,
.meta-table td {
  text-align: left;
  vertical-align: top;
  padding: .6rem .7rem;
  border-bottom: 1px solid #e5e5ea;
}
.meta-table thead th {
  font-size: .76rem;
  font-weight: 600;
  color: #86868b;
  border-bottom: 2px solid #e5e5ea;
}
.meta-table td:first-child { font-weight: 600; white-space: nowrap; }
.meta-table code {
  font-size: .8rem;
  background: #f0f0f2;
  padding: .12rem .35rem;
  border-radius: 4px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  white-space: nowrap;
}
.meta-notes { margin-top: 2.2rem; }
.meta-notes h2 { font-size: 1.15rem; font-weight: 600; margin-bottom: .6rem; }
.meta-notes ul { margin: 0; padding-left: 1.2rem; }
.meta-notes li {
  font-size: .85rem;
  color: #4a4a52;
  line-height: 1.65;
  margin-bottom: .55rem;
}

/* ---- footer — slate band ---- */
.site-footer {
  width: 100%;
  padding: 2.2rem 1.5rem;
  text-align: center;
  font-family: var(--font-sans);
  font-size: .8rem;
  color: rgba(255,255,255,.6);
  background: var(--primary);
  margin-top: auto;
}
.site-footer a { color: rgba(255,255,255,.8); }
.site-footer .site-footer-sep { margin: 0 .6em; opacity: .5; }
.priv-updated { margin-top: 2.5rem; font-size: .85rem; color: var(--muted, #6e6e73); }

/* ---- responsive ---- */
/* Stack the 3-step landing flow before it gets cramped (covers phones + small tablets). */
@media (max-width: 820px) {
  .process-flow { grid-template-columns: 1fr; gap: 2rem; }
  .hero { padding: 3.5rem 1.5rem 3rem; }
  .hero-title { font-size: 2.1rem; }
}

/* ---- publisher responsive ---- */
/* Below ~960px the side-by-side two-pane layout starts to feel cramped:
   long titles wrap, facet chips push the input into a single column.
   Collapse to a single stacked column. */
@media (max-width: 960px) {
  .publisher { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* Phone-class width: trim padding, surface controls full-width, prevent
   iOS Safari auto-zoom (input font-size must be >= 16px). */
@media (max-width: 700px) {
  .main-content:has(.publisher) {
    padding-left: .75rem;
    padding-right: .75rem;
  }
  .page-title { font-size: 1.4rem; margin: 1.6rem 0 .25rem; }
  .subtitle-with-link { gap: .25rem .9rem; padding: 0 .6rem; }
  .meta-inline-link { font-size: .78rem; }

  .pub-pane { padding: .95rem .9rem; }
  .pub-pane-head { gap: .45rem; align-items: flex-start; }
  .pub-pane-title { font-size: .95rem; }
  .pub-pane-hint {
    display: block;       /* push hint onto its own line again on phones */
    margin-left: 0;
    flex-basis: 100%;
  }

  .pub-filter { flex-wrap: wrap; gap: .4rem; }
  .pub-filter input[type="search"] {
    flex: 1 1 100%;
    font-size: 16px;      /* avoid iOS zoom on focus */
  }
  .pub-filter-count {
    flex: 1 0 100%;
    text-align: right;
    margin-top: -.15rem;
  }

  .pub-facets { gap: .3rem; margin-bottom: .8rem; }
  .pub-chip { font-size: .78rem; padding: .25rem .55rem; }
  .pub-chip-n { font-size: .7rem; }

  .pub-item { padding: .65rem .75rem .7rem; }
  .pub-item-head { gap: .4rem; flex-wrap: wrap; }
  .pub-item-title { flex: 1 1 100%; }
  a.pub-open {
    /* On a phone keep the View link compact and right-aligned under
       the title so a wrapping title doesn't collide with it. */
    align-self: flex-end;
    font-size: .72rem;
    padding: .2rem .45rem;
  }

  .pub-bar {
    padding: .85rem .95rem;
    margin-top: 1rem;
    flex-direction: column;
    align-items: stretch;
    gap: .65rem;
  }
  .pub-bar .pub-pane-head { margin-bottom: .15rem; }
  .pub-bar-main {
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
  }
  .pub-bar-main .btn-primary,
  .pub-bar-main .pub-share {
    width: 100%;
    margin-left: 0;
  }
  .pub-selection { font-size: .82rem; }

  .pub-add-row { flex-wrap: wrap; }
  .pub-add-row input { flex: 1 1 100%; font-size: 16px; }
  .pub-add-row .btn-secondary { width: 100%; }
}

@media (max-width: 600px) {
  .site-header {
    padding: .6rem 1rem;
    flex-wrap: wrap;
    gap: .5rem;
  }
  .site-title { font-size: 1rem; }
  .site-nav { gap: .8rem; }
  .site-nav a { font-size: .75rem; }

  .hero { padding: 2.75rem 1.25rem 2.5rem; }
  .hero-title { font-size: 1.75rem; letter-spacing: .04em; }
  .hero-desc { font-size: .95rem; }

  .news-section { margin-top: 3rem; }
  .news-title { font-size: 1.25rem; }
  .news-item { gap: .9rem; }
  .news-date { min-width: 5.4rem; }

  .main-content { padding: 0 1rem 1.5rem; }

  .landing-cards {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .landing-card { padding: 1.5rem 1.2rem; }

  .dropzone { padding: 2rem 1rem; }
  .dropzone-icon { font-size: 2rem; }

  .result-header { flex-direction: column; align-items: flex-start; }

  .xml-preview {
    font-size: .7rem;
    padding: .8rem;
    max-height: 400px;
    border-radius: 8px;
  }

  .tei-preview {
    padding: 1rem;
    max-height: 400px;
    border-radius: 8px;
  }

  .xsl-catalog { grid-template-columns: 1fr; }
  .publisher { grid-template-columns: 1fr; }
  .pub-bar { align-items: flex-start; }
  .pub-bar-main { width: 100%; justify-content: space-between; }

  .tei-preview tei-note:hover > * {
    min-width: 160px;
    max-width: 260px;
    font-size: .8rem;
  }
}

/* ---- dark mode — redefine the design tokens ----
   The header / footer keep their slate band in both modes, so the old
   .dark .site-header / .site-title / nav / lang-btn overrides are gone. */
.dark {
  --accent:       #db9598;   /* enji-300 — readable enji on dark */
  --accent-light: #ecc1c3;
  --accent-fill:  #8c2a2f;
  --accent-wash:  #2d090b;
  --text:         #ece6df;
  --text-light:   #b7b0a6;
  --text-muted:   #8f8a82;
  --border:       #3a342d;
  --bg:           #1c1a18;
  --bg-alt:       #242220;
  --card:         #26231f;
  background: var(--bg);
  color: var(--text);
}
.dark .page-title { color: #f5f5f7; }
.dark .subtitle { color: #8e8e93; }
.dark .subtitle a { color: #8e8e93; }
.dark .landing-credit { color: #8e8e93; }
.dark .news-title { color: #f5f5f7; border-bottom-color: #48484a; }
.dark .news-item { border-bottom-color: #3a3a3c; }
.dark .news-date { color: #8e8e93; }
.dark .news-text { color: #f5f5f7; }
.dark .note-box { background: #3a3520; border-color: #6b5c1f; color: #e8d89c; }
.dark .note-box a { color: #e8d89c; }
.dark .landing-card { background: #2c2c2e; border-color: #3a3a3c; color: #f5f5f7; }
.dark a.landing-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.3); border-color: var(--accent); }
.dark .landing-card-ext { background: #26231f; }
.dark a.landing-card-ext:hover { background: #2c2c2e; }
.dark .meta-section > h2,
.dark .meta-notes h2 { color: #f5f5f7; }
.dark .meta-section > p { color: #aeaeb2; }
.dark .meta-table th,
.dark .meta-table td { border-bottom-color: #3a3a3c; }
.dark .meta-table thead th { color: #8e8e93; border-bottom-color: #3a3a3c; }
.dark .meta-table code { background: #3a3a3c; color: #f5f5f7; }
.dark .meta-notes li { color: #c7c7cc; }
.dark .landing-card p { color: #aeaeb2; }
.dark .ext-mark { color: #aeaeb2; }
.dark .step-tools { border-top-color: #3a3a3c; }
.dark .tool-card { background: #26231f; border-color: #3a3a3c; color: #f5f5f7; }
.dark a.tool-card:hover { background: #2c2c2e; border-color: var(--accent); box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.dark .tool-card p { color: #aeaeb2; }
.dark .tool-links a { color: var(--accent); }
.dark .dropzone { background: #2c2c2e; border-color: #48484a; }
.dark .dropzone.dragover { border-color: var(--accent); background: #2d090b; }
.dark .dropzone.has-file { border-color: #30d158; background: #1a2e1a; }
.dark .dropzone-text { color: #aeaeb2; }
.dark .dropzone-text strong { color: #f5f5f7; }
.dark .file-name { color: #f5f5f7; }
.dark .btn-primary { background: var(--accent-fill); }
.dark .btn-secondary { background: #3a3a3c; color: #f5f5f7; }
.dark .sample-link { color: #8e8e93; }
.dark .sample-link:hover { color: var(--accent); }
.dark .spinner { border-color: #3a3a3c; border-top-color: var(--accent-fill); }
.dark .progress-text { color: #8e8e93; }
.dark .error { background: #3a1a1a; border-color: #ff453a; color: #ff6961; }
.dark .result-header h2 { color: #f5f5f7; }
.dark .tab-btn { background: #2c2c2e; border-color: #48484a; color: #8e8e93; }
.dark .tab-btn.active { background: var(--accent-fill); color: #fff; border-color: var(--accent-fill); }
.dark .xml-preview { background: #000; }
.dark .tei-preview { background: #2c2c2e; border-color: #3a3a3c; color: #f5f5f7; }
.dark .tei-preview tei-cell { border-color: #48484a; }
.dark .tei-preview tei-note { color: var(--accent); }
.dark .tei-preview tei-note:hover > * { background: #000; color: #f5f5f7; }
.dark .tei-preview tei-pb { border-top-color: #48484a; color: #8e8e93; }
.dark .tei-preview tei-ref { color: var(--accent); }
.dark .site-footer { border-top-color: #3a3a3c; color: #636366; }
.dark .site-footer a { color: #636366; }
.dark .section-title { color: #f5f5f7; }
.dark .xsl-card { background: #2c2c2e; border-color: #3a3a3c; }
.dark .xsl-card:hover { border-color: var(--accent); }
.dark .xsl-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(100,210,255,.3); }
.dark .xsl-card-head h3 { color: #f5f5f7; }
.dark .xsl-badge { background: #2d090b; color: var(--accent); }
.dark .xsl-card-desc { color: #aeaeb2; }
.dark .xsl-path { color: #636366; }
.dark .input-hint { color: #8e8e93; }
.dark .applied-xsl { color: #aeaeb2; }
.dark .render-frame { background: #fff; border-color: #48484a; }
.dark .pub-pane,
.dark .pub-bar { background: #2c2c2e; border-color: #3a3a3c; }
.dark .pub-pane-title { color: #f5f5f7; }
.dark .pub-item { border-color: #3a3a3c; }
.dark .pub-item:hover { border-color: var(--accent); }
.dark .pub-item.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(100,210,255,.3); }
.dark .pub-item-title { color: #f5f5f7; }
.dark .pub-item-note { color: #aeaeb2; }
.dark a.pub-open:hover { background: rgba(100,210,255,.12); }
.dark .pub-cat { background: #2a2f3a; color: #b9c0cc; }
.dark .pub-lang { background: #3a3a3c; color: #aeaeb2; }
.dark .pub-license { color: #7a7a7f; }
.dark .pub-license-label { color: #aeaeb2; }
.dark a.pub-recommend { background: rgba(219,149,152,.10); border-color: rgba(219,149,152,.25); }
.dark a.pub-recommend:hover { background: rgba(219,149,152,.16); }
.dark .pub-recommend-name { color: #c7ccd6; }
.dark .pub-add { border-top-color: #3a3a3c; }
.dark .pub-add > summary { color: var(--accent); }
.dark .pub-add-row input { background: #1c1c1e; border-color: #48484a; color: #f5f5f7; }
.dark .pub-filter input[type="search"] {
  background: #1c1c1e; border-color: #48484a; color: #f5f5f7;
}
.dark .pub-filter input[type="search"]:focus {
  background: #2c2c2e; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(100,210,255,.22);
}
.dark .pub-section-head { color: #aeaeb2; }
.dark .pub-section-head::after { background: #3a3a3c; }
.dark .pub-filter-count, .dark .pub-empty { color: #98989d; }
.dark .pub-facet-label { color: #98989d; }
.dark .pub-chip {
  background: #1c1c1e; border-color: #48484a; color: #f5f5f7;
}
.dark .pub-chip:hover { border-color: var(--accent); color: var(--accent); }
.dark .pub-chip.active {
  background: var(--accent); color: #000; border-color: var(--accent);
}
.dark .pub-chip-n { color: #98989d; }
.dark .pub-chip.active .pub-chip-n { color: rgba(0,0,0,.65); }
.dark .pub-share {
  background: #1c1c1e; border-color: #48484a; color: #f5f5f7;
}
.dark .pub-share:hover { border-color: var(--accent); color: var(--accent); }
.dark .pub-share.pub-share-ok { color: #4ade80; border-color: #4ade80; }
.dark .pub-selection strong { color: #aeaeb2; }
.dark .pub-bar { box-shadow: 0 -4px 16px rgba(0,0,0,.4); }
.dark .pub-pane-hint { color: #8e8e93; }
.dark .pub-pane.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(100,210,255,.18); }
.dark .pub-pane.done .pub-pane-num { background: #1a7f37; }
.dark .pub-bar.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(100,210,255,.18), 0 -4px 16px rgba(0,0,0,.4);
}
.dark .pub-pane-num { background: var(--accent-fill); }

/* ---- theme toggle button ---- */
.theme-btn {
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 500;
  padding: .25rem .6rem;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 4px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.85);
  cursor: pointer;
  transition: background .15s;
}
.theme-btn:hover { background: rgba(255,255,255,.22); }
.theme-btn:active { transform: scale(.97); }