/* Hobby Explorer 详情内容样式(shared/detail.js 渲染)。独立页面和侧边抽屉共用,纸底夜底都能用。
 * 类名一律 dt- 开头。颜色只读下面这组 --dt-* / --rel-* 变量,两套底色各给一组值。 */

:root{
  --dt-line:var(--line); --dt-card:var(--card); --dt-acc:var(--accent); --dt-r:14px;
  /* 关系类型的颜色:列表里的标签和小图里的线是同一组 */
  --rel-prerequisite:#c2410c; --rel-gentler_entry:#15803d; --rel-transferable_skill:#1d4ed8;
  --rel-same_appeal:#be185d; --rel-rides_along:#0f766e; --rel-parent:#8d857a; --rel-child:#8d857a;
}
:root[data-theme="night"]{
  --dt-line:var(--edge); --dt-card:rgba(255,255,255,.035); --dt-acc:var(--gold);
  --rel-prerequisite:rgb(255,179,92); --rel-gentler_entry:rgb(143,227,168); --rel-transferable_skill:rgb(158,197,255);
  --rel-same_appeal:rgb(245,163,208); --rel-rides_along:rgb(127,224,214); --rel-parent:rgb(233,226,212); --rel-child:rgb(233,226,212);
}

.dt{color:var(--ink)}
:where(.dt) a{color:inherit;text-decoration:none}   /* 零优先级:各类链接自己的颜色照常生效 */
.dt-kc{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--hc);margin-bottom:6px}
.dt-kc a:hover{text-decoration:underline}
.dt-name{font-family:var(--f-disp);font-weight:400;font-size:clamp(28px,4.4vw,42px);margin:6px 0 4px;letter-spacing:-.015em;line-height:1.15}
/* 名字和收藏按钮一行:按钮贴着名字的底线,名字长了按钮换到下一行 */
.dt-nrow{display:flex;align-items:flex-end;flex-wrap:wrap;gap:6px 16px}
.dt-nrow .sv-btn{margin-bottom:9px}
.dt-lead{font-size:19px;line-height:1.6;max-width:34em;margin:0 0 13px}
.dt-intro{font-size:15.5px;line-height:1.78;color:var(--ink2);max-width:34em;margin:0 0 22px}
/* 第一步:今天或这周就能做的一件事,带「做到哪算完」 */
.dt-first{max-width:34em;margin:0 0 18px;padding:13px 16px 13px 15px;border-left:3px solid var(--dt-acc);
  background:color-mix(in srgb,var(--dt-acc) 8%,transparent);border-radius:0 10px 10px 0;font-size:15px;line-height:1.65}
.dt-first span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--dt-acc);margin-bottom:3px}

.dt-block{margin-top:24px;max-width:900px}
.dt-block h2{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:0 0 8px}

/* 门槛格 */
.dt-grid{display:grid;gap:1px;background:var(--dt-line);border:1px solid var(--dt-line);border-radius:var(--dt-r);
  overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.dt-cell{background:var(--dt-card);padding:14px 16px}
.dt-k{font-size:11.5px;color:var(--ink3);letter-spacing:.04em;margin-bottom:5px}
.dt-v{font-size:15.5px;font-weight:600}
.dt-v.dt-wide{color:var(--dt-acc)}
.dt-note{font-size:11.5px;color:var(--ink3);margin-top:3px}
.dt-inh .dt-v{color:var(--ink2);font-weight:500}

/* 伞形条目:几条路怎么选 */
.dt-pick{max-width:900px;margin-top:6px;border:1px solid var(--dt-line);border-radius:var(--dt-r);background:var(--dt-card);overflow:hidden}
.dt-ph{padding:13px 17px;font-weight:600;font-size:15px;border-bottom:1px solid var(--dt-line);display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.dt-ph span{font-weight:400;font-size:12px;color:var(--ink3)}
.dt-scroll{overflow-x:auto}
.dt-pick table{border-collapse:collapse;width:100%;font-size:14px}
.dt-pick th,.dt-pick td{text-align:left;vertical-align:top;padding:11px 10px;border-top:1px solid var(--dt-line)}
.dt-pick thead th{border-top:0;font-size:11.5px;font-weight:500;color:var(--ink3);letter-spacing:.04em;white-space:nowrap}
.dt-pick tbody th{min-width:120px;max-width:190px;font-weight:600}
.dt-pick tbody th a:hover{color:var(--dt-acc)}
.dt-pick small{display:block;font-weight:400;font-size:12px;color:var(--ink3);line-height:1.45;margin-top:3px}
.dt-pick td{color:var(--ink2);white-space:nowrap}
.dt-pick td.dt-odd{color:var(--ink);font-weight:650}
.dt-same{padding:11px 17px;border-top:1px solid var(--dt-line);font-size:12.5px;color:var(--ink3)}
.dt-same b{color:var(--ink2);font-weight:600}

/* 技能、动机、分类:小标签 */
.dt-skr{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.dt-skl{font-size:12px;color:var(--ink3);min-width:70px}
.dt-tags{display:flex;flex-wrap:wrap;gap:6px}
.dt-tag{display:inline-block;padding:3px 9px;border-radius:5px;font-size:12px;color:var(--ink2);border:1px solid var(--dt-line);
  background:color-mix(in srgb,var(--ink) 4%,transparent)}
a.dt-tag:hover{border-color:var(--dt-acc);color:var(--dt-acc)}

/* 只有一个分支时列成一行 */
.dt-kids a{display:block;padding:10px 0;border-top:1px solid var(--dt-line)}
.dt-kids b{font-weight:600;font-size:15px;margin-right:10px}
.dt-kids span{font-size:13px;color:var(--ink2)}
/* 相关指南:标题 + 为什么带出它(它自己的门槛) */
.dt-guide{display:flex;flex-direction:column;gap:2px;padding:11px 14px;margin-bottom:8px;max-width:34em;
  border:1px solid var(--dt-line);border-radius:10px;background:var(--dt-card)}
.dt-guide:hover{border-color:var(--dt-acc)}
.dt-guide b{font-weight:600;font-size:14.5px}
.dt-guide b::after{content:" →";color:var(--dt-acc)}
.dt-guide span{font-size:12.5px;color:var(--ink3)}
.dt-kids a:hover b{color:var(--dt-acc)}

/* 关联 */
.dt-rel{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--dt-line)}
.dt-rt{font-size:11px;padding:3px 8px;border-radius:999px;white-space:nowrap;flex-shrink:0;margin-top:2px;
  color:var(--rc);background:color-mix(in srgb,var(--rc) 13%,transparent)}
.dt-rb{flex:1;min-width:0}
.dt-rb a{font-weight:600;font-size:15px}
.dt-rb a:hover{color:var(--dt-acc)}
.dt-rb i{font-style:normal;font-size:11.5px;color:var(--ink3);margin-left:7px}
.dt-rd{display:block;font-size:13px;color:var(--ink2);margin-top:2px;line-height:1.5}

/* ===== 侧边抽屉:从右边滑出,当前视图不动 ===== */
.dt-scrim{position:fixed;inset:0;z-index:79;background:color-mix(in srgb,var(--ink) 7%,transparent);
  opacity:0;pointer-events:none;transition:opacity .3s}
.dt-scrim.on{opacity:1;pointer-events:auto}
/* z-index 压过页面里所有浮层(主站窄屏的筛选按钮 60、筛选抽屉 70) */
.dt-drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,100vw);z-index:80;overflow:auto;
  padding:0 28px 60px;background:color-mix(in srgb,var(--bg) 94%,transparent);border-left:1px solid var(--dt-line);
  box-shadow:-24px 0 48px -32px rgba(0,0,0,.45);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transform:translateX(105%);transition:transform .45s var(--ease)}
.dt-drawer.on{transform:none}
.dt-dhead{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:10px;margin:0 -28px 14px;padding:14px 20px 12px 28px;
  background:color-mix(in srgb,var(--bg) 96%,transparent);border-bottom:1px solid var(--dt-line)}
.dt-full{font-size:13px;color:var(--dt-acc);font-weight:600;text-decoration:none}
.dt-full:hover{text-decoration:underline}
.dt-act{font-size:12.5px;padding:5px 12px;border-radius:999px;border:1px solid var(--dt-line);color:var(--ink2)}
.dt-act:hover{border-color:var(--dt-acc);color:var(--dt-acc)}
.dt-x{margin-left:auto;width:32px;height:32px;border-radius:50%;font-size:20px;line-height:1;color:var(--ink3)}
.dt-x:hover{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink)}
@media (pointer:coarse){.dt-x{width:44px;height:44px}.dt-act,.dt-full{min-height:44px;display:inline-flex;align-items:center}}
/* 抽屉里字号收一档,门槛格固定两列 */
.dt-drawer .dt-name{font-size:34px}
.dt-drawer .dt-lead{font-size:17px}
.dt-drawer .dt-intro{font-size:14.5px}
.dt-drawer .dt-grid{grid-template-columns:1fr 1fr}
.dt-drawer .dt-block{margin-top:26px}
@media (prefers-reduced-motion: reduce){ .dt-drawer,.dt-scrim{transition:none} }
.dt-context{white-space:pre-line;font-size:14px;line-height:1.7;color:var(--ink2);padding:0 24px 12px;margin:0}

/* Full reading pages embed one fixed-root plant and ordinary relationship text. */
.dt-related{scroll-margin-top:calc(var(--nav,65px) + 20px);padding:24px 0 36px;border-top:1px solid var(--line);max-width:1200px;margin:0 auto}
.dt-related>h2{font:400 clamp(26px,4vw,34px)/1.25 var(--f-disp);margin:0 0 10px}
.plant-loading{font-size:14px;color:var(--ink2)}
.plant-context{border-top:1px solid var(--line);padding:8px 0;font-size:14px;line-height:1.6}
.plant-context>summary{cursor:pointer;min-height:44px;padding:8px 0;color:var(--ink)}
.plant-context>p{color:var(--ink2);margin:4px 0 12px}
.plant-notes{list-style:none;padding:0;margin:0}
.plant-notes li{padding:10px 0;border-top:1px solid var(--line)}
.plant-notes a{font-weight:600;color:var(--accent);display:inline-flex;align-items:center;min-height:32px}
.plant-notes p{font-size:14px;color:var(--ink2);line-height:1.65;margin:3px 0}
.gother summary{cursor:pointer;padding:8px 0;min-height:44px;color:var(--ink2)}

.dt-motives{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-top:16px}
.dt-page .dt-intro,.dt-page .dt-lead,.dt-page .dt-first,.dt-page .dt-guide{max-width:none}
.dt-page .dt-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.dt-page .dt-cell{padding:12px 14px}
@media(max-width:600px){.dt-page .dt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.plant-context section{margin:12px 0 20px}
.plant-context h3{font-size:14px;margin:0 0 4px}
.plant-context section>p{font-size:13px;color:var(--ink2);margin:0 0 8px}
.plant-links{display:flex;flex-wrap:wrap;gap:2px 20px}
.plant-links li{padding:0;border:0}