/* ==========================================================================
   来处 · Pardine（dineloc）· ui-map.css（owner map）
   --------------------------------------------------------------------------
   地图面板（#mapPane）、舞台上的浮件里面长什么样（#mapCallout / #mapTools /
   #mapLegend / #mapBanner / #mapStatus；它们的位置由 styles.css 定）、地方页、
   补细一点、「怎么读这张图」、印谱（#sealsPane）。

   ⚠⚠⚠ 颜色纪律（UPDATE 3）：这里一个颜色值都不写，只用 styles.css 的令牌。
     · 数据只用印章红一族的深浅（ADDENDUM-5 E15：无级，--ramp-1..5 / --wash-a-k / --hatch-line-k / --hatch-w-k 是锚点，
       每个次数的颜色由 globe.js 在锚点之间按 OKLab 插值，ui-map.js 经 CSSOM 写进 --fill-c / --hatch-* / --sea-a）；
     · 远近条只用墨色四阶（--band-1..4）；
     · 花青（--sea-ink）只出现在含食材的视图（全部、食材）的海与湖：账本里海的那一行、远近条的「海和湖」一段。
     · 浮件都是同一种纸面（--bg-elev + 1px --border + --shadow-sm），不透明，
       没有 backdrop-filter（家族铁律）。
   ⚠ 只用逻辑属性（ar fa he ur 真的从右往左）；字号 rem，发丝线 px。
   ⚠ 共用类（.seg .chip .kicker .zero .stat .facts .pill .sub-en .seal .hatch-bg
     .btn）不在这里重定义；这里只加自己的块，或在自己的块里给共用类补一个局部属性。
   ========================================================================== */

/* ==========================================================================
   1. 地图面板
   ========================================================================== */

.mapp {
  padding: 1.25rem max(var(--gutter), var(--safe-right)) 2.5rem max(var(--gutter), var(--safe-left));
}
.mapp__zero { padding-block: 2.5rem 1.5rem; }
.mapp__zerotext { margin: 0 auto; max-width: 22em; text-wrap: balance; }

/* ---- 头条：「尝过 23 处」数字排大（DESIGN §10.3 大数字）---- */
.mstats { margin-bottom: 1.25rem; }
.mstats__hero {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--text-dim);
}
.mstats__num,
.seals__num {
  font-size: clamp(2.75rem, 11vw, 4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--text);
  font-variant-numeric: lining-nums tabular-nums;
}
/* 桌面的面板只有 400 px 宽：按面板宽算，不按视口 */
@media (min-width: 900px) {
  .mstats__num, .seals__num { font-size: 3.25rem; }
}
.mstats__line {
  margin: .5rem 0 0;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--text-dim);
  font-variant-numeric: lining-nums tabular-nums;
}
.mstats__line--dim { margin-top: .125rem; font-size: .8125rem; color: var(--text-faint); }

/* ---- 图层分段 + 时间签 ---- */
.mctl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .625rem .75rem;
  margin-bottom: 1.75rem;
}
.mctl__ranges { display: flex; flex-wrap: wrap; gap: .125rem; }
/* 时间签：比分段更轻（没有凹槽），选中的那一枚与分段的选中同一种样子（纸面凸起），
   不用印章红：红只留给数据和一处界面强调，一行里两种「选中」会像两套控件 */
.mctl__range {
  min-height: 1.75rem;
  padding: .25rem .6875rem;
  border: 1px solid transparent;
  border-radius: .375rem;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: .8125rem;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease);
}
.mctl__range:hover { color: var(--text); }
.mctl__range[aria-pressed="true"] { color: var(--text); background: var(--bg-elev); border-color: var(--border); box-shadow: var(--shadow-sm); }
html[data-touch="on"] .mctl__range { min-height: 2.125rem; }
/* 住处筛选（ADDENDUM-2 C4）：时间签后面一枚安静的签「所有住处 ▾」，长得像一枚没选中的时间签；
   选了一处 = 和选中的时间签同一种样子，一眼看出此刻只看这一处。
   ADDENDUM-4 E14.4：它是一个按钮，点开的是我们自己的菜单（.mmenu，见下），不是系统的下拉。 */
.mctl__base {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  min-width: 0;
  max-inline-size: 12rem;
  min-height: 1.75rem;
  padding: .25rem .5rem .25rem .6875rem;
  border: 1px solid transparent;
  border-radius: .375rem;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: .8125rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease);
}
.mctl__base:hover,
.mctl__base[aria-expanded="true"] { color: var(--text); }
.mctl__base.is-on { color: var(--text); background: var(--bg-elev); border-color: var(--border); box-shadow: var(--shadow-sm); }
.mctl__baselabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mctl__caret,
[dir="rtl"] .mctl__caret { flex: none; color: var(--text-faint); transform: rotate(90deg); transition: transform 140ms var(--ease); }   /* 朝下：RTL 的镜像翻转在这里不适用 */
.mctl__base[aria-expanded="true"] .mctl__caret { transform: rotate(-90deg); }
html[data-touch="on"] .mctl__base { min-height: 2.125rem; }
@media (hover: none) { .mctl__base:hover { color: var(--text-dim); } .mctl__base.is-on:hover, .mctl__base[aria-expanded="true"] { color: var(--text); } }

/* 菜单（E14.4）：一张纸面小浮层，挂在签下面（JS 按签的位置写 top 与 inset-inline-*，面板里的内容坐标，随面板滚动）。
   行 = 家族的行：左边一格留给墨色的勾（只有此刻选的那一行有），地名衬线、副行小字（日期跨度 · 次数）。
   进出按 E8：基础样式 = 开着的终态；hidden 摘掉之后先是「关着」的起点（透明、上移 .25rem、.985），下一帧 is-open 过渡到终态；
   收起 is-closing = 过渡到终点（出场缓动），演完才 hidden。 */
#mapPane { position: relative; }
.mapp-host { position: relative; isolation: isolate; }
#sealsPane { isolation: isolate; }
.mmenu {
  position: absolute;
  z-index: 30;
  display: grid;
  gap: 1px;
  min-inline-size: 13rem;
  max-inline-size: min(20rem, calc(100% - 2 * var(--gutter)));
  /* 面板矮（手机上地图下面那一截）时 JS 给一个最大高度：行多了就在菜单里面滚，不把面板一起带着滚 */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .3125rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(-.25rem) scale(.985);
  transform-origin: top left;
  transition:
    opacity var(--t-out, 170ms) var(--ease-exit, cubic-bezier(.55, 0, .85, .35)),
    transform var(--t-out, 170ms) var(--ease-exit, cubic-bezier(.55, 0, .85, .35));
}
[dir="rtl"] .mmenu { transform-origin: top right; }
.mmenu--end { transform-origin: top right; }
[dir="rtl"] .mmenu--end { transform-origin: top left; }
.mmenu.is-open {
  opacity: 1;
  transform: none;
  transition-duration: var(--t-in, 220ms);
  transition-timing-function: var(--ease, cubic-bezier(.22, .61, .36, 1));
}
.mmenu__item {
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  align-items: center;
  column-gap: .5rem;
  inline-size: 100%;
  min-height: 2.5rem;
  padding: .375rem .75rem .375rem .5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background 140ms var(--ease);
}
.mmenu__item:hover,
.mmenu__item:focus-visible { background: var(--bg-elev2); }
/* E14.5：环只在键盘导航时出现（壳层的 html[data-focus="key"]）。菜单行是 tabindex=-1 的漫游焦点，全局那条
   「程序聚焦的容器不画环」会把它压掉：这里按全局同一个环（2px --accent）补回来，只把它收进行里（offset 负值） */
:where(html[data-focus="key"]) .mmenu__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: none) { .mmenu__item:hover { background: transparent; } }
html[data-touch="on"] .mmenu__item { min-height: 2.75rem; }
/* 勾：墨色（--text），不用印章红（红只留给数据）；没选的行留出同样宽的一格，地名左边对齐 */
.mmenu__check { display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.mmenu__text { display: grid; min-width: 0; row-gap: .0625rem; }
.mmenu__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.3;
}
.mmenu__item[aria-checked="true"] .mmenu__name { font-weight: 600; }
.mmenu__meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .75rem;
  line-height: 1.35;
  color: var(--text-faint);
  font-variant-numeric: lining-nums tabular-nums;
}
@media (hover: none) { .mctl__range:hover { color: var(--text-dim); } .mctl__range[aria-pressed="true"]:hover { color: var(--text); } }

/* 面板里的小标题：共用 .kicker 是 inline-flex，这里要它独占一行 */
.bands__title,
.ledger__title,
.placesheet__sec > .kicker,
.seals__sec > .kicker { display: flex; margin-bottom: .75rem; }

/* ---- 远近条（DESIGN §9）：墨色四阶按原子数堆叠，段与段之间留 2px 纸缝 ---- */
.bands { margin-bottom: 2rem; }
.bands__bar {
  display: flex;
  gap: 2px;
  height: .5rem;
  border-radius: 2px;
  overflow: hidden;
}
.bands__seg { flex: 1 1 0; min-inline-size: 3px; }
.bands__seg--local { background: var(--band-1); }
.bands__seg--country { background: var(--band-2); }
.bands__seg--continent { background: var(--band-3); }
.bands__seg--far { background: var(--band-4); }
.bands__seg--sea { background: var(--sea-ink); }
/* 「可能就是本地」：本国他处里组含家、或整个家所在国的那部分，用同色 19° 斜线（虚的同一种语言） */
.bands__seg--maybe,
.bands__sw--withmaybe {
  background-color: color-mix(in srgb, var(--band-2) 22%, transparent);
  background-image: repeating-linear-gradient(calc(90deg + var(--tilt)), var(--band-2) 0 1px, transparent 1px 4.5px);
}
.bands__keys {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem 1.125rem;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .75rem;
  line-height: 1.3;
  color: var(--text-dim);
}
.bands__key { display: inline-flex; align-items: center; gap: .375rem; }
.bands__sw { flex: none; width: .625rem; height: .625rem; border-radius: 2px; }
.bands__sw--local { background: var(--band-1); }
.bands__sw--country { background: var(--band-2); }
.bands__sw--continent { background: var(--band-3); }
.bands__sw--far { background: var(--band-4); }
.bands__sw--sea { background: var(--sea-ink); }
/* 本国他处的小样：左半实、右半斜线，和条上那两段一一对应 */
.bands__sw--withmaybe {
  background-image:
    linear-gradient(to right, var(--band-2) 50%, transparent 50%),
    repeating-linear-gradient(calc(90deg + var(--tilt)), var(--band-2) 0 1px, transparent 1px 3px);
}
[dir="rtl"] .bands__sw--withmaybe {
  background-image:
    linear-gradient(to left, var(--band-2) 50%, transparent 50%),
    repeating-linear-gradient(calc(90deg + var(--tilt)), var(--band-2) 0 1px, transparent 1px 3px);
}
.bands__val { color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
.bands__local {
  margin: 1rem 0 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
  font-variant-numeric: lining-nums tabular-nums;
}
.bands__note { margin: .25rem 0 0; font-size: .75rem; line-height: 1.45; color: var(--text-faint); }
.bands__known { margin: .625rem 0 0; font-size: .8125rem; line-height: 1.45; color: var(--text-dim); font-variant-numeric: lining-nums tabular-nums; }
/* 没设家：一句话 + 唯一能用的动作，虚线框表示「这里本来有一块，还缺一个前提」 */
.bands__nohome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem .75rem .75rem .875rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-card);
}
.bands__nohometext { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--text-dim); }

/* ---- 食材的距离（只在食材视图）---- */
.mdist { display: grid; justify-items: start; gap: .3125rem; margin: -1rem 0 2rem; }
.mdist__line {
  margin: 0;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--text);
  font-variant-numeric: lining-nums tabular-nums;
}
.mdist__far {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: .2em;
}
.mdist__far:hover { text-decoration-color: var(--text-faint); }
.mdist__line--dim { font-size: .75rem; color: var(--text-faint); }

/* ---- 账本：地图的列表等价物 ---- */
.ledger__list { list-style: none; margin: 0 -.5rem; padding: 0; }
.ledger__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: .75rem;
  width: 100%;
  min-height: 3rem;
  padding: .5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background 140ms var(--ease);
}
button.ledger__row:hover { background: var(--bg-elev2); }
@media (hover: none) { button.ledger__row:hover { background: transparent; } }
.ledger__row--unclear { cursor: default; }
.ledger__row--unclear .ledger__name { color: var(--text-dim); font-weight: 400; }
.ledger__main { display: flex; flex-direction: column; gap: .4375rem; min-width: 0; }
.ledger__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; min-width: 0; }
.ledger__name {
  min-width: 0;
  font-family: var(--font-serif);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.3;
  word-break: keep-all;          /* 「黑龙江、吉林、辽宁之一」只在「、」处折 */
  overflow-wrap: anywhere;
}
.ledger__sub { min-width: 0; }
/* 非中文界面里中国、港澳台地名下的中文副名：衬线正体（不用 .sub-en 的斜体），颜色同副名 */
.m-subzh { font-family: var(--font-serif); font-style: normal; font-size: .8125rem; line-height: 1.4; color: var(--text-faint); }
.ledger__kind { font-size: .75rem; line-height: 1.3; color: var(--text-faint); }
.ledger__n {
  /* 两个数字宽 = Newsreader 600 的「0」0.611em × 2。⚠ 不用 ch：ch 取第一个可用字体的「0」，那是没有字形的支柱字体
     （styles.css 文件头 −2），WebKit 会退回 0.5em（两个数字只剩 16px） */
  min-width: 1.222em;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-align: end;
  font-variant-numeric: lining-nums tabular-nums;
}
/* 细条：长度 ∝ 次数（JS 写 inline-size），颜色 = 那一处在地图上的深浅（ADDENDUM-5 E15：JS 按深度写 --fill-c）。
   ⚠ 只写 background-color，不写 background 简写：简写会把 .hatch-bg 的斜线（background-image）清掉 */
.ledger__bar { display: block; height: 5px; }
.ledger__fill { display: block; height: 100%; border-radius: 1px; background-color: var(--fill-c, var(--ramp-3)); }
/* 虚的行：同一个深度的淡晕 + 19° 斜线 = 共用的 .hatch-bg（styles.css）；淡晕 / 线色 / 线宽由 ui-map.js 从 DLGlobe.inks(d)
   写进 --hatch-wash / --hatch-c / --hatch-w（与 globe.js、图例小样同一支笔），这里不另写一份。
   ⚠ 这里只把底色交还给 --hatch-wash（.ledger__fill 的 background-color 会盖掉 .hatch-bg 的那一句）。 */
/* 海（全部、食材）：图上是花青水纹，透明度随深度（--sea-a，JS 写），账本条用同一种墨 */
.ledger__fill--sea { --fill-c: color-mix(in srgb, var(--sea-ink) calc(var(--sea-a, .6) * 100%), transparent); }
.ledger__fill.ledger__fill--hatch { height: 6px; margin-block: -.5px; background-color: var(--hatch-wash); }
/* E16.9.7 一片里混着「整片都算」与「这一片之中」：一根条两段（先实色、再斜线），宽度按次数分，同一个深度 */
.ledger__fill.ledger__fill--mix { display: flex; height: 6px; margin-block: -.5px; background-color: transparent; overflow: hidden; }
.ledger__seg { display: block; flex: 0 1 0; min-inline-size: 0; height: 100%; }
.ledger__seg--each { background-color: var(--fill-c, var(--ramp-3)); }
.ledger__seg--open { background-color: var(--hatch-wash); }

/* ==========================================================================
   2. 舞台上的浮件（位置在 styles.css；这里只管里面）
   同一种纸面：--bg-elev、1px --border、--shadow-sm，不透明
   ========================================================================== */

.mswatch { flex: none; display: block; }

/* ---- 工具：[球|平] + ⤢ ---- */
.mtools { display: flex; align-items: center; gap: .375rem; }
.mtools__seg {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  box-shadow: var(--shadow-sm);
}
.mtools__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: .375rem;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease), transform 90ms var(--ease);
}
.mtools__btn:hover { color: var(--text); }
.mtools__btn:active { transform: scale(.94); }
.mtools__seg .mtools__btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.mtools__full {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  box-shadow: var(--shadow-sm);
}
html[data-touch="on"] .mtools__btn { width: 2.375rem; height: 2.375rem; }
html[data-touch="on"] .mtools__full { width: 2.625rem; height: 2.625rem; }
@media (hover: none) { .mtools__btn:hover { color: var(--text-dim); } }
/* 全屏开关只属于手机布局 */
@media (min-width: 900px) { .mtools__full { display: none; } }

/* ---- 说明条 ---- */
.mcallout { display: flex; max-width: 28rem; }   /* 桌面的地图栏很宽：说明条是一张签，不是一条横幅 */
.mcallout__btn {
  display: flex;
  align-items: center;
  gap: .625rem;
  width: 100%;
  min-height: 2.75rem;
  padding: .375rem .625rem .375rem .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color 140ms var(--ease), transform 90ms var(--ease);
}
.mcallout__btn:hover { border-color: var(--text-faint); }
.mcallout__btn:active { transform: scale(.985); }
@media (hover: none) { .mcallout__btn:hover { border-color: var(--border); } }
/* 一行：名字不折行，后半句在窄屏上省略号收尾（说明条不许长高压到下面的工具） */
.mcallout__txt { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; white-space: nowrap; }
.mcallout__row { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
/* ADDENDUM-5 E20.3.6：第二行小字说另一路（「也记过这里的食材：…」「食材 · …」；墨色，不用印章红；次数只在第一行） */
.mcallout__txt--two { gap: .0625rem; }
.mcallout__ingr {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .75rem;
  line-height: 1.35;
  color: var(--text-dim);
}
.mcallout__name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
.mcallout__line {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .8125rem;
  color: var(--text-dim);
  font-variant-numeric: lining-nums tabular-nums;
}
.mcallout__chev { color: var(--text-faint); }
/* 选取模式：名字 + 两个确认按钮 */
.mcallout__pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  width: 100%;
  padding: .5rem .5rem .5rem .625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  box-shadow: var(--shadow-sm);
}
.mcallout__phead { flex: 1 1 8rem; display: flex; align-items: center; gap: .5rem; min-width: 0; }
.mcallout__acts { display: flex; flex-wrap: wrap; gap: .375rem; }

/* E8：说明条、选取横幅、状态签的进出（基础样式 = 终态；is-enter 是无过渡的起点，is-leaving 是出场的终点） */
.mcallout,
.mpick,
.mstatus {
  transition: opacity var(--t-in, 220ms) var(--ease), transform var(--t-in, 220ms) var(--ease);
}
/* 开着时换了一处：新内容从 40% 淡到实（不从 0 起：那是一闪，不是换） */
.mcallout.is-swap { opacity: .4; transition: none; }
.mcallout.is-enter,
.mpick.is-enter,
.mstatus.is-enter { opacity: 0; transform: translateY(-.375rem); transition: none; }
.mcallout.is-leaving,
.mpick.is-leaving,
.mstatus.is-leaving {
  opacity: 0;
  transform: translateY(-.25rem);
  transition-duration: var(--t-out, 180ms);
  transition-timing-function: var(--ease-exit, cubic-bezier(.55, 0, .85, .35));
}

/* ---- 选取横幅 ---- */
.mpick {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-height: 2.75rem;
  padding: .25rem .375rem .25rem .875rem;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-size: .875rem;
  color: var(--text);
}
.mpick > .ico { color: var(--accent); }
.mpick__text { flex: 1 1 auto; min-width: 0; font-weight: 600; }
/* 横幅在时：说明条让到它下面，工具先收起（选一处的时候用不着换投影）。
   E8：说明条一出现，工具就往下让（styles.css 定的 top: 4rem）—— 让是一段滑动，不是一跳；说明条退场的那一刻（is-leaving）
   工具就开始滑回去，与说明条的淡出同时。横幅来去时说明条同样滑，工具淡出 / 淡回，不 display:none 地一跳。 */
.stage__tools,
.stage__callout { transition: top var(--t-in, 220ms) var(--ease); }
.stage__callout:has(> .is-leaving) ~ .stage__tools {
  top: .625rem;
  transition-duration: var(--t-out, 170ms);
  transition-timing-function: var(--ease-exit, cubic-bezier(.55, 0, .85, .35));
}
.stage:has(> .stage__banner:not([hidden])) > .stage__callout { top: 3.375rem; }
.stage > .stage__tools { transition: top var(--t-in, 220ms) var(--ease), opacity var(--t-in, 220ms) var(--ease), visibility 0s; }
.stage:has(> .stage__banner:not([hidden])) > .stage__tools {
  opacity: 0;
  visibility: hidden;
  transition:
    top var(--t-out, 170ms) var(--ease-exit, cubic-bezier(.55, 0, .85, .35)),
    opacity var(--t-out, 170ms) var(--ease-exit, cubic-bezier(.55, 0, .85, .35)),
    visibility 0s var(--t-out, 170ms);
}

/* ---- 状态行 ---- */
.mstatus {
  display: inline-block;
  padding: .3125rem .75rem;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--bg-elev);
  box-shadow: var(--shadow-sm);
  font-size: .75rem;
  line-height: 1.4;
  color: var(--text-dim);
}
.mstatus--offline { max-width: 17rem; border-radius: var(--radius-sm); padding-block: .4375rem; }

/* ---- 图例（DESIGN §7.7）：收起是胶囊，展开是一张卡 ----
   E8：胶囊与卡片叠在同一格里、底边对齐（舞台上的图例是贴着地图左下角的），卡片从胶囊的位置向上长出来：
   开 = 卡片 0fr → 1fr（--t-grow / --ease）+ 内容淡入，胶囊同时淡出（--t-out / --ease-exit），淡完才 hidden；
   关 = 反过来，卡片收起用出场缓动。基础样式 = 终态。 */
.mlegend { display: grid; justify-items: start; align-items: end; max-width: 100%; }
.mlegend > .mlegend__pill,
.mlegend > .mlegend__card { grid-area: 1 / 1; }
.mlegend__pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  max-width: 100%;
  min-height: 2rem;
  padding: .3125rem .4375rem .3125rem .625rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--bg-elev);
  box-shadow: var(--shadow-sm);
  color: var(--text-dim);
  font: inherit;
  font-size: .75rem;
  line-height: 1.3;
  text-align: start;
  cursor: pointer;
  transition:
    border-color 140ms var(--ease),
    transform 90ms var(--ease),
    opacity var(--t-in, 220ms) var(--ease);
}
.mlegend__pill.is-away {
  opacity: 0;
  transition:
    border-color 140ms var(--ease),
    transform 90ms var(--ease),
    opacity var(--t-out, 170ms) var(--ease-exit, cubic-bezier(.55, 0, .85, .35));
}
.mlegend__pill:hover { border-color: var(--text-faint); }
.mlegend__pill:active { transform: scale(.985); }
@media (hover: none) { .mlegend__pill:hover { border-color: var(--border); } }
.mlegend__mini { flex: none; display: inline-flex; }
.mlegend__words { flex: 0 1 auto; min-width: 0; display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: .5rem; row-gap: .125rem; }
.mlegend__short { white-space: nowrap; }
.mlegend__hpart { display: inline-flex; align-items: center; gap: .375rem; }
.mlegend__info { flex: none; display: inline-flex; color: var(--text-faint); }

/* 展开：grid-template-rows 手风琴。基础样式 = 开着的终态 */
.mlegend__card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 1fr;
  inline-size: min(18rem, calc(100vw - 2.5rem));
  max-inline-size: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  box-shadow: var(--shadow-sm);
  transition:
    grid-template-rows var(--t-grow, 280ms) var(--ease),
    opacity var(--t-in, 220ms) var(--ease);
}
.mlegend__card.is-shut {
  grid-template-rows: 0fr;
  opacity: 0;
  transition-duration: var(--t-out, 170ms);
  transition-timing-function: var(--ease-exit, cubic-bezier(.55, 0, .85, .35));
}
/* ⚠ 被折起来的这一层不能有内边距（内边距压不到 0），边距放在它的孩子上 */
.mlegend__inner { min-height: 0; overflow: hidden; }
/* 内容变了、卡片 / 那一节原地换内容：高度走 growBox（E14.2），期间不许内容撑出去 */
.mlegend__card.is-growing, .mlegend__card.is-swapping,
.mlegend--pane.is-growing, .mlegend--pane.is-swapping { overflow: hidden; transition: height var(--t-grow, 280ms) var(--ease); }
.mlegend__head { display: flex; align-items: flex-start; gap: .5rem; padding: .625rem .375rem .5rem .6875rem; }

/* ---- 坐标轴（ADDENDUM-4 E14.3；ADDENDUM-5 E15.5 无级）----
   一根（或两根：实色 + 同一根轴上的斜线）连续的条，下面一组刻度与数字：「1」在起点、此刻最多的次数 M 在 depth(M) 处、
   中间至多两个整齐的数（位置由 ui-map.js 按同一个 depth 函数算，--at 是百分比）；单位写在轴的末端。
   列：[条与数字 --axis-w] [单位]。数字以刻度为中心；第 1 个左对齐条的起点，末端对齐的那一个（.is-last）尾巴贴着刻度。
   等宽数字（tabular），LTR / RTL 都用逻辑属性，数字的位移在 RTL 里反过来。条由 globe.js 画（与地图同一套颜料）。 */
.maxis {
  position: relative;            /* 换了数据时旧的那根轴（.maxis--ghost）叠在新的上面淡出 */
  flex: 0 1 auto;
  display: grid;
  grid-template-columns: var(--axis-w, 170px) auto;
  grid-template-rows: auto auto;
  column-gap: .375rem;
  min-width: 0;
}
.maxis__bars { grid-column: 1; grid-row: 1; display: grid; row-gap: 2px; }
.maxis__bar { display: block; }
.maxis__nums {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  block-size: calc(.6875rem + .5rem);
}
.maxis__tick {
  position: absolute;
  top: 0;
  inset-inline-start: calc(var(--at, 0) * 1%);
  inline-size: 1px;
  block-size: .25rem;
  margin-inline-start: -.5px;
  background: var(--text-faint);
  opacity: .7;
}
.maxis__tick.is-first { margin-inline-start: 0; }
.maxis__tick.is-last { margin-inline-start: -1px; }          /* 末端的刻度贴着条的内侧 */
.maxis__num {
  position: absolute;
  top: .375rem;
  inset-inline-start: calc(var(--at, 0) * 1%);
  transform: translateX(-50%);
  /* E7：行高 1 的小字，系统界面字体的行盒中线比墨心高 --ink-ui：底边垫 2 × 这个量，框的中线落回墨心
     （数字与末端的单位用同一条规矩，两者的墨心在同一条线上） */
  padding-bottom: calc(2 * var(--ink-ui, .028em));
  font-size: .6875rem;
  line-height: 1;
  color: var(--text-dim);
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
[dir="rtl"] .maxis__num { transform: translateX(50%); }
.maxis__num.is-first,
[dir="rtl"] .maxis__num.is-first { transform: none; }
/* 此刻最多的次数到了顶（或居中会越出末端）：数字的尾巴贴着刻度 */
.maxis__num.is-last { transform: translateX(-100%); }
[dir="rtl"] .maxis__num.is-last { transform: translateX(100%); }
.maxis__unit {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin-top: .375rem;
  padding-bottom: calc(2 * var(--ink-ui, .028em));
  font-size: .6875rem;
  line-height: 1;
  color: var(--text-faint);
  white-space: nowrap;
}
/* E15.5.6 换了数据：整根轴交叉淡化（--t-view）。新的内容从 is-enter 淡入，旧的那根当影子叠在上面按出场缓动淡出 */
.maxis > * { transition: opacity var(--t-view, 140ms) var(--ease); }
.maxis.is-enter > :not(.maxis--ghost) { opacity: 0; transition: none; }
.maxis--ghost {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  pointer-events: none;
  transition: opacity var(--t-view, 140ms) var(--ease-exit, cubic-bezier(.55, 0, .85, .35));
}
.maxis--ghost.is-leaving { opacity: 0; }
.maxis--explain .maxis__num,
.maxis--explain .maxis__unit { font-size: .75rem; }
.maxis--explain .maxis__nums { block-size: calc(.75rem + .5rem); }

.mlegend__close {
  flex: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: -.375rem 0 0 auto;
  margin-inline: auto 0;
  padding: 0;
  border: 0;
  border-radius: .375rem;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.mlegend__close:hover { background: var(--bg-elev2); color: var(--text); }
html[data-touch="on"] .mlegend__close { width: 2.25rem; height: 2.25rem; margin-top: -.625rem; }
.mlegend__rows {
  display: grid;
  gap: .3125rem;
  margin: 0;
  padding: .3125rem .6875rem .125rem;
  list-style: none;
  border-top: 1px solid var(--border-soft);
}
.mlegend__row { display: flex; align-items: center; gap: .5625rem; font-size: .75rem; line-height: 1.35; color: var(--text); }
.mlegend__row:first-child { margin-top: .25rem; }
.mlegend__foot { display: grid; justify-items: start; gap: .125rem; padding: .3125rem .6875rem .375rem; }
.mlegend__note { margin: 0; font-size: .6875rem; line-height: 1.45; color: var(--text-faint); }
.mlegend__lite { display: flex; flex-wrap: wrap; align-items: center; gap: .125rem .5rem; }
.mlegend__act,
.mlegend__how {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
}
.mlegend__act:hover, .mlegend__how:hover { color: var(--accent-strong); }
.mlegend__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: .375rem;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
}
html[data-touch="on"] .mlegend__x { width: 2.25rem; height: 2.25rem; }
html[data-touch="on"] .mlegend__how, html[data-touch="on"] .mlegend__act { min-height: 2.25rem; }

/* 手机（E5.1）：展开的图例是面板里的一节，从不浮在地球上。与「怎么读这张图」的色阶框同一种纸面：
   细框、面板的纸色，不是浮起来的卡片（没有阴影）。紧跟在图层 / 时间签下面。 */
.mlegend--pane {
  display: grid;
  grid-template-rows: 1fr;
  align-items: stretch;
  justify-items: stretch;           /* .mlegend 在舞台上是左对齐的一叠（胶囊 / 卡片）；面板里这一节要铺满一行 */
  margin: -.75rem 0 1.75rem;
  scroll-margin-block: .75rem;
  transition:
    grid-template-rows var(--t-grow, 280ms) var(--ease),
    margin var(--t-grow, 280ms) var(--ease),
    opacity 180ms var(--ease);
}
/* E8：收起 = 高度到 0、边距归零（和没有这一节时一样的间距）、内容淡出，用出场缓动 */
.mlegend--pane.is-shut {
  grid-template-rows: 0fr;
  margin-block: 0;
  opacity: 0;
  transition-timing-function: var(--ease-exit, cubic-bezier(.55, 0, .85, .35));
}
.mlegend__panebox { border: 1px solid var(--border-soft); border-radius: var(--radius-card); background: var(--bg); }
.mlegend--pane .mlegend__head { padding: .75rem .5rem .5rem .875rem; }
.mlegend--pane .mlegend__rows { padding-inline: .875rem; }
.mlegend--pane .mlegend__foot { padding: .375rem .875rem .5rem; }

/* 有方向的小箭头在 RTL 下翻转 */
[dir="rtl"] .m-chev { transform: scaleX(-1); }

/* ==========================================================================
   3. 地方页（DESIGN §11.4）
   ========================================================================== */

/* 地方页自己的标题区就是标题（56 px 印 + 2rem 衬线）：表单头上那行小标题只留给读屏，
   ✕ 靠行尾。⚠ 只作用于装着 .placesheet 的那一次，别的表单不受影响。 */
.sheet__panel:has(.placesheet) .sheet__title,
.ppage:has(.placesheet) .ppage__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sheet__panel:has(.placesheet) .sheet__close,
.ppage:has(.placesheet) .ppage__close { margin-inline-start: auto; }

/* 手机上从地图页打开：只盖住下半面板，地图留在上面、飞到那一处（DESIGN §2.2），遮罩也放轻 */
@media (max-width: 719px) {
  html:not([data-mapfull]) #app[data-view="map"] ~ .sheet .sheet__panel:has(.placesheet) {
    max-height: max(50%, calc(100% - var(--safe-top) - var(--topbar-h) - var(--map-h) + .75rem));
  }
  html:not([data-mapfull]) #app[data-view="map"] ~ .sheet.is-open:has(.placesheet) .sheet__backdrop { opacity: .45; }
}

/* 桌面：地方页停在 panel 里（DLUI.openPanelPage，#panelPage.ppage，ADDENDUM-3 §G / E3），同样只留读屏标题。 */
/* ⚠ 不用负边距把标题区提进表单头：.sheet__body 是滚动容器，提上去的那截会被它裁掉 */
.placesheet__hero { display: flex; align-items: flex-start; gap: 1rem; margin: 0 0 1rem; }
.placesheet__htxt { min-width: 0; padding-top: .1875rem; }
.placesheet__name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  /* 中文只在「、」这类标点处折（验过：「黑龙江、吉 / 林、辽宁之一」把吉林拆开了）；实在放不下才任意处折 */
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.placesheet__sub { margin: .1875rem 0 0; }
.placesheet__where { margin: .25rem 0 0; font-size: .8125rem; line-height: 1.4; color: var(--text-dim); }
.placesheet__home { gap: .3125rem; margin: .5rem 0 0; }
.placesheet__home > .ico { color: var(--text-faint); }
.placesheet__facts {
  display: grid;
  gap: .3125rem;
  padding-block: .875rem;
  border-block: 1px solid var(--border-soft);
}
.placesheet__counts {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
  font-variant-numeric: lining-nums tabular-nums;
}
.placesheet__counts--none { color: var(--text-dim); }
.placesheet__line { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--text-dim); font-variant-numeric: lining-nums tabular-nums; }
.placesheet__line--dim { color: var(--text-faint); }
.placesheet__sec { margin-top: 1.375rem; }
.placesheet__foods { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.placesheet__food {
  display: inline-flex;
  align-items: baseline;
  gap: .375rem;
  max-width: 100%;
  /* 上下对称（总高不变）：原来的 .25 / .3125 让字的墨心比签的中线高 0.9px（Blink，汉字 −6%），
     行盒已经是支柱字体定的 87.5 / 12.5（styles.css 文件头 −2），汉字与拉丁大写的墨心都在它的正中附近，不需要再偏 */
  padding: .28125rem .6875rem;
  border: 1px solid var(--border);
  border-radius: 99px;
  font-family: var(--font-serif);
  font-size: .9375rem;
  line-height: 1.3;
}
.placesheet__foodname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.placesheet__foodn { flex: none; font-family: var(--font-ui); font-size: .75rem; color: var(--text-faint); font-variant-numeric: lining-nums tabular-nums; }
.placesheet__regions { margin-top: -.25rem; }
.placesheet__refine { display: grid; justify-items: start; gap: .625rem; }
/* E20.3.6「也记过这里的食材：…」：「常吃」签的下面一行字 */
.placesheet__also { margin-top: .5rem; }
.placesheet__acts { display: flex; margin-top: 1.625rem; }
.placesheet__acts > .btn { flex: 1 1 auto; }

/* ---- 补细一点 ---- */
.refinesheet__hint { margin: 0 0 1.125rem; font-size: .875rem; line-height: 1.55; color: var(--text-dim); }
.refinesheet__group + .refinesheet__group { margin-top: 1.25rem; padding-top: 1.125rem; border-top: 1px solid var(--border-soft); }
.refinesheet__title {
  margin: 0 0 .75rem;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  font-variant-numeric: lining-nums tabular-nums;
}
.refinesheet__cands { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
/* 候选的名字用共用的 .chip__label（省略号、下伸部的垫）；这里不另写一份 */
.refinesheet__cand:disabled { opacity: .42; cursor: default; }
/* ADDENDUM-5 E16.8.1：「都算」签在最前，后面一道发丝竖线（与此刻卡「哪一处？」一行的 .choose__sep 同一种样子） */
.refinesheet__sep {
  flex: none;
  inline-size: 1px;
  block-size: 1.375rem;
  margin-inline: .125rem;
  background: var(--border);
}

/* ---- 怎么读这张图 ---- */
.explainsheet { display: grid; gap: 1rem; font-size: .9375rem; line-height: 1.65; color: var(--text); }
.explainsheet p { margin: 0; }
.explainsheet__p--sw { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .875rem; }
.explainsheet__p--sw > .mswatch { margin-top: .3125rem; border-radius: 2px; }
.explainsheet__steps {
  display: grid;
  justify-items: start;
  gap: .625rem;
  padding: .875rem 1rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  background: var(--bg);
}
/* 轴与它下面的两句说明之间多留一点：数字那一行不贴着说明的字 */
.explainsheet__steps > .maxis { margin-bottom: .125rem; }
.explainsheet__cap { font-size: .8125rem; line-height: 1.5; color: var(--text-dim); }
.explainsheet__foot { padding-top: .875rem; border-top: 1px solid var(--border-soft); font-size: .75rem; line-height: 1.55; color: var(--text-faint); }

/* ==========================================================================
   4. 印谱（#sealsPane）
   ========================================================================== */

.seals {
  padding: 1.5rem max(var(--gutter), var(--safe-right)) 3rem max(var(--gutter), var(--safe-left));
}
.seals__zero { padding-block: 3rem 1.5rem; }
.seals__zero p { margin: 0 auto; max-width: 22em; text-wrap: balance; }
.seals__hero { margin-bottom: 1.5rem; }
.seals__big {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--text-dim);
}
.seals__line {
  margin: .625rem 0 0;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--text-dim);
  font-variant-numeric: lining-nums tabular-nums;
}

/* 2×2 事实格：数字排在句子里放大（「本月新尝 3 处」），句子本身是小字 */
.seals__facts { margin-bottom: 2rem; }
.sfact { display: flex; flex-direction: column; justify-content: space-between; gap: .375rem; }
.sfact__text {
  margin: 0;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}
.sfact__num {
  margin-inline: .06em;
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--text);
  font-variant-numeric: lining-nums tabular-nums;
}
.sfact__sub { margin: 0; font-size: .75rem; line-height: 1.45; color: var(--text-faint); font-variant-numeric: lining-nums tabular-nums; }
.sfact--nohome { justify-content: flex-start; align-items: flex-start; gap: .625rem; }
.sfact--nohome .sfact__sub { color: var(--text-dim); }

.seals__sec { margin-bottom: 2rem; }

/* 最近的初尝：横向一行，印 + 地名 + 日期 */
.srecent {
  display: flex;
  gap: .5rem;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0 var(--gutter) .25rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.srecent::-webkit-scrollbar { display: none; }
.srecent__item { flex: none; scroll-snap-align: start; }
.srecent__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .375rem;
  width: 5rem;
  padding: .5rem .25rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: background 140ms var(--ease);
}
.srecent__btn:hover { background: var(--bg-elev2); }
@media (hover: none) { .srecent__btn:hover { background: none; } }
.srecent__btn > .seal { margin-bottom: .125rem; }
.srecent__name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25;
}
.srecent__date { font-size: .6875rem; line-height: 1.3; color: var(--text-faint); font-variant-numeric: lining-nums tabular-nums; }

/* 按国家排的印谱 */
.sbook { display: grid; gap: 1.75rem; }
.sbook__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .625rem;
  margin-bottom: .875rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border-soft);
}
.sbook__name { margin: 0; font-family: var(--font-serif); font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.sbook__home { align-self: center; }
.sbook__end { display: inline-flex; align-items: center; gap: .625rem; margin-inline-start: auto; }
.sbook__prog {
  font-family: var(--font-serif);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--text-dim);
  font-variant-numeric: lining-nums tabular-nums;
}
.sbook__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
  gap: .5rem .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sbook__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4375rem;
  width: 100%;
  padding: .375rem .125rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: center;
}
button.sbook__cell { cursor: pointer; transition: background 140ms var(--ease); }
button.sbook__cell:hover { background: var(--bg-elev2); }
@media (hover: none) { button.sbook__cell:hover { background: none; } }
/* 释文：印面只有一两个字，下面写出地名 */
.sbook__cap {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-family: var(--font-serif);
  font-size: .75rem;
  line-height: 1.25;
  color: var(--text-dim);
  overflow-wrap: break-word;
}
.sbook__item--untasted .sbook__cap { color: var(--text-faint); opacity: .75; }
/* 全境记的次数：一枚朱文小印（= 一片：全境，或几处之一，ADDENDUM-3 E2 的措辞决定）+ 次数的签「全境 N 次」，排在国家标题行的行尾 */
.sbook__rough {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: 1.75rem;
  padding: .1875rem .375rem .1875rem .3125rem;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: .75rem;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 140ms var(--ease);
}
.sbook__rough:hover { border-color: var(--text-faint); color: var(--text); }
.sbook__rough > .ico { color: var(--text-faint); }
@media (hover: none) { .sbook__rough:hover { border-color: var(--border); color: var(--text-dim); } }
html[data-touch="on"] .sbook__rough { min-height: 2.25rem; }
/* 只有整国记录的国家：没有印格，标题行就是全部，不画那条分隔线 */
.sbook__country--rough .sbook__head { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

/* ==========================================================================
   5. 进出与焦点（ADDENDUM-3 E8 · ADDENDUM-4 E14.2 / E14.5）
   时长与缓动只读 styles.css :root 的时间表（--t-in / --t-out / --t-grow / --ease / --ease-exit）；
   基础样式 = 终态，减少动态效果时全局规则把时长压到 ≈ 0，终态照样对。
   ========================================================================== */

/* ---- 手机的全屏开关（⤢）：槽的高度过渡、面板淡出 / 淡入（ui-map.js toggleFull）---- */
.view--map .mapslot.is-growing { transition: height var(--t-grow, 280ms) var(--ease); }
#mapPane { transition: opacity var(--t-in, 220ms) var(--ease); }
#mapPane.is-folding {
  opacity: 0;
  transition: opacity var(--t-out, 170ms) var(--ease-exit, cubic-bezier(.55, 0, .85, .35));
}

/* ---- 列表的插入、删除、换名次（ui-map.js morphInto：账本的行、印谱的印、地方页里尝过的省）----
   · 挪位：JS 先用 transform 把它钉回旧位置（is-flip 期间没有过渡），摘掉之后滑到新位置；
   · 新来的：从 is-enter（透明、低 .25rem、.97）过渡进来；
   · 走掉的：旧节点当影子（mk-ghost，绝对定位在原处、不接收点按），淡出、略缩，--t-out 之后拿掉。 */
[data-mk] {
  transition:
    transform var(--t-grow, 280ms) var(--ease),
    opacity var(--t-in, 220ms) var(--ease);
}
[data-mk].is-flip { transition: none; }
[data-mk].is-enter { opacity: 0; transform: translateY(.25rem) scale(.97); transition: none; }
.mk-ghost {
  position: absolute;
  z-index: -1;                      /* 在留下来、正滑过来补位的行后面淡出（容器是 isolation: isolate 的层叠上下文） */
  margin: 0;
  box-sizing: border-box;
  pointer-events: none;
}
.mk-ghost.is-leaving {
  opacity: 0;
  transform: scale(.96);
  transition:
    opacity var(--t-out, 170ms) var(--ease-exit, cubic-bezier(.55, 0, .85, .35)),
    transform var(--t-out, 170ms) var(--ease-exit, cubic-bezier(.55, 0, .85, .35));
}

/* ---- 焦点（E14.5）：环只在键盘导航时出现（壳层按 html[data-focus="key"|"pointer"] 管全局的环）----
   地图画布：一道安静的 1.5 px --accent-line 发丝线收在画布里面，跟着容器的圆角（舞台是直角），
   从不是红 + 黑的双框（用户：「地图按 ESC 以后有红黑框」）。点地图、按 Esc 之后都没有环；Tab 到画布上才有。 */
.stage__canvas:focus,
.stage__canvas:focus-visible { outline: none; }
html[data-focus="key"] .stage__canvas:focus-visible {
  outline: 1.5px solid var(--accent-line);
  outline-offset: -1.5px;
  border-radius: 0;
}