/* Traits tab: mobile-first. Uses the page's --wine/--ink/--card/--line variables. */
.lr { padding:0 0 76px; }
.lr .hero { padding:22px 16px 6px; }
.lr .hero h1 { margin:0 0 8px; text-align:left; font-size:30px; line-height:1.1; }
.lr .lede { font-size:17px; line-height:1.5; margin:0 0 10px; }
.lr .note { font-size:13px; color:var(--muted); line-height:1.4; }
.lr section { padding:18px 16px 4px; }
.lr h2 { font-size:22px; line-height:1.15; margin:0 0 4px; }
.lr h3 { font:800 12px system-ui; letter-spacing:.08em; text-transform:uppercase; color:var(--acc, var(--wine)); margin:20px 0 6px; }
.lr p { margin:0 0 10px; line-height:1.55; font-size:16px; }
.lr .kicker { font:800 12px system-ui; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.lr .card { margin:12px 0; padding:14px; }
.lr svg { display:block; width:100%; height:auto; }
.lr .cap { font-size:12px; color:var(--muted); line-height:1.4; margin:6px 0 0; }

/* trait chooser (sticky) */
.lr .seg { position:sticky; top:0; z-index:4; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:10px 12px; background:var(--cream); border-bottom:1px solid var(--line); }
.lr .seg button { padding:10px 2px; font:800 13px system-ui; letter-spacing:.02em; border-radius:10px; background:var(--card); color:var(--ink); border:1.5px solid var(--line); width:100%; }
.lr .seg button.on { color:#fff; border-color:transparent; background:var(--c); }

/* chapter */
.lr .chap { --acc:var(--c); }
.lr .badge { display:inline-block; background:var(--c); color:#fff; font:800 12px system-ui; letter-spacing:.07em; text-transform:uppercase; border-radius:999px; padding:4px 11px; }
.lr .idea { font:700 21px/1.3 Georgia, serif; margin:10px 0 8px; }
.lr .tag { font-size:13px; color:var(--muted); }
.lr .pull { border-left:4px solid var(--c); padding:2px 0 2px 12px; margin:10px 0; font-size:16px; line-height:1.5; }

/* numbered tutorial steps */
.lr ol.steps { list-style:none; padding:0; margin:8px 0 6px; counter-reset:s; }
.lr ol.steps li { counter-increment:s; position:relative; padding:0 0 14px 44px; line-height:1.5; font-size:16px; }
.lr ol.steps li::before { content:counter(s); position:absolute; left:0; top:-1px; width:30px; height:30px; border-radius:50%; background:var(--c, var(--wine)); color:#fff; font:800 15px/30px system-ui; text-align:center; }
.lr ol.steps li::after { content:""; position:absolute; left:14px; top:32px; bottom:2px; width:2px; background:var(--line); }
.lr ol.steps li:last-child::after { display:none; }
.lr ol.steps b { font-weight:800; }
.lr .time { display:inline-block; font:700 11px system-ui; background:var(--card); border:1px solid var(--line); border-radius:6px; padding:1px 6px; color:var(--muted); margin-left:6px; vertical-align:2px; }

/* lab (home experiment) */
.lr .lab { border:2px dashed var(--c); border-radius:14px; padding:12px 14px 4px; margin:12px 0; background:color-mix(in srgb, var(--c) 6%, var(--card)); }
.lr .lab h4 { margin:0 0 4px; font:800 16px system-ui; color:var(--c); }
.lr .you { background:color-mix(in srgb, var(--gold) 16%, transparent); border-radius:10px; padding:10px 12px; margin:8px 0 12px; font-size:15px; }

/* ladder + real wines */
.lr .rung { display:grid; grid-template-columns:54px 1fr; gap:10px; padding:10px 0; border-top:1px solid var(--line); }
.lr .rung:first-of-type { border-top:0; }
.lr .rung .n { font:900 15px system-ui; color:#fff; background:var(--c); border-radius:8px; text-align:center; padding:6px 0; height:fit-content; }
.lr .rung .t { font-weight:800; font-size:15px; }
.lr .rung .f { font-size:14px; font-style:italic; color:var(--muted); }
.lr .rung .w { font-size:13px; color:var(--ink); margin-top:2px; }
.lr .wine { padding:7px 0; }
.lr .wine .l { display:flex; justify-content:space-between; gap:8px; font-size:14px; }
.lr .wine .l b { color:var(--c); font-variant-numeric:tabular-nums; }
.lr .track { position:relative; height:10px; border-radius:5px; background:color-mix(in srgb, var(--c) 14%, transparent); margin-top:4px; }
.lr .track i { position:absolute; top:-3px; width:16px; height:16px; margin-left:-8px; border-radius:50%; background:var(--c); border:2px solid var(--card); }
.lr .vs { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lr .vs > div { border:1px solid var(--line); border-radius:12px; padding:10px; background:var(--card); }
.lr .vs .big { font:900 28px system-ui; color:var(--c); line-height:1; }
.lr ul.tight { margin:4px 0 10px; padding-left:20px; } .lr ul.tight li { margin:4px 0; line-height:1.45; font-size:15px; }

/* what am I feeling? key */
.lr .key { display:grid; gap:8px; margin:10px 0; }
.lr .key div { display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:center; padding:10px 12px; border-radius:12px; background:var(--card); border:1px solid var(--line); font-size:15px; }
.lr .key span.d { width:28px; height:28px; border-radius:50%; }

/* fingerprints */
.lr .fp { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lr .fp > div { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px 8px 10px; text-align:center; }
.lr .fp .nm { font-weight:800; font-size:13px; line-height:1.2; min-height:32px; display:flex; align-items:center; justify-content:center; }
.lr .fp .nums { font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }

/* cheat sheet */
.lr .ty { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin:8px 0; }
.lr .ty .tn { font-weight:800; font-size:15px; } .lr .ty .tt { font-size:13px; color:var(--muted); margin-bottom:6px; }
.lr .m4 { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.lr .m4 > div { font:700 10px system-ui; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.lr .pips { display:flex; gap:2px; margin-top:3px; } .lr .pips i { flex:1; height:9px; border-radius:2px; background:color-mix(in srgb, var(--muted) 25%, transparent); } .lr .pips i.on { background:var(--c); }
.lr .grp { font:800 13px system-ui; letter-spacing:.06em; text-transform:uppercase; color:var(--wine); margin:16px 0 4px; }

/* quiz */
.lr .quiz { border:2px solid var(--wine); border-radius:16px; padding:14px; background:var(--card); margin:12px 0; }
.lr .quiz .q { font:800 19px/1.25 Georgia, serif; margin:2px 0 2px; }
.lr .quiz .stat { font-size:12px; color:var(--muted); }
.lr .quiz .res { margin:10px 0 0; padding:10px 12px; border-radius:10px; background:color-mix(in srgb, var(--gold) 16%, transparent); font-size:15px; }
.lr .quiz button { margin-top:10px; }
.lr dl { margin:6px 0; } .lr dt { font-weight:800; margin-top:10px; font-size:15px; } .lr dd { margin:2px 0 0; font-size:15px; line-height:1.45; color:var(--ink); }

/* bottom nav */
#nav { position:fixed; left:0; right:0; bottom:0; z-index:9; display:flex; background:var(--card); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); max-width:520px; margin:0 auto; }
#nav button { flex:1; background:none; color:var(--muted); border-radius:0; padding:10px 0 9px; font:800 12px system-ui; letter-spacing:.06em; text-transform:uppercase; width:auto; }
#nav button.on { color:var(--wine); box-shadow:inset 0 3px 0 var(--wine); }
#nav button svg { display:block; margin:0 auto 2px; width:22px; height:22px; fill:currentColor; }
.lr svg text { fill:var(--ink); font-family:system-ui,-apple-system,sans-serif; }
.lr svg .m { fill:var(--muted); }
.lr svg .ln { stroke:var(--muted); stroke-width:1.2; fill:none; }

main[data-view=traits], main[data-view=host], main[data-view=history] { padding:0; max-width:520px; }

#nav button { font-size:11px; }

/* Short version on top: one card per trait, deeper material folded */
.lr .qgrid { display:grid; gap:12px; }
.lr .qc { background:var(--card); border:1px solid var(--line); border-left:5px solid var(--c); border-radius:14px; padding:12px 14px; }
.lr .qc .qh { display:flex; align-items:center; gap:10px; } .lr .qc .qh b { font-size:18px; }
.lr .qc .qa { font:800 20px system-ui; color:var(--c); margin:8px 0 4px; }
.lr .qc p { margin:0 0 10px; font-size:15px; line-height:1.45; }
.lr .qc .qends { display:grid; grid-template-columns:1fr 1fr; gap:10px; font-size:13px; line-height:1.35; }
.lr .qc .qends b { color:var(--c); font-size:16px; margin-right:4px; } .lr .qc .qends i { display:block; color:var(--muted); font-style:normal; margin-top:2px; }
.lr .qc .deeper { margin-top:10px; font-weight:700; }
.lr .fold { margin:16px 0; border-top:1px solid var(--line); padding-top:6px; }
.lr .fold summary { cursor:pointer; list-style:none; padding:8px 0; } .lr .fold summary::-webkit-details-marker { display:none; }
.lr .fold summary h2 { display:inline; margin:0; } .lr .fold summary h2::after { content:' ▾'; color:var(--muted); font-size:16px; } .lr .fold[open] summary h2::after { content:' ▴'; }
.lr .fold summary .cap { display:block; margin-top:2px; }