/* ---------------------------------------------------------------------------
 * Box model.
 *
 * These components render inside whatever theme is active, and not every theme
 * sets border-box. Without it, `width:100%` plus padding overflows its own
 * container — the Visit Site button came out 317px wide inside a 281px column,
 * which is 100% plus its 36px of padding.
 * ------------------------------------------------------------------------- */
.oca-top,.oca-top *,
.oca-rank,.oca-rank *,
.oca-dir,.oca-dir *,
.oca-log,.oca-log *,
.oca-faq,.oca-faq *,
.oca-verdict,.oca-verdict *,
.oca-answer,.oca-answer *,
.oca-scroller,.oca-scroller *,
.oca-cnav,.oca-cnav *,
.oca-note,.oca-cta{box-sizing:border-box;}

/* ---------------------------------------------------------------------------
 * Reset inside our own blocks.
 *
 * These render inside whatever theme is active, and themes set link colours,
 * heading sizes and margins that leak in. Neutralising them here is cheaper
 * than fighting each one as it appears — the domain line under a logo showing
 * up at heading size was exactly that.
 * ------------------------------------------------------------------------- */
.oca-row a,
.oca-op a,
.oca-dir__row,
.oca-log__row{text-decoration:none;}

.oca-row :is(h1,h2,h3,h4,p,ul,ol,li),
.oca-op  :is(h1,h2,h3,h4,p,ul,ol,li){margin:0;}

/* ---------------------------------------------------------------------------
 * Shortcode output.
 *
 * Colours are read from custom properties the theme defines, with fallbacks
 * baked in so these blocks still render correctly if the plugin is ever used
 * under a different theme.
 * ------------------------------------------------------------------------- */

.oca-answer,
.oca-table,
.oca-faq,
.oca-verdict,
.oca-rank,
.oca-note {
	--_void:  var(--oca-surface, #F5F7FB);
	--_slab:  var(--oca-paper,   #FFFFFF);
	--_edge:  var(--oca-line,    #DFE5EF);
	--_chalk: var(--oca-ink,     #111111);
	--_ash:   var(--oca-muted,   #5B6577);
	--_volt:  var(--oca-blue,    #0018F0);
	--_mint:  var(--oca-good,    #005418);
	--_sun:   var(--oca-warn,    #807300);
	--_blood: var(--oca-bad,     #EB0000);
	--_mono:  var(--oca-mono,  "Manrope", -apple-system, BlinkMacSystemFont, sans-serif);
	--_disp:  var(--oca-display, "Mattone", "Manrope", system-ui, sans-serif);
}

/* --- short answer --- */
.oca-answer{border:1px solid var(--_edge);background:var(--_void);border-radius:4px;margin:22px 0;}
.oca-answer__h{padding:8px 15px;border-bottom:1px solid var(--_edge);font-family:var(--_mono);
	font-weight:700;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--_sun);}
.oca-answer__b{padding:16px 18px;color:var(--_chalk);}
.oca-answer__b p:last-child{margin-bottom:0;}

/* --- tables --- */
.oca-scroller{overflow-x:auto;border:1px solid var(--_edge);border-radius:4px;margin:20px 0;}
.oca-table{border-collapse:collapse;width:100%;min-width:600px;font-size:15px;}
.oca-table th,.oca-table td{text-align:left;padding:10px 13px;border-bottom:1px solid var(--_edge);
	vertical-align:top;}
.oca-table thead th{background:var(--_void);font-family:var(--_mono);font-weight:700;font-size:9.5px;
	letter-spacing:.1em;text-transform:uppercase;color:var(--_volt);}
.oca-table tbody tr:last-child th,.oca-table tbody tr:last-child td{border-bottom:none;}
.oca-mono{font-size:13px;font-variant-numeric:tabular-nums;color:var(--_ash);}
.oca-ok{color:var(--_mint);font-weight:700;}
.oca-no{color:var(--_blood);font-weight:700;}

.oca-note{border-left:3px solid var(--_sun);background:var(--_slab);padding:16px 19px;margin:20px 0;
	color:var(--_ash);}
.oca-note strong,.oca-note b{color:var(--_chalk);}

/* --- FAQ --- */
.oca-faq{margin:20px 0;}
.oca-faq details{border-bottom:1px solid var(--_edge);}
.oca-faq details:last-child{border-bottom:none;}
.oca-faq summary{padding:14px 0;font-weight:700;cursor:pointer;list-style:none;color:var(--_chalk);}
.oca-faq summary::-webkit-details-marker{display:none;}
.oca-faq summary::after{content:"+";float:right;color:var(--_mint);font-family:var(--_mono);}
.oca-faq details[open] summary::after{content:"\2013";}
.oca-faq__a{padding:0 0 15px;color:var(--_ash);}
.oca-faq__a strong,.oca-faq__a b{color:var(--_chalk);}

/* --- verdict --- */
.oca-verdict{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0;}
@media (max-width:640px){.oca-verdict{grid-template-columns:1fr;}}
.oca-verdict__col{background:var(--_slab);border:1px solid var(--_edge);border-radius:4px;padding:16px 18px;}
.oca-verdict__col h3{font-family:var(--_disp);font-size:15px;margin:0 0 10px;letter-spacing:-.01em;}
.oca-verdict__col--pro{border-left:3px solid var(--_mint);}
.oca-verdict__col--pro h3{color:var(--_mint);}
.oca-verdict__col--con{border-left:3px solid var(--_blood);}
.oca-verdict__col--con h3{color:var(--_blood);}
.oca-verdict ul{margin:0;padding-left:18px;color:var(--_chalk);}
.oca-verdict li{margin-bottom:6px;}

/* --- ranked list --- */
.oca-rank{display:flex;flex-direction:column;gap:11px;margin:22px 0;}
.oca-op{background:var(--_slab);border:1px solid var(--_edge);border-radius:4px;
	display:grid;grid-template-columns:44px 1fr auto auto;gap:14px;padding:16px 18px;align-items:center;
	transition:border-color .18s,box-shadow .18s;}
.oca-op:hover{border-color:var(--_mint);box-shadow:0 6px 22px rgba(17,17,17,.09);}
.oca-op__pos{font-family:var(--_disp);font-size:26px;line-height:1;text-align:center;color:var(--_volt);}
.oca-op:first-child .oca-op__pos{color:var(--oca-accent,#F06000);font-weight:700;}
.oca-op__main{min-width:0;}
.oca-op__nm{font-family:var(--_disp);font-size:18px;letter-spacing:-.02em;color:var(--_chalk);
	text-decoration:none;}
.oca-op__nm:hover{color:var(--_mint);}
.oca-op__verdict{margin:5px 0 0;font-size:14px;color:var(--_ash);}
.oca-op__meta{font-family:var(--_mono);font-weight:600;font-size:11.5px;color:var(--_ash);margin-top:7px;
	display:flex;gap:10px;flex-wrap:wrap;}
.oca-op__meta .oca-ok,.oca-op__meta .oca-no{font-weight:400;}
.oca-ad{color:var(--_sun);}
.oca-op__sc{text-align:right;}
.oca-op__sc b{display:block;font-family:var(--_disp);font-size:24px;color:var(--_mint);line-height:1;}
.oca-op__sc i{font-style:normal;font-family:var(--_mono);font-weight:600;font-size:9.5px;letter-spacing:.1em;
	text-transform:uppercase;color:var(--_ash);}
@media (max-width:720px){
	.oca-op{grid-template-columns:36px 1fr auto;}
	.oca-op .oca-cta{grid-column:2/-1;justify-self:start;}
}

/* --- outbound button --- */
.oca-cta{display:inline-flex;align-items:center;justify-content:center;
	width:100%;max-width:186px;min-height:40px;padding:0 18px;
	font-weight:700;font-size:14px;letter-spacing:.01em;text-decoration:none;
	border-radius:4px;white-space:nowrap;border:none;
	/* Black on orange, not white. White text on this orange is 3.3:1 and fails;
	   black is 5.7:1 — and black-on-colour is how the lion itself is drawn. */
	background:var(--oca-accent,#F06000);color:var(--oca-ink,#111);
	font-weight:800;
	box-shadow:0 1px 0 rgba(0,0,0,.18);
	transition:background .16s,transform .1s,box-shadow .1s;}
.oca-cta:hover{background:#FF6B08;color:var(--oca-ink,#111);}
.oca-cta:active{transform:translateY(1px);box-shadow:none;}

.oca-verified{font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--oca-muted,#818CA8);margin:14px 0;}

@media (prefers-reduced-motion:reduce){
	.oca-op,.oca-cta{transition:none;}
	.oca-cta:hover{transform:none;}
}

/* ---------------------------------------------------------------------------
 * Comparison rows.
 *
 * Four columns on desktop — position, brand, offer, action — collapsing to a
 * stack on mobile with the button full width, because on a phone the button is
 * the only thing that needs to be unmissable.
 * ------------------------------------------------------------------------- */

.oca-top{
	--_void:  var(--oca-surface, #F5F7FB);
	--_slab:  var(--oca-paper,   #FFFFFF);
	--_edge:  var(--oca-line,    #DFE5EF);
	--_chalk: var(--oca-ink,     #111111);
	--_ash:   var(--oca-muted,   #5B6577);
	--_mint:  var(--oca-good,    #005418);
	--_sun:   var(--oca-warn,    #807300);
	--_volt:  var(--oca-blue,    #0018F0);
	--_mono:  var(--oca-mono,  "Manrope", -apple-system, BlinkMacSystemFont, sans-serif);
	--_disp:  var(--oca-display, "Mattone", "Manrope", system-ui, sans-serif);
	display:flex;flex-direction:column;gap:10px;margin:24px 0;
}

.oca-top__h{font-family:var(--_disp);margin:0 0 4px;}

.oca-row{
	display:grid;
	grid-template-columns:38px minmax(150px,190px) 1fr minmax(180px,215px);
	gap:18px;align-items:center;
	background:var(--_slab);border:1px solid var(--_edge);border-radius:5px;
	padding:16px 18px 16px 0;position:relative;overflow:hidden;
	transition:border-color .18s,box-shadow .18s;
}
.oca-row:hover{border-color:var(--_mint);box-shadow:0 6px 22px rgba(17,17,17,.09);}

.oca-row__pos{
	font-family:var(--_disp);font-size:15px;line-height:1;color:var(--_ash);
	align-self:stretch;display:flex;align-items:center;justify-content:center;
	background:var(--_void);border-right:1px solid var(--_edge);
	margin:-16px 0;padding:0 4px;
}
/* The leading marker takes the brand orange with black text — the same
   pairing as the button, and the same one the lion is drawn with. */
.oca-row:first-child .oca-row__pos{color:var(--_chalk);background:var(--oca-accent,#F06000);
	border-right-color:var(--oca-accent,#F06000);}

.oca-row__brand{display:block;text-decoration:none;}
.oca-row__logobox{width:100%;height:70px;border:1px solid var(--_edge);border-radius:6px;
	background:var(--_slab);display:flex;align-items:center;justify-content:center;
	padding:9px 12px;overflow:hidden;transition:border-color .16s;}
.oca-row__brand:hover .oca-row__logobox{border-color:var(--oca-accent,#F06000);}
.oca-row__logo{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;}
/* Fallback while a logo is missing. Same box, so adding a logo later changes
   nothing about the layout. */
.oca-row__fallback{font-family:var(--_disp);font-size:16px;line-height:1.15;
	letter-spacing:-.03em;color:var(--_chalk);text-align:center;
	/* Explicit, because the surrounding theme sets link sizes this would
	   otherwise inherit. */
	text-decoration:none;}
/* With no logo the name carries the column, so it needs to be bigger. */
.oca-row__brand:not(:has(.oca-row__logo)) 
.oca-row__offer{text-align:center;min-width:0;}
.oca-row__bonus{font-family:var(--_disp);font-size:clamp(17px,2vw,21px);line-height:1.15;
	margin:0;color:var(--_chalk);letter-spacing:-.02em;text-wrap:balance;}
.oca-row__sub{margin:6px 0 0;font-size:13.5px;color:var(--_ash);}
.oca-row__feat{list-style:none;margin:11px 0 0;padding:0;display:flex;gap:7px 18px;
	flex-wrap:wrap;justify-content:center;font-size:13px;color:var(--_chalk);}
.oca-row__feat li::before{content:"\00B7";color:var(--_mint);margin-right:6px;font-weight:700;}

.oca-row__act{display:flex;flex-direction:column;align-items:center;gap:9px;}
.oca-row__act .oca-cta{width:100%;}

.oca-row__pay{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap;
	justify-content:center;}
.oca-row__pay li{
	font-family:var(--_mono);font-weight:600;font-size:9px;letter-spacing:.04em;text-transform:uppercase;
	border:1px solid var(--_edge);border-radius:2px;padding:3px 5px;color:var(--_ash);
	background:var(--_void);white-space:nowrap;
}
.oca-row__rev{font-size:12px;color:var(--_ash);text-decoration:underline;
	text-underline-offset:3px;}
.oca-row__rev:hover{color:var(--_mint);}

.oca-top__disc{font-family:var(--_mono);font-weight:600;font-size:9.5px;letter-spacing:.06em;
	text-transform:uppercase;color:var(--_ash);margin:4px 0 0;text-align:center;}

@media (max-width:980px){
	.oca-row{grid-template-columns:32px 1fr 1fr;padding-right:14px;}
	.oca-row__act{grid-column:2/-1;flex-direction:row;flex-wrap:wrap;
		justify-content:flex-start;align-items:center;}
	/* No flex-grow. Growing made the button width depend on how many payment
	   chips sat beside it, so no two rows matched. */
	.oca-row__act .oca-cta{flex:0 0 186px;width:186px;}
}
@media (max-width:620px){
	.oca-row{grid-template-columns:1fr;gap:13px;padding:0 16px 16px;min-height:0;}
	/* Reset placement from the tablet rule above. Its grid-column:2/-1 refers to
	   a column that does not exist in this single-column grid, which puts the
	   button in the wrong cell. */
	.oca-row > *{grid-column:auto;}
	.oca-row__pos{margin:0 -16px;padding:7px 16px;border-right:none;
		border-bottom:1px solid var(--_edge);justify-content:flex-start;font-size:13px;}
	.oca-row__brand{display:block;}
	.oca-row__logobox{width:150px;height:58px;}
	.oca-row__offer{text-align:left;}
	.oca-row__bonus{font-size:19px;}
	.oca-row__feat{justify-content:flex-start;}
	.oca-row__act{align-items:stretch;flex-direction:column;gap:9px;}
	/* Full width on a phone: the button is the only thing that matters here, and
	   46px clears the 44px minimum touch target.
	   flex:0 0 auto is required — flex-basis follows the main axis, so the
	   tablet rule's `flex:0 0 186px` would set the height once this container
	   becomes a column. */
	.oca-row__act .oca-cta{flex:0 0 auto;width:100%;max-width:none;
		min-height:46px;height:46px;font-size:15px;}
	.oca-row__pay,.oca-row__rev{align-self:flex-start;}
}

@media (prefers-reduced-motion:reduce){ .oca-row{transition:none;} }


/* ---------------------------------------------------------------------------
 * Country directory.
 *
 * Replaces a grid of cards. The card version carried the regulator name and
 * payment methods, neither of which a reader needs before they have picked a
 * country, and both of which the country page repeats. What they do need is
 * three things: can I play, how many operators have you actually rated, and go.
 * Ten rows now fit the space four cards took.
 * ------------------------------------------------------------------------- */

.oca-dir{
	--_paper: var(--oca-paper, #fff);
	--_line:  var(--oca-line,  #DFE5EF);
	--_ink:   var(--oca-ink,   #111);
	--_muted: var(--oca-muted, #5B6577);
	--_good:  var(--oca-good,  #00A14B);
	--_warn:  var(--oca-warn,  #C98A00);
	--_bad:   var(--oca-bad,   #D0202F);
	--_acc:   var(--oca-accent,#F06000);
	--_mono:  var(--oca-mono,  "Manrope", -apple-system, BlinkMacSystemFont, sans-serif);
	--_disp:  var(--oca-display, "Mattone", "Manrope", system-ui, sans-serif);
	border:1px solid var(--_line);border-radius:8px;overflow:hidden;background:var(--_paper);
	margin:22px 0;
}
.oca-dir__grid{display:grid;grid-template-columns:1fr 1fr;}
@media (max-width:760px){.oca-dir__grid{grid-template-columns:1fr;}}
/* flag | name | chevron. The name takes the free space so it sits hard against
   the flag; anything else leaves it floating mid-row. */
.oca-dir__row{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;
	padding:13px 16px;text-decoration:none;color:inherit;
	border-bottom:1px solid var(--_line);transition:background .14s;}
.oca-dir__grid > .oca-dir__row:nth-child(odd){border-right:1px solid var(--_line);}
@media (max-width:760px){.oca-dir__grid > .oca-dir__row:nth-child(odd){border-right:none;}}
.oca-dir__row:hover{background:var(--oca-surface,#F5F7FB);}
.oca-dir__name{font-family:var(--_disp);font-size:16px;letter-spacing:-.02em;line-height:1.2;
	color:var(--_ink);}
.oca-dir__name small{display:block;font-weight:600;font-size:11.5px;letter-spacing:0;margin-top:3px;}
.oca-dir__row.is-licensed .oca-dir__name small{color:var(--_good);}
.oca-dir__row.is-state    .oca-dir__name small{color:var(--_warn);}
.oca-dir__row.is-illegal  .oca-dir__name small{color:var(--_bad);}
/* A thin border stops the white bands in several of these disappearing into
   the row, and keeps every flag the same visual weight. */
.oca-flag{display:block;flex:0 0 auto;border-radius:2px;
	box-shadow:0 0 0 1px rgba(17,17,17,.14);}
.oca-dir__go{width:7px;height:7px;border-right:2px solid var(--_acc);border-bottom:2px solid var(--_acc);
	transform:rotate(-45deg);transition:transform .16s;}
.oca-dir__row:hover .oca-dir__go{transform:rotate(-45deg) translate(2px,2px);}
@media (prefers-reduced-motion:reduce){.oca-dir__go,.oca-dir__row{transition:none;}}

/* ---------------------------------------------------------------------------
 * Country navigation.
 * ------------------------------------------------------------------------- */

.oca-cnav{
	--_line:  var(--oca-line,  #DFE5EF);
	--_ink:   var(--oca-ink,   #111);
	--_muted: var(--oca-muted, #5B6577);
	--_acc:   var(--oca-accent,#F06000);
}

/* The header nav.
 *
 * This is the whole menu, not a second row beneath one. The site's structure is
 * ten country pages, each holding its operator reviews — so the countries are
 * the navigation. A row above them carrying "Home" (the logo does that) and
 * "All countries" (this is that) was a nav bar for the sake of having one.
 *
 * Scrolls rather than wrapping, so the header is one height on every screen. */
.oca-cnav--bar{
	display:flex;align-items:stretch;gap:0;
	/* flex-basis 0, not auto: from `auto` the strip is sized by its content and
	   refuses to shrink, so it widens the page instead of scrolling inside
	   itself. And no justify-content:flex-end — with overflow that pushes the
	   first countries off the start edge, where scrolling cannot reach them. */
	flex:1 1 0;min-width:0;
	overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.oca-cnav--bar::-webkit-scrollbar{display:none;}
.oca-cnav--bar a{
	flex:0 0 auto;display:flex;align-items:center;padding:0 12px;
	font-size:13.5px;font-weight:600;color:var(--_muted);text-decoration:none;
	white-space:nowrap;border-bottom:2px solid transparent;transition:color .16s;
}
.oca-cnav--bar a:hover{color:var(--_ink);}
.oca-cnav--bar a.is-current{color:var(--_ink);border-bottom-color:var(--_acc);}

/* Footer column. Two columns so ten countries do not run the footer long. */
.oca-cnav--list{list-style:none;margin:0;padding:0;columns:2;column-gap:18px;}
.oca-cnav--list li{margin-bottom:7px;break-inside:avoid;}
.oca-cnav--list a{color:var(--_muted);text-decoration:none;font-size:13.5px;}
.oca-cnav--list a:hover{color:var(--_acc);}
.oca-cnav--list a.is-current{color:var(--_ink);}

/* On a phone the strip wraps rather than scrolls.
 *
 * A scroll strip hides seven of the ten countries behind a gesture most people
 * never make. Wrapping costs vertical space, so the items shrink to pills to
 * keep it to three rows rather than four. */
@media (max-width:760px){
	.oca-cnav--bar{
		flex-wrap:wrap;overflow:visible;gap:5px;padding:9px 0 10px;
		justify-content:flex-start;
	}
	.oca-cnav--bar a{
		padding:6px 10px;font-size:12px;line-height:1.2;
		border:1px solid var(--_line);border-radius:999px;
		border-bottom-width:1px;
	}
	.oca-cnav--bar a.is-current{
		color:#fff;background:var(--_ink);border-color:var(--_ink);
	}
}

/* Byline. Small, factual, directly under the heading. */
.oca-byline{
	font-size:13px;color:var(--oca-muted,#5B6577);margin:6px 0 18px;
}
.oca-byline a{color:var(--oca-ink,#111);text-decoration:underline;text-underline-offset:3px;}
.oca-byline a:hover{color:var(--oca-accent,#F06000);}

/* ---------------------------------------------------------------------------
 * Regulatory changelog.
 *
 * Dated entries, newest first. The dot carries direction: green where a change
 * favoured players, red where it did not, amber where it was neither.
 * ------------------------------------------------------------------------- */

.oca-log{
	--_line:  var(--oca-line,  #DFE5EF);
	--_ink:   var(--oca-ink,   #111);
	--_muted: var(--oca-muted, #5B6577);
	--_good:  var(--oca-good,  #005418);
	--_warn:  var(--oca-warn,  #807300);
	--_bad:   var(--oca-bad,   #EB0000);
	--_acc:   var(--oca-accent,#F06000);
	--_disp:  var(--oca-display, "Mattone", "Manrope", system-ui, sans-serif);
	border:1px solid var(--_line);border-radius:8px;overflow:hidden;
	background:var(--oca-paper,#fff);margin:22px 0;
}
.oca-log__row{display:grid;grid-template-columns:100px 128px 1fr auto;gap:16px;
	align-items:baseline;padding:14px 16px;border-bottom:1px solid var(--_line);
	text-decoration:none;color:inherit;transition:background .14s;}
.oca-log__row:last-child{border-bottom:none;}
.oca-log__row:hover{background:var(--oca-surface,#F5F7FB);}
.oca-log__date{font-weight:600;font-size:12px;color:var(--_muted);white-space:nowrap;
	font-variant-numeric:tabular-nums;}
.oca-log__where{font-family:var(--_disp);font-size:14px;letter-spacing:-.02em;color:var(--_ink);}
.oca-log__where::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
	margin-right:7px;vertical-align:middle;background:var(--_warn);}
.oca-log__row.is-up   .oca-log__where::before{background:var(--_good);}
.oca-log__row.is-down .oca-log__where::before{background:var(--_bad);}
.oca-log__what{font-size:14.5px;color:var(--_muted);}
.oca-log__what b{color:var(--_ink);font-weight:700;}
.oca-log__go{width:7px;height:7px;border-right:2px solid var(--_acc);
	border-bottom:2px solid var(--_acc);transform:rotate(-45deg);align-self:center;
	transition:transform .16s;}
.oca-log__row:hover .oca-log__go{transform:rotate(-45deg) translate(2px,2px);}
@media (max-width:820px){
	.oca-log__row{grid-template-columns:1fr auto;gap:4px 14px;padding:13px 15px;}
	.oca-log__date{grid-column:1;font-size:11px;}
	.oca-log__go{grid-column:2;grid-row:1/4;}
	.oca-log__where,.oca-log__what{grid-column:1;}
}
@media (prefers-reduced-motion:reduce){.oca-log__row,.oca-log__go{transition:none;}}


/* ---------------------------------------------------------------------------
 * Tables on a phone.
 *
 * Below 620px the payment table stops being a table and becomes one block per
 * method, each cell labelled with its column. Nothing to scroll sideways, and
 * the right-hand columns — the cap and the tested date, which are the useful
 * ones — stop being the half nobody sees.
 * ------------------------------------------------------------------------- */

@media (max-width:620px){
	.oca-scroller{overflow-x:visible;border:none;border-radius:0;}

	.oca-table{min-width:0;width:100%;border-collapse:separate;border-spacing:0;}
	.oca-table thead{position:absolute;width:1px;height:1px;overflow:hidden;
		clip:rect(0 0 0 0);white-space:nowrap;}

	.oca-table tbody tr{
		display:block;border:1px solid var(--_edge);border-radius:7px;
		padding:12px 14px;margin-bottom:9px;background:var(--_slab);
	}
	.oca-table tbody tr:last-child{margin-bottom:0;}

	.oca-table tbody th[scope="row"]{
		display:block;padding:0 0 9px;border:none;font-size:16px;font-weight:700;
		color:var(--_chalk);
	}

	.oca-table tbody td{
		display:flex;justify-content:space-between;gap:16px;align-items:baseline;
		padding:6px 0;border:none;border-top:1px solid var(--_edge);font-size:14px;
	}
	.oca-table tbody td::before{
		content:attr(data-label);
		flex:0 0 auto;font-weight:600;font-size:11px;letter-spacing:.06em;
		text-transform:uppercase;color:var(--_ash);
	}
	.oca-table tbody td.oca-mono{text-align:right;}
}