/* Production additions on top of the design's app.css (same tokens, logical properties only). */
.skip:focus{position:fixed;inset-block-start:8px;inset-inline-start:8px;inline-size:auto;block-size:auto;clip:auto;z-index:100;background:var(--surface);padding:8px 14px;border-radius:var(--r-s)}
.linkish{background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;cursor:pointer;font:inherit}
.menu-wrap{position:relative}
.menu{position:absolute;inset-block-start:calc(100% + 6px);inset-inline-start:0;min-inline-size:260px;max-inline-size:min(360px,90vw);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow);padding:6px;z-index:30}
.menu button{display:flex;gap:10px;align-items:center;inline-size:100%;min-block-size:var(--tap);padding-inline:12px;border:0;background:none;border-radius:var(--r-s);cursor:pointer;text-align:start}
.menu button:hover,.menu button:focus-visible{background:var(--surface-2)} .menu hr{border:0;border-block-start:1px solid var(--line);margin:6px 0}
.menu button .trunc{flex:1}
.copy{display:flex;gap:8px;align-items:center;margin-block-start:8px} .copy input{flex:1;font-family:var(--mono);font-size:13px}
.drop.over{transition:none}
a.rowlink{color:inherit;font-weight:600;text-decoration:none} a.rowlink:hover{text-decoration:underline}
.tag-x{border:0;background:none;padding:0;margin-inline-start:2px;cursor:pointer;color:inherit;min-inline-size:24px;min-block-size:24px}
.pager{padding:12px 16px;border-block-start:1px solid var(--line)}
th.sortable{white-space:nowrap}
.bars i.cur{outline:2px solid var(--accent);outline-offset:-2px}
.switch input{flex:none}
/* Keyboard focus must never land under the sticky header or the bottom bars (WCAG 2.4.11).
   scroll-padding covers browser-driven scrolling; Shell.keepFocusVisible() corrects the rest. */
html{scroll-padding-block-start:84px;scroll-padding-block-end:24px}
html:has(.sticky-bar){scroll-padding-block-end:120px}
@media(max-width:860px){
  html{scroll-padding-block-start:76px;scroll-padding-block-end:88px}
  html:has(.sticky-bar){scroll-padding-block-end:200px}
}
/* Header must fit 390px with a long company name + role + language link: the company button shrinks. */
.top{min-inline-size:0}
.top .menu-wrap{min-inline-size:0;flex:0 1 auto}
.top .menu-wrap>.btn{max-inline-size:100%;min-inline-size:0;padding-inline:14px;gap:6px}
.top .menu-wrap>.btn .trunc{min-inline-size:0;max-inline-size:220px}
.top .menu-wrap>.btn .role{flex:none}
.top>a.btn{flex:none;padding-inline:8px}
/* S3: hot rows keep a warm tint in dark mode too (the light tint failed contrast there) */
@media (prefers-color-scheme:dark){.conv.hotrow{background:color-mix(in srgb,#3d1c0d 55%,var(--surface))}}