/* The opaque fill and diagonal border are separate layers, leaving shadows and
   focus rings unclipped. Nested codex cards use the same shape. */
:is(.codex-card,.gm-codex-card,.campaign-custom-card,.slot-entry,.slot-box){
 --corner-cut:20px;--surface-edge:var(--stroke);--surface-fill:var(--soft);
 position:relative;isolation:isolate;border:0;border-radius:0;background:transparent;
 box-shadow:none;padding:20px 14px 14px;
}
:is(.codex-card,.gm-codex-card,.campaign-custom-card,.slot-entry,.slot-box):is(:hover,:focus-within){
 --surface-edge:var(--accent);background:transparent;box-shadow:none;
}
:is(.codex-card,.gm-codex-card,.campaign-custom-card,.slot-entry,.slot-box)::before,
:is(.codex-card,.gm-codex-card,.campaign-custom-card,.slot-entry,.slot-box)::after{
 content:"";position:absolute;pointer-events:none;inset:0;z-index:-2;
 background:var(--surface-edge);clip-path:polygon(0 0,calc(100% - var(--corner-cut)) 0,100% var(--corner-cut),100% 100%,0 100%);
 transition:background-color var(--motion-fast,160ms);
}
:is(.codex-card,.gm-codex-card,.campaign-custom-card,.slot-entry,.slot-box)::after{
 inset:1px;z-index:-1;background:var(--surface-fill);
 clip-path:polygon(0 0,calc(100% - var(--corner-cut) + .6px) 0,100% calc(var(--corner-cut) - .6px),100% 100%,0 100%);
}
.codex-card.is-dragging,.gm-codex-card.is-dragging,.campaign-custom-card.is-dragging,
.sm-drag-source,.sm-drag-ghost{opacity:1!important}

/* Angular scrollbars in every window and nested text area, in the active theme. */
*{scrollbar-color:var(--accent) var(--soft);scrollbar-width:thin}
@supports selector(::-webkit-scrollbar){
 *{scrollbar-width:auto;scrollbar-color:auto}
 /* Override earlier per-window standard properties so Chromium uses the custom thumb. */
 :is(.table-wrap,.campaign-tabs,.gm-codex-panel,.social-gallery-track),.sheet-panel#panel-gear .table-wrap{scrollbar-width:auto;scrollbar-color:auto}
 ::-webkit-scrollbar{width:12px;height:12px}
 ::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:var(--soft)}
 ::-webkit-scrollbar-thumb{background:var(--accent);border:3px solid var(--soft);border-radius:0;min-height:32px;min-width:32px}
 ::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:active{background:var(--accent-hover,var(--ink))}
 ::-webkit-scrollbar-button{display:none;width:0;height:0}
 ::-webkit-resizer{background:linear-gradient(135deg,transparent 40%,var(--accent) 40% 48%,transparent 48% 62%,var(--accent) 62% 70%,transparent 70%) var(--soft)}
}

/* Crop and other range controls retain their native keyboard/pointer behavior. */
input[type=range]{appearance:none;-webkit-appearance:none;width:100%;min-height:36px;padding:0;border:0;border-radius:0;background:transparent;cursor:ew-resize;accent-color:var(--accent)}
input[type=range]::-webkit-slider-runnable-track{height:6px;border:1px solid var(--stroke);border-radius:0;background:var(--soft)}
input[type=range]::-moz-range-track{height:6px;border:1px solid var(--stroke);border-radius:0;background:var(--soft)}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:24px;margin-top:-10px;border:0;border-radius:0;background:var(--accent);clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,0 100%)}
input[type=range]::-moz-range-thumb{width:18px;height:24px;border:0;border-radius:0;background:var(--accent);clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,0 100%)}
input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.codex-title-row{background:var(--soft);border-color:var(--stroke)}
.codex-title-row h2::before{content:"";display:block;align-self:center;width:20px;height:14px;flex:none;background:repeating-linear-gradient(0deg,var(--accent) 0 2px,transparent 2px 6px)}
.codex-resize-handle{width:28px;height:28px;opacity:1;background:repeating-linear-gradient(135deg,transparent 0 4px,var(--accent) 4px 7px);clip-path:polygon(100% 0,100% 100%,0 100%)}
@media(forced-colors:active){
 :is(.codex-card,.gm-codex-card,.campaign-custom-card,.slot-entry,.slot-box){--surface-edge:CanvasText;--surface-fill:Canvas}
 :is(.codex-card,.gm-codex-card,.campaign-custom-card,.slot-entry,.slot-box)::before,
 :is(.codex-card,.gm-codex-card,.campaign-custom-card,.slot-entry,.slot-box)::after{forced-color-adjust:none}
}