/* Practice panel pages (src/ui/training.js tab bar, src/ui/practice-panel.js Armory / Activities /
   Sandbox). EthrA grammar from ethra-ui.css: framed tabs over the framed panel, dark glass cards,
   white pixel frames on what is selected. Scoped to #training and .pp-* so nothing else moves. */

/* ---------- the page tabs ---------- */
#training .train-tabs{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin:-4px 0 12px;min-width:0}
#training .train-tab{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:3px 16px;border:6px solid;border-image:var(--ef-frame) 6 fill/6px stretch;background:none!important;
 font:800 14px/1 var(--ui);color:var(--ef-dim);text-shadow:var(--ef-shadow);white-space:nowrap}
#training .train-tab .train-tab-icon{width:18px;height:18px;flex:0 0 auto;color:var(--ef-mute)}
#training .train-tab:hover,#training .train-tab:focus-visible{color:#fff}
#training .train-tab.on{border-image:var(--ef-frame-on) 6 fill/6px stretch;color:#fff}
#training .train-tab.on .train-tab-icon{color:var(--ef-yellow)}
#training .train-tab-hint{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 5px;border:2px solid rgba(247,244,236,.45);font:800 11px/1 var(--ui);color:var(--ef-dim)}
body.pad-nav #training .train-tab-hint{letter-spacing:0}
#training .train-pane[hidden]{display:none!important}

/* ---------- a page: two scrolling columns ---------- */
#training .train-page{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;scrollbar-width:thin;scrollbar-color:#89977c88 transparent}
.pp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:12px;align-items:start}
.pp-acts,.pp-sandbox{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pp-col{display:flex;flex-direction:column;gap:10px;min-width:0}
#training .pp-card{padding:11px 12px 12px}
.pp-card-sub{font:700 11px var(--ui);color:var(--ef-mute)}
.pp-note{margin:6px 0 0;font:700 11px/1.45 var(--ui);color:var(--ef-mute)}
#training .pp-card .train-row button,#training .train-acc-body .train-row button{min-height:36px}
#training .pp-card .train-row button.on,#training .pp-kinds button.on,#training .pp-pack button.on{background:rgba(255,255,255,.14)!important;border-color:#fff!important;color:#fff!important;box-shadow:none!important}

/* the gear list */
.pp-kinds{display:flex;flex-direction:column;gap:3px}
.pp-kinds .train-group:first-child{margin-top:0;padding-top:0;border-top:0}
#training .pp-kinds button{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:5px 9px;text-align:left;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.12)!important;font:800 13px var(--ui);color:var(--ef-white)}
#training .pp-kinds button:hover,#training .pp-kinds button:focus-visible{background:rgba(255,255,255,.1)!important}
#training .pp-kinds .ico,#training .pp-preview .ico,#training .pp-pack .ico{width:22px;height:22px;flex:0 0 auto}

/* the forge card */
.pp-preview{margin:0 0 6px;padding:9px 10px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12)}
.pp-preview-head{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.pp-preview-name{flex:1 1 auto;min-width:0;font:900 17px/1.15 var(--ui);color:var(--c,#fff);text-shadow:var(--ef-shadow)}
.pp-rank{flex:0 0 auto;min-width:26px;padding:3px 6px;border:2px solid var(--c,#fff);font:800 11px/1 var(--ui);color:var(--c,#fff);text-align:center}
.pp-swatch{display:inline-block;width:9px;height:9px;margin-right:6px;background:var(--c);box-shadow:0 0 0 1px #000a;vertical-align:1px}
#training .pp-seg-wrap{flex-wrap:wrap}
#training .pp-seg-wrap button{flex:1 1 auto;min-width:64px}
#training #trainArmEquip{margin-top:8px}

/* presets */
.pp-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
#training .pp-presets button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:48px;padding:6px 9px;text-align:left;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.14)!important}
#training .pp-presets button:hover,#training .pp-presets button:focus-visible{background:rgba(255,255,255,.1)!important;border-color:rgba(247,244,236,.6)!important}
.pp-preset-name{font:900 14px/1.1 var(--ui);color:#fff}
.pp-preset-sub{font:700 10px/1.3 var(--ui);color:var(--ef-mute)}

/* the pack */
.pp-pack{display:flex;flex-direction:column;gap:3px;max-height:240px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
#training .pp-pack button{display:flex;align-items:center;gap:9px;width:100%;min-height:36px;padding:4px 9px;text-align:left;background:rgba(255,255,255,.03)!important;border:1px solid rgba(255,255,255,.1)!important}
.pp-own-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 13px var(--ui);color:var(--c,#fff)}
.pp-own-tag{flex:0 0 auto;padding:2px 6px;border:1px solid rgba(247,244,236,.6);font:800 10px var(--ui);color:#fff}

/* activities */
#training .pp-dg button{flex:1 1 30%;min-width:112px;font-size:11px!important}
#training .pp-clear{align-self:flex-start;min-height:36px}
.pp-time{display:flex;align-items:center;gap:10px;margin:2px 0 4px}
.pp-time input{flex:1 1 auto;min-width:0;accent-color:#f1d046;height:28px}
.pp-time b{flex:0 0 auto;min-width:48px;font:900 16px var(--ui);color:#fff;font-variant-numeric:tabular-nums;text-align:right}

/* in-world name plates over training dummies, and the hitbox overlay */
.pp-plate{position:absolute;left:0;top:0;pointer-events:none;white-space:nowrap;font-size:11px}
#practiceOverlay{position:fixed;inset:0;z-index:6;pointer-events:none}
body.photo #practiceOverlay,body.photo .pp-plate{display:none!important}

/* the touch button: only in Practice */
#touchUI #touchPractice{display:none}
body.in-practice #touchUI #touchPractice{display:block}
#touchUI #touchPractice .ico{width:20px;height:20px;display:block;margin:0 auto}
/* A landscape phone keeps the notice between the button columns (ethra-ui.css), and a sixth button at
   the head of the Lock/Talk/Crouch row reached into it. There the Practice button stands on its own
   at the left, under the health and Veil rows, clear of the notice, the stick and the quick slot. */
@media (pointer:coarse) and (max-height:500px){
 body.in-practice #touchUI #touchPractice{position:fixed;left:max(20px,env(safe-area-inset-left));top:calc(max(8px,env(safe-area-inset-top)) + 92px);width:48px}
}

/* ---------- narrow screens ---------- */
@media(max-width:820px){
 #training .train-tabs{gap:4px;margin-bottom:9px}
 #training .train-tab{flex:1 1 0;justify-content:center;min-width:0;padding:3px 6px;font-size:12px;gap:5px}
 #training .train-tab-hint{display:none}
 .pp-grid,.pp-acts,.pp-sandbox{grid-template-columns:1fr}
}
@media(max-width:570px){
 #training .train-tabs{position:sticky;top:0;z-index:3;background:rgba(15,17,21,.96);padding:2px 0 6px;margin:0 0 6px}
 #training .train-tab span{overflow:hidden;text-overflow:ellipsis}
 #training .train-tab .train-tab-icon{display:none}
 #training .train-page{overflow:visible;flex:0 0 auto}
 .pp-presets{grid-template-columns:1fr 1fr}
}
@media(max-width:430px){#training .train-tabs{gap:3px}#training .train-tab{font-size:11px;padding:3px 1px;letter-spacing:-.01em}}
@media(max-height:500px){
 #training .train-tabs{margin:-6px 0 6px}
 #training .train-tab{min-height:32px}
 /* a landscape phone keeps its height for the page: the key legend is on the controls screen */
 #training .train-foot-note{display:none}
 #training .train-foot{margin-top:6px;padding-top:6px;justify-content:flex-end}
}
#training.pp-touch .train-tab-hint{display:none}