/* --- Håndballtavla (taktikktavle) — alt er skopet under .tavla så det ikke lekker inn i resten av appen --- */
.tavla {
    --bg: #E9EEF1; --panel: #F8FAFB; --stage: #D9E2E8; --ink: #13232E; --muted: #526675; --line: #C5D1D9;
    --accent: #E8562A; --on-accent: #FFFFFF;
    --court: #F4F8FA; --zone: #D3E4EF; --court-line: #3C5E77; --stroke: #13232E;
    --attack: #E8562A; --on-attack: #FFFFFF; --defense: #2A5FB0; --on-defense: #FFFFFF;
    --keeper: #F2B32B; --on-keeper: #2A1D00; --ball: #FFF1B8;
    --focus: #1A6FD8;
    --cond: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif;

    height: calc(100dvh - 5.5rem); min-height: 640px;
    display: flex; flex-direction: column; gap: 12px; padding: 12px;
    background: var(--bg); color: var(--ink); border-radius: 12px;
    font: 500 15px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent;
}
/* Tavla trenger hele bredden; resten av appen har smal hovedkolonne. */
.app-main:has(> .tavla) { max-width: none; }

.tavla *, .tavla *::before, .tavla *::after { box-sizing: border-box; }
.tavla button, .tavla input { font: inherit; color: inherit; min-height: 0; }
.tavla :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.tavla .top { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.tavla .brand { font: 700 28px/1 var(--cond); letter-spacing: .03em; text-transform: uppercase; margin: 0; white-space: nowrap; }
.tavla .brand span { color: var(--accent); }
.tavla .name { flex: 1 1 200px; min-width: 0; max-width: 360px; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.tavla .grow { flex: 1; }
.tavla .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.tavla .seg button { border: 0; border-radius: 0; background: transparent; height: 42px; padding: 0 14px; font-weight: 600; cursor: pointer; }
.tavla .seg button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }

.tavla .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font-weight: 600; cursor: pointer; white-space: nowrap; }
.tavla .btn:hover { border-color: var(--muted); }
.tavla .btn:disabled { opacity: .4; cursor: default; }
.tavla .btn[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.tavla .btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.tavla .btn.warn { border-color: var(--accent); color: var(--accent); }
.tavla .btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.tavla .stage { flex: 1; min-height: 0; display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 14px; }
.tavla .lib { min-height: 0; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 18px; }
.tavla .lib h2 { margin: 0 0 8px; font: 600 13px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tavla .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tavla .grid2 .btn { padding: 0 8px; }
.tavla .note { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.tavla .sel-panel { display: flex; flex-direction: column; gap: 8px; }
.tavla .sel-panel .row { display: flex; gap: 8px; }
.tavla .sel-panel input { width: 84px; height: 44px; text-align: center; text-transform: uppercase; font: 700 20px var(--cond); border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.tavla .sel-panel .row .btn { flex: 1; }
.tavla .plays { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tavla .plays li { display: flex; align-items: center; gap: 6px; }
.tavla .plays .open { flex: 1; min-width: 0; justify-content: flex-start; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.tavla .plays .meta { font-size: 12px; color: var(--muted); font-weight: 500; }
.tavla .plays .del { min-width: 44px; padding: 0; }
.tavla .save-def { display: flex; gap: 6px; margin-top: 8px; }
.tavla .save-def input { flex: 1; min-width: 0; height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.tavla .save-def .btn { flex: none; }

.tavla .board { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.tavla .tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tavla .tools .btn { min-width: 88px; }
.tavla .hint { flex: 1 1 220px; font-size: 14px; color: var(--muted); min-width: 0; }
.tavla .court-wrap { flex: 1; min-height: 420px; background: var(--stage); border-radius: 12px; padding: 8px; display: flex; }
.tavla .court { flex: 1; min-width: 0; min-height: 0; width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.tavla .court.move { cursor: default; }
.tavla .steps { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tavla .chip { min-width: 74px; }
.tavla .chip[aria-current="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.tavla .follow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); min-height: 44px; cursor: pointer; }
.tavla .follow input { width: 20px; height: 20px; accent-color: var(--accent); }

.tavla .toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--panel); padding: 10px 16px; border-radius: 8px; font-weight: 600; max-width: calc(100% - 32px); opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 20; }
.tavla .toast.on { opacity: 1; }

@media (max-width: 900px) {
    .tavla { height: auto; min-height: 0; }
    .tavla .stage { grid-template-columns: minmax(0, 1fr); }
    .tavla .lib { order: 2; overflow: visible; }
    .tavla .court-wrap { flex: none; min-height: 0; aspect-ratio: var(--ar, 1.0); }
    .tavla .tools .btn { min-width: 0; flex: 1 1 30%; }
}
@media (prefers-reduced-motion: reduce) { .tavla .toast { transition: none; } }