/* ========================================================================== GRIDROP · TABLE SKIN — the one place a table's eleven colours become a table. This file is the template system's whole surface area. skin.js writes the tokens onto ; every rule below spends them. The catalogue's still and the real game load this SAME file, so a table cannot look one way in the shop and another way in a match. ---- WHY IT IS THIS LONG ------------------------------------------------- felt.css was written for one table, so its cool colours are literals, not variables: forty-four selectors carry a hardcoded #45eded / rgba(69,237,237) / rgba(150,220,230) / #143440. A skin that only overwrote --fneon would recolour about a fifth of the table and leave cyan glowing out of the rest — the clock's digits, the rail's hairline, the chosen card's halo, the round chip. Every one of those forty-four is re-pointed below, in felt.css's own order, so the list can be diffed against it when felt.css changes. ---- THE RULES ----------------------------------------------------------- · EVERY selector is prefixed `body.ottbl`, so with no table equipped this file changes nothing at all. That is what makes it safe to load on the live page before a single table is for sale. · It sets COLOUR only. Not one size, position, radius or z-index — those belong to felt.css and felt.js, which measure a real table for them. · Specificity mirrors felt.css's and adds `.ottbl`, so it wins by one class rather than by !important. Where felt.css already shouts, so does this. ---- THE ELEVEN ---------------------------------------------------------- --t-surface the mat (a photograph or a painted felt) --t-room the wall behind it --t-rail the padded border --t-ink body text --t-mut the quieter second line --t-ac the table's own light --t-gold the money colour --t-pa/--t-pb the two ends of a panel's field --t-slot an empty place --t-edge the printed hairline plus --t-ac-rgb / --t-gold-rgb, the same two as "r,g,b" for rgba(). ========================================================================== */ /* ---- 1 · THE TOKENS felt.css ALREADY READS ------------------------------ */ /* four of them are honest variables, so they are simply re-pointed */ body.ottbl.ot-felt{ --fneon:var(--t-ac); --fgold:var(--t-gold); --fink:var(--t-ink); --fmut:var(--t-mut); --ffelt:var(--t-pb)} /* ⚠️ `:not(.ottbl-preview)` ON EVERY PAGE-LEVEL RULE, and it is load-bearing. In the GAME the page IS the table, so the surface belongs on . In the CATALOGUE the table is a 16:9 still inside a shop, and painting the shop with the mat would put leather behind the price and the buy button. The showroom sets that class; the game never does. Everything below this line — cards, places, slabs, the rail — is shared by both without a guard. */ body.ottbl.ot-felt:not(.ottbl-preview){background:var(--t-room)!important} /* ⚠️ AND THE PAGE'S OWN LID COMES OFF WITH IT. overtake.html:74 paints `.stage` with an opaque `linear-gradient(180deg,var(--bg2),#0a1116)`, and on the table `.stage` is the whole viewport. felt.css:43 strips its border, radius and shadow — everything except that background — so the game shipped with a dark sheet lying over at all times. Nobody could see it, because the sheet and the body underneath it were the same dark. Put a mat on the body and it is suddenly the only thing on screen: the owner equipped Copper & Leather, played a round, and got a black table with copper buttons on it. The mat WAS loaded, WAS painted, and was covered by one gradient. Scoped to `.ottbl` so a page with no table equipped keeps its lid exactly. */ body.ottbl.ot-felt .stage{background:none!important;box-shadow:none!important} /* ---- 2 · THE SURFACE ---------------------------------------------------- TWO FITS, because a table is not always a cloth. `plate` — a painted felt behaves as the game already does: it fills the ellipse, and the rim and lip are the table's edge. `bleed` — a PHOTOGRAPHED mat is a printed sheet lying flat. It has its own printed border and its own centre mark, so stretching it onto a 2.4x-overscanned ellipse would throw both off the screen. It is laid on the room instead, edge to edge, and the plate steps out of its way. This is the difference between cloth on a round table and a playmat on a flat one, and the owner's table is the second. */ body.ottbl-bleed.ot-felt:not(.ottbl-preview){ background:var(--t-surface)!important; background-size:cover!important;background-position:center!important} body.ottbl-bleed .ofelt-plate{background:none;box-shadow:none} body.ottbl-bleed .ofelt-lip, body.ottbl-bleed .ofelt-felt{background:none;box-shadow:none} body.ottbl-bleed .ofelt-felt::before, body.ottbl-bleed .ofelt-felt::after{display:none} /* the padded border the mat lies in, and one key light over the whole room */ body.ottbl-bleed.ot-felt:not(.ottbl-preview)::after{content:'';position:fixed;inset:0;z-index:0; pointer-events:none; box-shadow:inset 0 0 140px 14px var(--t-rail); background:radial-gradient(125% 135% at 50% 40%,rgba(255,238,214,.10),rgba(0,0,0,0) 62%)} /* ⚠️ THE RIM AND THE LIP WERE MISSED BY THE ENUMERATION, and it is worth saying how, so the next sweep does not miss them the same way. The forty-four were found by searching felt.css for a literal cool colour standing inside a selector. `--frim` is neither: it is a conic-gradient declared once as a token (felt.css:26), so a search for cyan never lands on a rule and a search for `var(--frim)` finds one innocent line. The lip's #10181e is a blue-black — cold, but not cyan enough to trip the filter. The result was an ellipse of the ORIGINAL table's milled steel wrapped around every new one. Bleed tables never showed it because both step aside there; a `plate` table showed it always. */ body.ottbl-plate.ot-felt{ --frim:conic-gradient(from 180deg, var(--t-pb), color-mix(in srgb,var(--t-pa) 62%,#ffffff) 12%, color-mix(in srgb,var(--t-pb) 82%,#000000) 26%, color-mix(in srgb,var(--t-pa) 44%,#ffffff) 40%, var(--t-pb) 55%, color-mix(in srgb,var(--t-pa) 56%,#ffffff) 70%, color-mix(in srgb,var(--t-pb) 82%,#000000) 84%, var(--t-pb))} body.ottbl-plate .ofelt-lip{ background:linear-gradient(180deg, color-mix(in srgb,var(--t-pb) 66%,#000000), color-mix(in srgb,var(--t-pb) 26%,#000000))} body.ottbl-plate .ofelt-felt{ background:var(--t-surface); box-shadow:inset 0 6px 26px rgba(0,0,0,.62), inset 0 0 70px rgba(var(--t-ac-rgb),.10)} body.ottbl-plate .ofelt-felt::after{ background: radial-gradient(58% 52% at 50% 42%,rgba(var(--t-ac-rgb),.10),rgba(0,0,0,0) 74%), radial-gradient(120% 60% at 50% 108%,rgba(0,0,0,.5),rgba(0,0,0,0) 62%)} /* ---- 3 · THE PLACES ----------------------------------------------------- */ body.ottbl .ofelt-slots .oslot{ background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.13)); border-color:var(--t-slot); box-shadow:inset 0 3px 8px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.05)} /* the place lights ONCE as a card lands, then settles — in this table's light */ body.ottbl .ofelt-slots .oslot.lit{animation:ottblLand .85s ease-out 1} @keyframes ottblLand{ 0%{border-color:var(--t-ac); box-shadow:inset 0 0 22px rgba(var(--t-ac-rgb),.75),0 0 26px rgba(var(--t-ac-rgb),.5)} 55%{border-color:rgba(var(--t-ac-rgb),.6); box-shadow:inset 0 0 12px rgba(var(--t-ac-rgb),.35),0 0 12px rgba(var(--t-ac-rgb),.22)} 100%{border-color:var(--t-slot); box-shadow:inset 0 3px 8px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.05)}} /* ---- 4 · THE CARDS ------------------------------------------------------ ⚠️ THE FACE IS NOT TOUCHED. A table skin owns the room, never the card: the metal, the letter, the corner marks and the tier colours all stay exactly as the game deals them, and a card skin is a separate purchase. What a table may reach is the LIGHT AROUND a card — its cast shadow, the ring on one you have chosen, and the back of a card lying face down. */ body.ottbl.ot-felt .pool .pcard{ box-shadow:0 8px 16px rgba(0,0,0,.55), 0 0 16px rgba(var(--t-ac-rgb),.16), inset 0 -3px 6px rgba(60,70,80,.35)} body.ottbl.ot-felt .hand .hcard{ box-shadow:0 12px 24px rgba(0,0,0,.58), 0 0 18px rgba(var(--t-ac-rgb),.20), inset 0 -3px 6px rgba(60,70,80,.35)} body.ottbl.ot-felt .hand.pick .hcard:hover{ filter:brightness(1.08) drop-shadow(0 0 12px rgba(var(--t-ac-rgb),.5))} /* face down */ body.ottbl.ot-felt .pool .pcard.back{ background:linear-gradient(160deg, color-mix(in srgb,var(--t-pa) 88%,#000), color-mix(in srgb,var(--t-pb) 92%,#000) 58%, color-mix(in srgb,var(--t-pa) 76%,#000))!important; border-color:rgba(var(--t-ac-rgb),.42)!important; box-shadow:0 8px 16px rgba(0,0,0,.6),inset 0 0 22px -8px rgba(var(--t-ac-rgb),.85)!important} body.ottbl.ot-felt .pool .pcard.back::before{ border-color:rgba(var(--t-ac-rgb),.24); background-image:repeating-linear-gradient(45deg, rgba(var(--t-ac-rgb),.12) 0,rgba(var(--t-ac-rgb),.12) 2px,transparent 2px,transparent 6px)} body.ottbl.ot-felt .pool .pcard.back::after{ border-color:rgba(var(--t-ac-rgb),.8);box-shadow:0 0 12px -2px rgba(var(--t-ac-rgb),.6)} /* a card you have CHOSEN — this is half of how the round is played */ body.ottbl.ot-felt .pool .pcard.sel{ box-shadow:0 0 0 var(--cbw,2px) var(--t-ac), 0 0 24px rgba(var(--t-ac-rgb),.6), 0 10px 18px rgba(0,0,0,.55), inset 0 -3px 6px rgba(60,70,80,.35)!important} /* the order you gave it */ body.ottbl.ot-felt .pool .pcard .ord{ background:linear-gradient(180deg, color-mix(in srgb,var(--t-ac) 72%,#fff), color-mix(in srgb,var(--t-ac) 82%,#000)); color:#08181d; box-shadow:0 0 10px rgba(var(--t-ac-rgb),.85),0 2px 4px rgba(0,0,0,.5)} /* ---- 5 · THE CHROME: exit chip, round plate, stopwatch ------------------ */ body.ottbl .ofelt-chip{ background:color-mix(in srgb,var(--t-pb) 62%,rgba(0,0,0,.72)); border-color:rgba(var(--t-ac-rgb),.28)} body.ottbl .ofelt-back button, body.ottbl .ofelt-back .backbtn, body.ottbl .ofelt-back .ch-help{color:var(--t-ink); text-shadow:0 0 10px rgba(var(--t-ac-rgb),.4)} body.ottbl .ofelt-back .ch-help, body.ottbl .ofelt-back #fsbtn{border-color:rgba(var(--t-ac-rgb),.35)!important; color:var(--t-ac)!important} body.ottbl .ofelt-back button:hover{color:var(--t-ac)} body.ottbl .ofelt-back #fsbtnhint-float{color:var(--t-ac)!important} body.ottbl .ofelt-round .v{color:var(--t-ink); text-shadow:0 0 12px rgba(var(--t-ac-rgb),.45)} body.ottbl .ofelt-clock{ background:linear-gradient(180deg, color-mix(in srgb,var(--t-pb) 58%,rgba(0,0,0,.72)), color-mix(in srgb,var(--t-pb) 40%,rgba(0,0,0,.8))); border-color:rgba(var(--t-ac-rgb),.28)} /* ⚠️ THE DIGITS KEEP THEIR OWN COLOUR ON PURPOSE. --fclock is the COUNTDOWN: felt.js rewrites it every tick — cyan with time left, orange at ten, red at five — and it is the loudest warning on the table. A skin that tinted it would make "you have five seconds" a different colour on every table, so only the digit FACE follows the furniture and the alarm is left alone. */ body.ottbl .ofelt-clock .d{color:var(--t-ink)} /* ---- 6 · THE STATUS LINE AND THE WORD BAR ------------------------------- */ body.ottbl.ot-felt .arena-cen > .instr{ background:color-mix(in srgb,var(--t-pb) 48%,rgba(0,0,0,.62)); border-color:rgba(var(--t-ac-rgb),.22)} body.ottbl.ot-felt .racebar{ background:color-mix(in srgb,var(--t-pb) 40%,rgba(0,0,0,.6)); border-color:rgba(var(--t-ac-rgb),.26)} body.ottbl.ot-felt .racebar #win{ background:linear-gradient(180deg,rgba(4,8,11,.95), color-mix(in srgb,var(--t-pb) 55%,rgba(0,0,0,.9))); border-color:rgba(var(--t-ac-rgb),.4)} body.ottbl.ot-felt .racebar .btn::before{ background:linear-gradient(180deg, color-mix(in srgb,var(--t-pa) 60%,#000), color-mix(in srgb,var(--t-pb) 80%,#000)); border-color:rgba(var(--t-ac-rgb),.26)} /* ---- 7 · THE PLAYERS RAIL ----------------------------------------------- */ body.ottbl .ofelt-lb{ filter:drop-shadow(0 22px 44px rgba(0,0,0,.65)) drop-shadow(0 0 26px rgba(var(--t-ac-rgb),.13))} body.ottbl .ofelt-lbin{ border-inline-start-color:rgba(var(--t-ac-rgb),.18); background: repeating-linear-gradient(45deg,rgba(255,255,255,.016) 0 3px,rgba(0,0,0,0) 3px 6px), linear-gradient(180deg, color-mix(in srgb,var(--t-pa) 58%,rgba(0,0,0,.76)) 0%, color-mix(in srgb,var(--t-pb) 70%,rgba(0,0,0,.7)) 100%), radial-gradient(120% 55% at 50% 0%,rgba(var(--t-ac-rgb),.10),rgba(0,0,0,0) 62%)} body.ottbl .ofelt-lbhd{border-bottom-color:rgba(var(--t-ac-rgb),.22); background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(0,0,0,.12))} body.ottbl .ofelt-lbhd .t{text-shadow:0 0 14px rgba(var(--t-ac-rgb),.4)} body.ottbl .ofelt-lbhd .p{border-color:rgba(var(--t-ac-rgb),.35); background:color-mix(in srgb,var(--t-pb) 55%,rgba(0,0,0,.8));color:var(--t-ink)} body.ottbl .ofelt-lbhd .p.rd{border-color:rgba(var(--t-ac-rgb),.45)} body.ottbl .ofelt-lbhd .p.rd b{text-shadow:0 0 10px rgba(var(--t-ac-rgb),.45)} /* YOUR banner is framed in the table's own light. The rank frames — gold, silver, bronze — are NOT touched: first place has to look like first place on every table, or the podium stops meaning anything. */ body.ottbl .ofelt-row.me .ofelt-fr{ background:linear-gradient(160deg,var(--t-ac), color-mix(in srgb,var(--t-ac) 40%,#000) 45%,var(--t-ac))} body.ottbl .ofelt-row.me.r4plus .ofelt-fr{ filter:drop-shadow(0 0 9px rgba(var(--t-ac-rgb),.47))} /* the player's own accent (--rc) is the AVATAR's, not the table's, and it stays — it is the only thing telling one rival from another at a glance */ /* ⚠️ THREE THE FIRST SWEEP LEFT COLD, all found by the live gate rather than by reading, which is exactly why the gate exists. · .ofelt-mebar (felt.css:854) — the spine down YOUR row. Its middle stop was already `--fneon`, so it took the table's light in the middle and kept felt.css's cyan at both ends and in its glow. Half-tinted reads worse than untinted: a copper bar fading into cyan. · .ofelt-arrow (felt.css:861) — its FILTER stacks two drop-shadows and only the first is `--fneon`. A filter is not a background or a border, so a sweep that looks at paint properties never sees it. · .ofelt-lbtog — this one is not in felt.css at all. bigcards.css:586 lights the rail's hide button while the rail is out, and bigcards.css was not in the enumeration: the sweep covered felt.css and console-skin.css, and a FOURTH stylesheet also paints the table. Its selector is (0,3,0), so this one adds `.ottbl` to outrank it rather than shouting. */ body.ottbl .ofelt-mebar{ background:linear-gradient(180deg,rgba(var(--t-ac-rgb),.15),var(--t-ac) 50%,rgba(var(--t-ac-rgb),.15)); box-shadow:0 0 9px rgba(var(--t-ac-rgb),.67)} body.ottbl .ofelt-arrow{ filter:drop-shadow(0 0 6px var(--t-ac)) drop-shadow(0 0 14px rgba(var(--t-ac-rgb),.53))} body.ottbl.ot-felt:not(.ot-lbhide) .ofelt-lbtog{ color:var(--t-panel-ink,#0d0603); background:linear-gradient(180deg,var(--t-ac),color-mix(in srgb,var(--t-ac) 62%,#000)); box-shadow:0 6px 18px -8px rgba(var(--t-ac-rgb),.75)} /* ---- 8 · «كلمتك» — the game's own plate and its four slabs --------------- console-skin.css builds every slab out of --ac (the line), --ac2 (the icon highlight), --gl (the glow, as r,g,b) and --b1/--b2 (the dark under it). Re-pointing those five moves border, glow, hum, sheen and icon together without redrawing any of them. ⚠️ THE RED STAYS RED. «إزالة الكلمة» throws your word away. A destructive control that changes colour with the furniture is a different button on every table, so only the dark it stands on follows the wood. */ body.ottbl.otcs .otcs-a1{--ac:var(--t-ac);--ac2:#ffffff;--gl:var(--t-ac-rgb); --b1:color-mix(in srgb,var(--t-pa) 42%,rgba(0,0,0,.9)); --b2:color-mix(in srgb,var(--t-pb) 58%,rgba(0,0,0,.92))} body.ottbl.otcs .otcs-a2{--ac:var(--t-gold);--ac2:#fff8e6;--gl:var(--t-gold-rgb); --b1:color-mix(in srgb,var(--t-pa) 42%,rgba(0,0,0,.9)); --b2:color-mix(in srgb,var(--t-pb) 58%,rgba(0,0,0,.92))} body.ottbl.otcs .otcs-a3{--b1:color-mix(in srgb,#3a0c10 62%,var(--t-pb)); --b2:color-mix(in srgb,#1c0508 70%,var(--t-pb))} /* «ثبّت» — bigcards.css dresses it in cyan; on the table the game deals today the accent IS that cyan, so this changes nothing there and everything else */ body.ottbl .bcword .bcwlock{ background:linear-gradient(135deg, color-mix(in srgb,var(--t-ac) 55%,#000), color-mix(in srgb,var(--t-ac) 95%,#fff)); color:#08181d} body.ottbl .bcword.ok .bcwlock{ box-shadow:0 0 0 2px rgba(var(--t-ac-rgb),.5),0 0 22px rgba(var(--t-ac-rgb),.65)} body.ottbl .bcword.ok .bcwrd{color:var(--t-ac); text-shadow:0 0 14px rgba(var(--t-ac-rgb),.45)} /* ===== THE SWATCH — a table shown small, and shown TRUE ===================== Owner, 2026-08-19: «مو انت تحطلي مثلا تصوير او شكل مشابه للبطاقة او الطاولة واللاعب يختار ويشوف شي ثاني — انا اريد شي يكون نفسه ما يكون مغارب له». Every door that offers a table — the room-setup tab (overtake/menu-screen.js) and the chip's overlay (overtake/tables/tablepick.js) — paints its swatch with THIS, so there is one idea of what a table looks like small, in one place, and neither door can drift from the other or from the felt. Every COLOUR comes from the table's own tokens, exactly as the felt spends them: nothing below names a colour of its own except the brushed pass, whose values are felt.css's and are the same for every plate table in the game. Only the GEOMETRY is restated, because a 78px box cannot carry a 400px plate's 70px inset glow — a preview that kept the pixel radii would be showing a different thing in the name of being the same one. ⚠️ PLATE AND BLEED DIVIDE HERE THE WAY THEY DIVIDE IN THE GAME. A painted felt (`plate`) carries the brushed pass and the vignette — `.ofelt-felt`'s own ::before/::after out of felt.css, value for value. A PHOTOGRAPHED mat (`bleed`) carries neither, because `body.ottbl-bleed` switches both off above: a printed sheet has its own grain and its own printed border, and laying ours over it would be inventing texture the player is never going to see. It takes the room's padded border instead, which is what that table actually sits in. */ /* ⚠️ A PHOTOGRAPHED MAT IS SHOWN WHOLE, NOT CROPPED. `cover` fills the box by cutting whatever does not fit, which on a swatch the size of a thumbnail leaves a patch of colour and no table — the owner, choosing a table on his phone, 2026-08-20: «أريد أن أشوف الطاولة كاملة … بشكل مصغر، مو فقط يكون لون». A painted felt (`plate`) is a CSS gradient with no edges to lose, so it keeps `cover`; a photograph gets `contain` on the room's own colour, and every door that shows one gives it the mat's 16:9 so there is nothing left to letterbox. */ .ottbl-sw{position:relative;overflow:hidden; background:var(--t-surface);background-size:cover;background-position:center} .ottbl-sw[data-fit="bleed"]{background-color:var(--t-room);background-size:contain;background-repeat:no-repeat} /* ⚠️ A PAINTED TABLE IS SHOWN AS A TABLE IN A ROOM, THE WAY THE PHOTOGRAPHED ONE IS. Owner, 2026-08-20, choosing a table: «فقط التي تظهر كطاولة حقيقية هي النحاس والجلد … يجب أن تكون أيضاً الطاولات الأخرى نفس نظام العرض … بمعنى أنه يمكن اللاعب رؤية الطاولة من كل زاوية». He is right, and the asymmetry was structural, not artistic: `bleed` is a PHOTOGRAPH of a mat standing in a room — rail, floor, the light on it — while `plate` was the mat's gradient stretched edge to edge, which is a colour and not an object. Both fits now draw the same thing, from the tokens each table already declares: the swatch itself = --t-room, the wall behind it ::before = the padded rail it sits in (--t-rail), with its shadow on the floor ::after = the mat inside that (--t-surface), with its weave and its key light Nothing is invented — a table that ships no photograph still owns eleven colours, and this is the same recipe the game paints a real table with. EVERY inset is a percentage so the same rule reads at 200px in the picker and at 48px in the waiting-room band. ⚠️ THE WEAVE IS BAKED, NOT LAYERED WITH opacity. It used to be a full-cover ::before at opacity:.2; folded into the mat's own background list its alphas are multiplied by that .2 instead, which keeps the texture identical and leaves ::before free to be the rail. */ .ottbl-sw[data-fit="plate"]{background:var(--t-room); box-shadow:inset 0 0 0 1px var(--t-edge)} .ottbl-sw[data-fit="plate"]::before{content:'';position:absolute; left:5.5%;right:5.5%;top:8%;bottom:12%;border-radius:9%/16%; background:var(--t-rail); box-shadow:0 0 0 1px var(--t-edge),0 5px 14px -4px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.07)} .ottbl-sw[data-fit="plate"]::after{content:'';position:absolute; left:9.5%;right:9.5%;top:15%;bottom:19.5%;border-radius:6%/11%; /* ⚠️ THE SHORTHAND, AND ONLY THE SHORTHAND. `--t-surface` is whatever skin.js wrote: for a painted table a list of gradients that ENDS IN A COLOUR («…,#143440»), and for a photographed one a whole `url(...) center/100% 100% no-repeat`. Neither is a valid , so `background-image:var(--t-surface)` is dropped by the parser — the whole declaration, silently. Measured: Blue Steel came out a black rectangle in the picker while every other table painted, because its list is the only one ending in a bare hex. Which also means nothing may be LAYERED on top of it here; the table's own surface already carries its weave (المجلس has one at 41°, الرمال has its own), so the light is spent as inset shadow instead of as another background layer. */ background:var(--t-surface);background-size:cover;background-position:center; box-shadow:inset 0 0 0 1px var(--t-edge),inset 0 3px 10px rgba(0,0,0,.5), inset 0 0 22px rgba(var(--t-ac-rgb),.10), inset 0 -6px 14px -6px rgba(0,0,0,.45)} .ottbl-sw[data-fit="bleed"]{ box-shadow:inset 0 0 0 1px var(--t-edge), inset 0 0 30px 4px var(--t-rail)} /* the cards and the accent ring sit ABOVE the two passes — a pseudo-element is painted over static children, and a plate table's vignette would otherwise lie across the very cards the swatch exists to show. ⚠️ z-index ONLY. This started as `position:relative;z-index:2` and it cost the accent ring: both doors position their children absolutely, `.ottbl-sw > *` and `.om-tac` are the same specificity, and this file loads as a while the tab's rules are injected as a