/* ===========================================================================
   详情抽屉 · 全局搜索面板 · 搜索结果页 · 通用详情页
   =========================================================================== */

/* ---------------- 抽屉 ---------------------------------------------------- */
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: var(--z-drawer);
  width: min(var(--w-drawer), 100vw);
  display: flex;
  flex-direction: column;
  background: var(--paper-raise);
  border-left: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-drawer);
  animation: drawer-in var(--d-slow) var(--ease-out) both;
}
.drawer.is-closing { animation: drawer-out 200ms var(--ease-in) both; }

@keyframes drawer-in {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes drawer-out {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateX(18px); }
}

.drawer__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-6);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-raise);
}
.drawer__crumb {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
}
.drawer__crumb span { overflow: hidden; text-overflow: ellipsis; }
.drawer__crumb i { color: var(--ink-4); font-style: normal; }

.drawer__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s-6) var(--s-6) var(--s-10);
}

.drawer__foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--rule-strong);
  background: var(--paper);
}

/* 标题区 */
.d-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-3);
}
.d-title {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.d-sub {
  margin-top: var(--s-3);
  font-size: var(--t-base);
  line-height: var(--lh-snug);
  color: var(--ink-3);
}

.d-toprow {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule-strong);
}

/* 状态标记：文字 + 描边，颜色只作辅助 */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 var(--s-2);
  border: 1px solid currentColor;
  border-radius: 1px;
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.pill .dot { background: currentColor; }
.pill[data-s="todo"]    { color: var(--st-todo); }
.pill[data-s="try"]     { color: var(--st-try); }
.pill[data-s="adopted"] { color: var(--st-adopted); }
.pill[data-s="skip"]    { color: var(--st-skip); }

/* 元信息表：点线引导 */
.d-meta { margin-top: var(--s-4); }
.mrow {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--t-sm);
  padding: 6px 0;
}
.mrow__k {
  flex: none;
  color: var(--ink-3);
  white-space: nowrap;
}
.mrow__v {
  flex: none;
  max-width: 72%;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.mrow__v.is-mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.01em; }

/* 章节 */
.d-sect {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}
.d-sect__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.d-sect__no {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.11em;
  color: var(--ink-4);
}
.d-sect__title {
  font-family: var(--font-display);
  font-size: var(--t-md);
  letter-spacing: var(--ls-title);
  color: var(--ink);
}
.d-sect__mark {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  color: var(--ink-4);
}

.prose {
  font-size: var(--t-md);
  line-height: var(--lh-loose);
  color: var(--ink-2);
}
.prose p + p { margin-top: var(--s-3); }
.prose ul, .prose ol { margin: var(--s-2) 0 0; }
.prose li {
  position: relative;
  padding-left: var(--s-4);
  margin-top: 4px;
  line-height: 1.8;
}
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.76em;
  width: 5px; height: 1px;
  background: var(--ink-4);
}
.prose ol { counter-reset: n; }
.prose ol > li { counter-increment: n; }
.prose ol > li::before {
  content: counter(n) ".";
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-4);
  top: 0.42em;
}
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper-sunk);
  padding: 1px 4px;
  border-radius: 1px;
}
.prose a { color: var(--ink); border-bottom: 1px solid var(--rule-strong); }
.prose a:hover { border-bottom-color: var(--seal); color: var(--seal); }

/* 链接列表 */
.d-links { margin-top: var(--s-2); }
.d-link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-soft);
  min-width: 0;
}
.d-link:last-child { border-bottom: 0; }
.d-link__kind {
  flex: none;
  width: 44px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  color: var(--ink-3);
}
.d-link__body { flex: 1; min-width: 0; }
.d-link__label {
  font-size: var(--t-sm);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.d-link:hover .d-link__label { color: var(--seal); }
.d-link__url {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.d-link__go { flex: none; color: var(--ink-4); }
.d-link:hover .d-link__go { color: var(--seal); }

.d-nolink {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  font-size: var(--t-sm);
  color: var(--ink-3);
}

/* 原始记录（折叠） */
.d-raw {
  margin-top: var(--s-5);
  border-top: 1px solid var(--rule);
  padding-top: var(--s-3);
}
.d-raw summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  list-style: none;
}
.d-raw summary::-webkit-details-marker { display: none; }
.d-raw summary::before {
  content: "+";
  font-family: var(--font-mono);
  color: var(--ink-4);
  width: 10px;
}
.d-raw[open] summary::before { content: "−"; }
.d-raw summary:hover { color: var(--ink); }
.d-raw pre {
  margin: var(--s-3) 0 0;
  padding: var(--s-3);
  max-height: 320px;
  overflow: auto;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* 反馈 */
.d-fb { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule-strong); }
.d-fb__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.d-fb__state {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.d-fb__state[data-dirty="true"] { color: var(--seal); }

.ruled {
  width: 100%;
  min-height: 150px;
  padding: 0 2px;
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: 1px;
  font-size: var(--t-base);
  line-height: 30px;
  color: var(--ink);
  resize: vertical;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 29px,
    var(--rule-soft) 29px,
    var(--rule-soft) 30px
  );
  background-attachment: local;
  transition: border-color var(--d-instant) var(--ease-out);
}
.ruled:focus { border-color: var(--ink-2); }
.ruled::placeholder { color: var(--ink-3); }

.d-fb__bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
  font-size: var(--t-xs);
  color: var(--ink-3);
}
.d-fb__count { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }

/* 抽屉内骨架 */
.d-skel { display: grid; gap: var(--s-3); }

/* ---------------- 全局搜索面板 ------------------------------------------- */
.palette {
  position: fixed;
  inset: 0;
  z-index: var(--z-palette);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 11vh var(--s-4) 0;
  background: oklch(28% 0.02 80 / 0.32);
  animation: fade-in var(--d-quick) var(--ease-out) both;
}
.palette__panel {
  width: min(660px, 100%);
  max-height: 74vh;
  display: flex;
  flex-direction: column;
  background: var(--paper-raise);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  animation: modal-in var(--d-base) var(--ease-out) both;
}
.palette__input {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-3);
}
.palette__input input {
  flex: 1;
  min-width: 0;
  height: 32px;
  border: 0;
  background: none;
  font-size: var(--t-md);
  color: var(--ink);
}
.palette__input input::placeholder { color: var(--ink-3); }
.palette__hint { display: flex; gap: 4px; align-items: center; }

.palette__list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-2) 0; }

.pitem {
  display: block;
  width: 100%;
  padding: 10px var(--s-4);
  text-align: left;
  border-left: 2px solid transparent;
}
.pitem[aria-selected="true"] { background: var(--paper-warm); border-left-color: var(--seal); }
.pitem__top {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: 3px;
}
.pitem__cat {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.07em;
  color: var(--ink-3);
}
.pitem__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--t-md);
  letter-spacing: var(--ls-title);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pitem__snip {
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pitem__field {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
  margin-right: 4px;
}

.palette__empty {
  padding: var(--s-6) var(--s-5);
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--ink-3);
}
.palette__foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--rule);
  background: var(--paper);
  font-size: 12px;
  color: var(--ink-3);
}
.palette__foot .k { display: inline-flex; align-items: center; gap: 4px; }
.palette__all {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-strong);
}

/* 命中高亮：像荧光笔划过一条，不改字色以保住对比度 */
mark {
  background: oklch(91% 0.062 32);
  color: var(--ink);
  border-radius: 1px;
  padding: 0 2px;
  box-shadow: inset 0 -1px 0 oklch(79% 0.092 32);
}

/* ---------------- 搜索结果页 --------------------------------------------- */
.page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--paper);
}
.page__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--s-8) var(--s-6) var(--s-20);
}

.srch__head { border-bottom: 1px solid var(--rule-strong); padding-bottom: var(--s-4); }
.srch__q {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  overflow-wrap: anywhere;
}
.srch__q em { font-style: normal; color: var(--seal); }
.srch__meta {
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}

.srch__bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  padding: var(--s-3) 0 var(--s-5);
}
.srch__bar .label { margin-right: var(--s-1); }

.sgroup { margin-bottom: var(--s-8); }
.sgroup__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-1);
}
.sgroup__name {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  letter-spacing: var(--ls-title);
}
.sgroup__n {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
}
.sgroup__more {
  margin-left: auto;
  font-size: var(--t-xs);
  color: var(--ink-3);
  border-bottom: 1px solid transparent;
}
.sgroup__more:hover { color: var(--seal); border-bottom-color: var(--seal); }

.sres {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-4);
  border-bottom: 1px solid var(--rule-soft);
  border-left: 2px solid transparent;
  transition: background var(--d-instant) var(--ease-out), border-color var(--d-instant) var(--ease-out);
}
.sres:hover { background: var(--paper-card); border-left-color: var(--rule-strong); }
.sres__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-title);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.sres__snip {
  display: block;
  margin-top: 5px;
  font-size: var(--t-sm);
  line-height: 1.72;
  color: var(--ink-2);
}
.sres__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: 7px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--ink-3);
}
.sres__field { color: var(--ink-3); }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding-top: var(--s-6);
  font-size: var(--t-sm);
  color: var(--ink-3);
}
.pager__n {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
}

/* ---------------- 通用只读详情页 ----------------------------------------- */
.reader { max-width: 720px; margin: 0 auto; padding: var(--s-6) var(--s-6) var(--s-20); }
.reader__back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--t-sm);
  color: var(--ink-3);
  margin-bottom: var(--s-5);
}
.reader__back:hover { color: var(--ink); }