/* Shared public UI based on the approved 2026-10-29 local concept. */
:root {
  --blue: #486080; --accent: #486080; --ui-hover: #354b68;
  --ui-line: #dce3eb; --header-height: 74px;
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible { outline-color: #8c9eb5; }
.text-button, .original-link, .wechat-action a, .source-badge,
.case-title-link > span, .article-body a { color: var(--blue); }
.text-button:hover, .nav-links a:hover, .original-link:hover { color: var(--ui-hover); }
.notice-symbol {
  display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 18px;
  padding: 0; border: 0; border-radius: 0; font-size: 0; line-height: 1; color: #4b6890;
}
.notice-symbol svg { display: block; width: 18px; height: 18px; }
.original-link, .source-badge, .pill, .insight-tag { border-color: var(--ui-line); background-color: #f3f6f9; }
.original-link:hover { border-color: #aab9c9; background: #eaf0f5; }
.primary-button, .search-submit { background: var(--blue); border-color: var(--blue); }
.primary-button:hover, .search-submit:hover { background: var(--ui-hover); }
.outline-button { color: var(--blue); border-color: #cad5e1; }
.case-scroll .case-card:focus-within { border-color: #8c9eb5; box-shadow: 0 0 0 2px #e4eaf1; }
.topic-chip.active, .province-link.active, .law-topic-button.active { color: var(--ui-hover); border-color: #bac8d8; background: #edf2f7; }
.hero-panel .hero-link, .section-flow .text-button {
  color: var(--blue); background: rgb(255 255 255 / 57%); border: 1px solid rgb(255 255 255 / 82%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 65%), 0 3px 13px rgb(39 62 91 / 4%);
  -webkit-backdrop-filter: blur(16px) saturate(.8); backdrop-filter: blur(16px) saturate(.8);
}
.hero-panel .hero-link:hover { background: rgb(255 255 255 / 76%); }
.hero-panel .hero-link:active, .home-shortcuts a:active { transform: scale(.98); }
.hero-panel[data-flow-theme=global] .text-button { color: #745337; }

/* The translucent selection follows hover/focus without moving the labels. */
.has-refined-ui .site-header .nav-links {
  position: relative; isolation: isolate; padding: 5px; gap: 5px;
  border: 1px solid #edf0f4; border-radius: 28px; background: #f7f9fb8c;
}
.has-refined-ui .site-header .nav-links > a { position: relative; padding: 7px 12px; border-radius: 22px; color: #626e7d; font-size: 12px; line-height: 1.6; }
.has-refined-ui .site-header .nav-links > a[aria-current=page] { color: var(--blue); }
.nav-selection {
  position: absolute; top: 0; left: 0; z-index: -1; pointer-events: none;
  width: var(--selection-width, 0); height: var(--selection-height, 0);
  transform: translate(var(--selection-x, 0), var(--selection-y, 0));
  border: 1px solid #dfe6ee; border-radius: 23px; background: rgb(255 255 255 / 85%);
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px #253d5b06;
}
.selection-ready .nav-selection { transition: transform .22s ease, width .22s ease, height .22s ease; }
.nav-menu-toggle, .mobile-filter-button, .home-shortcuts, .home-scope,
.mobile-home-title, .reading-contents { display: none; }
.ui-icon { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; }
.ui-close, .nav-menu-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid #e0e7ef; border-radius: 22px; padding: 8px 13px;
  min-height: 44px; background: #ffffffa6; color: var(--blue); font-size: 13px;
}
.nav-menu-toggle { display: none; }
body:has(dialog[open]) { overflow: hidden; }
.filter-sheet {
  color: var(--ink); padding: 0; border: 1px solid rgb(255 255 255 / 88%);
  background: rgb(249 251 253 / 93%); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: 0 20px 70px rgb(26 42 61 / 14%);
}
.filter-sheet::backdrop { background: rgb(26 42 61 / 23%); backdrop-filter: blur(3px); }
.site-menu {
  position: fixed; top: calc(var(--header-height) + 8px); right: var(--menu-right, 20px); z-index: 40;
  display: grid; grid-template-rows: 0fr; width: min(280px, calc(100vw - 32px));
  padding: 0; margin: 0; border: 1px solid rgb(255 255 255 / 82%); border-radius: 23px;
  color: var(--ink); background: rgb(249 251 253 / 75%);
  -webkit-backdrop-filter: blur(22px) saturate(.85); backdrop-filter: blur(22px) saturate(.85);
  box-shadow: inset 0 1px 0 #ffffffb3, 0 12px 35px rgb(26 42 61 / 10%);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-7px);
  transition: grid-template-rows .24s cubic-bezier(.2,.8,.2,1), opacity .18s ease,
    transform .24s cubic-bezier(.2,.8,.2,1), visibility .24s;
}
.site-menu.is-open { grid-template-rows: 1fr; opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.site-menu-inner { min-height: 0; overflow: hidden; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; }
.dialog-heading h2 { font-size: 18px; font-weight: 500; }
.site-menu nav { display: grid; gap: 4px; padding: 11px; max-height: calc(100dvh - var(--header-height) - 36px); overflow-y: auto; overscroll-behavior: contain; }
.site-menu nav > a { display: flex; align-items: center; gap: 8px; padding: 11px 16px; min-height: 44px; border: 1px solid transparent; border-radius: 23px; font-size: 14px; color: #526174; transition: background-color .15s ease, transform .15s ease; }
.site-menu nav > a[aria-current=page] { background: #ffffffa3; border-color: #ffffffd9; color: var(--blue); font-weight: 600; box-shadow: 0 2px 7px #263e5c06; }
.site-menu nav > a:hover { background: #ffffff80; }
.site-menu nav > a:active { transform: scale(.985); }
.site-menu .menu-extra { margin-top: 5px; border-top-color: var(--ui-line); border-radius: 0 0 23px 23px; }
.reading-progress {
  appearance: none; -webkit-appearance: none; position: fixed; z-index: 31;
  left: 0; top: var(--header-height); width: 100%; height: 2px;
  border: 0; background: transparent; color: #7a8fa8; pointer-events: none;
}
.reading-progress::-webkit-progress-bar { background: transparent; }
.reading-progress::-webkit-progress-value { background: #7a8fa8; }
.reading-progress::-moz-progress-bar { background: #7a8fa8; }
.catalog-loading { display: none; width: 52px; height: 3px; border: 0; accent-color: #7a8fa8; }
.catalog-section.is-loading .catalog-loading { display: block; }
.catalog-section.is-loading #result-note { color: var(--blue); }
.case-scroll .case-card.is-entering { animation-duration: .24s; }

@media (max-width: 1100px) and (min-width: 981px) {
  .has-refined-ui .site-header .nav { gap: 14px; }
  .has-refined-ui .site-header .nav-links > a { padding-inline: 8px; font-size: 11px; }
  .has-refined-ui .site-header .nav-actions { gap: 8px; }
}
@media (max-width: 980px) {
  html.has-refined-ui { scroll-padding-top: 76px; }
  .has-refined-ui .site-header .nav { height: 62px; min-height: 62px; padding-block: 0; gap: 12px; flex-wrap: nowrap; }
  .has-refined-ui .site-header .nav-links, .has-refined-ui .site-header .nav-actions { display: none; }
  .has-refined-ui .nav-menu-toggle { display: inline-flex; }
  .has-refined-ui .site-header .brand-caption { display: none; }
}
@media (max-width: 760px) {
  .shell { width: calc(100% - 40px); }
  .has-refined-ui .site-header .nav { height: 60px; min-height: 60px; }
  .has-refined-ui .site-header .nav .brand { font-size: 15px; gap: 9px; }
  .has-refined-ui .site-header .nav .brand-logo { width: 32px; height: 32px; }
  .nav-menu-toggle { border-color: transparent; background: transparent; padding-inline: 8px; }

  /* Compact brand introduction and four entries over the original artwork. */
  #home-top .library-hero { grid-template-columns: 1fr; padding-block: 20px 14px; gap: 0; }
  #home-top .hero-copy h1 { font-size: 32px; line-height: 1.35; margin: 12px 0 10px; letter-spacing: -.045em; }
  #home-top .hero-copy > p { font-size: 13px; line-height: 1.85; }
  .home-desktop-description { display: none; }
  #home-top .eyebrow { font-size: 9px; letter-spacing: .08em; }
  #home-top .hero-entry-links, #home-top .library-summary, #home-top > .collection-notice { display: none; }
  .home-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-bottom: 16px; }
  .home-shortcuts a {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 12px 15px; min-height: 70px; border: 1px solid rgb(255 255 255 / 84%);
    border-radius: 20px; color: var(--blue); background: rgb(255 255 255 / 51%);
    -webkit-backdrop-filter: blur(16px) saturate(.8); backdrop-filter: blur(16px) saturate(.8);
    box-shadow: inset 0 1px 0 #ffffffb3, 0 4px 15px #263e5c07;
    transition: background-color .2s ease, transform .18s ease;
  }
  .home-shortcuts a:hover { background: #ffffffb8; }
  .home-shortcuts strong { display: block; color: #2d405a; font-size: 15px; font-weight: 600; }
  .home-shortcuts small { display: block; margin-top: 3px; color: #596c83; font-size: 12px; }
  .home-shortcuts a > span:last-child { font-size: 18px; }
  .home-scope { display: block; padding-block: 10px 0; font-size: 12px; color: #627087; }
  .home-scope summary { padding-block: 4px; cursor: pointer; min-height: 24px; }
  .home-scope p { margin-top: 10px; line-height: 1.9; }
  .case-home-section, .global-home-section, .law-home-section, .insights-section { padding-block: 23px 28px; }
  .case-home-section { border-top: 0; padding-top: 16px; }
  .case-home-section .section-flow, .global-home-section .section-flow, .law-home-section .section-flow, .insights-section .section-flow { min-height: 0; margin-bottom: 12px; border: 0; border-radius: 0; background: transparent; }
  .case-home-section .section-flow > .hero-artwork, .case-home-section .section-flow > .hero-liquid, .case-home-section .section-flow > .hero-underlay,
  .global-home-section .section-flow > .hero-artwork, .global-home-section .section-flow > .hero-liquid, .global-home-section .section-flow > .hero-underlay,
  .law-home-section .section-flow > .hero-artwork, .law-home-section .section-flow > .hero-liquid, .law-home-section .section-flow > .hero-underlay,
  .insights-section .section-flow > .hero-artwork, .insights-section .section-flow > .hero-liquid, .insights-section .section-flow > .hero-underlay { display: none; }
  .section-flow .section-flow-content.section-heading { padding: 0; flex-wrap: nowrap; gap: 12px; }
  .section-flow .section-heading h2 { font-size: 21px; }
  .section-flow .section-heading .eyebrow, .section-flow .section-heading .section-caption { display: none; }
  .section-flow .text-button { padding: 6px 0; background: transparent; border: 0; box-shadow: none; font-size: 12px; }
  .desktop-home-title { display: none; } .mobile-home-title { display: inline; }
  .home-case-grid, .global-home-grid, .law-home-grid { margin-top: 0; }

  /* Preserve real source distinctions and all per-case information notices. */
  .case-card, .case-scroll .case-card { padding: 18px; border-color: #e2e7ee; background: #fff; border-radius: 14px; }
  .case-card > .case-watermark { opacity: .33; max-width: 220px; height: 240px; }
  .case-card-meta, .case-scroll .case-card-meta { font-size: 11px; margin-bottom: 9px; }
  .case-title-link h3, .case-scroll .case-title-link h3 { font-size: 18px; line-height: 1.6; }
  .case-court, .case-scroll .case-court { font-size: 12px; line-height: 1.8; margin-top: 8px; }
  .card-tags, .case-scroll .card-tags { margin-block: 10px; gap: 6px; }
  .card-tags > span { font-size: 11px; }
  .case-preview { font-size: 14px; line-height: 1.85; margin-bottom: 12px; }
  .case-evidence, .case-scroll .case-evidence { padding-top: 10px; }
  .source-badge, .case-scroll .source-badge { font-size: 11px; }
  .case-evidence > p, .case-scroll .case-evidence > p { font-size: 12px; line-height: 1.8; margin-top: 8px; }
  .original-action { margin-top: 9px; gap: 4px; }
  .original-action small, .wechat-action small { font-size: 11px; }
  .original-link { font-size: 12px; min-height: 44px; border-radius: 16px; padding: 7px 12px; }

  .page-flow { --page-hero-height: 0px !important; }
  .page-flow > .page-intro { min-height: 0; padding-block: 25px; }
  .page-flow .page-intro h1 { font-size: 29px; line-height: 1.5; margin: 10px 0; }
  .page-flow .page-intro > p { font-size: 13px; line-height: 1.85; }
  .page-flow .directory-meta { margin-top: 15px; font-size: 12px; gap: 8px 18px; }
  .page-flow[data-flow-theme=cases] { border-bottom: 1px solid #dce3eb; }
  .page-flow[data-flow-theme=cases] .page-intro > .eyebrow,
  .page-flow[data-flow-theme=cases] .directory-description { display: none; }
  .page-flow[data-flow-theme=cases] > .page-intro { padding-block: 22px; }
  .page-flow[data-flow-theme=cases] .page-intro h1 { margin-top: 0; font-size: 28px; }
  .page-flow[data-flow-theme=cases] .directory-scope { font-size: 12px; color: #687585; }
  .catalog-section { padding-top: 22px; }
  .catalog-section > .catalog-controls { margin: 0 0 22px; padding-block: 0 16px; }
  .has-refined-ui .catalog-section .region-panel, .has-refined-ui .mobile-region-return { display: none; }
  .has-refined-ui .catalog-section .case-panel { margin-top: 0; }
  .has-refined-ui .catalog-section .filter-more { display: none; }
  .filter-top { gap: 10px; }
  .search-field { border: 1px solid #dfe6ee; border-radius: 15px; padding: 7px 12px; min-height: 46px; background: #fafbfd; }
  .search-field input { font-size: 16px; }
  .mobile-filter-button { display: inline-flex; flex: 1; gap: 8px; align-items: center; min-height: 44px; font-size: 13px; border: 1px solid #e0e7ef; border-radius: 17px; background: #f6f8fb; padding: 9px 13px; color: var(--blue); }
  .mobile-filter-button small { color: #7a8594; font-size: 11px; margin-left: auto; }
  .search-submit { min-height: 44px; font-size: 13px; border-radius: 17px; padding: 8px 19px; }
  .case-panel .results-heading { display: flex; padding-bottom: 12px; }
  .case-panel .results-heading h2 { font-size: 23px; }
  .case-panel .results-heading .eyebrow { display: none; }
  .case-panel .results-heading > p { max-width: 125px; font-size: 11px; text-align: right; }
  .case-panel .active-summary:empty { display: none; }
  .filter-sheet { width: 100%; max-width: 100%; max-height: min(86dvh, 820px); margin: auto 0 0; border-radius: 25px 25px 0 0; }
  .filter-sheet .dialog-heading { position: sticky; top: 0; background: #f7f9fc; border-bottom: 1px solid #e3e9f0; z-index: 1; }
  .filter-sheet-body { padding: 20px; overflow-y: auto; }
  .filter-sheet-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .filter-sheet .select-field, .filter-sheet .advanced-filters label { display: flex; flex-direction: column; align-items: stretch; gap: 8px; flex: initial; font-size: 13px; padding: 0; border: 0; }
  .filter-sheet .select-field > span { display: block; }
  .filter-sheet select { width: 100%; max-width: none; min-height: 44px; border: 1px solid #dbe3ed; background: #fff; border-radius: 11px; padding: 9px; font-size: 16px; }
  .filter-sheet .advanced-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 19px; padding-top: 19px; border-top: 1px solid #e3e9f0; }
  .filter-sheet .advanced-filters .checkbox-field { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 36px; }
  .filter-sheet .topics-heading { margin-top: 24px; }
  .filter-sheet .topic-filters { gap: 8px; }
  .filter-sheet .topic-chip { font-size: 12px; min-height: 40px; border-radius: 15px; padding: 8px 12px; }
  .filter-sheet-footer { position: sticky; bottom: 0; background: #f7f9fc; padding: 15px 20px max(15px, env(safe-area-inset-bottom)); border-top: 1px solid #e3e9f0; }
  .filter-sheet-footer button { display: block; width: 100%; min-height: 46px; padding: 10px; border-radius: 18px; border: 0; background: var(--blue); color: #fff; }

  .detail { padding-top: 20px; }
  .detail-flow { padding: 21px 19px; margin-bottom: 20px; }
  .detail-flow .detail-title { font-size: 25px; line-height: 1.6; }
  .detail-original { padding: 15px; gap: 12px; margin-top: 19px; }
  .detail-original p { font-size: 12px; }
  .detail-original-buttons { width: auto; }
  .detail-original .primary-button { font-size: 13px; min-height: 44px; border-radius: 18px; }
  .detail-grid { margin-top: 0; padding-top: 22px; border-top: 0; }
  .detail-main section { padding-left: 0; margin-bottom: 35px; }
  .detail-main .section-number { position: static; float: left; display: inline; margin: 6px 12px 0 0; }
  .detail-main h2 { font-size: 22px; margin-bottom: 16px; }
  .detail-main .prose { font-size: 16px; line-height: 1.95; overflow-wrap: anywhere; }
  .detail-main .prose p { margin-bottom: 18px; }
  .reading-contents { display: block; margin-top: 20px; padding: 14px 0; border-block: 1px solid var(--line); font-size: 13px; color: #5b6d83; }
  .reading-contents summary { cursor: pointer; min-height: 28px; }
  .reading-contents nav { display: grid; gap: 4px; margin-top: 12px; }
  .reading-contents a { padding: 8px 4px; min-height: 40px; }
  .law-contents { max-height: none; }
  .global-controls input, .global-controls select, .law-search input { font-size: 16px; }
  #site-visitor-count { position: static !important; display: block; width: fit-content; margin: 0 20px 18px auto; white-space: normal !important; }
}
@media (prefers-reduced-motion: reduce) { .nav-selection, .home-shortcuts a, .hero-panel .hero-link, .site-menu, .site-menu nav > a { transition: none !important; } }
html[data-motion=reduce] { scroll-behavior: auto; }
html[data-motion=reduce] .nav-selection, html[data-motion=reduce] .home-shortcuts a,
html[data-motion=reduce] .hero-panel .hero-link, html[data-motion=reduce] .site-menu,
html[data-motion=reduce] .site-menu nav > a { transition: none; }
html[data-motion=reduce] .case-scroll .case-card.is-entering { animation: none; }