/* Archive layout system. Scope excludes card data and editor controls.
   Section: 1px horizontal rule. Priority: badge and whitespace.
   Cards: whitespace only. All sizes follow the 4px spacing scale. */
:root{
 --hy-space-1:4px;--hy-space-2:8px;--hy-space-3:12px;
 --hy-space-4:16px;--hy-space-5:24px;--hy-space-6:32px;
 --hy-rule-outer:#52617b;--hy-rule-section:#384459;--hy-rule-inner:#293241;
}
.hy-row{padding-block:var(--hy-space-5);column-gap:var(--hy-space-5);border-top:1px solid var(--hy-rule-section)}
.hy-row:first-child{border-top:0}
.hy-trap{border:0;padding-right:var(--hy-space-3)}
.hy-trap-heading{gap:var(--hy-space-2)}
.hy-trap-heading b{font-size:18px;font-weight:700;line-height:1.25;letter-spacing:0}
.hy-trap>small{font-size:12px;font-weight:500;line-height:1.4;color:#b0bacb}
.hy-targets{gap:var(--hy-space-4)}
.hy-sevgroups{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--hy-space-5) var(--hy-space-6)}
.hy-sevgroup,.hy-sevgroup+.hy-sevgroup{
 border:0;
 padding:0;gap:var(--hy-space-3);
}
.hy-ctiles{column-gap:var(--hy-space-5);row-gap:var(--hy-space-5)}
.hy-ctile{gap:var(--hy-space-2)}
.hy-ctile::after{display:none!important}
.hy-ctile .hy-timing{font-size:14px;font-weight:650;line-height:1.45}
.hy-ctile p{font-size:13px;font-weight:400;line-height:1.5}
.hy-secnote{border:0!important;padding:0!important;margin:0!important;color:#c5cfdf}
.hy-legend.compact{gap:var(--hy-space-2);align-items:center}
.hy-legend>small{margin-left:var(--hy-space-1);color:#b0bacb}
@media(max-width:650px){
 .hy-row{padding-block:var(--hy-space-5);row-gap:var(--hy-space-4)}
 .hy-sevgroups{gap:var(--hy-space-5)}
 .hy-sevgroup,.hy-sevgroup+.hy-sevgroup{border:0;padding:0}
 .hy-ctiles{gap:var(--hy-space-5)}
 .hy-ctile .hy-timing{font-size:13px}
}

/* Structural hierarchy: outer boundary > section boundary > internal guide.
   Rank-colored borders encode ratings and are not structural dividers. */
.hy-card{border:2px solid var(--hy-rule-outer)}
.hy-hero{border-bottom:1px solid var(--hy-rule-section)}
.hy-row{border-top-color:var(--hy-rule-section)}
.hy-tactics,.hy-hand-plan,.hy-hand-branches,.hy-rt-branches{
 border-left-width:1px;border-left-color:var(--hy-rule-inner)
}
.hy-flow,.hy-list{border-width:1px;border-color:var(--hy-rule-section)}
.hy-flow-path{border-top:1px solid var(--hy-rule-inner)}
.hy-hero-meta>p:not(.hy-hero-builds)+.hy-hero-builds{border-left:1px solid var(--hy-rule-section)}

/* Visible secondary guides; separators occupy the gap, never layout width. */
:root{--hy-rule-inner:#526079}
.hy-tactics,.hy-hand-plan,.hy-hand-branches,.hy-rt-branches{border-left:1px solid var(--hy-rule-inner)}
.hy-sevgroup{position:relative}
.hy-sevgroup.has-peer-rule::before{
 content:'';position:absolute;left:calc(var(--hy-space-6) / -2);top:0;
 width:1px;height:var(--hy-peer-height,100%);background:var(--hy-rule-inner);pointer-events:none;
}

/* Consistent boundaries at the requested content transitions. */
.hy-row:first-child{border-top:1px solid var(--hy-rule-section)}
.hy-secnote:not(:empty){border-bottom:1px solid var(--hy-rule-inner)!important;padding-bottom:12px!important}
.hy-sevgroup.starts-group-line::after{content:'';position:absolute;top:-13px;left:0;width:var(--hy-line-width,100%);height:1px;background:var(--hy-rule-inner);pointer-events:none}
@media(min-width:1101px){.hy-trap{position:relative}.hy-trap::after{content:'';position:absolute;right:-6px;top:0;bottom:0;width:1px;background:var(--hy-rule-inner)}}

/* Mobile: handtrap surfaces replace structural divider lines. */
@media(max-width:650px){
 .hy-card{border:0;background:#0c0f15;border-radius:14px}
 .hy-rows{display:flex;flex-direction:column;gap:16px;padding:12px 0 16px}
 .hy-row,.hy-row:first-child{border:0;border-radius:16px;background:#181e2a;padding:16px 14px;row-gap:16px;box-shadow:0 2px 8px #0002}
 .hy-trap{padding:0}
 .hy-trap::after,.hy-sevgroup.has-peer-rule::before,.hy-sevgroup.starts-group-line::after{display:none}
 .hy-targets{gap:16px}
 .hy-secnote:not(:empty){border:0!important;padding:10px 12px!important;background:#242d3d;border-radius:9px;font-size:12px;line-height:1.5}
 .hy-sevgroups{width:100%;gap:20px}
 .hy-sevgroup,.hy-sevgroup+.hy-sevgroup{width:100%;border:0;padding:0;gap:12px}
 .hy-sevgroup+.hy-sevgroup{padding-top:12px}
 .hy-ctiles{width:100%;column-gap:20px;row-gap:24px}
 .hy-ctile{width:calc((100% - 20px)/2)}
 .hy-ctile.hy-multiple{width:100%}
 .hy-card>.hy-tactics{border:0;margin:16px 0;padding:16px 14px;background:#181e2a;border-radius:16px}
 .hy-card>.hy-overview{margin:16px 0}
 .hy-card>.hy-legend.compact{margin:16px 14px 4px}
 .hy-card>.hy-flow{margin:16px 0;background:#181e2a;border:0;border-radius:16px}
}
@media(max-width:359px){.hy-ctile{width:100%}}

.cm-trap-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cm-trap-line .cm-sec{margin:0;flex:none}
.cm-btn{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:3px 7px;border:1px solid #647ca9;background:#23334d;color:#dce7ff;font-size:11px;line-height:1.2}
.cm-card-anchor{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}
.cm-card-anchor>.cm-tile{align-self:flex-start;margin:0}
.cm-own-delete{padding:2px 6px;font-size:11px;background:transparent;color:#ccd9f5;border:1px solid #52617b}

/* Draw-block feedback: top-right corner, outside the details toggle. */
.hy-matchup{position:relative}
.hy-matchup:has(.cm-ov) summary>strong{padding-right:32px}
.hy-matchup summary>.cm-ov{position:absolute;top:7px;right:7px;margin:0;min-width:28px;min-height:28px;padding:5px;border-radius:7px;justify-content:center}
.hy-matchup summary>.cm-ov svg{width:15px;height:15px;flex:none}
.hy-matchup summary>.cm-ov span{font-size:10px}
@media(pointer:coarse){.hy-matchup summary>.cm-ov{min-width:32px;min-height:32px}}

.tour-feedback-example{display:inline-flex;align-items:center;justify-content:center;padding:5px 8px;margin:4px 6px;color:#dce7ff;background:#23334d;border:1px solid #647ca9;border-radius:7px;font-size:12px;line-height:1.3}
.hy-matchup .tour-feedback-corner{position:absolute;right:6px;top:5px;margin:0}
.hy-matchup:has(.tour-feedback-corner) summary>strong{padding-right:30px}
.tour-feedback-deck{margin:20px 16px;padding:16px;border:1px solid #52617b;border-radius:12px;background:#171e2c}
.tour-feedback-deck p,.tour-feedback-deck small{font-size:12px}
.tour-feedback-deck>div{padding:16px;background:#10141d;border:1px solid #52617b;border-radius:8px;color:#b0bacb}

/* Section feedback occupies its own heading column, never a line above the hint. */
.hy-trap-heading:has(>.cm-sec){display:grid;grid-template-columns:auto minmax(0,1fr) 28px;align-items:center;gap:8px;width:100%}
.hy-trap-heading:has(>.cm-sec)>b{min-width:0}
.hy-trap-heading>.cm-sec{margin:0;padding:5px;min-width:28px;min-height:28px;justify-content:center;align-self:center;white-space:nowrap}
.hy-trap-heading>.cm-sec svg{width:14px;height:14px;flex:none}
.hy-trap-heading>.cm-sec.has{position:relative}
.hy-trap-heading>.cm-sec>span{position:absolute;right:-5px;top:-7px;background:#9db5f2;color:#101722;border-radius:8px;padding:1px 4px;font-size:10px}
.hy-trap-heading:not(:has(.hy-trap-icons)):has(>.cm-sec){grid-template-columns:minmax(0,1fr) 28px}

/* Handtrap feedback below the hint; no competition with the title. */
.hy-trap>.cm-sec{display:inline-flex;position:static;margin:8px 0 0 46px;min-width:30px;min-height:28px;padding:5px 7px;align-items:center;justify-content:center}
.hy-trap:has(.hy-trap-icons img+img)>.cm-sec{margin-left:68px}
.hy-trap:not(:has(.hy-trap-icons))>.cm-sec{margin-left:0}

/* Feedback stays discoverable without competing with card priorities. */
.cm-btn{background:#1b2638;border-color:#465773;color:#b5c2d9}
.cm-btn:hover,.cm-btn:focus-visible{background:#283a56;border-color:#7b94bf;color:#e0e9fa}
.cm-btn.has{background:#22314a;border-color:#60779e;color:#cedbf3}

.tour-feedback-overview{background:#070a10d9}
.tour-feedback-overview .tour-tip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(580px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:18px}
.tour-feedback-overview #tourText{margin-bottom:12px}
.feedback-map{display:grid;gap:10px;background:#0d121c;border:1px solid #42516b;border-radius:12px;padding:12px;margin-bottom:14px;font-size:12px}
.feedback-map b{font-size:13px}.feedback-map small{display:block;color:#aebbd1;font-size:11px;margin-top:5px}
.fm-hero,.fm-draw,.fm-deck{padding:10px;background:#192338;border-radius:8px;position:relative}
.fm-hero .fm-pin{display:inline-flex;margin-top:8px}
.fm-pin{display:inline-flex;align-items:center;border:1px solid #819bce;border-radius:5px;padding:4px 6px;color:#e0eaff;background:#2a3b5b;font-size:11px;white-space:nowrap}
.fm-draw{padding-right:60px}.fm-draw>.fm-pin{position:absolute;right:9px;top:9px}
.fm-row{display:grid;grid-template-columns:1fr 1.5fr;gap:12px;padding:10px 0}
.fm-trap>.fm-pin{margin-top:8px}
.fm-card-head{display:flex;align-items:flex-start;gap:8px}
.fm-card-art img{width:49px;height:71px;object-fit:contain}
.fm-deck>div{margin-top:7px;padding:9px;background:#0d121c;border-radius:5px;color:#b6c3d8}
@media(max-height:720px){.tour-feedback-overview .tour-tip{padding:12px}.feedback-map{gap:6px;padding:8px}.fm-row{padding:4px 0}.tour-feedback-overview #tourText{font-size:12px;line-height:1.4}.tour-feedback-overview .tour-tip h2{font-size:17px}}