/* 3D plate view in Operate (plate3d.js, plate3d-view.js). Loaded after review.css, whose ".plate-3d svg" rule
   sizes the drawing; the toolbar icons are reset here. */
.plate3d-head{justify-content:space-between;margin-bottom:8px}
.plate3d-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:8px}
.plate3d-group{display:inline-flex;flex-wrap:wrap;gap:2px;padding:2px;border:1px solid #2b485b;background:#0c1d29}
.plate3d-bar button{min-height:28px;padding:0 8px;border:1px solid transparent;border-radius:2px;background:transparent;color:#b9d3df;font-size:11px;font-weight:600;line-height:1}
.plate3d-bar button.plate3d-tool{width:30px;padding:0;display:inline-grid;place-items:center}
.plate3d-bar button:hover:not(:disabled){background:#1d3a4a;border-color:#3f6a80;color:#e6f6fb}
.plate3d-bar button[aria-pressed="true"]{background:#1b4757;border-color:#5cd4e8;color:#f1fdff}
.plate3d-bar button:disabled{opacity:.35}
.plate-3d .plate3d-tool svg{display:block;width:18px;height:18px;max-height:none}
.plate3d-window{margin-left:auto}
/* the projection and the view, in the view's top left corner (beside the viewport, which the simple drawing redraws) */
.plate3d-status{position:absolute;top:6px;left:8px;z-index:1;pointer-events:none;padding:2px 6px;border-radius:3px;background:#0817248c;font:11px Consolas,monospace;
  color:#a9c2cf;white-space:nowrap;text-shadow:0 0 3px #081724}
.plate3d-bar button[aria-expanded="true"]{background:#1b4757;border-color:#5cd4e8;color:#f1fdff}
.plate3d-stage{position:relative}
/* isolation keeps the labels' z-index (set per label by CSS2DRenderer) inside the view, under the sticky header */
.plate3d-viewport{position:relative;isolation:isolate;height:clamp(260px,40vw,440px);overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.plate3d-viewport:active{cursor:grabbing}
.plate3d-viewport:focus{outline:none}
.plate3d-viewport:focus-visible{outline:2px solid #5cd4e8;outline-offset:-2px}
.plate3d-canvas{position:absolute;inset:0;display:block;width:100%!important;height:100%!important}
.plate3d-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.plate3d-label{display:flex;flex-direction:column;align-items:center;gap:1px;padding-bottom:4px;font:12px/1.2 Inter,"Segoe UI",Arial,sans-serif;color:#d9f3ff;white-space:nowrap;
  text-shadow:0 0 3px #081724,0 0 3px #081724,0 0 2px #081724;pointer-events:none}
.plate3d-label span{display:block;margin:0;padding:0;max-width:none}
.plate3d-label .plate3d-warn{color:#ffbd79;font-weight:700;letter-spacing:.4px}
.plate3d-label .plate3d-warn[hidden]{display:none}
.plate3d-label.feature{font-size:11px}
.plate-3d .plate3d-flat{display:block;box-sizing:border-box;width:100%;height:100%;max-height:none;padding-top:22px}   /* room for the corner status */
.plate3d-foot{margin-top:6px}
.plate3d-lost{position:absolute;inset:auto 12px 12px 110px;padding:8px 10px;background:#1c2b38;border:1px solid #edc47d;color:#f3dcae;font-size:12px}
/* keyboard shortcuts: a panel over the top right of the view, beside it (not inside it, where the simple drawing redraws) */
.plate3d-keys{position:absolute;top:8px;right:8px;z-index:2;width:min(600px,calc(100% - 16px));max-height:calc(100% - 16px);overflow:auto;overscroll-behavior:contain;
  touch-action:pan-y;padding:10px 12px;background:#0c1d29f2;border:1px solid #3f6a80;box-shadow:0 6px 24px #0009;color:#d9eef6;font-size:12px;line-height:1.35}
.plate3d-keys[hidden]{display:none}
.plate3d-keys-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.plate3d-keys-close{min-height:26px;width:28px;padding:0;border:1px solid transparent;background:transparent;color:#b9d3df;font-size:18px;line-height:1}
.plate3d-keys-close:hover{background:#1d3a4a;border-color:#3f6a80;color:#e6f6fb}
.plate3d-keys-body{columns:2 230px;column-gap:24px}
.plate3d-keys section{break-inside:avoid;padding-top:6px}
.plate3d-keys h4{margin:0 0 4px;font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#93a9b9}
.plate3d-keys dl{display:grid;grid-template-columns:max-content 1fr;gap:3px 10px;margin:0}
.plate3d-keys dt{white-space:nowrap;color:#93a9b9}
.plate3d-keys dd{margin:0}
.plate3d-keys kbd{display:inline-block;min-width:18px;padding:1px 5px;border:1px solid #3f6a80;border-bottom-width:2px;border-radius:3px;background:#122a38;
  font:11px/1.3 Consolas,monospace;text-align:center;color:#f1fdff}
.plate-3d .plate3d-keys-note{margin:8px 0 0;color:#93a9b9;font-size:11px}
/* full screen (M): the 3D card fills the window under the page header (plate3d.js sets --plate3d-top), above the
   page and under the notices (10); the board's banners move above it */
html.plate3d-max-open,html.plate3d-max-open body{overflow:hidden}
.plate-3d.plate3d-max{position:fixed;inset:calc(var(--plate3d-top,0px) + var(--plate3d-banner,0px)) 0 0 0;z-index:9;margin:0;display:flex;flex-direction:column;padding:12px 16px}
html.plate3d-max-open .board-banner{position:fixed;top:calc(var(--plate3d-top,0px) + 6px);left:16px;right:16px;z-index:10;margin:0}
.plate3d-say{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.plate3d-max .plate3d-stage{flex:1 1 auto;min-height:0}
.plate3d-max .plate3d-viewport{height:100%}
@media (max-width:700px){.plate3d-viewport{height:300px}.plate-3d.plate3d-max{padding:8px}}

.plate3d-label.feature{white-space:pre-line;text-align:center;font-size:10px;line-height:1.15;background:#091b28b8;padding:2px 4px;border-radius:3px}

.plate3d-label.leader-up::after,.plate3d-label.leader-down::after{content:"";position:absolute;left:50%;height:var(--label-leader);border-left:1px solid #8eb6c280;pointer-events:none}.plate3d-label.leader-up::after{top:100%}.plate3d-label.leader-down::after{bottom:100%}