@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');
body { font-family: 'Nunito', sans-serif; touch-action: none; overflow: hidden; background-color: #f4f3ef; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d6d4d0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #8c8d92; }
.workspace { position: relative; width: 100%; height: 100%; overflow: hidden; background-image: radial-gradient(#d6d4d0 1px, transparent 1px); background-size: 20px 20px; }
.draggable-item { position: absolute; cursor: grab; user-select: none; touch-action: none; filter: drop-shadow(0 4px 6px rgba(74,75,80,0.1)); transition: filter 0.2s; transform-origin: center center; }
.draggable-item:active { cursor: grabbing; filter: drop-shadow(0 8px 15px rgba(74,75,80,0.2)); z-index: 50 !important; }
.draggable-item.selected { /* no outline */ }
.clock-hand { cursor: pointer; }
.clock-hand:hover { opacity: 0.75; }
.view-section { display: none; opacity: 0; transition: opacity 0.3s ease; }
.view-section.active { display: flex; opacity: 1; }
#canvas-container { width: 100%; height: 100%; cursor: move; }
.geo-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:6px 4px; background:#f4f3ef; border:1px solid #d6d4d0; border-radius:10px; font-size:11px; font-weight:700; color:#4a4b50; cursor:pointer; transition:all 0.15s; }
.geo-btn:hover { background:white; box-shadow:0 2px 8px rgba(74,75,80,0.12); }
.geo-3d-card { position:absolute; cursor:grab; user-select:none; touch-action:none; transform-origin:top left; }
.geo-3d-card:active { cursor:grabbing; }
.angle-card { position:absolute; user-select:none; touch-action:none; transform-origin:top left; border-radius:14px; box-shadow:0 4px 16px rgba(74,75,80,0.15); border:1px solid #d6d4d0; background:white; overflow:visible; }
.geo-resize-handle { position:absolute; bottom:-4px; right:-4px; width:22px; height:22px; background:white; border:2px solid #8c8d92; border-radius:5px; cursor:nwse-resize; display:flex; align-items:center; justify-content:center; font-size:15px; color:#4a4b50; user-select:none; touch-action:none; z-index:10; font-weight:900; box-shadow:0 2px 6px rgba(0,0,0,0.15); }
/* ── calcGeo formula panel ── */
.calcGeo_row { display:flex; flex-direction:column; gap:2px; padding-bottom:5px; margin-bottom:3px; border-bottom:1px solid #eeece8; }
.calcGeo_row:last-of-type { border-bottom:none; }
.calcGeo_lbl { font-size:9px; font-weight:800; color:#8c8d92; text-transform:uppercase; letter-spacing:.06em; }
.calcGeo_line { font-size:12px; color:#4a4b50; display:flex; align-items:center; flex-wrap:wrap; gap:1px; line-height:1.6; }
.calcGeo_var { font-weight:800; cursor:pointer; padding:1px 4px; border-radius:4px; transition:background .15s,color .15s; }
.calcGeo_var:hover { background:#fee2e2; color:#dc2626; }
.calcGeo_inp { width:52px; border:none; border-bottom:1.5px solid #5b80a5; background:transparent; font-size:11px; color:#5b80a5; font-weight:700; font-family:'Nunito',sans-serif; outline:none; text-align:center; padding:1px 2px; }
.calcGeo_inprow { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:3px; padding-top:3px; }
.calcGeo_dimLbl { font-size:10px; font-weight:700; color:#8c8d92; white-space:nowrap; }
#calcGeo_panel { display:none; flex-direction:column; gap:6px; }
#calcGeo_panel.calcGeo_visible { display:flex; }
/* ── Dimension-line overlay elements inside shape SVGs ── */
.geoEdu_dimLine { fill:none; stroke:none; stroke-width:3.5; stroke-linecap:round; pointer-events:none; }
/* ── Presentation / Teacher Mode overlay ── */
#geoEdu_presentation { position:fixed; top:16px; right:16px; z-index:9000; background:#fff; border:3px solid #5b80a5; border-radius:16px; padding:24px 28px 18px; min-width:300px; max-width:520px; box-shadow:0 8px 36px rgba(0,0,0,0.20); display:none; }
#geoEdu_presContent .calcGeo_row { border-bottom:2px solid #eeece8; padding-bottom:10px; margin-bottom:10px; }
#geoEdu_presContent .calcGeo_row:last-of-type { border-bottom:none; }
#geoEdu_presContent .calcGeo_lbl { font-size:13px; font-weight:800; color:#8c8d92; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
#geoEdu_presContent .calcGeo_line { font-size:30px; font-weight:800; color:#4a4b50; line-height:1.4; display:flex; flex-wrap:wrap; align-items:center; gap:3px; }
#geoEdu_presContent .calcGeo_var { font-size:30px; cursor:default; }
#geoEdu_presContent .calcGeo_inprow { display:none; }
#geoEdu_presContent input { display:none; }
.math-grid-cell { transition: all 0.1s; }
.math-grid-cell:hover { background-color: #f4f3ef; transform: scale(1.1); z-index: 10; font-weight: bold; border-radius: 4px; }
.highlight-row-col { background-color: #f4f3ef; }

/* Fraction styles */
.frac-slice { transition: opacity 0.15s; }
.frac-slice:hover { opacity: 0.78 !important; filter: brightness(1.08); }
.frac-circle-group:hover { filter: drop-shadow(0 6px 14px rgba(74,75,80,0.22)); }

/* Stats styles */
.stat-bar { transition: height 0.4s cubic-bezier(0.34,1.56,0.64,1); cursor: ns-resize; }
.stat-bar:hover { opacity: 0.85; }
.stat-input { border: none; border-bottom: 2px solid #d6d4d0; background: transparent; text-align: center; font-family: 'Nunito', sans-serif; font-size: 13px; color: #4a4b50; width: 100%; outline: none; padding: 2px 0; }
.stat-input:focus { border-bottom-color: #5b80a5; }
.chart-tab { transition: all 0.2s; }
.chart-tab.active { background: white; box-shadow: 0 1px 4px rgba(0,0,0,0.1); color: #5b80a5; font-weight: 700; }
.pie-slice { cursor: pointer; transition: opacity 0.2s, transform 0.2s; transform-origin: center; }
.pie-slice:hover { opacity: 0.85; }
.line-dot { cursor: pointer; transition: r 0.2s; }
.line-dot:hover { r: 8; }
.drag-handle-bar { position: absolute; top: 0; left: 0; right: 0; height: 100%; cursor: ns-resize; }

/* ── Centimeter grid background for Geometry and Positionssystem workspaces ── */
/* Replaces the default dot pattern with a 1 cm × 1 cm graph-paper grid.      */
/* The SVG pattern is applied via CSS background-image so it sits below all    */
/* interactive elements and never captures pointer events.                      */
#workspace-geometry,
#workspace-positionssystem {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%23b8d4f0' stroke-width='0.8'/%3E%3C/svg%3E");
    background-size: 40px 40px;
}

/* ── Skala och mått – split workspace grid backgrounds ── */
#scale-workspace-left,
#scale-workspace-right {
    background-color: #f4f3ef;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%23b8d4f0' stroke-width='0.8'/%3E%3C/svg%3E");
    background-size: 40px 40px;
    overflow: auto;
}

/* Scale sidebar button style */
.scale-btn {
    display: flex; align-items: center; justify-content: center;
    gap: 4px; padding: 7px 6px; border-radius: 10px;
    border: 2px solid transparent; font-weight: 700; font-size: 13px;
    cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s;
    width: 100%;
}
.scale-btn:hover { transform: translateY(-1px); }
.scale-btn.active {
    border-color: #b8a36e;
    box-shadow: 0 0 0 3px rgba(184,163,110,0.30);
}

/* Object selection buttons */
.scale-obj-btn {
    display: flex; align-items: center; justify-content: center;
    gap: 4px; padding: 6px 4px; border-radius: 9px;
    border: 2px solid #e8e5e0; background: #f4f3ef;
    font-weight: 700; font-size: 11px; color: #4a4b50;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.scale-obj-btn:hover { background: white; border-color: #b8d4f0; color: #3a5f80; }
.scale-obj-btn.active {
    background: #eaf2fb; border-color: #5b80a5;
    color: #3a5f80; box-shadow: 0 0 0 2px rgba(91,128,165,0.20);
}

/* Section labels inside each workspace half */
.scale-side-label {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    background: rgba(255,255,255,0.92); border: 1.5px solid #cde0f5;
    border-radius: 8px; padding: 3px 14px;
    font-size: 13px; font-weight: 800; color: #3a5f80;
    pointer-events: none; z-index: 10; white-space: nowrap;
    display: flex; align-items: center; gap: 6px;
}

/* Vertical dashed divider between halves */
#scale-divider {
    width: 1px; background: transparent;
    border-left: 1.5px dashed #b8d4f0;
    flex-shrink: 0;
}

/* Top-right scale info overlay (beige card style) */
#scale-info-overlay {
    position: absolute; bottom: 20px; right: 20px;
    background: #faf8f2; color: #4a4b50;
    border: 1.5px solid #d6d4d0;
    border-radius: 16px; padding: 14px 20px 12px;
    box-shadow: 0 4px 20px rgba(74,75,80,0.13);
    z-index: 50; pointer-events: none;
    text-align: center; min-width: 240px;
    transition: opacity 0.2s;
}
#scale-overlay-label {
    font-size: 10px; font-weight: 800; color: #8c8d92;
    text-transform: uppercase; letter-spacing: .1em; margin-bottom: 2px;
}
#scale-overlay-ratio {
    font-size: 26px; font-weight: 900; color: #4a4b50; line-height: 1.2;
}
#scale-overlay-type {
    font-size: 13px; font-weight: 700; color: #b8a36e; margin-top: 2px;
}
#scale-overlay-detail {
    font-size: 11px; font-weight: 600; color: #8c8d92;
    margin-top: 6px; border-top: 1px solid #e8e5e0; padding-top: 6px;
}

/* Highlight ring on original when hovering scaled */
.scale-highlight-ring {
    position: absolute; border-radius: 6px;
    border: 3px solid #f5a623;
    box-shadow: 0 0 0 5px rgba(245,166,35,0.25);
    pointer-events: none; z-index: 20;
    transition: opacity 0.15s;
}

/* Mått input section */
#scale-matt-section { border-top: 1px solid #e8e5e0; padding-top: 10px; }
.scale-matt-input {
    width: 60px; border: 1.5px solid #d6d4d0; border-radius: 6px;
    padding: 3px 6px; font-family: 'Nunito', sans-serif;
    font-size: 13px; font-weight: 700; color: #4a4b50;
    background: white; outline: none; text-align: right;
}
.scale-matt-input:focus { border-color: #5b80a5; }
.scale-tips-box {
    background: #fdf8ee; border: 1px solid #e8d9b0; border-radius: 10px;
    padding: 8px 10px; font-size: 11px; color: #7a6830; line-height: 1.4;
}

/* ── Positionssystem – column headers & dividers ── */
.pos-col-header { position:absolute; top:0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; height:40px; pointer-events:none; z-index:5; box-sizing:border-box; border-bottom-width:2px; border-bottom-style:solid; }
.pos-col-divider { position:absolute; top:0; bottom:0; width:1px; pointer-events:none; z-index:4; }

/* ── Smartboard / presentationsläge – unified rules ── */

/* Panel slide/fade transitions – applied once via data attribute */
[data-view-panel] { transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); }
#clock-left-panel, #clock-right-panel {
    transition: opacity 0.28s cubic-bezier(0.4,0,0.2,1), transform 0.28s cubic-bezier(0.4,0,0.2,1);
}

/* Float panel: hidden by default; shown when its view section is presenting */
.view-float-panel {
    position: fixed; top: 14px; right: 14px; z-index: 600;
    display: none; flex-direction: column; gap: 8px; align-items: flex-end;
}
.view-section.presenting .view-float-panel { display: flex; }

/* Enlarge float buttons in presenting mode */
.view-section.presenting .view-float-btn {
    padding: 10px 18px; font-size: 15px; border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

/* Side panels (left sidebar): slide off-screen in presenting mode */
.view-section.presenting [data-view-panel="side"] {
    position: fixed !important; top: 0; left: 0; bottom: 0;
    z-index: 500; box-shadow: 4px 0 24px rgba(0,0,0,0.18);
    transform: translateX(-110%);
}
.view-section.presenting.panel-visible [data-view-panel="side"] { transform: translateX(0); }

/* Top panels: slide off-screen upward in presenting mode */
.view-section.presenting [data-view-panel="top"] {
    position: fixed !important; top: 0; left: 0; right: 0;
    z-index: 500; box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    transform: translateY(-110%);
}
.view-section.presenting.panel-visible [data-view-panel="top"] { transform: translateY(0); }

/* Clock panels: fade/scale rather than slide */
.view-section.presenting #clock-left-panel, .view-section.presenting #clock-right-panel {
    opacity: 0; pointer-events: none; transform: scale(0.92);
}
.view-section.presenting.panel-visible #clock-left-panel,
.view-section.presenting.panel-visible #clock-right-panel {
    opacity: 1; pointer-events: auto; transform: scale(1);
}

/* Positionssystem: push workspace right when sidebar is visible */
.view-section.presenting #workspace-positionssystem {
    transition: margin-left 0.28s cubic-bezier(0.4,0,0.2,1);
}
.view-section.presenting.panel-visible #workspace-positionssystem {
    margin-left: 16rem; /* matches w-64 sidebar width */
}

/* ── Fullscreen: hide app header, expand views ── */
:fullscreen header,  :-webkit-full-screen header  { display: none !important; }
:fullscreen .view-section.active, :-webkit-full-screen .view-section.active { height: 100vh !important; }
:fullscreen #view-koordinat, :-webkit-full-screen #view-koordinat { height: 100vh !important; }
:fullscreen #koord-svg, :-webkit-full-screen #koord-svg {
    width: min(96vw, 94vh) !important; height: min(96vw, 94vh) !important;
}
:fullscreen #analog-clock, :-webkit-full-screen #analog-clock {
    width: min(90vw, 82vh) !important; height: min(90vw, 82vh) !important;
}

/* ── Volym (Volume) styles ── */
.vol-beaker-outer {
    position: relative;
    width: 200px;
    height: 500px;
    border: 3px solid rgba(91,128,165,0.55);
    border-top: none;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
    background: rgba(255,255,255,0.25);
}
.vol-liquid {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(91,128,165,0.75), rgba(141,177,209,0.55));
    transition: height 0.6s cubic-bezier(0.34,1.56,0.64,1);
    border-radius: 0 0 16px 16px;
}
.vol-surface-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: rgba(255,255,255,0.92);
    border: 2px solid rgba(91,128,165,0.5);
    border-radius: 8px;
    padding: 2px 8px;
    font-size: 14px;
    font-weight: 700;
    color: #5b80a5;
    transition: bottom 0.6s cubic-bezier(0.34,1.56,0.64,1);
    pointer-events: none;
    z-index: 5;
}
.vol-scale-mark {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    transform: translateY(-50%);
}
.vol-scale-line {
    height: 1px;
    background: rgba(91,128,165,0.5);
}
.vol-scale-label {
    font-size: 11px;
    font-weight: 700;
    color: #5b80a5;
    white-space: nowrap;
}
.vol-repr-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.vol-repr-digit {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: white;
    border: 2px solid #d6d4d0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: #4a4b50;
    box-shadow: 0 2px 6px rgba(74,75,80,0.08);
    transition: background 0.2s, color 0.2s;
}
.vol-repr-digit.active {
    background: #5b80a5;
    color: white;
    border-color: #5b80a5;
}
.vol-repr-unit {
    font-size: 11px;
    font-weight: 700;
    color: #8c8d92;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.vol-add-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f4f3ef;
    border: 1.5px solid #d6d4d0;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #4a4b50;
    cursor: pointer;
    transition: all 0.15s;
    width: 100%;
    text-align: left;
}
.vol-add-btn:hover {
    background: white;
    box-shadow: 0 2px 8px rgba(74,75,80,0.12);
    border-color: #5b80a5;
    color: #5b80a5;
}
.vol-add-btn:active {
    transform: scale(0.97);
}
.vol-dl-beaker-outer {
    position: relative;
    width: 240px;
    height: 200px;
    border: 3px solid rgba(79,124,117,0.55);
    border-top: none;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
    background: rgba(255,255,255,0.25);
}
.vol-dl-liquid {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(79,124,117,0.75), rgba(139,179,156,0.55));
    transition: height 0.6s cubic-bezier(0.34,1.56,0.64,1);
    border-radius: 0 0 16px 16px;
}
.vol-dl-surface-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: rgba(255,255,255,0.92);
    border: 2px solid rgba(79,124,117,0.5);
    border-radius: 8px;
    padding: 2px 8px;
    font-size: 14px;
    font-weight: 700;
    color: #4f7c75;
    transition: bottom 0.6s cubic-bezier(0.34,1.56,0.64,1);
    pointer-events: none;
    z-index: 5;
}
/* ═══════════════════════════════════════════════
   Decimaltal – Decimal Numbers Visualisation
   ═══════════════════════════════════════════════ */
#workspace-decimaltal {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%23b8d4f0' stroke-width='0.8'/%3E%3C/svg%3E");
    background-size: 40px 40px;
}

/* Place value table – taller for classroom visibility */
.dec-table { display:flex; align-items:stretch; height:240px; border-bottom:3px solid #222; flex-shrink:0; position:relative; }
.dec-col { flex:1; display:flex; flex-direction:column; border-right:2px solid rgba(130,140,160,0.4); min-width:0; }
.dec-col:last-child { border-right:none; }
/* Column divider visibility toggle */
.dec-table.hide-dividers .dec-col { border-right-color:transparent !important; }
/* Column headers – clean solid off-white, no color, bold black text */
.dec-col-head { border-bottom:3px solid #444; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:6px 4px; min-height:90px; flex-shrink:0; background:#f2f2ee; color:#111; }
.dec-col-head .cab { font-size:24px; font-weight:900; line-height:1; color:#111; }
.dec-col-head .cnm { font-size:15px; font-weight:900; overflow-wrap:anywhere; max-width:100%; line-height:1.2; color:#111; }
.dec-col-head .cval { font-size:18px; font-weight:900; color:#111; line-height:1.2; margin-top:2px; }
.dec-col-body { flex:1; display:flex; align-items:center; justify-content:center; padding:4px; overflow:visible; }
/* Decimal separator – bold permanent anchor with solid white background */
.dec-sep { width:28px; flex-shrink:0; background:#fff; border-left:5px solid #111; border-right:5px solid #111; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom:22px; position:relative; z-index:6; }
.dec-dot { width:16px; height:16px; border-radius:50%; background:#111; box-shadow:0 0 0 5px rgba(30,30,30,0.15); }

/* Digit tokens – large solid black digits, no bounding box */
#dec-tokens-layer { position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none; overflow:visible; z-index:20; }
.dec-token { position:absolute; display:inline-flex; align-items:center; justify-content:center; width:80px; height:80px; border-radius:0; font-size:56px; font-weight:900; color:#111; background:transparent; border:none; box-shadow:none; pointer-events:auto; touch-action:none; flex-shrink:0; line-height:1; }
.dec-token-ghost { opacity:0.18; }

/* Operations bar */
.dec-ops-bar { display:flex; gap:8px; padding:10px 16px; background:#fff; border-bottom:1px solid #d6d4d0; flex-wrap:wrap; align-items:center; flex-shrink:0; }
.dec-op-btn { padding:7px 20px; border-radius:8px; font-weight:800; font-size:14px; cursor:pointer; border:2px solid; transition:all 0.14s; font-family:'Nunito',sans-serif; white-space:nowrap; }
.dec-op-btn:hover { opacity:0.82; transform:scale(1.04); }

/* Tool panels – independently visible, no tab system */
.dec-tab-panel { display:none; overflow:auto; padding:16px; }
.dec-tab-panel.active { display:flex; flex-direction:column; gap:12px; }

/* Blocks tool – column-aligned layout mirroring the place-value table */
.dec-blocks-aligned { display:flex; width:100%; align-items:flex-start; overflow-x:auto; }
.dec-blocks-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; min-width:0; padding:6px 2px; }
.dec-blocks-sep { width:28px; flex-shrink:0; }
.dec-blk-row { display:flex; flex-wrap:wrap; gap:3px; align-items:flex-start; justify-content:center; }
.dec-blk-enter { animation: decBlkAppear 0.35s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes decBlkAppear { from { transform:scale(0) rotate(-10deg); opacity:0; } to { transform:scale(1) rotate(0deg); opacity:1; } }

/* Number line */
#dec-nl-svg { cursor:pointer; }
.dec-nl-segment:hover { opacity:0.5; }