/* Refinement layer: lighter lines, no hard shadows, more air, calmer components */
:root{--line:1.5px solid var(--ink);--hair:1px solid rgba(22,22,22,.14);--shadow:none;--soft:0 1px 2px rgba(22,22,22,.04),0 10px 28px -14px rgba(22,22,22,.22);--r:8px;--tile:#F4F0E6}

/* header */
.top{background:rgba(238,232,218,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:var(--hair)}
.ann{background:var(--ink);color:var(--paper);font-size:12.5px;font-weight:500}
.ibtn{border:var(--hair);background:transparent;border-radius:50%;box-shadow:none;transition:background .15s}
.ibtn:hover{background:var(--white)}
.ibtn:active{transform:scale(.95);box-shadow:none}
.ibtn svg{stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ibtn.lang{border-radius:22px;padding:0 14px}
.ibtn .dot{background:var(--yellow);color:var(--ink)}
.nav a{border-radius:20px;font-weight:500}
.nav a:hover,.nav a.on{background:var(--ink);color:var(--paper)}
.tabs{background:rgba(22,22,22,.96);backdrop-filter:blur(10px);border-top:0;padding-bottom:env(safe-area-inset-bottom)}
.wa{border:0;box-shadow:0 8px 24px -6px rgba(0,0,0,.35);width:52px;height:52px}

/* buttons */
.btn{border:1.5px solid var(--ink);box-shadow:none;border-radius:var(--r);font-size:15px;transition:background .15s,color .15s,border-color .15s,transform .1s}
.btn:hover{transform:none;box-shadow:none;background:var(--ink);color:var(--yellow)}
.btn:active{transform:scale(.98);box-shadow:none}
.btn.dark{background:var(--ink);color:var(--paper);box-shadow:none}
.btn.dark:hover{background:var(--yellow);color:var(--ink)}
.btn.white{background:transparent}
.btn.white:hover{background:var(--ink);color:var(--paper)}
.btn.sm{box-shadow:none}
.link{border-bottom:1.5px solid currentColor;font-weight:600}
.link:hover{background:none;border-color:var(--yellow)}

/* rhythm + type */
section.s{padding:clamp(56px,9vw,112px) 0;border-bottom:var(--hair)}
.h-xl{font-size:clamp(36px,7.2vw,80px);line-height:1.14;letter-spacing:-.01em}
.h-l{font-size:clamp(26px,4.2vw,42px)}
.h-m{font-size:clamp(19px,2.4vw,24px)}
.lead{font-size:clamp(17px,1.6vw,20px);color:#3a3732;max-width:54ch}
.k .lead,.y .lead{color:inherit}
.sechead{margin-bottom:clamp(26px,4vw,48px)}
.eyebrow{font-size:11px;letter-spacing:.18em;opacity:.7}
mark{padding:0 .12em;border-radius:3px}

/* hero */
.hero .wrap{padding-block:clamp(48px,9vw,110px) clamp(40px,6vw,70px)}
.hero .t{filter:none;width:min(34vw,170px)}
.hero .meta{opacity:.85;font-weight:500}
.hero .meta span:before{content:"";display:inline-block;width:6px;height:6px;background:var(--ink);margin-inline-end:8px;vertical-align:middle}
.marq{background:var(--ink);color:var(--paper);border:0;font:500 12px var(--f-num);letter-spacing:.14em;padding:12px 0}

/* professor-list block */
.dl{background:var(--ink);border:0;border-radius:16px;box-shadow:none;padding:clamp(24px,5vw,56px);gap:32px}
.stepbox b{width:28px;height:28px;border-radius:50%;font-size:13px}

/* cards */
.card{border:var(--hair);box-shadow:none;border-radius:12px;transition:box-shadow .2s,border-color .2s}
.card:hover{box-shadow:var(--soft)}
.pcard .img{background:var(--tile);border-bottom:0}
.pcard .img svg{width:50%;height:50%;transition:transform .35s ease}
.pcard:hover .img svg{transform:scale(1.06) rotate(-2deg)}
.pcard h3{font:600 15px var(--f-body)}
.pcard .price{font-size:16px}
.pcard .pad{padding:14px 16px 16px}
.badge{background:var(--ink);color:var(--paper);border-radius:20px;font:600 11px var(--f-body);padding:3px 10px;top:12px;inset-inline-start:12px}
.badge.y{background:var(--yellow);color:var(--ink);border:0}
.tag{border:var(--hair);border-radius:20px;font-weight:500;padding:3px 12px}
.add{width:40px;height:40px;border:0;border-radius:50%;background:var(--ink);color:var(--paper);box-shadow:none;font-weight:400;transition:background .15s,color .15s}
.add:hover{background:var(--yellow);color:var(--ink)}
.add:active{transform:scale(.94);box-shadow:none}

/* categories */
.cat{border:var(--hair);box-shadow:none;border-radius:12px;min-height:150px;padding:20px;transition:border-color .2s,background .2s}
.cat:hover{transform:none;border-color:var(--ink)}
.cat.kit{background:var(--yellow);border-color:var(--yellow)}
.cat h3{font-size:17px}

/* kits */
.kit{border:var(--hair);box-shadow:none;border-radius:16px;overflow:hidden}
.kit.hot{background:var(--ink);color:var(--paper);box-shadow:none;border-color:var(--ink)}
.kit.hot .hd,.kit.hot .ft{border-color:rgba(238,232,218,.16)}
.kit.hot li:before{color:var(--yellow)}
.kit.hot .btn.dark{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.kit.hot .btn.dark:hover{background:var(--paper)}
.kit.hot .link{border-color:var(--yellow)}
.kit .hd{padding:26px 24px 20px;border-bottom:var(--hair)}
.kit .ft{border-top:var(--hair);padding:20px 24px}
.kit ul{padding:18px 24px}
.kit h3{font-size:28px}
.kit .badge{background:var(--yellow);color:var(--ink)}
.save{background:var(--yellow);color:var(--ink);border-radius:20px;font-weight:600;font-size:12px}
.y .kit.hot .save{background:var(--yellow)}

/* tables */
.tbl{border:var(--hair);border-radius:10px;overflow:hidden}
.tbl th,.tbl td{border-bottom:var(--hair)}
.tbl th{background:var(--tile);color:var(--ink);font:600 13px var(--f-body)}

/* product page */
.gal .main{background:var(--tile);border:0;box-shadow:none;border-radius:16px}
.gal .main svg{width:52%;height:52%}
.chip{border:var(--hair);border-radius:var(--r);padding:6px 18px;transition:border-color .15s}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.qty{border:var(--hair);border-radius:var(--r);overflow:hidden}
.qty span{border-inline:var(--hair)}
.why{background:none;border:0;border-inline-start:3px solid var(--yellow);padding:2px 16px;color:#3a3732}
.sticky{background:rgba(238,232,218,.96);backdrop-filter:blur(8px);border-top:var(--hair)}

/* shop / cart / checkout */
.filters{border:var(--hair);border-radius:12px;padding:20px}
.line{border:var(--hair);border-radius:12px;padding:14px}
.line .thumb{background:var(--tile);border:0;border-radius:8px}
.sum{border:var(--hair);box-shadow:none;border-radius:14px;padding:24px}
.sum .r.t{border-top:var(--hair);font-weight:700}
.coupon input{border:var(--hair);border-radius:var(--r)}
.radio{border:var(--hair);border-radius:var(--r)}
.radio.on{background:var(--white);border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.note{background:#FBEFB4;border:0;font-weight:500;border-radius:var(--r)}
.note.w{background:var(--white);border:var(--hair)}
.note.e{background:var(--err)}
.fs{border:var(--hair);border-radius:14px;padding:24px}
.fs legend{background:none;border:0;font:700 16px var(--f-head);padding:0 8px}
.fld input,.fld textarea,.sel{border:var(--hair);border-radius:var(--r);min-height:50px;transition:border-color .15s,box-shadow .15s}
.fld input:focus,.fld textarea:focus,.sel:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(252,211,42,.6)}
.item{border:var(--hair);border-radius:12px}
.item .th{background:var(--tile);border:0;border-radius:8px}
.item select{border:var(--hair);border-radius:6px}
.offer{border:0;box-shadow:none;border-radius:14px}
.faq details{border:var(--hair);border-radius:12px;overflow:hidden}
.faq details[open] summary{background:none;border-bottom:var(--hair)}
.stat{border:var(--hair);border-radius:12px}
.photo{border:0;box-shadow:none;border-radius:12px;overflow:hidden}
.vid{border:0;box-shadow:none;border-radius:16px}
.trust div{background:none;border:0;border-top:var(--line);border-radius:0;padding:16px 0 0}
.trust svg{stroke-width:1.6}
.toast{background:var(--ink);color:var(--paper);border:0;border-radius:12px;box-shadow:0 14px 32px -8px rgba(0,0,0,.45)}
.toast a{color:var(--yellow)}
.tl .st:before{border-width:2px}
footer{padding:72px 0 28px;border-top:0}
.st-pill{border:var(--hair);border-radius:20px}
.thumbs button{border:var(--hair)}

@media (min-width:900px){.dl{padding:64px}}

/* ---- round 2: editorial details ---- */
/* ruler scale along the hero edge */
.hero:after{content:"";display:block;height:22px;background:
  repeating-linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px 14px) bottom/100% 9px no-repeat,
  repeating-linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px 70px) bottom/100% 18px no-repeat;opacity:.9}
.hero .wrap{padding-bottom:clamp(32px,5vw,56px)}
.hero h1{max-width:14ch}
.hero .t{width:min(40vw,200px)}
@media(min-width:900px){.hero .t{width:min(100%,330px)}}

/* numbered index (categories) — echoes the brand contents page */
.idx{border-top:var(--line)}
.idxr{display:grid;grid-template-columns:48px 1fr auto 28px;gap:12px;align-items:center;padding:20px 4px;border-bottom:var(--hair);transition:background .2s,padding .2s}
.idxr:hover{background:var(--yellow);padding-inline:16px}
.idxr .n{font-size:13px;opacity:.55}
.idxr .t b{display:block;font:700 clamp(18px,2.4vw,26px)/1.3 var(--f-head)}
.idxr .t small{display:block;color:var(--mute);font-size:13px;margin-top:2px}
.idxr:hover .t small{color:var(--ink)}
.idxr .c{font-size:13px;opacity:.6}
.idxr .go{font-size:20px;transition:transform .2s}
.idxr:hover .go{transform:translateX(-4px)}
html[dir=ltr] .idxr:hover .go{transform:translateX(4px)}
.idxr.soon{opacity:.5}
@media(min-width:900px){.idx{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}}

/* product tile: scale ticks + sku like a drawing label */
.pcard .img{position:relative;overflow:hidden}
.pcard .img:after{content:"";position:absolute;inset-inline:0;bottom:0;height:10px;background:repeating-linear-gradient(90deg,rgba(22,22,22,.35) 0 1px,transparent 1px 8px)}
.pcard .sku{font-size:10.5px;letter-spacing:.14em;color:var(--mute)}
.pcard:nth-child(4n+2) .img{background:#ECE5D2}
.pcard:nth-child(5n+3) .img{background:#F7F3E8}
.pcard .row{border-top:var(--hair);margin-top:12px;padding-top:12px}

/* trust: big editorial numerals */
.trust{counter-reset:t;gap:28px}
.trust div{counter-increment:t;position:relative}
.trust div:before{content:"0" counter(t);display:block;font:500 12px var(--f-num);letter-spacing:.14em;opacity:.5;margin-bottom:12px}
.trust svg{display:none}
.trust b{font-size:17px;margin-bottom:6px}
.trust small{color:var(--mute);display:block;font-size:14px;line-height:1.6}

/* section headings: rule above for structure */
.sechead h2{position:relative}
.sechead .eyebrow{margin-bottom:12px}

/* dark story section + dl form polish */
.k .tag{background:transparent;border-color:rgba(238,232,218,.3);color:var(--paper)}
.k .tags .tag{background:transparent!important}
.dl .sel{background-color:var(--paper)}
.dl h2{font-weight:900}
.dl .btn{background:var(--yellow)}
.dl .btn:hover{background:var(--paper)}

/* video + collab */
.vid{box-shadow:none}
.card img{transition:transform .5s ease}
.photo img{transition:transform .5s ease}
.photo:hover img{transform:scale(1.03)}

/* footer */
footer h4{font-size:12px;letter-spacing:.16em;opacity:.7;color:var(--yellow);margin-bottom:14px}
footer a{padding:5px 0;font-size:15px}
footer .legal{border-top:1px solid rgba(238,232,218,.14);font-size:12.5px;letter-spacing:.04em}

/* subtle page entrance */
main{animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){main{animation:none}}

/* product page polish */
.pp h1{font-weight:900}
.pp .sku{font-size:11px;letter-spacing:.14em}
.crumbs{padding-top:20px}
.opt h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.sticky .btn{min-height:52px}
.price{letter-spacing:-.01em}
.price small{opacity:.6;font-weight:500}

/* mobile tab bar active indicator */
.tabs a.on{box-shadow:inset 0 2px 0 var(--yellow)}

/* real product photos */
img.ph{width:100%;height:100%;object-fit:cover;display:block}
.pcard .img img.ph{transition:opacity .3s,transform .5s ease}
.pcard:hover .img img.ph:not(.alt){transform:scale(1.04)}
.pcard .img img.ph.alt{position:absolute;inset:0;opacity:0}
.pcard:hover .img img.ph.alt{opacity:1}
.gal .main img.ph{border-radius:16px}
.line .thumb,.item .th{padding:0!important;overflow:hidden}
.line .thumb svg,.item .th svg{padding:8px}
.thumbs button{padding:0;overflow:hidden}
.pcard .img:has(img.ph):after{display:none}

/* ---- base styles for pieces used by both themes ---- */
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid rgba(22,22,22,.3);border-radius:999px;font-size:12.5px;font-weight:600}
.pill:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink)}
.hl{text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.2em;text-decoration-skip-ink:none}
.collage{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}
.collage a{display:block;overflow:hidden;border-radius:18px;border:1.5px solid var(--ink);background:var(--paper)}
.collage img{width:100%;height:100%;object-fit:cover;display:block}
.collage .c1{grid-column:1/-1;aspect-ratio:16/10}
.collage .c2,.collage .c3{aspect-ratio:1/1}
.masonry{columns:2;column-gap:14px}
.mcard{break-inside:avoid;margin:0 0 14px;background:var(--white);border:var(--hair);border-radius:14px;overflow:hidden}
.mcard img{width:100%;height:auto;display:block}
.mcard figcaption{display:flex;align-items:center;gap:10px;padding:12px 14px;font-size:13px}
.mcard figcaption img{width:26px;height:26px;border-radius:50%;background:var(--yellow);padding:4px;object-fit:contain;flex:none}
.mcard figcaption span{margin-inline-start:auto;font-size:12px;opacity:.6}
@media(min-width:700px){.masonry{columns:3}}
@media(min-width:1000px){.masonry{columns:4}}
.hero .wrap{grid-template-columns:1fr}
@media(min-width:900px){.hero .wrap{grid-template-columns:1.05fr 1fr;gap:56px}}
.hero h1.h-xl{font-size:clamp(34px,5.6vw,66px);line-height:1.28}
.vid video{aspect-ratio:9/16;max-height:72vh;width:auto;max-width:100%;margin-inline:auto;object-fit:contain}
.vid{max-width:340px;margin-inline:auto}
.top .hcta{display:none}@media(min-width:1100px){.top .hcta{display:inline-flex}}
.themebtn svg{width:20px;height:20px;fill:none;stroke-width:1.8}
/* light theme: dark logo mark */
html[data-theme=light] .logo img,html[data-theme=light] .err404 .t{filter:brightness(0)}
html[data-theme=light] .collage a{box-shadow:none}

/* ---- round 4: T-Square-first home (big T, scale numerals, yellow lead) ---- */
.hero mark{background:var(--ink);color:var(--yellow)}
.bigT{position:relative;display:grid;place-items:center;min-height:clamp(260px,40vw,420px);overflow:visible}
.bigT img{width:clamp(120px,24vw,220px);height:auto;transform:rotate(-10deg);position:relative;z-index:1}
.bigT .ty{display:none}
.bigT .scale{position:absolute;inset-inline-end:0;bottom:-6px;font:700 clamp(64px,13vw,150px)/1 var(--f-num);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:2px var(--ink);opacity:.55;direction:ltr;z-index:0}
.hero .wrap.numsrow{display:grid;grid-template-columns:repeat(2,1fr);gap:0;padding-block:18px 6px;border-top:1.5px solid var(--ink)}
.numsrow>div{padding:8px 4px;display:flex;flex-direction:column;gap:2px}
.numsrow b{font:700 clamp(30px,5vw,46px)/1.1 var(--f-num);letter-spacing:-.02em}
.numsrow span{font-size:13px;font-weight:600;opacity:.8}
@media(min-width:900px){.hero .wrap.numsrow{grid-template-columns:repeat(4,1fr);padding-block:22px 10px}.numsrow>div{padding-inline:0 24px}}
html:not([data-theme=light]) .numsrow{}
.kitsec{background:var(--yellow)}
.kitsec .link{color:var(--ink);border-color:var(--ink)}
.strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 16px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.strip .mcard{flex:0 0 min(250px,68vw);margin:0;scroll-snap-align:start}

/* header fit on small screens (both themes) */
.logo,.logo span,.nav a,.top .btn{white-space:nowrap}
.nav{gap:2px}.nav a{padding:6px 11px;font-size:14px}
@media(max-width:480px){
  .top .wrap{gap:6px;padding-inline:12px}
  .ibtn{width:38px;height:38px}
  .ibtn.lang{padding:0 10px;font-size:13px}
  .logo{font-size:17px;gap:7px}.logo img{height:34px}
}
.kitsec .kit.hot .link,.kit.hot .link{color:var(--yellow);border-color:var(--yellow)}

/* page entrance: opacity only — a transform here would trap position:fixed children (sticky add-to-cart bar) */
@keyframes rise{from{opacity:0}}
main{animation:rise .3s ease both}
@media(max-width:899px){body:has(.sticky) .wa{bottom:150px}}

/* availability + size summary on cards (idea: shaydm.store) */
.pmeta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;margin:2px 0 6px;min-height:18px}
.stk{display:inline-flex;align-items:center;font-weight:600;font-size:12px;color:var(--ok)}
.stk:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);margin-inline-end:6px}
.szs{color:var(--mute);font-family:var(--f-num);letter-spacing:.02em}
.pp .stk{margin-inline-start:6px}

/* ---- shelf strip: a ruler with shop-shelf signs hanging from it ---- */
.shelf{padding-bottom:clamp(36px,6vw,72px);overflow:hidden}
.ruler{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:6px 16px 34px;scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
.rtrack{position:relative;display:flex;gap:12px;padding-top:46px;width:max-content;min-width:100%;max-width:none}
@media(min-width:1200px){.rtrack{margin-inline:auto}}
.rtrack:before{content:"";position:absolute;inset-inline:0;top:0;height:28px;background:
  repeating-linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px 12px) bottom/100% 9px no-repeat,
  repeating-linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px 60px) bottom/100% 18px no-repeat,
  linear-gradient(var(--ink),var(--ink)) bottom/100% 1.5px no-repeat}
.plate{position:relative;flex:0 0 160px;scroll-snap-align:start;background:var(--ink);color:var(--paper);border-radius:4px;padding:14px 14px 13px;display:flex;flex-direction:column;gap:2px;min-height:138px;transition:transform .45s cubic-bezier(.3,1.5,.5,1),background .2s,color .2s;transform-origin:calc(100% - 27px) -18px}
[dir=ltr] .plate{transform-origin:27px -18px}
.plate .hang{position:absolute;top:-18px;inset-inline-start:23px;width:2px;height:18px;background:var(--ink)}
.plate .hang:before{content:"";position:absolute;top:-3px;inset-inline-start:-3px;width:8px;height:8px;border-radius:50%;background:var(--ink)}
.plate:after{content:"";position:absolute;top:8px;inset-inline-start:21px;width:6px;height:6px;border-radius:50%;background:var(--paper);box-shadow:inset 0 1px 1px rgba(0,0,0,.4)}
.plate em{position:absolute;top:10px;inset-inline-end:12px;font:500 9.5px var(--f-num);letter-spacing:.18em;font-style:normal;color:#a9a395}
.plate .pc{font:700 42px/1 var(--f-num);color:var(--yellow);margin-top:24px;letter-spacing:-.04em}
.plate b{font:800 16px/1.35 var(--f-head);margin-top:8px}
.plate small{color:#a9a395;font-size:12px}
.plate:hover,.plate:focus-visible{background:var(--yellow);color:var(--ink);transform:rotate(-2.5deg)}
.plate:hover .pc,.plate:hover small,.plate:hover em{color:var(--ink)}
.plate.kit{background:var(--yellow);color:var(--ink);outline:1.5px solid var(--ink);outline-offset:-1.5px}
.plate.kit .pc,.plate.kit small,.plate.kit em{color:var(--ink)}
.plate.kit:hover{background:var(--ink);color:var(--paper)}
.plate.kit:hover .pc{color:var(--yellow)}.plate.kit:hover small,.plate.kit:hover em{color:#a9a395}
.plate.soon{opacity:.45}

/* ---- size diagrams: ISO sheet outlines / length bars, selected size lights up ---- */
.pcard .img,.gal .main{position:relative}
.szv{position:absolute;top:12px;inset-inline-end:12px;width:40px;height:auto;z-index:2;overflow:visible;pointer-events:none}
.szv rect{fill:none;stroke:var(--ink);stroke-width:1.1;vector-effect:non-scaling-stroke;opacity:.38;transition:fill .3s,opacity .3s}
.szv text{font:600 7.5px var(--f-num);fill:var(--ink);opacity:.5}
.szv g.on rect{fill:var(--yellow);opacity:1;stroke-width:1.6}
.szv g.on text{opacity:1;font-weight:700}
.szv.len{width:54px}
.szv.big{width:70px;top:22px;inset-inline-end:22px}
.szv.big.len{width:96px}
.pcard:hover .szv rect{opacity:.6}

/* round 2 of diagrams: no overlap with the product art, bigger labels */
.pcard .img>svg:not(.szv),.pcard .img>.ph:not(.alt){position:relative}
.pcard .img>svg:not(.szv){width:46%;height:46%;margin-top:16%}
.gal .main>svg:not(.szv){width:50%;height:50%;margin-top:8%}
.szv{width:46px;top:12px}
.szv.len{width:62px}
.szv text{font-size:8.6px}
.szv.big{width:78px}
.szv.big.len{width:108px}
.szv{direction:ltr;unicode-bidi:isolate}

/* stock states + admin product table */
.stk.low{color:#B45309}.stk.low:before{background:#B45309}
.stk.out{color:var(--err)}.stk.out:before{background:var(--err);animation:none}
.cin{width:110px;min-height:38px;padding:4px 10px;border:var(--hair);border-radius:8px;background:var(--white);color:inherit;font-family:var(--f-num)}
.cin:focus{outline:2px solid var(--yellow);outline-offset:1px}
.tbl.cat tr.dim{opacity:.5}
.tbl.cat td{vertical-align:middle}

/* back-office */
.adm-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:18px;border-bottom:var(--hair)}
.adm-tabs{display:flex;gap:4px;flex-wrap:wrap}
.adm-tabs a{padding:8px 16px;border-radius:999px;font-weight:600;font-size:14px;border:var(--hair)}
.adm-tabs a:hover{border-color:var(--ink)}
.adm-tabs a.on{background:var(--ink);color:var(--yellow);border-color:var(--ink)}
.adm-filter{display:grid;gap:12px;margin-bottom:14px}
.adm-grid{display:grid;gap:18px}
@media(min-width:900px){.adm-grid{grid-template-columns:1.25fr 1fr;align-items:start}}
.adm-note{padding:10px 12px;border-inline-start:3px solid var(--yellow);background:rgba(252,211,42,.10);border-radius:6px;margin-bottom:8px}
.adm-note p{margin:2px 0 0}
.permgrid{display:grid;gap:2px 18px;margin-top:8px}
@media(min-width:700px){.permgrid{grid-template-columns:1fr 1fr}}
details>summary.btn{list-style:none;display:inline-flex;cursor:pointer}
details>summary.btn::-webkit-details-marker{display:none}