/* TRAIL NOTE / FIELD INDEX — editorial interface */
:root{--paper:#f5f5f0;--ink:#20231f;--muted:#74766d;--line:#d0d1c8;--acid:#d5ff4b}
body{background:var(--paper);color:var(--ink)}
button,input,textarea,select,dialog,.post,.product,.gearcard,.art,.art.official-photo,.detail-visual,.connection,.tag,.avatar,.share-banner,.sharecard,.join-banner,.empty,.extra-fields,.prototype-note,.generation,.legacy-notice,.pending-gears,.version-card,.confirm-facts,.purchase-link,.cloud-status,.account-actions button,.colorway-thumbs button,.registration-color-choices button,#toast{border-radius:0}
button{background:transparent;border-color:#a3a69a;transition:background .15s,color .15s,border-color .15s}
button:hover{background:#e8e9e0;border-color:var(--ink)}
.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.primary:hover{background:#41463a;color:#fff}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
::selection{background:var(--acid);color:var(--ink)}
aside{width:220px;padding:34px 24px;background:var(--paper);border-right:1px solid var(--line)}
aside .logo{font-size:17px;letter-spacing:1px;gap:8px}
.side-label{font-size:8px;line-height:1.8;letter-spacing:.5px;margin:18px 0 72px}
nav:not(.bottom-nav){gap:0;counter-reset:sections}
aside nav button{counter-increment:sections;border-top:1px solid var(--line);padding:19px 0;display:flex;gap:18px;align-items:center;font-size:12px;border-radius:0}
aside nav button:before{content:'0' counter(sections);font:10px var(--mono);color:var(--muted)}
aside nav button.active{background:transparent;font-weight:700;border-top-color:var(--ink)}
aside nav button.active:after{content:'↗';width:auto;height:auto;margin:0 0 0 auto;border-radius:0;background:none;box-shadow:none;font:17px var(--mono)}
.sidebottom{border-top:1px solid var(--ink);padding-top:18px}
.sidebottom p{font:18px/1.35 var(--mono);letter-spacing:-1px;margin:0 0 26px}
.sidebottom small{font-size:8px;letter-spacing:.5px}
.app{margin-left:220px}
header{height:90px;margin:0 48px;border-bottom:1px solid var(--ink)}
header>span{font-size:9px;letter-spacing:1px;color:var(--ink)}
header button{border-radius:0;font-size:11px;padding:13px 18px}
#accountButton{background:transparent;border:0;border-bottom:1px solid var(--ink);padding:10px 0;margin-right:28px}
main{max-width:1320px;padding:54px 48px 80px}
.eyebrow{font:10px var(--mono);letter-spacing:1px;color:var(--muted);display:flex;align-items:center;gap:12px}
.eyebrow:before{content:'';width:7px;height:7px;background:var(--ink);flex-shrink:0}
h1{font-size:clamp(32px,3.6vw,52px);font-weight:500;line-height:1.35;letter-spacing:-1.8px;margin:24px 0 18px}
h2,h3{letter-spacing:-.4px}
.sub{font-size:12px;line-height:2;color:#666b61}
.feed-heading{margin-bottom:40px}
.live-dot{font-size:8px;letter-spacing:.7px;margin-top:28px}
.live-dot:before{border-radius:0;width:5px;height:5px;background:#7d866c}
.tabs{gap:26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:32px 0;overflow-x:auto;min-height:52px}
.tabs button,.tabs .selected{padding:17px 0 14px;background:transparent;border-radius:0;border:0;border-bottom:2px solid transparent;color:var(--muted);font-size:11px;flex-shrink:0}
.tabs button:hover{color:var(--ink);background:transparent}
.tabs button.selected{color:var(--ink);border-bottom-color:var(--ink);font-weight:700}
.columns{grid-template-columns:minmax(0,1fr) 215px;gap:44px}
.post{padding:26px 0 30px;margin-bottom:22px;border-top:1px solid var(--ink);background:transparent}
.avatar{border-radius:0;background:transparent;border:1px solid var(--line);color:var(--ink);width:36px;height:36px;font:10px var(--mono)}
.person{gap:12px}.person b{font-weight:500;font-size:12px}.person small{font-size:9px;color:var(--muted)}
.product,.product:hover{background:#eaece3;border-radius:0;margin-top:24px;border:0}
.product:after,.detail-visual:after{background-image:none}
.product-label{left:24px;top:24px}.product-label span{font-size:10px;letter-spacing:1px}.product-label strong{font-size:23px;line-height:1.2;letter-spacing:-.7px}
.product .art{aspect-ratio:1.3;margin-top:88px}
.product .product-label:has(.generation)+.art{margin-top:120px}
.product .official-photo{background:#fff;border-radius:0}
.product .official-photo img{padding:16px 38px}
.view-detail{right:20px;bottom:15px;font:9px var(--mono);color:#52594d}
.post>p{font-size:12px;line-height:2.1;margin:24px 0 15px}
.tag{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:4px 0;margin-right:9px;font-size:10px;color:#5e6559}
.actions{border-top:1px solid var(--line);padding-top:15px;margin-top:25px}
.actions button{font-size:10px;border-radius:0}
.stamp.on:before{content:'↳ ';color:var(--ink)}
.connection{border-radius:0;background:#e5e8db;color:var(--ink);border-top:1px solid var(--ink);padding:24px;margin:0 0 42px;gap:18px}
.connection:hover{background:#dce1ce;color:var(--ink)}
.connection small{color:#626c58}.connection div>span{color:#606a55}.connection h3{font-size:16px;line-height:1.7}
.connection .art{border-radius:0}.connection .arrow{font-size:24px}
.panel{border-top:1px solid var(--ink);padding:22px 0;margin:0 0 32px}.panel h3{font-size:17px;line-height:1.6}.panel p{font-size:11px;line-height:2}.panel button{border-top:1px solid var(--line);border-radius:0;margin-top:22px}.micro{line-height:2.2;font-size:8px}
.toolbar{margin:36px 0 12px;gap:0;border-bottom:1px solid var(--ink)}
.toolbar input{border:0;border-radius:0;background:transparent;padding:17px 0;font-size:15px;min-width:0}
.toolbar input::placeholder{color:#8b8d82}
.toolbar>button{border:0;border-left:1px solid var(--line);background:transparent;font-size:11px;margin:8px 0;padding:8px 18px}
.search-hint{font-size:10px;margin:0 0 26px;color:var(--muted)}
.brand-filter{margin:0 0 28px;gap:16px}.brand-filter label{font:9px var(--mono);letter-spacing:1px}.brand-filter select{border-radius:0;border-bottom-color:var(--line);font-size:12px;padding:12px 24px 12px 0}.brand-filter span{font-size:8px}
.wear-filter select{border-radius:0}
.results-summary{border-top:1px solid var(--ink);padding:18px 0;margin:0;gap:14px;font-size:10px}
.results-summary strong{font:17px var(--mono)}
.results-summary button{border:0;padding:8px 0;font-size:10px}
.grid{gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);counter-reset:gear}
.gearcard{counter-increment:gear;border-radius:0;background:transparent;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px;display:flex;flex-direction:column}
.card-top{font:9px var(--mono);min-height:25px;color:var(--muted);margin-bottom:10px}
.card-top:after{content:counter(gear,decimal-leading-zero);font:9px var(--mono);color:#919489;margin-left:auto}
.card-top:has(.more):after{display:none}
.gearcard .art{border-radius:0;margin:0 0 25px;aspect-ratio:1.05;background:#fff}
.gearcard .art img{padding:14px}
.gearcard .brand{font-size:10px;letter-spacing:.7px}
.gearcard h3{font-size:17px;line-height:1.5;margin:9px 0 16px;letter-spacing:-.5px;font-weight:500}
.gearcard .generation{border:0;border-left:1px solid #a4ad92;padding:0 0 0 7px;border-radius:0;font:9px/1.8 var(--mono);color:#646d58;margin:8px 0 18px}
.official-badge,.gearcard .official-badge{color:#767c6c;font-size:7px;letter-spacing:0}
.card-tag{margin-top:auto;font-size:10px;border-top:1px solid var(--line);padding-top:14px;color:#74796c}
.gearcard>button{background:transparent;border:0;border-top:1px solid var(--line);padding:14px 0 0;text-align:left;margin-top:14px;font-size:10px;min-height:44px}
.gearcard>button:hover{color:#4d5d35}
.colorway-thumbs{gap:4px;margin:0 0 16px}
.colorway-thumbs button{border:1px solid transparent;border-radius:0;width:33px;height:33px;padding:2px;background:#fff;min-height:0}
.colorway-thumbs button[aria-pressed=true]{border:1px solid var(--ink);outline:0}
.colorway-thumbs .more-colors{background:transparent;font:9px var(--mono)}
.load-more,#morePicker button{border-radius:0;background:transparent;border:0;border-bottom:1px solid var(--ink);margin:24px 0;padding:20px 0;font-size:12px}
.empty,.search-empty{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:50px 24px}
.catalog-import-note{border:0;border-top:1px solid var(--line);border-radius:0;padding:22px 0}.catalog-import-note summary{font-size:10px;color:var(--muted)}
.join-banner{border-radius:0;background:transparent;color:var(--ink);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:25px 0;margin-bottom:48px}
.join-banner:hover{background:#eceee2;color:var(--ink)}
.join-banner small{color:#737a68;font-size:8px}.join-banner strong{font-size:22px;letter-spacing:-.6px}.join-banner span>span{color:#727969}.join-banner b{color:var(--ink);font:11px var(--mono);border-bottom:1px solid var(--ink);padding-bottom:7px}
.profile{border-bottom:1px solid var(--line);padding:0 0 24px;margin-bottom:36px}.profile .avatar{border-radius:0;width:54px;height:54px;font-size:13px}.profile strong{font-size:12px}.profile p{color:var(--muted)}
.collection-meta{border-top:1px solid var(--ink);padding-top:18px;margin-top:34px}.collection-meta span{font-size:10px;color:var(--ink)}.collection-meta button{border-radius:0;border:0;border-bottom:1px solid var(--ink);padding:10px 0}
.share-banner{border-radius:0;background:#e5e8db;color:var(--ink);border-left:2px solid var(--ink);padding:24px}.share-banner:hover{background:#dce1ce;color:var(--ink)}.share-banner small{color:#6f7960;font-size:8px}.share-banner>span{font-size:17px}.share-banner b{color:var(--ink)}
.state-tabs{border-bottom:1px solid var(--line);gap:24px}.state-tabs button{border:0;border-radius:0;background:transparent;padding:16px 0}.state-tabs .selected{background:transparent;color:var(--ink);border-bottom:2px solid var(--ink)}
.detail-nav{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:32px}.detail-nav button{font-size:11px}
.detail-visual{border-radius:0;background:#e9ece1}.detail-copy h1{font-size:40px;letter-spacing:-1.4px}.detail-copy .tag{border:0;border-bottom:1px solid var(--line);padding:8px 0;border-radius:0}.detail-copy>.generation{border-radius:0;border:0;border-left:1px solid var(--ink);padding:2px 0 2px 12px}
.detail-actions button{border-radius:0}.detail-actions button:last-child:not(:disabled):before{content:''}
.purchase-link{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:22px 0}.verification-panel{border-top-color:var(--ink)}
dialog{border-radius:0;background:var(--paper);border:1px solid var(--ink);padding:30px;box-shadow:0 16px 64px #22271d26}
dialog::backdrop{background:#20251d66;backdrop-filter:none}
.dialogtop{border-bottom:1px solid var(--ink);padding-bottom:20px!important;margin-bottom:24px;align-items:flex-start}
.dialogtop h2{font-size:24px;line-height:1.5;font-weight:500;letter-spacing:-.6px}.dialogtop button{border:1px solid var(--line);border-radius:0;width:34px;height:34px;padding:0;min-height:34px;flex-shrink:0;font:23px var(--mono)}
label{font-size:11px;color:#515949}
input,textarea,select{border-radius:0;background:#ffffff8c;border-color:#bfc3b6;padding:13px}
.flow-steps{gap:0;margin:24px 0 30px}.flow-steps li{border-top:1px solid var(--line);font-size:9px}.flow-steps li span{font:11px var(--mono)}.flow-steps li.current{border-top:3px solid var(--ink);padding-top:8px}.flow-steps li.complete{border-color:#788766;color:#606f4e}
.picker-categories{gap:0;border-bottom:1px solid var(--line)}
.picker-categories button{border:0;border-bottom:2px solid transparent;background:transparent;border-radius:0;padding:12px 13px;font-size:11px;color:var(--muted)}
.picker-categories button[aria-pressed=true]{background:transparent;color:var(--ink);border-bottom-color:var(--ink);font-weight:700}
.picker-categories button:hover{color:var(--ink)}
.grouped-picker>button{background:transparent;border-radius:0}.grouped-picker>button:hover{background:#eaedde}.grouped-picker .art{border-radius:0}.grouped-picker strong{font-size:15px}.grouped-picker small{font-size:9px}
.version-card{border-radius:0;background:transparent;border-color:var(--line)}.version-card h3{font-size:20px}.confirm-facts{border-radius:0;background:#e9ece1}.extra-fields{border-radius:0;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0}
.reason-options{gap:8px}.reason-options span{border-radius:0;padding:13px 14px;border-color:var(--line);font-size:11px;display:flex;align-items:center;gap:10px}
.reason-options span:before{content:'+';font:13px var(--mono);color:#8b9281}
.reason-options input:checked+span,.reason-options label:has(input:checked) span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.reason-options input:checked+span:before{content:'✓';color:var(--acid)}
.reason-options input:disabled+span{opacity:.4;cursor:default}
.registration-colors{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:26px 0}
.registration-colors legend{padding:0 10px 0 0;font-size:12px}.registration-colors .art{border-radius:0}
.registration-color-choices button{border-radius:0;border:1px solid var(--line);position:relative}
.registration-color-choices button[aria-pressed=true]{border:1px solid var(--ink);background:#fff;outline:1px solid var(--ink);outline-offset:-2px}
.registration-color-choices button[aria-pressed=true]:after{content:'✓';position:absolute;right:0;top:0;background:var(--ink);color:var(--acid);font:10px var(--mono);width:18px;height:18px;display:grid;place-items:center}
.required-label{color:#596d3d}.registration-submit{background:var(--paper);box-shadow:none;border-top:1px solid var(--ink)}
.spec-disclosure summary,.manual-color summary{color:#58664a}
.cloud-status{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;font-size:9px;padding:11px 0;color:#69765a}
#toast{border-radius:0;background:var(--ink)}
footer{border-top:1px solid var(--ink);font-size:8px;color:var(--muted);letter-spacing:.2px}
@media(min-width:1450px){.columns{grid-template-columns:minmax(0,730px) 220px;gap:50px}.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){aside{width:190px;padding:30px 20px}.app{margin-left:190px}aside .logo{font-size:14px}header{margin:0 30px}main{padding:44px 30px 65px}.columns{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gearcard{padding:18px}.detail-copy h1{font-size:32px}}
@media(max-width:700px){
 body{padding-bottom:78px}.app{margin:0}
 header{height:84px;margin:0 18px;border-bottom:1px solid var(--ink);gap:12px}
 header .logo{font-size:16px;letter-spacing:.5px;gap:7px}
 header button{border-radius:0;font-size:10px;padding:11px 12px}
 #accountButton{border:0;border-bottom:1px solid var(--line);font-size:9px;margin:0 0 0 auto;padding:9px 0;max-width:72px;min-height:35px}
 header #add{font-size:10px;padding:12px 10px;min-height:42px}
 main{padding:34px 18px 50px}
 h1{font-size:32px;letter-spacing:-1.5px;margin:22px 0 16px;line-height:1.45}
 .eyebrow{font-size:9px;letter-spacing:.7px}.sub{font-size:11px}
 .feed-heading{margin-bottom:28px}.live-dot{margin-top:24px;font-size:7px}
 .tabs{gap:25px;margin:27px 0;min-height:51px}
 .tabs button{border-radius:0;padding:16px 0 13px;font-size:11px;min-height:50px}
 .post{border-radius:0;padding:23px 0 28px;margin-bottom:14px}
 .person b{font-size:11px}.person small{font-size:8px}.avatar{border-radius:0;width:34px;height:34px}
 .product{border-radius:0;margin-top:22px}.product-label{top:20px;left:18px}.product-label strong{font-size:22px}.product-label span{font-size:9px}
 .product .art{aspect-ratio:1.15;margin-top:90px}.product .product-label:has(.generation)+.art{margin-top:118px}.product .official-photo img{padding:14px 28px}
 .product-label .generation{border-radius:0;font-size:7px}.post>p{font-size:11px}.tag{border-radius:0;padding:5px 0;font-size:9px}
 .actions button{font-size:10px;min-height:44px}.actions .stamp{font-size:11px}
 .connection{border-radius:0;padding:20px 16px;gap:12px;margin-bottom:35px}.connection h3{font-size:14px}.connection small{font-size:7px}
 .join-banner{border-radius:0;padding:23px 0;margin:0 0 36px;align-items:flex-start}.join-banner strong{font-size:17px;line-height:1.7;margin:12px 0}.join-banner small{font-size:7px}.join-banner b{font-size:9px;margin-top:25px}.join-banner span>span{font-size:9px}
 .toolbar{margin:30px 0 13px;gap:0}.toolbar input{padding:16px 0}.toolbar>button{font-size:10px;padding:7px 0 7px 12px;margin:9px 0;min-height:36px}
 .search-hint{font-size:10px;line-height:1.9;margin:0 0 24px}
 .brand-filter{gap:12px;margin-bottom:25px}.brand-filter select{font-size:13px!important;padding:12px 24px 12px 0}.brand-filter label{font-size:8px}
 .results-summary{padding:15px 0;font-size:10px}.results-summary strong{font-size:16px}.results-summary button{font-size:10px;min-height:35px}
 .grid{gap:0}.gearcard{border-radius:0;padding:14px 12px}.card-top{font-size:8px;min-height:22px;margin-bottom:8px}.card-top:after{font-size:8px}
 .gearcard .art{border-radius:0;margin:0 0 20px;aspect-ratio:1}.gearcard .art img{padding:8px}.gearcard .brand{font-size:9px;letter-spacing:.4px}.gearcard h3{font-size:14px;line-height:1.5;margin:8px 0 14px}
 .gearcard .generation{font-size:8px;margin:8px 0 16px}.gearcard .official-badge{font-size:7px}.card-tag{font-size:9px;line-height:1.7;padding-top:13px}.gearcard>button{font-size:9px;padding-top:12px;margin-top:12px;text-align:left}
 .colorway-thumbs{gap:4px;margin-bottom:14px}.colorway-thumbs button{border-radius:0;width:30px;height:30px;min-height:30px}
 .collection-meta button,.share-banner{border-radius:0}.share-banner{padding:22px 18px}.share-banner>span{font-size:14px}.profile .avatar{border-radius:0}
 .bottom-nav{height:calc(72px + env(safe-area-inset-bottom));background:var(--paper);color:var(--ink);border-top:1px solid var(--ink);padding:0 12px env(safe-area-inset-bottom)}
 .bottom-nav button{font-size:9px;gap:6px;padding:12px 0 10px;min-height:71px;border-radius:0;opacity:.5;position:relative}
 .bottom-nav button.active{opacity:1}
 .bottom-nav button.active:after{content:'';border-radius:0;inset:0 12px auto;height:2px;width:auto;background:var(--ink)}
 .bottom-nav svg{width:21px;height:21px;stroke-width:1.25}
 .bottom-nav button:hover{background:#e7eadd}
 .detail-visual{border-radius:0;background:#e9ece1}.detail-copy{padding-top:32px}.detail-copy h1{font-size:34px;letter-spacing:-1px}.detail-copy .tag{border-radius:0;padding:7px 0}.detail-actions{background:var(--paper);border-top-color:var(--ink)}
 dialog,#modal:has(.flow-steps){border-radius:0;max-width:calc(100vw - 20px);padding:22px 18px;background:var(--paper)}
 .dialogtop h2{font-size:20px;line-height:1.6}.dialogtop{padding-bottom:16px!important}.dialogtop button{border-radius:0}
 .flow-steps li{font-size:8px}.flow-steps li span{font-size:10px}
 .picker-categories{gap:0;margin:20px 0}.picker-categories button{border-radius:0;padding:12px 11px;font-size:10px}
 .grouped-picker strong{font-size:13px}.grouped-picker>button{gap:12px}
 .version-card{border-radius:0;padding:16px}.version-card h3{font-size:18px}.confirm-gear h3{font-size:19px}.confirm-facts{border-radius:0}
 .reason-options span{border-radius:0;font-size:10px;padding:13px 12px;gap:8px}.reason-options{gap:7px}
 .registration-colors{padding:18px 0;max-width:100%}.registration-color-choices button{border-radius:0;min-height:0}.registration-color-choices{gap:7px}
 .extra-fields{border-radius:0;padding:18px 0}.registration-submit{border-top-color:var(--ink);background:var(--paper)}
 .purchase-link{border-radius:0;padding:20px 0}
 footer{margin:0 18px;font-size:7px;padding:22px 0}
}
/* Keep the first products in view while giving the page title room. */
.cloud-status{margin:0 48px 0;max-width:calc(100% - 96px)}
main:has(.toolbar){padding-top:38px}
main:has(.toolbar) h1{margin-top:20px}
main:has(.toolbar) .toolbar{margin-top:26px}
main:has(.toolbar) .tabs{margin:23px 0}
main:has(.toolbar) .brand-filter{margin-bottom:22px}
@media(max-width:1100px){.cloud-status{margin:0 30px;max-width:calc(100% - 60px)}}
@media(max-width:700px){.cloud-status{margin:0 18px;max-width:calc(100% - 36px);padding:10px 0;min-height:36px}main:has(.toolbar){padding-top:30px}main:has(.toolbar) .toolbar{margin-top:26px}main:has(.toolbar) .tabs{margin:22px 0}}
.gearcard>.open-gear{border:0;padding:0;margin:0;min-height:0;text-align:left;background:transparent}

.hydration-guide{margin:-10px 0 26px;font-size:10px;max-width:760px;line-height:2}.card-top>span{overflow-wrap:anywhere;line-height:1.7}.card-top:after{padding-left:8px}
[hidden]{display:none!important}