/* =========================================================
   Design tokens — "field instrument" system
   ========================================================= */

:root{
    --bg:            #E7EBEE;
    --surface:       #FFFFFF;
    --surface-2:     #F3F5F7;
    --ink:           #1F2933;
    --ink-soft:      #5C6773;
    --line:          #D7DCE1;

    --strike:        #C1440E;   /* oxide / rust   */
    --strike-soft:   #F3DCCF;
    --dip:            #1D5C8A;  /* mineral blue   */
    --dip-soft:      #D6E4EC;
    --pole:          #3B7A57;   /* moss           */
    --pole-soft:     #DBEBE1;
    --appdip:        #8E24AA;   /* apparent dip, matches Measurements accent */
    --appdip-soft:   #EEDCF4;
    --gold:          #C98A1F;   /* topo gold, active state */
    --gold-soft:     #F3E3C2;

    --header:        #1B2430;

    --font-ui:   "IBM Plex Sans", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", "Courier New", monospace;

    --radius: 10px;
    --shadow: 0 2px 6px rgba(20,28,38,.07);
    --shadow-hover: 0 6px 16px rgba(20,28,38,.12);
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:var(--font-ui);
    background:var(--bg);
    color:var(--ink);
}

/* =========================================================
   App shell
   ========================================================= */

#app{
    width:100vw;
    height:100vh;
    display:grid;
    grid-template-columns:300px 1fr 300px;
    grid-template-rows:56px 1fr 520px;
    grid-template-areas:
        "header header header"
        "left center right"
        "left bottom right";
}

/* ---------- Header ---------------------------------------*/

#header{
    grid-area:header;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:0 18px;

    background:var(--header);
    color:#fff;

    border-bottom:1px solid #0f151d;
}

#titleGroup{
    display:flex;
    align-items:center;
    gap:12px;
}

#compassMark{
    width:30px;
    height:30px;
    flex:0 0 auto;
}

.markRing{
    fill:none;
    stroke:rgba(255,255,255,.35);
    stroke-width:1.4;
}

.markNeedleN{
    fill:var(--strike);
}

.markNeedleE{
    fill:rgba(255,255,255,.5);
}

.markHub{
    fill:#fff;
}

#titleText{
    line-height:1.25;
}

#title{
    font-size:17px;
    font-weight:700;
    letter-spacing:.2px;
}

.headerSubtitle{
    font-size:11.5px;
    color:rgba(255,255,255,.6);
    font-weight:500;
}

#toolbar{
    display:flex;
    gap:8px;
}

.toolBtn{
    width:auto;
    padding:0 16px;
    height:32px;
    margin:0;
    background:#2B3644;
}

.toolBtn:hover{
    background:#3A4757;
}

.toolBtnGhost{
    background:transparent;
    border:1px solid rgba(255,255,255,.28);
}

.toolBtnGhost:hover{
    background:rgba(255,255,255,.08);
}

/* ---------- Side panels -----------------------------------*/

#leftPanel{

    grid-area:left;

    background:var(--bg);

    border-right:1px solid var(--line);

    overflow:auto;

    padding:11px;
}

#container{

    grid-area:center;

    position:relative;

    overflow:hidden;

    margin:10px;

    border:1px solid var(--line);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    background:
        linear-gradient(var(--surface-2) 1px, transparent 1px) 0 0/100% 28px,
        var(--surface);
}

#viewTitle{

    position:absolute;

    top:12px;

    left:12px;

    background:rgba(255,255,255,.9);

    border:1px solid var(--line);

    padding:5px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:600;

    color:var(--ink-soft);

    letter-spacing:.3px;

    text-transform:uppercase;

    pointer-events:none;
}

#rightPanel{

    grid-area:right;

    background:var(--surface-2);

    border-left:1px solid var(--line);

    overflow:auto;

    padding:14px;
}

/* ---------- Bottom strip -----------------------------------*/

#bottomPanel{

    grid-area:bottom;

    display:grid;

    grid-template-columns:1fr;

    gap:8px;

    background:var(--bg);

    margin-bottom:0;

    padding:8px;
}

#stereonetPanel{
    padding:8px;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    min-height:0;
}

#stereonetCanvas{

    width:100%;

    flex:1 1 auto;

    min-height:0;

    display:block;
}

.panelTitleOverlay{
    flex:0 0 auto;
    margin-bottom:4px;
}

.netSwitchGroup{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:6px;
}

.netSwitchLabel{
    font-size:11px;
    font-weight:600;
    text-transform:none;
    letter-spacing:0;
    color:var(--ink-soft);
}

/* ---------- Stereonet legend --------------------------------*/

.stereonetLegend{

    position:absolute;

    right:10px;
    bottom:8px;

    display:flex;
    flex-direction:column;
    gap:3px;

    background:rgba(255,255,255,.88);

    border:1px solid var(--line);
    border-radius:6px;

    padding:5px 8px;

    font-size:11px;
    font-weight:500;
    color:var(--ink-soft);

    pointer-events:none;

    z-index:2;
}

.stereonetLegendItem{
    display:flex;
    align-items:center;
    gap:6px;
}

.stereonetLegendSwatch{
    display:inline-block;
    flex:0 0 auto;
}

.stereonetLegendLine{
    width:14px;
    height:0;
    border-top:2px solid  #dabf77;
}

.stereonetLegendDot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:green;
}

/* ---------- View panel legend --------------------------------*/

#viewLegend{

    position:absolute;

    top:52px;

    left:12px;

    display:flex;
    flex-direction:column;
    gap:3px;

    background:rgba(255,255,255,.9);

    border:1px solid var(--line);
    border-radius:6px;

    padding:5px 8px;

    font-size:11px;
    font-weight:500;
    color:var(--ink-soft);

    pointer-events:none;

    z-index:2;
}

.viewLegendItem{
    display:flex;
    align-items:center;
    gap:6px;
}

.viewLegendSwatch{
    display:inline-block;
    flex:0 0 auto;
}

.viewLegendLine{
    width:14px;
    height:0;
    border-top:2px solid var(--line);
}

.viewLegendLineStrike{ border-top-color:var(--strike); }
.viewLegendLineDip{    border-top-color:var(--dip); }
.viewLegendLineAppDip{ border-top-color:var(--appdip); }

.viewLegendDot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--pole);
}

/* =========================================================
   Cards
   ========================================================= */

.panelCard{

    position:relative;

    background:var(--surface);

    border:1px solid var(--line);

    border-radius:var(--radius);

    padding:11px 12px 12px;

    margin-bottom:9px;

    box-shadow:var(--shadow);

    transition:box-shadow .18s ease;

}

.panelCard:hover{

    box-shadow:var(--shadow-hover);

}

.panelCard::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:4px;
    height:100%;

    border-radius:var(--radius) 0 0 var(--radius);

}

.panelTitle{

    display:flex;
    align-items:center;
    gap:8px;

    font-size:11.5px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    color:var(--ink-soft);

    margin-bottom:8px;

}

.titleHint{
    text-transform:none;
    font-weight:500;
    letter-spacing:0;
    color:#8a94a1;
    font-size:11px;
}

.orientationCard::before{ background:var(--dip); }
.viewCard::before{        background:#607d8b; }
.presetCard::before{      background:var(--gold); }
.displayCard::before{     background:var(--pole); }
.infoCard::before{        background:#795548; }
.measureCard::before{     background:#8e24aa; }

/* =========================================================
   Legend strip
   ========================================================= */

.legendStrip{
    display:flex;
    gap:14px;
    align-items:center;

    background:var(--surface);
    border:1px solid var(--line);
    border-radius:999px;

    padding:6px 12px;
    margin-bottom:9px;

    font-size:12px;
    font-weight:600;
    color:var(--ink-soft);
}

.legendItem{
    display:flex;
    align-items:center;
    gap:6px;
}

.legendSwatch{
    width:10px;
    height:10px;
    border-radius:3px;
    display:inline-block;
}

.swStrike{ background:var(--strike); }
.swDip{    background:var(--dip); }
.swPole{   background:var(--pole); }

/* =========================================================
   Presets
   ========================================================= */

.presetGrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
}

.presetBtn{
    width:100%;
    height:auto;
    min-height:36px;
    margin:0;
    padding:4px 6px;

    background:var(--surface-2);
    color:var(--ink);
    border:1px solid var(--line);

    font-size:12px;
    font-weight:600;
    line-height:1.3;

    border-radius:8px;
}

.presetBtn:hover{
    background:var(--gold-soft);
    border-color:var(--gold);
    color:#7a5713;
}

.presetBtn:active{
    transform:scale(.97);
}

/* =========================================================
   Orientation controls
   ========================================================= */

input[type=range]{
    width:100%;
    height:6px;
    -webkit-appearance:none;
    appearance:none;
    background:var(--surface-2);
    border-radius:999px;
    border:1px solid var(--line);
    margin:3px 0 1px;
}

input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--dip);
    border:2px solid #fff;
    box-shadow:0 1px 3px rgba(0,0,0,.35);
    cursor:pointer;
}

input[type=range]::-moz-range-thumb{
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--dip);
    border:2px solid #fff;
    box-shadow:0 1px 3px rgba(0,0,0,.35);
    cursor:pointer;
}

#strike::-webkit-slider-thumb{ background:var(--strike); }
#strike::-moz-range-thumb{ background:var(--strike); }

#appDipDir::-webkit-slider-thumb{ background:var(--appdip); }
#appDipDir::-moz-range-thumb{ background:var(--appdip); }

#opacity::-webkit-slider-thumb{ background:#c8a96a; }
#opacity::-moz-range-thumb{ background:#c8a96a; }

.sliderHeader{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:6px;
   margin-bottom:10px;

}

.sliderHeaderDip{
    margin-top:12px;
}

.sliderHeaderAppDip{
    margin-top:9px;
    padding-top:8px;
    border-top:1px dashed var(--line);
}

.controlLabel{
    font-size:14px;
    font-weight:700;
    color:var(--ink);
    white-space:nowrap;
}

.controlLabelStrike::before,
.controlLabelDip::before,
.controlLabelAppDip::before,
.controlLabelOpacity::before{
    content:"";
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:2px;
    margin-right:6px;
}

.controlLabelStrike::before{ background:var(--strike); }
.controlLabelDip::before{    background:var(--dip); }
.controlLabelAppDip::before{ background:var(--appdip); }
.controlLabelOpacity::before{ background:#c8a96a; }

.value{
    font-family:var(--font-mono);
    font-size:17px;
    font-weight:600;
    color:var(--ink);

    padding:2px 8px;
    border-radius:6px;

    white-space:nowrap;
    flex-shrink:0;

}

.valueStrike{ background:var(--strike-soft); color:#7a2e0a; font-size:16px; }
.valueDip{    background:var(--dip-soft);    color:#123f5c; font-size:16px; }
.valueAppDip{ background:var(--appdip-soft); color:#4a0f5c; font-size:13px; }
.valueOpacity{ background:#f1e6d2; color:#6b4f1c; }

.appDipDirControl{
    transition:opacity .15s ease;
}

.appDipDirControl.controlDisabled{
    opacity:.5;
}

#appDipDir:disabled{
    cursor:not-allowed;
}

#appDipDir:disabled::-webkit-slider-thumb{ background:var(--ink-soft); }
#appDipDir:disabled::-moz-range-thumb{ background:var(--ink-soft); }

.dipSliderRow{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    flex-wrap:nowrap;
}

.dipDirectionLabel{
    width:28px;
    flex:0 0 28px;
    text-align:center;
    font-weight:600;
    user-select:none;
}





/* =========================================================
   Buttons (toolbar / view grid)
   ========================================================= */


/* Projection animation control ----------------------------------------- */
/* Projection learning controls — v0.1.3 */
.projectionLearningBar{margin:8px 12px 4px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
.projectionLearningTitle{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--ink-soft);margin-bottom:6px}
.projectionSteps{display:flex;gap:5px;flex-wrap:wrap}
.projectionStep{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:6px;padding:5px 8px;font:500 11px var(--font-ui);cursor:pointer}
.projectionStep:hover{border-color:var(--gold)}
.projectionStep.isActive{background:var(--gold-soft);border-color:var(--gold)}
.projectionStep:disabled{opacity:.55;cursor:not-allowed}
.projectionExplanation{margin-top:6px;min-height:28px;font-size:11px;line-height:1.35;color:var(--ink-soft)}

.projectionBtn{
    border:1px solid rgba(80,80,80,0.35);
    background:rgba(255,255,255,0.78);
    color:#333;
    border-radius:6px;
    padding:4px 8px;
    font:600 11px/1.2 Segoe UI, sans-serif;
    cursor:pointer;
    white-space:nowrap;
}

.projectionBtn:hover{
    background:#fff;
}

.projectionBtn:disabled{
    opacity:0.75;
    cursor:default;
}

button{

    width:78px;

    height:34px;

    margin:3px;

    border:none;

    border-radius:7px;

    background:#2f4858;

    color:white;

    font-size:13px;
    font-weight:600;

    cursor:pointer;

    transition:.15s ease;

}

button:hover{
    background:#3d6176;
}

button:active{
    transform:scale(.97);
}

button:focus-visible,
input:focus-visible,
.infoDot:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:2px;
}

.infoTable td{

    padding:6px 2px;

    border-bottom:1px solid #edf2f7;

    font-size:13px;

}

.infoTable td:first-child{

    color:var(--ink-soft);

}

.infoTable td:last-child{

    font-weight:700;

    color:var(--ink);

}

.mono{
    font-family:var(--font-mono);
}

/* =========================================================
   Toggle switches
   ========================================================= */

.switchGrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:14px;
}

.switchRow{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:5px 0;
    font-size:13px;
    font-weight:500;
    min-width:0;
}

.switchRow span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    margin-right:6px;
    min-width:0;
}

.switch{
    position:relative;
    display:inline-block;
    flex:0 0 auto;
    width:36px;
    height:18px;
}

.switch input{
    opacity:0;
    width:0;
    height:0;
}

.slider{
    position:absolute;
    inset:0;
    background:#c7cfd6;
    border-radius:999px;
    cursor:pointer;
    transition:.2s;
}

.slider::before{
    content:"";
    position:absolute;
    left:2px;
    top:2px;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 2px rgba(0,0,0,.3);
    transition:.2s;
}

.switch input:checked + .slider{

    background:var(--pole);

}
.switch input:checked + .slider::before{

    transform:translateX(18px);

}
.switch input:focus-visible + .slider{

    box-shadow:0 0 0 3px var(--gold-soft);

}

#chkStrike:checked + .slider{

    background:var(--strike);

}

#chkDip:checked + .slider{

    background:var(--dip);

}

#chkPole:checked + .slider{

    background:var(--pole);

}

#chkGrid:checked + .slider{

    background:#546e7a;

}

#chkCompass:checked + .slider{
    background:#8d6e63;
}

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-thumb{

    background:#b8c2cc;

    border-radius:8px;

}

/* =========================================================
   View grid
   ========================================================= */

.viewGrid{
    display:flex;
    align-items:stretch;
    gap:10px;
}

.viewCompassMini{
    display:grid;
    grid-template-columns:28px 30px 28px;
    grid-template-rows:repeat(3,22px);
    gap:3px;
    grid-template-areas:
        ". n ."
        "w top e"
        ". s .";
}

#btnNorth{ grid-area:n; }
#btnWest{  grid-area:w; }
#btnTop{
    grid-area:top;
    background:var(--dip);
    font-weight:bold;
}
#btnEast{  grid-area:e; }
#btnSouth{ grid-area:s; }

.viewGrid button.isActive{
    box-shadow:inset 0 0 0 2px var(--gold);
}

.viewCompassMini button{

    width:100%;
    height:100%;

    min-width:0;

    margin:0;

    padding:0;

    font-size:11px;

}

#btnHome{

    width:auto;
    height:auto;

    align-self:stretch;

    margin:0;

    padding:0 12px;

    font-size:12px;

}

/* =========================================================
   Info dot + popover (glossary)
   ========================================================= */

.infoDot{
    width:18px;
    height:18px;
    min-width:18px;
    margin:0 0 0 auto;
    padding:0;
    border-radius:50%;
    background:var(--surface-2);
    border:1px solid var(--line);
    color:var(--ink-soft);
    font-size:11px;
    font-weight:700;
    line-height:1;
    text-transform:none;
    letter-spacing:0;
}

.infoDot:hover{
    background:var(--gold-soft);
    color:#7a5713;
    border-color:var(--gold);
}

.infoPopover{
    position:fixed;
    z-index:50;
    max-width:340px;

    background:var(--header);
    color:#fff;

    border-radius:10px;
    padding:14px 16px;
    box-shadow:0 10px 30px rgba(0,0,0,.35);

    font-size:13px;
    line-height:1.5;
}

.infoPopoverTitle{
    font-weight:700;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:var(--gold);
    margin-bottom:6px;
}

.infoPopoverClose{
    width:auto;
    height:26px;
    margin-top:10px;
    padding:0 10px;
    font-size:11px;
    background:rgba(255,255,255,.12);
}

.infoPopoverClose:hover{
    background:rgba(255,255,255,.22);
}

/* =========================================================
   Responsive: collapse to a single column below 980px
   ========================================================= */

@media (max-width:980px){

    html, body{
        overflow:auto;
    }

    #app{
        display:flex;
        flex-direction:column;
        height:auto;
        min-height:100vh;
    }

    #header{
        height:auto;
        padding:10px 16px;
        flex-wrap:wrap;
        gap:8px;
    }

    #leftPanel,
    #rightPanel{
        border:none;
        border-bottom:1px solid var(--line);
    }

    #container{
        height:48vh;
        min-height:360px;
    }

    #bottomPanel{
        grid-template-columns:1fr;
        height:auto;
    }

    #stereonetPanel{
        height:420px;
    }
}

/* =========================================================
   Right panel: restored to original spacing
   (left panel keeps the tightened spacing from the earlier pass)
   ========================================================= */

#rightPanel .panelCard{
    padding:14px 14px 16px;
    margin-bottom:12px;
}

#rightPanel .panelTitle{
    margin-bottom:14px;
}

/* Make the right-panel construction/manual heading read as a section title. */
#rightPanel .learningStepsCard #learningStepsTitle{
    font-size:16px;
    line-height:1.25;
    font-weight:800;
    letter-spacing:.2px;
    text-transform:none;
    color:var(--ink);
    margin-bottom:12px;
}

#rightPanel .infoTable td{
    padding:8px 2px;
}

/* ---------- Credits -----------------------------------*/
#credits{
    position:fixed;
    right:10px;
    bottom:6px;
    font-family:var(--font-ui);
    font-size:11px;
    color:var(--ink-soft);
    opacity:.7;
    z-index:1000;
    pointer-events:none;
}



.dipSliderRow{
    display:flex;
    align-items:flex-end;
    gap:6px;
}


.dipSliderWrapper{
    position:relative;
    width:100%;
    padding-top:18px;
    margin-bottom:18px;
}


/* Scale */

.dipSliderScale{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    margin-top:2px;
    font-size:11px;
    font-family:var(--font-mono);
    color:var(--ink-soft);
    font-weight:600;
}


.dipCenterIndex{
    text-align:center;
    color:var(--dip);
    font-size:11px;
    line-height:1;
    margin-top:2px;
    user-select:none;
    transition:all .2s ease;
}

#dip{
    display:block;
    width:100%;
    position:relative;
    margin:0;
    flex:1;
    min-width:0;
    z-index:2;
}

.dipDirectionRow{
    position:relative;
    width:100%;
    height:18px;
    margin-bottom:4px;
}

#dipLeftLabel,

#dipRightLabel{
    position:absolute;
    top:0;
    font-size:16px;
    font-weight:700;
    color:var(--dip);
    line-height:18px;
}

#dipLeftLabel{
    left:8px;          /* adjust if needed */
}

#dipRightLabel{
    right:8px;         /* adjust if needed */
}

#dip::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--dip);
    border:2px solid white;
    box-shadow:0 1px 4px rgba(0,0,0,.25);
    transition:background .2s,
               box-shadow .2s,
               transform .15s;
}

#dip.center::-webkit-slider-thumb{
    background:#2bb673;
    box-shadow:
        0 0 0 2px white,
        0 0 10px rgba(43,182,115,.45);
}

.zero.active{
    color:#2bb673;
    font-weight:700;
    text-shadow:0 0 6px rgba(43,182,115,.45);
}

.infoPopoverBody{
    white-space: pre-line;
}

.gStrike,
.gDip,
.gPole,
.gAppDip{

    display:inline-block;

    padding:1px 5px;

    border-radius:4px;

    font-weight:700;

    font-size:0.95em;
}

.gStrike{
    background:var(--strike-soft);
    color:var(--strike);
}

.gDip{
    background:var(--dip-soft);
    color:var(--dip);
}

.gPole{
    background:var(--pole-soft);
    color:var(--pole);
}

.gAppDip{
    background:var(--appdip-soft);
    color:var(--appdip);
}

.panelTitle{
    display:flex;
    align-items:center;
}

.netSwitchGroup{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:8px;
}

.stereonetLegendTrueDip{
    width:10px;
    height:10px;
    border:2px solid var(--dip-color);
    border-radius:50%;
    background:  #2EA8FF;
}

.stereonetLegendAppDip{
    width:10px;
    height:10px;
    border:2px solid var(--app-dip-color);
    border-radius:50%;
    background:#8e24aa;
}

/* =========================================================
   v0.4.0 — Stereonet-first workspace redesign
   ========================================================= */

#app{
    display:block;
    width:100vw;
    height:100vh;
    position:relative;
    overflow:hidden;
}

#header{
    position:fixed;
    left:0; right:0; top:0;
    height:56px;
    z-index:100;
}

/* The stereonet owns the whole workspace below the header. */
#bottomPanel{
    position:absolute;
    left:0; right:0; top:56px; bottom:0;
    padding:0;
    margin:0;
    background:var(--bg);
    z-index:1;
}

#stereonetPanel{
    position:absolute;
    inset:0;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:var(--bg);
}

#stereonetPanel::before{ display:none; }

#stereonetPanel > .panelTitleOverlay{
    position:absolute;
    top:12px;
    left:50%;
    transform:translateX(-50%);
    z-index:20;
    margin:0;
    padding:7px 10px 7px 14px;
    border:1px solid rgba(100,110,120,.18);
    border-radius:999px;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(5px);
    box-shadow:0 2px 10px rgba(20,28,38,.08);
}

#stereonetPanel > .panelTitleOverlay > span:first-child{
    font-size:12px;
    letter-spacing:1.3px;
    color:var(--ink);
}

#stereonetCanvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    flex:none;
    display:block;
}

/* The fixed Schmidt net is the visual hero. */
#stereonetPanel .stereonetLegend{ display:none; }

/* Bottom teaching/navigation strip — compact, never competing with the net. */
.projectionLearningBar{
    position:absolute;
    left:50%;
    bottom:12px;
    transform:translateX(-50%);
    width:min(900px,calc(100% - 36px));
    margin:0;
    padding:8px 12px;
    z-index:25;
    border:1px solid rgba(100,110,120,.20);
    border-radius:12px;
    background:rgba(255,255,255,.90);
    backdrop-filter:blur(7px);
    box-shadow:0 5px 20px rgba(20,28,38,.10);
}

.projectionLearningTitle{
    margin:0 0 4px;
    font-size:11px;
    color:var(--ink);
}

.projectionSteps{ display:none; }
.projectionExplanation{
    display:none;
}

#btnExplain{ display:inline-flex; }

/* Compact floating 3D reference window. */
#container{
    position:fixed;
    z-index:30;
    left:18px;
    bottom:82px;
    width:270px;
    height:215px;
    margin:0;
    border-radius:12px;
    border:1px solid rgba(100,110,120,.28);
    box-shadow:0 8px 24px rgba(20,28,38,.18);
    background:var(--surface);
    overflow:hidden;
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
}

#container canvas{
    display:block;
}

#viewTitle{
    top:8px;
    left:8px;
    font-size:10px;
    padding:4px 8px;
}

#viewLegend{ display:none; }

.bed3dHidden #container{
    opacity:0;
    visibility:hidden;
    transform:translateY(8px) scale(.97);
    pointer-events:none;
}

/* Controls are a drawer rather than a permanent column. */
#leftPanel{
    position:fixed;
    z-index:80;
    top:64px;
    left:10px;
    width:360px;
    max-height:calc(100vh - 76px);
    padding:10px;
    border:1px solid rgba(100,110,120,.24);
    border-radius:12px;
    background:rgba(243,245,247,.96);
    box-shadow:0 10px 30px rgba(20,28,38,.18);
    overflow:auto;
    transform:translateX(calc(-100% - 18px));
    transition:transform .22s ease;
}

.controlsOpen #leftPanel{ transform:translateX(0); }

#rightPanel{ display:none; }
#credits{ display:none; }

#btnControls{ min-width:82px; }
#btn3D{ min-width:72px; }

/* Hide old stereonet grid switch: the teaching net is always visible. */
.netSwitchGroup .netSwitchLabel,
.netSwitchGroup .netSwitch{ display:none; }

/* Help / Explain use floating cards rather than consuming layout space. */
.explainModal{
    position:fixed;
    inset:0;
    z-index:200;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(15,23,32,.18);
    backdrop-filter:blur(2px);
}

.explainModal[hidden]{ display:none; }

.explainCard{
    width:min(520px,calc(100vw - 32px));
    border:1px solid rgba(100,110,120,.25);
    border-radius:14px;
    background:rgba(255,255,255,.97);
    box-shadow:0 18px 50px rgba(20,28,38,.24);
    padding:18px 20px 20px;
}

.explainHeader{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
}

.explainEyebrow{
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1.1px;
    color:var(--ink-soft);
    margin-bottom:4px;
}

.explainTitle{
    font-size:18px;
    font-weight:700;
    color:var(--ink);
}

.explainBody{
    margin-top:14px;
    font-size:14px;
    line-height:1.6;
    color:var(--ink-soft);
}

.explainClose{
    width:30px;
    height:30px;
    padding:0;
    margin:0;
    border-radius:50%;
    background:var(--surface-2);
    color:var(--ink);
    font-size:20px;
    line-height:1;
}

/* Responsive: retain stereonet-first behavior on smaller screens. */
@media (max-width:980px){
    html,body{ overflow:hidden; }
    #header{ height:54px; padding:0 10px; }
    #title{ font-size:14px; }
    .headerSubtitle{ display:none; }
    #bottomPanel{ top:54px; }
    #container{
        width:210px;
        height:170px;
        left:10px;
        bottom:92px;
    }
    #leftPanel{ top:62px; width:min(360px,calc(100vw - 20px)); }
    .projectionLearningBar{ bottom:8px; width:calc(100% - 20px); }
}

/* In the initial orientation stage, give the 3D bed a little more room.
   Once Next → Stereonet is pressed, the stereonet becomes the hero and
   the 3D view collapses to the compact floating reference window. */
#container{
    width:460px;
    height:320px;
}

.stereonetMode #container{
    width:460px;
    height:330px;
}

@media (max-width:980px){
    #container{ width:285px; height:225px; }
    .stereonetMode #container{ width:285px; height:225px; }
}

/* v0.4.20 — compact controls live directly on the 3D reference canvas. */
#bed3dControls{
    position:absolute;
    left:10px;
    right:10px;
    bottom:10px;
    z-index:40;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:7px 9px;
    border:1px solid rgba(80,95,110,.18);
    border-radius:10px;
    background:rgba(255,255,255,.78);
    backdrop-filter:blur(6px);
    box-shadow:0 3px 12px rgba(20,28,38,.10);
}
.canvasControlGroup{
    display:flex;
    align-items:center;
    gap:7px;
    min-width:0;
    flex:1;
}
.canvasControlLabel,
.canvasControlSwitch > span:first-child{
    font-size:10px;
    color:var(--ink-soft);
    white-space:nowrap;
}
.canvasControlValue{
    min-width:32px;
    font:600 10px/1 var(--mono);
    color:var(--ink);
    text-align:right;
}
.canvasOpacity{
    width:105px;
    height:14px;
    margin:0;
}
.canvasControlSwitch{
    display:flex;
    align-items:center;
    gap:6px;
    flex:none;
}
.canvasControlSwitch .switch{
    width:32px;
    height:18px;
}
.canvasControlSwitch .slider:before{
    width:14px;
    height:14px;
    left:2px;
    bottom:2px;
}
.canvasControlSwitch input:checked + .slider:before{
    transform:translateX(14px);
}

/* Larger 3D reference canvas to accommodate its local controls. */
#container{
    width:440px;
    height:350px;
}
.stereonetMode #container{
    width:440px;
    height:350px;
}

@media (max-width:980px){
    #container,
    .stereonetMode #container{
        width:320px;
        height:260px;
    }
    #bed3dControls{ left:7px; right:7px; bottom:7px; }
    .canvasOpacity{ width:78px; }
    .canvasControlLabel{ display:none; }
}

/* v0.4.21 — refined 3D reference and control-panel proportions. */
/* Match the control drawer width to the enlarged 3D canvas. */
#leftPanel{
    width:510px;
}

/* Enlarge the 3D reference view while preserving the stereonet as the hero. */
#container,
.stereonetMode #container{
    width:510px;
    height:390px;
}

/* The isometric title is redundant; the visual itself is self-explanatory. */
#viewTitle{
    display:none;
}

@media (max-width:980px){
    #leftPanel{
        width:min(510px,calc(100vw - 20px));
    }
    #container,
    .stereonetMode #container{
        width:min(510px,calc(100vw - 20px));
        height:390px;
    }
}

/* v0.4.24 — compact 3D reference controls on one line. */
#bed3dControls{ display:none !important; }

.referenceControlsCard{
    margin-top:12px;
}

.referenceControlInline{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:16px;
}

.referenceControlRow{
    margin-top:4px;
    min-width:0;
}

.referenceControlHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:7px;
}

.referenceControlSwitch{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
    padding:0;
    border-top:0;
    cursor:pointer;
    white-space:nowrap;
}

.referenceControlSwitch .switch{
    width:36px;
    height:20px;
    flex:none;
}

.referenceControlSwitch .slider:before{
    width:16px;
    height:16px;
    left:2px;
    bottom:2px;
}

.referenceControlSwitch input:checked + .slider:before{
    transform:translateX(16px);
}

#opacity{
    width:100%;
    margin:0;
}

/* The square bed is the visual reference object, so the canvas is only
   slightly larger than its projected footprint. */
#container,
.stereonetMode #container{
    width:410px;
    height:410px;
}

#leftPanel{
    width:410px;
}

@media (max-width:980px){
    #leftPanel{
        width:min(410px,calc(100vw - 20px));
    }
    #container,
    .stereonetMode #container{
        width:min(410px,calc(100vw - 20px));
        height:min(410px,calc(100vw - 20px));
    }
}


/* v0.4.26 — permanent left-side controls and 3D reference.
   The controls and 3D bed are always visible; the stereonet occupies
   the remaining workspace to the right. */
#btnControls, #btn3D{ display:none !important; }

#leftPanel{
    position:fixed !important;
    z-index:80;
    top:66px;
    left:12px;
    width:510px !important;
    height:285px;
    max-height:285px;
    padding:10px;
    border:1px solid rgba(100,110,120,.24);
    border-radius:12px;
    background:rgba(243,245,247,.96);
    box-shadow:0 10px 30px rgba(20,28,38,.18);
    overflow:auto;
    transform:none !important;
}

#container,
.stereonetMode #container{
    position:fixed !important;
    z-index:30;
    left:12px;
    top:363px;
    bottom:auto;
    width:510px !important;
    height:390px !important;
    margin:0;
    border-radius:12px;
    border:1px solid rgba(100,110,120,.28);
    box-shadow:0 8px 24px rgba(20,28,38,.18);
    background:var(--surface);
    overflow:hidden;
}

/* Reserve the left column for the always-visible reference area. */
#bottomPanel{
    left:0; right:0;
    padding-left:534px !important;
}

#stereonetPanel{
    inset:0;
}

/* Do not let the hidden legacy drawer state affect the permanent panel. */
.controlsOpen #leftPanel{ transform:none !important; }
.bed3dHidden #container{
    opacity:1; visibility:visible; transform:none; pointer-events:auto;
}

@media (max-width:980px){
    #leftPanel{
        width:calc(100vw - 24px) !important;
        height:285px; max-height:285px;
    }
    #container, .stereonetMode #container{
        left:12px;
        top:363px;
        width:calc(100vw - 24px) !important;
        height:390px !important;
    }
    #bottomPanel{ padding-left:0 !important; padding-top:765px !important; }
}

/* =========================================================
   v0.5.0 — Learning Module Framework
   ========================================================= */

#rightPanel{display:none !important;}
#btnControls,#btn3D{display:none !important;}

#app{
    display:block;
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
}

#leftPanel{
    position:fixed !important;
    z-index:70;
    left:12px;
    top:68px;
    bottom:12px;
    width:300px !important;
    height:auto !important;
    max-height:none !important;
    padding:10px;
    overflow:auto;
    background:rgba(243,245,247,.97);
    border:1px solid rgba(100,110,120,.25);
    border-radius:12px;
    box-shadow:0 8px 24px rgba(20,28,38,.14);
    transform:none !important;
}

#container,
.stereonetMode #container{
    position:fixed !important;
    z-index:75;
    right:12px;
    left:auto;
    top:68px;
    bottom:auto;
    width:340px !important;
    height:340px !important;
    margin:0;
    border-radius:12px;
    border:1px solid rgba(100,110,120,.28);
    box-shadow:0 8px 24px rgba(20,28,38,.18);
    background:var(--surface);
    overflow:hidden;
}

#container canvas{display:block;width:100%;height:100%;}

#bottomPanel{
    position:fixed !important;
    z-index:10;
    left:324px;
    right:0;
    top:56px;
    bottom:0;
    padding:0 !important;
    margin:0;
    background:var(--bg);
}

#stereonetPanel{
    position:absolute;
    inset:0;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:var(--bg);
}

#stereonetPanel > .panelTitleOverlay{
    position:absolute;
    top:12px;
    left:50%;
    transform:translateX(-50%);
    z-index:20;
}

.learnModuleCard{margin-bottom:10px;}
.learnSelect{
    width:100%;
    padding:8px 10px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    color:var(--ink);
    font:600 13px var(--font-ui);
    outline:none;
}
.learnSelect:focus{border-color:var(--dip);box-shadow:0 0 0 2px rgba(29,92,138,.12);}
.moduleContent[hidden]{display:none !important;}
.moduleCard{margin-bottom:10px;}
.moduleHint{font-size:11px;line-height:1.4;color:var(--ink-soft);margin-bottom:10px;}
.moduleInputGroup{padding:8px 0;border-top:1px solid var(--line);}
.moduleInputGroup:first-of-type{border-top:0;padding-top:0;}
.moduleSectionLabel{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--ink-soft);margin-bottom:6px;}
.moduleInputRow{display:grid;grid-template-columns:1fr 72px 16px;align-items:center;gap:6px;margin:5px 0;font-size:11px;}
.moduleInputRow label{color:var(--ink-soft);}
.moduleInputRow input{width:72px;padding:5px 6px;border:1px solid var(--line);border-radius:6px;background:#fff;font:600 12px var(--font-mono);color:var(--ink);}
.moduleAction{width:100%;margin-top:8px;padding:8px 10px;border:1px solid #1f4f70;border-radius:7px;background:#1d5c8a;color:#fff;font:600 12px var(--font-ui);cursor:pointer;}
.moduleAction:hover{filter:brightness(1.05);}
.moduleResult{margin-top:8px;padding:7px 8px;border-radius:6px;background:var(--surface-2);color:var(--ink-soft);font-size:10px;line-height:1.35;}

#projectionLearningBar{
    bottom:12px;
    width:min(860px,calc(100% - 30px));
}

@media (max-width:980px){
    #leftPanel{width:280px !important;}
    #bottomPanel{left:292px;}
    #container,.stereonetMode #container{width:290px !important;height:290px !important;right:8px;top:64px;}
}




/* v0.5.5 — Keep the stereonet fully inside its middle workspace.
   The canvas is centered by the drawing engine; no visual transform is used,
   preventing overlap with the left panel and clipping at the right edge. */
#stereonetCanvas{
    transform:none;
    box-sizing:border-box;
    border:1px solid rgba(80,105,120,.28);
    border-radius:10px;
    background:rgba(255,255,255,.18);
}

/* v0.5.3 — Center the 2D stereonet between the permanent left and right panels */
#leftPanel{width:450px !important;}
#container,
.stereonetMode #container{width:450px !important;height:450px !important;}

/* Permanent side panels occupy 450px each with 12px outer margins.
   Keep the stereonet workspace between them so its center is the
   midpoint of the two panels rather than the center of the remaining canvas. */
#bottomPanel{
    left:474px;
    right:462px;
}
#stereonetPanel{
    left:0;
    right:0;
}

@media (max-width:980px){
  #leftPanel{width:min(450px,calc(100vw - 20px)) !important;}
  #bottomPanel{
      left:calc(min(450px,calc(100vw - 20px)) + 12px);
      right:0;
  }
  #container,.stereonetMode #container{
      width:min(450px,calc(100vw - 20px)) !important;
      height:min(450px,calc(100vw - 20px)) !important;
      right:8px;
      top:64px;
  }
}

/* v0.5.7 — Reserve dedicated space for the stereonet title and learning bar.
   They no longer overlap the stereonet drawing/canvas. */
#stereonetPanel > .panelTitleOverlay{
    top:8px;
    left:14px;
    transform:none;
    z-index:30;
    margin:0;
    min-height:30px;
    box-sizing:border-box;
}

#stereonetCanvas{
    position:absolute;
    left:0;
    right:0;
    top:46px;
    bottom:92px;
    width:100%;
    height:calc(100% - 138px);
    box-sizing:border-box;
    transform:none;
}

#projectionLearningBar{
    left:50%;
    bottom:10px;
    transform:translateX(-50%);
    z-index:35;
    width:min(860px,calc(100% - 30px));
    box-sizing:border-box;
}

/* v0.5.9 — Keep the original black application header.  Move the
   stereonet teaching/navigation controls into a dedicated bar directly
   above the stereonet canvas; the drawing itself is never covered. */
#stereonetPanel > .panelTitleOverlay{
    position:absolute;
    top:0;
    left:0;
    right:0;
    transform:none;
    z-index:40;
    height:44px;
    min-height:44px;
    margin:0;
    padding:0 12px 0 16px;
    box-sizing:border-box;
    border:0;
    border-bottom:1px solid rgba(80,105,120,.22);
    border-radius:0;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(7px);
    box-shadow:0 2px 8px rgba(20,28,38,.07);
    display:flex;
    align-items:center;
    gap:12px;
}
#stereonetPanel > .panelTitleOverlay .stereonetTitle{
    font-size:12px;
    font-weight:700;
    letter-spacing:1.2px;
    color:var(--ink);
    text-transform:uppercase;
    white-space:nowrap;
}
#stereonetPanel > .panelTitleOverlay .netSwitchGroup{
    margin-left:auto;
}
#stereonetCanvas{
    top:54px;
    bottom:0;
    height:calc(100% - 54px);
}
#projectionLearningBar{
    display:none !important;
}


/* v0.6.0 — Large instructional step text sits inside the upper-left of
   the stereonet workspace. It is deliberately outside the drawing canvas
   layer and does not intercept pointer events. */
.projectionStepOverlay{
    position:absolute;
    top:60px;
    left:20px;
    width:min(360px,42%);
    z-index:18;
    pointer-events:none;
    text-align:left;
}
.projectionStepTitle{
    margin:0 0 5px;
    font-size:15px;
    line-height:1.15;
    font-weight:700;
    letter-spacing:.35px;
    color:var(--ink);
}
.projectionStepDescription{
    max-width:350px;
    font-size:14px;
    line-height:1.4;
    font-weight:500;
    color:var(--ink-soft);
}

@media (max-width:980px){
    .projectionStepOverlay{
        top:56px;
        left:14px;
        width:min(300px,48%);
    }
    .projectionStepTitle{font-size:18px;}
    .projectionStepDescription{font-size:12px;}
}


/* v0.6.1 — prominent Next/Replay control, positioned at the left of the stereonet toolbar */
#stereonetPanel > .panelTitleOverlay .netSwitchGroup{
    margin-left:0;
    display:flex;
    align-items:center;
    gap:10px;
}
#stereonetPanel > .panelTitleOverlay .projectionPrimary{
    order:-1;
    min-width:150px;
    min-height:34px;
    padding:7px 14px;
    border:1px solid rgba(105,78,20,.55);
    border-radius:8px;
    background:var(--gold);
    color:#1d1a12;
    font:700 12px/1.1 Segoe UI, sans-serif;
    box-shadow:0 2px 5px rgba(35,28,15,.12);
}
#stereonetPanel > .panelTitleOverlay .projectionPrimary:hover{
    filter:brightness(1.04);
    transform:translateY(-1px);
    box-shadow:0 3px 7px rgba(35,28,15,.16);
}
#stereonetPanel > .panelTitleOverlay .projectionPrimary:disabled{
    opacity:.72;
    transform:none;
}

/* v0.6.29 — Restore the animation speed control in the stereonet toolbar. */
#stereonetPanel > .panelTitleOverlay .animationSpeedBtn{
    min-width:92px;
    min-height:30px;
    padding:6px 10px;
    border:1px solid rgba(80,105,120,.28);
    border-radius:7px;
    background:rgba(255,255,255,.92);
    color:var(--ink);
    font:600 11px/1.1 Segoe UI, sans-serif;
    white-space:nowrap;
}
#stereonetPanel > .panelTitleOverlay .animationSpeedBtn:hover{
    background:rgba(243,245,247,.98);
}

/* v0.6.3 — Compact instructional line above the stereonet drawing.
   The step title and explanation share one line and wrap naturally when needed. */
.projectionStepOverlay{
    top:63px;
    left:20px;
    width:calc(100% - 40px);
    max-width:none;
    display:flex;
    align-items:baseline;
    gap:10px;
    flex-wrap:wrap;
    pointer-events:none;
    box-sizing:border-box;
}
.projectionStepTitle{
    flex:0 0 auto;
    margin:0;
    font-size:15px;
    line-height:1.25;
    font-weight:700;
    letter-spacing:.25px;
    color:var(--ink);
}
.projectionStepDescription{
    flex:1 1 260px;
    min-width:180px;
    max-width:none;
    margin:0;
    font-size:14px;
    line-height:1.35;
    font-weight:500;
    color:var(--ink-soft);
}

/* Give the stereonet a little more breathing room below the instructional line. */
#stereonetCanvas{
    top:64px;
    height:calc(100% - 64px);
}

/* v0.6.4 — final step-title sizing */
.projectionStepTitle{font-size:15px !important;}

/* v0.6.6 — Off-white stereonet workspace and extra construction room. */
#stereonetCanvas{
    background:#fbfaf6;
    top:74px;
    height:calc(100% - 74px);
}
.projectionStepOverlay{
    top:60px;
}
/* Keep the teaching text slightly above the net while preserving the extra
   10px of vertical space below it. */

/* v0.6.7: swap stereonet canvas and tracing-overlay tones */
#stereonetCanvas{ background:rgba(243, 245, 247, .97); }

/* v0.6.8 — Expand the stereonet title area so the teaching step and
   explanation live inside the title/header region. The first row contains
   the stereonet controls; the second row contains the step title and
   explanation, with the explanation wrapping to a third line when needed. */
#stereonetPanel > .panelTitleOverlay{
    height:82px;
    min-height:82px;
    padding:0 12px 8px 16px;
    align-items:flex-start;
    flex-wrap:wrap;
    align-content:flex-start;
    gap:0;
}

#stereonetPanel > .panelTitleOverlay .stereonetTitle{
    height:42px;
    display:flex;
    align-items:center;
}

#stereonetPanel > .panelTitleOverlay .netSwitchGroup{
    height:42px;
    display:flex;
    align-items:center;
}

#stereonetPanel > .projectionStepOverlay{
    top:43px;
    left:16px;
    right:16px;
    width:auto;
    max-width:none;
    display:flex;
    align-items:baseline;
    gap:8px;
    flex-wrap:wrap;
    box-sizing:border-box;
    z-index:41;
    pointer-events:none;
}

#stereonetPanel > .projectionStepOverlay .projectionStepTitle{
    flex:0 0 auto;
    margin:0;
    font-size:15px !important;
    line-height:1.25;
    font-weight:700;
}

#stereonetPanel > .projectionStepOverlay .projectionStepDescription{
    flex:1 1 280px;
    min-width:220px;
    margin:0;
    font-size:14px;
    line-height:1.3;
    font-weight:500;
}

#stereonetCanvas{
    top:90px;
    height:calc(100% - 90px);
}


/* v0.6.13 — unified stereonet and 3D canvas background */
#stereonetCanvas{ background:rgba(243, 245, 247, .97) !important; }
#container{ background:rgba(243, 245, 247, .97) !important; }
#container canvas{ background:rgba(243, 245, 247, .97); }


/* v0.6.19 — animation speed control */
#stereonetPanel > .panelTitleOverlay .animationSpeedBtn{
    min-width:82px;
    padding:6px 9px;
    border-color:rgba(80,80,80,.42);
    background:rgba(255,255,255,.92);
    font-weight:700;
}
#stereonetPanel > .panelTitleOverlay .animationSpeedBtn:hover{
    background:#fff;
    border-color:rgba(80,80,80,.62);
}

/* v0.6.20 — unified panel-card treatment for the three-column workspace.
   Keep the existing left controls, but tighten their outer breathing room by 2px.
   The center stereonet and right 3D view now sit inside matching bordered panels. */
#leftPanel{
    left:10px !important;
    top:66px !important;
    bottom:10px !important;
    width:450px !important;
    box-sizing:border-box;
    padding:9px !important;
    border:1px solid rgba(100,110,120,.28) !important;
    border-radius:12px !important;
    background:rgba(243,245,247,.97) !important;
    box-shadow:0 8px 24px rgba(20,28,38,.14) !important;
}

/* Center stereonet panel: the title bar and drawing canvas are contained
   within the same visible panel boundary. */
#bottomPanel{
    left:470px !important;
    right:470px !important;
    top:66px !important;
    bottom:10px !important;
    padding:0 !important;
    background:transparent !important;
}

#stereonetPanel{
    position:absolute !important;
    inset:0 !important;
    box-sizing:border-box;
    margin:0 !important;
    padding:0 !important;
    border:1px solid rgba(100,110,120,.28) !important;
    border-radius:12px !important;
    background:rgba(243,245,247,.97) !important;
    box-shadow:0 8px 24px rgba(20,28,38,.14) !important;
    overflow:hidden !important;
}

/* Keep the title/control header inside the stereonet panel boundary. */
#stereonetPanel > .panelTitleOverlay{
    left:1px !important;
    right:1px !important;
    top:1px !important;
    border-radius:11px 11px 0 0 !important;
}

/* Right 3D reference panel uses the same outer spacing, border and surface. */
#container,
.stereonetMode #container{
    right:10px !important;
    top:66px !important;
    left:auto !important;
    width:450px !important;
    height:calc(100vh - 76px) !important;
    margin:0 !important;
    box-sizing:border-box;
    padding:9px !important;
    border:1px solid rgba(100,110,120,.28) !important;
    border-radius:12px !important;
    background:rgba(243,245,247,.97) !important;
    box-shadow:0 8px 24px rgba(20,28,38,.14) !important;
    overflow:hidden !important;
}

#container canvas{
    display:block;
    width:100%;
    height:100%;
    border-radius:8px;
}

@media (max-width:1200px){
    #leftPanel{width:calc(50vw - 16px) !important;}
    #bottomPanel{left:calc(50vw - 6px) !important; right:10px !important;}
    #container{display:none !important;}
}


/* v0.6.21 — tighten the inter-panel gaps while keeping the same outer breathing room. */
#bottomPanel{
    left:465px !important;
    right:465px !important;
}
#container,
.stereonetMode #container{
    right:10px !important;
}

/* v0.6.22 — Move the Learn selector into the center of the original black header. */
#header{
    display:flex;
    align-items:center;
}
#headerLearnControl{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    display:flex;
    align-items:center;
    gap:8px;
    z-index:20;
}
.headerLearnLabel{
    color:rgba(255,255,255,.82);
    font:600 12px var(--font-ui);
    letter-spacing:.7px;
}
.headerLearnSelect{
    min-width:220px;
    max-width:300px;
    padding:6px 30px 6px 10px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:7px;
    background:rgba(255,255,255,.10);
    color:#fff;
    font:600 12px var(--font-ui);
    outline:none;
}
.headerLearnSelect:focus{
    border-color:rgba(255,255,255,.55);
    box-shadow:0 0 0 2px rgba(255,255,255,.10);
}
.headerLearnSelect option{
    background:#252b31;
    color:#fff;
}
#leftPanel .learnModuleCard{display:none !important;}
@media (max-width:980px){
    #headerLearnControl{position:static; transform:none; margin-left:auto; margin-right:10px;}
    .headerLearnSelect{min-width:170px; max-width:220px;}
}
@media (max-width:720px){
    .headerLearnLabel{display:none;}
    .headerLearnSelect{min-width:150px; max-width:180px;}
}

/* v0.6.23 — move the interactive 3D reference into the lower portion of the
   left control panel and use the right panel as a persistent step list. */
#leftPanel{
    display:block !important;
    position:fixed !important;
}

#leftPanel .referenceControlsCard{
    position:absolute !important;
    left:9px !important;
    right:9px !important;
    top:238px !important;
    height:205px !important;
    bottom:auto !important;
    margin:0 !important;
    padding:9px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
}

#leftPanel .referenceControlsCard .panelTitle{
    position:relative;
    z-index:4;
    margin-bottom:5px;
}

#leftPanel .referenceControlsCard .referenceControlInline{
    position:relative;
    z-index:5;
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

#leftPanel .referenceControlsCard .referenceControlRow{
    flex:1 1 230px;
    min-width:180px;
}

/* The Three.js canvas is visually contained by the left 3D View card. */
#leftPanel .referenceControlsCard #container,
#leftPanel .referenceControlsCard .stereonetMode #container{
    position:absolute !important;
    z-index:2 !important;
    left:9px !important;
    right:9px !important;
    top:66px !important;
    bottom:8px !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:8px !important;
    box-shadow:none !important;
    background:rgba(243,245,247,.97) !important;
    overflow:hidden !important;
}

#leftPanel .referenceControlsCard #container canvas{
    display:block;
    width:100% !important;
    height:100% !important;
    border-radius:8px;
}

/* Restore the right panel as a permanent, matching panel. */
#rightPanel{
    display:block !important;
    position:fixed !important;
    z-index:60 !important;
    right:10px !important;
    left:auto !important;
    top:66px !important;
    bottom:10px !important;
    width:450px !important;
    box-sizing:border-box !important;
    padding:9px !important;
    overflow:auto !important;
    background:rgba(243,245,247,.97) !important;
    border:1px solid rgba(100,110,120,.28) !important;
    border-radius:12px !important;
    box-shadow:0 8px 24px rgba(20,28,38,.14) !important;
}

#rightPanel .panelCard{
    margin-bottom:9px;
}

.learningStepsCard{
    padding:11px 12px 12px !important;
}

.learningStepList{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:5px;
}

.learningStepList li{
    display:flex;
    align-items:center;
    gap:9px;
    min-height:30px;
    padding:5px 8px;
    border:1px solid rgba(100,110,120,.18);
    border-radius:7px;
    background:rgba(255,255,255,.42);
    color:var(--ink-soft);
    font-size:14px;
    line-height:1.35;
    font-weight:500;
    transition:background .16s ease,border-color .16s ease,color .16s ease;
}

.learningStepList li .stepNo{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    flex:0 0 20px;
    border-radius:50%;
    border:1px solid rgba(100,110,120,.28);
    background:rgba(255,255,255,.75);
    font:700 12px var(--font-mono);
}

.learningStepList li.isActive{
    background:var(--gold-soft);
    border-color:var(--gold);
    color:var(--ink);
    font-weight:700;
}

.learningStepList li.isActive .stepNo{
    border-color:var(--gold);
    background:var(--gold);
    color:#fff;
}


/* Manual mode: feature overview rather than numbered construction steps. */
.learningStepList .manualFeatureItem{
    display:flex;
    align-items:center;
    gap:9px;
    min-height:0;
    padding:6px 9px;
    font-size:14px;
    font-weight:500;
}
.learningStepList .manualFeatureItem::before{
    display:none;
}
.learningStepList .manualFeatureIcon{
    width:26px;
    height:26px;
    flex:0 0 26px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:6px;
    background:var(--panel);
}
.learningStepList .manualFeatureIcon .manualNetIcon{
    width:22px;
    height:22px;
}
.learningStepList .manualFeatureIcon .manualHelpTextIcon{
    font-size:17px;
    line-height:1;
    color:var(--ink);
}

/* The persistent right-side list replaces the compact bottom step strip. */
#projectionLearningBar{display:none !important;}

/* Tutor construction steps: the live explanation belongs to the active step. */
.learningStepList li{
    display:grid;
    grid-template-columns:20px minmax(0,1fr);
    align-items:center;
}
.learningStepList li .stepExplanation{
    grid-column:1 / -1;
    margin:3px 2px 3px 29px;
    padding:7px 9px 8px;
    border-left:3px solid var(--gold);
    border-radius:0 5px 5px 0;
    background:rgba(255,255,255,.58);
    color:var(--ink-soft);
    font-size:15px;
    font-weight:500;
    line-height:1.45;
}
.learningStepList li .stepExplanation[hidden]{
    display:none !important;
}

@media (max-width:1200px){
    #rightPanel{display:none !important;}
    #leftPanel .referenceControlsCard{top:220px !important;}
    #leftPanel .referenceControlsCard #container{
        left:9px !important;
        right:9px !important;
        width:auto !important;
        max-width:none !important;
    }
}

/* v0.6.25 — leave a small visual breathing space below the Plane Transparency
   / Pole controls before the interactive 3D canvas begins. */
#leftPanel .referenceControlsCard #container,
#leftPanel .referenceControlsCard .stereonetMode #container{
    top:78px !important;
}

/* v0.6.26 — clearly separate the 3D canvas from the Plane Transparency/Pole
   controls. The top edge now has the same visible boundary treatment as the
   left and bottom edges, with a little additional clearance for the controls. */
#leftPanel .referenceControlsCard #container,
#leftPanel .referenceControlsCard .stereonetMode #container{
    top:94px !important;
    border:1px solid rgba(100,110,120,.28) !important;
    box-sizing:border-box !important;
}

/* v0.6.30 — Keep only the instructional explanation in the stereonet title panel.
   The step title remains available to the construction-step list on the right,
   but is intentionally removed from the center title panel. */
#stereonetPanel > .projectionStepOverlay .projectionStepTitle{
    display:none !important;
}
#stereonetPanel > .projectionStepOverlay .projectionStepDescription{
    flex:1 1 100%;
    min-width:0;
    max-width:none;
    margin:0;
}

/* v0.6.31 — Make the current instructional explanation prominent. */
#stereonetPanel > .projectionStepOverlay .projectionStepDescription{
    flex:1 1 100%;
    min-width:0;
    max-width:none;
    margin:0;
    font-size:16px !important;
    line-height:1.35;
    font-weight:650;
    letter-spacing:.05px;
    color:var(--ink) !important;
}

/* Animation learning modes */
.animationModeBtn.isSelected {
    background: rgba(47,72,88,0.12);
    border-color: rgba(47,72,88,0.55);
    font-weight: 600;
}

/* v0.6.35 — Apparent-dip module: keep inputs above the permanent 3D view. */
#leftPanel #moduleApparentDip{
    position:absolute !important;
    left:9px !important;
    right:9px !important;
    top:9px !important;
    margin:0 !important;
    z-index:8 !important;
}

#leftPanel #moduleApparentDip .moduleCard{
    margin:0 !important;
}

body[data-learning-module="apparentDip"] #leftPanel .referenceControlsCard{
    top:250px !important;
}

body[data-learning-module="apparentDip"] #leftPanel .referenceControlsCard #container{
    top:72px !important;
}


/* Free overlay rotation: the hand appears only while the pointer is
   over the visible transparent overlay. */
#stereonetCanvas{
    cursor:default;
    touch-action:none;
    background:#FFFFFF;
}
#stereonetCanvas.isOverlayHover{cursor:grab;}
#stereonetCanvas.isDraggingOverlay{cursor:grabbing;}

/* v0.6.93 — Intersection module: keep the Two Planes card above the
   dedicated 3D reference view instead of allowing the canvas to overlap it. */
#leftPanel #moduleIntersection{
    position:absolute !important;
    left:9px !important;
    right:9px !important;
    top:9px !important;
    margin:0 !important;
    z-index:8 !important;
}

#leftPanel #moduleIntersection .moduleCard{
    margin:0 !important;
}

body[data-learning-module="intersection"] #leftPanel .referenceControlsCard{
    top:430px !important;
}

body[data-learning-module="intersection"] #leftPanel .referenceControlsCard #container{
    top:72px !important;
}

/* Intersection of Planes: same compact control language as Plotting of Plane */
.intersectionTabs{display:flex !important;visibility:visible !important;position:relative;z-index:50;gap:6px;margin:10px 0 12px;border-bottom:1px solid var(--border-color,#3a3f46);min-height:38px;overflow:visible;}
.intersectionTab{display:block !important;visibility:visible !important;flex:1 1 0;padding:7px 10px !important;width:auto !important;height:34px !important;margin:0 !important;border:1px solid var(--line,#444) !important;border-bottom:0 !important;border-radius:7px 7px 0 0 !important;background:var(--surface-2,#2f3440) !important;color:var(--text,#fff) !important;cursor:pointer;font-weight:600;opacity:.75;}
.intersectionTab.active{display:block !important;visibility:visible !important;opacity:1;background:rgba(128,0,32,.32) !important;box-shadow:inset 0 -2px 0 currentColor;}
.intersectionTabPanel{display:block;}
.intersectionTabPanel[hidden]{display:none;}
.intersectionCard .rangeStrike,.intersectionCard .rangeDip{width:100%;}

/* Intersection controls: show the two possible dip directions at the ends
   of the signed true-dip slider. */
.intersectionStrikeValue{font-size:16px;white-space:nowrap;}
.intersectionCard #intDipValue1,
.intersectionCard #intDipValue2{font-size:16px;}
.intersectionDipDirections{
    position:relative;
    width:100%;
    height:18px;
    margin-bottom:4px;
    font-size:.72em;
    font-weight:600;
}
.intersectionDipDirections span{
    white-space:nowrap;
    position:absolute;
    top:0;
}
.intersectionDipDirections span:first-child{
    left:0;
    text-align:left;
}
/* Keep the opposite dip direction clearly at the upper-right of the slider. */
.intersectionDipDirections span:last-child{
    right:0;
    text-align:right;
}


/* v0.7.16 — Intersection 3D view: give the reference hemisphere enough
   vertical room to preserve its natural circular aspect.  The ordinary
   bedding surface/trace is hidden in this mode; the intersection module
   draws the two solved planes itself. */
body[data-learning-module="intersection"] #leftPanel .referenceControlsCard{
    top:360px !important;
}
body[data-learning-module="intersection"] #leftPanel .referenceControlsCard #container{
    top:66px !important;
    bottom:8px !important;
}


/* v0.7.17 — Intersection 3D view: give the hemisphere a genuinely taller
   viewport and keep the WebGL drawing area synchronized with the panel. */
body[data-learning-module="intersection"] #leftPanel .referenceControlsCard{
    top:330px !important;
}
body[data-learning-module="intersection"] #leftPanel .referenceControlsCard #container{
    top:62px !important;
    bottom:8px !important;
    aspect-ratio:auto !important;
}
body[data-learning-module="intersection"] #leftPanel .referenceControlsCard #container canvas{
    width:100% !important;
    height:100% !important;
    object-fit:fill !important;
}

/* Compact learning explanation used in the Measurements panel. */
.measurementExplanation {
    padding: 4px 2px;
    line-height: 1.55;
    color: var(--text-secondary, #555);
    font-size: 0.92rem;
}

/* v11.1 — Keep the Stereonet panel title compact; instructional explanation
   belongs in the Measurements panel, not in the panel title area. */
#stereonetPanel > .projectionStepOverlay{
    display:none !important;
}
#stereonetPanel > .panelTitleOverlay{
    height:48px !important;
    min-height:48px !important;
    padding:0 12px 0 16px !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
}
#stereonetPanel > .panelTitleOverlay .stereonetTitle,
#stereonetPanel > .panelTitleOverlay .netSwitchGroup{
    height:48px !important;
}
#stereonetPanel > #stereonetCanvas{
    top:50px !important;
    height:calc(100% - 50px) !important;
}

/* Compact Measurements panel: retain only the live step explanation. */
#rightPanel .measureCard{
    padding-bottom:8px !important;
}
#rightPanel .measureCard .measurementExplanation{
    padding:2px 2px 0 !important;
    line-height:1.35 !important;
    font-size:0.86rem !important;
}

/* v11.2 — Right-panel order: Construction steps → Plane information → Explanation. */
#rightPanel .learningStepsCard,
#rightPanel .infoCard,
#rightPanel .explanationCard{
    flex: 0 0 auto !important;
}
#rightPanel .infoCard{
    order: 2 !important;
}
#rightPanel .explanationCard{
    order: 3 !important;
}


/* Manual stereonet plotting */
.manualStepList{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:10px 0 12px;
}
.manualStep{
  padding:7px 9px;
  border:1px solid rgba(80,90,100,.18);
  border-radius:6px;
  font-size:12px;
  color:#66717a;
  background:rgba(245,247,248,.55);
}
.manualStep.active{
  color:#24313a;
  border-color:rgba(70,90,105,.35);
  background:rgba(225,232,236,.75);
  font-weight:600;
}
.manualActions{
  display:flex;
  gap:8px;
  margin-top:8px;
}
.manualActions .toolBtn{
  min-height:34px;
  padding:6px 12px;
}
#manualPlotResult{
  margin-top:10px;
  line-height:1.45;
}

/* manual strike angle label */

.manualDrawingTools{
  margin:6px 0 8px;
  padding:6px 8px;
  border-top:1px solid rgba(80,90,100,.18);
  border-bottom:1px solid rgba(80,90,100,.18);
}
.manualToolsTitle{
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#65717a;
  margin-bottom:5px;
}
.manualToolsButtons{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.manualToolsButtons .toolBtn{
  min-height:30px;
  padding:4px 9px;
  font-size:11px;
}
.manualToolsButtons .toolBtn.active{
  font-weight:700;
}
.manualToolStatus{
  margin-top:5px;
  font-size:11px;
  color:#6b747c;
}
#stereonetCanvas.manual-crosshair,
canvas.manual-crosshair{
  cursor:crosshair !important;
}

/* Manual drawing tools live in the application title panel */
#titleText #manualDrawingTools{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:5px;
  padding:0;
  border:0;
}
#titleText #manualDrawingTools[hidden]{display:none}
#titleText .manualToolsTitle{
  margin:0 4px 0 0;
  font-size:10px;
  white-space:nowrap;
}
#titleText .manualToolsButtons{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
#titleText .manualToolsButtons .toolBtn{
  min-height:26px;
  padding:3px 8px;
  font-size:10px;
}
#titleText .manualToolStatus{
  margin:0;
  font-size:10px;
  white-space:nowrap;
  opacity:.75;
}

/* Manual drawing tools as icons inside .panelTitle */
.manualPanelTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.manualTitleTools{
  display:flex;
  align-items:center;
  gap:3px;
  margin-left:auto;
}
.manualIconTool{
  width:25px;
  height:23px;
  padding:0;
  border:1px solid transparent;
  border-radius:4px;
  background:transparent;
  color:inherit;
  font-size:16px;
  line-height:20px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.manualIconTool:hover{
  background:rgba(100,110,120,.10);
  border-color:rgba(80,90,100,.18);
}
.manualIconTool.active{
  background:rgba(100,110,120,.16);
  border-color:rgba(80,90,100,.28);
  font-weight:700;
}

/* Manual tools are located in the Stereonet panel title */
#stereonetPanel .panelTitleOverlay{
  display:flex;
  align-items:center;
}
#stereonetPanel .manualTitleTools{
  display:flex;
  align-items:center;
  gap:3px;
  margin-left:8px;
}
#stereonetPanel .manualTitleTools[hidden]{display:none}

#stereonetPanel .manualIconTool{
  border:1px solid rgba(70,80,90,.35);
  border-radius:4px;
  background:rgba(255,255,255,.45);
  box-sizing:border-box;
}
#stereonetPanel .manualIconTool:hover{
  border-color:rgba(50,65,80,.65);
  background:rgba(100,110,120,.10);
}
#stereonetPanel .manualIconTool.active{
  border-color:rgba(50,65,80,.75);
  background:rgba(100,110,120,.16);
  box-shadow:inset 0 0 0 1px rgba(50,65,80,.10);
}

#stereonetPanel .manualIconTool[data-manual-tool="arc"]{font-size:16px;line-height:1;}


/* Manual plane drawing: concise control reference */
.manualControlHelp{
    display:flex;
    flex-direction:column;
    gap:7px;
    margin-top:10px;
}

.manualHelpItem{
    display:grid;
    grid-template-columns:28px 1fr;
    align-items:start;
    column-gap:8px;
    padding:7px 8px;
    border:1px solid rgba(90,100,110,.16);
    border-radius:6px;
    background:rgba(255,255,255,.34);
}

.manualHelpIcon{
    width:26px;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(70,80,90,.28);
    border-radius:5px;
    font-size:15px;
    line-height:1;
}

.manualHelpItem strong{
    display:block;
    font-size:12px;
    line-height:16px;
}

.manualHelpItem span{
    display:block;
    margin-top:1px;
    font-size:11px;
    line-height:15px;
    opacity:.78;
}


/* Final compact 3D View placement */
#leftPanel .referenceControlsCard{
    top:470px !important;
    height:190px !important;
    max-height:190px !important;
    bottom:auto !important;
}
#leftPanel .referenceControlsCard #container,
#leftPanel .referenceControlsCard .stereonetMode #container{
    top:62px !important;
    bottom:7px !important;
}


/* v107: 3D View is part of the Orientation-page flow */
#modulePlane .referenceControlsCard{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    margin:10px 0 0 0 !important;
    padding:10px 11px 11px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
}

#modulePlane .referenceControlsCard::before{
    background:#607d8b !important;
}

#modulePlane .referenceControlsCard .panelTitle{
    margin-bottom:7px !important;
}

#modulePlane .referenceControlsCard .referenceControlInline{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:10px !important;
}

#modulePlane .referenceControlsCard .referenceControlRow{
    min-width:0 !important;
    flex:none !important;
}

#modulePlane .referenceControlsCard #container,
#modulePlane .referenceControlsCard .stereonetMode #container{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:100% !important;
    height:155px !important;
    margin:9px 0 0 0 !important;
    border:1px solid rgba(100,110,120,.18) !important;
    border-radius:8px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
}

#modulePlane .referenceControlsCard #container canvas{
    width:100% !important;
    height:100% !important;
    display:block !important;
}


/* v108: compact Orientation -> 3D View spacing */
#modulePlane .referenceControlsCard{
    margin:5px 0 0 0 !important;
}

#modulePlane .referenceControlsCard #container,
#modulePlane .referenceControlsCard .stereonetMode #container{
    height:205px !important;
}


/* v109: 3D View fills the remaining left-panel height */
#modulePlane .referenceControlsCard{
    position:absolute !important;
    left:9px !important;
    right:9px !important;
    top:210px !important;
    bottom:9px !important;
    width:auto !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;
    padding:10px 11px 11px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
}

#modulePlane .referenceControlsCard .referenceControlInline{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:10px !important;
}

#modulePlane .referenceControlsCard #container,
#modulePlane .referenceControlsCard .stereonetMode #container{
    position:absolute !important;
    left:10px !important;
    right:10px !important;
    top:67px !important;
    bottom:10px !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    box-sizing:border-box !important;
}


/* v110: stack Orientation and 3D View on page 1 */
#modulePlane{
    position:relative !important;
    height:100% !important;
}

#modulePlane .referenceControlsCard{
    position:absolute !important;
    left:9px !important;
    right:9px !important;
    top:180px !important;
    bottom:9px !important;
    width:auto !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;
    padding:10px 11px 11px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
}

#modulePlane .referenceControlsCard #container,
#modulePlane .referenceControlsCard .stereonetMode #container{
    position:absolute !important;
    left:10px !important;
    right:10px !important;
    top:67px !important;
    bottom:10px !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    box-sizing:border-box !important;
}


/* v111: align 3D View exactly with Orientation */
#modulePlane .referenceControlsCard{
    left:0 !important;
    right:0 !important;
    width:100% !important;
    top:225px !important;
    bottom:9px !important;
    margin:0 !important;
    box-sizing:border-box !important;
}


/* v112: keep the 3D canvas below the control row */
#modulePlane .referenceControlsCard #container,
#modulePlane .referenceControlsCard .stereonetMode #container{
    top:92px !important;
}


/* v113: small additional clearance below the 3D View controls */
#modulePlane .referenceControlsCard #container,
#modulePlane .referenceControlsCard .stereonetMode #container{
    top:101px !important;
}


/* v116: Pole is not part of the 3D View */
#modulePlane .referenceControlsCard .pole,
#modulePlane .referenceControlsCard [data-role="pole"]{
    display:none !important;
}


/* v117: True Dip from Apparent Dip page */
#moduleApparentDip{
    position:relative !important;
    height:100% !important;
}

#moduleApparentDip .apparentDipCard{
    width:100% !important;
    box-sizing:border-box !important;
    margin:0 !important;
}

#moduleApparentDip .apparentDip3DCard{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:250px !important;
    bottom:9px !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
}

#moduleApparentDip .apparentDip3DCard::before{
    background:#607d8b !important;
}

#moduleApparentDip .apparentDip3DCard .referenceControlInline{
    display:block !important;
}

#moduleApparentDip .apparentDip3DCard .referenceControlRow{
    width:100% !important;
}


/* v118: True Dip from Apparent Dip — match Orientation card styling */
#moduleApparentDip .orientationLikeCard{
    position:relative !important;
    width:100% !important;
    box-sizing:border-box !important;
}

#moduleApparentDip .orientationLikeCard::before{
    background:var(--dip) !important;
}

/* Keep a clear gap below the top card; the 3D View must never overlap it. */
#moduleApparentDip .apparentDip3DCard{
    top:calc(var(--true-dip-top-height, 300px) + 8px) !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    bottom:9px !important;
    height:auto !important;
    max-height:none !important;
}


/* v119: True Dip page — same vertical alignment as Plotting Plane */
#moduleApparentDip{
    position:relative !important;
    height:100% !important;
}

#moduleApparentDip .apparentDipCard{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:100% !important;
    margin:0 !important;
    box-sizing:border-box !important;
}

#moduleApparentDip .apparentDipCard::before{
    background:var(--dip) !important;
}

#moduleApparentDip .apparentDip3DCard{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:calc(var(--true-dip-top-height, 300px) + 8px) !important;
    bottom:9px !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
}

#moduleApparentDip .apparentDip3DCard::before{
    background:#607d8b !important;
}

#moduleApparentDip .module3DCanvas{
    position:absolute !important;
    left:10px !important;
    right:10px !important;
    top:96px !important;
    bottom:10px !important;
    border:1px solid rgba(100,110,120,.18);
    border-radius:8px;
    overflow:hidden;
    background:#f8fafb;
}

#moduleApparentDip .module3DCanvas canvas{
    display:block;
    width:100%;
    height:100%;
}


/* v120: final True Dip page geometry */
#moduleApparentDip{
    position:relative !important;
    height:100% !important;
    overflow:hidden !important;
}

#moduleApparentDip .apparentDipCard{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    width:100% !important;
    height:250px !important;
    margin:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
}

#moduleApparentDip .apparentDip3DCard{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:258px !important;
    bottom:9px !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
}

#moduleApparentDip .module3DCanvas{
    top:96px !important;
    bottom:10px !important;
    left:10px !important;
    right:10px !important;
}

#moduleApparentDip .module3DCanvas canvas{
    width:100% !important;
    height:100% !important;
}


/* v121: small additional separation below the True Dip input panel */
#moduleApparentDip .apparentDip3DCard{
    top:268px !important;
}


/* v124: True Dip uses the application's original 3D renderer.
   Only its placement is changed; projection3D.showApparentDips() remains
   the source of truth for the two maroon apparent-dip lines. */
#moduleApparentDip #apparentDip3DCanvas{
    display:none !important;
}

body[data-learning-module="apparentDip"] #container #viewTitle,
body[data-learning-module="apparentDip"] #container #viewLegend{
    display:none !important;
}

body[data-learning-module="apparentDip"] #container{
    border-radius:8px !important;
    box-shadow:none !important;
}

/* v125: The original Three.js #container is moved into the active
   True Dip 3D View card. No duplicate canvas/viewer is used. */
#moduleApparentDip .apparentDip3DCard{
    position:absolute !important;
    left:9px !important;
    right:9px !important;
    top:268px !important;
    bottom:9px !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:10px 11px 11px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
}
#moduleApparentDip .apparentDip3DCard #container{
    position:absolute !important;
    left:10px !important;
    right:10px !important;
    top:62px !important;
    bottom:10px !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    border:1px solid rgba(100,110,120,.28) !important;
    border-radius:8px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
}
#moduleApparentDip .apparentDip3DCard #container canvas{
    display:block !important;
    width:100% !important;
    height:100% !important;
}

/* v126: True Dip page fine alignment */
#moduleApparentDip .apparentDip3DCard{
    left:0 !important;
    right:0 !important;
    width:100% !important;
    top:276px !important;
    box-sizing:border-box !important;
}

/* v127: move True Dip 3D drawing canvas down 9 px */
#moduleApparentDip .apparentDip3DCard #container{
    top:71px !important;
}

/* v128: additional canvas clearance below transparency control */
#moduleApparentDip .apparentDip3DCard #container{
    top:81px !important;
}

/* v129: definite clearance between controls and 3D canvas */
#moduleApparentDip .apparentDip3DCard .referenceControlInline{
    position:relative !important;
    z-index:10 !important;
}
#moduleApparentDip .apparentDip3DCard #container{
    position:absolute !important;
    top:105px !important;
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
    z-index:1 !important;
    overflow:hidden !important;
}

/* v131: True Dip page panel proportions and spacing.
   The input panel needs extra vertical room for two observations;
   keep a small consistent gap, then let 3D View use the remaining height. */
#moduleApparentDip .apparentDipCard{
    top:0 !important;
    height:330px !important;
    overflow:hidden !important;
}

#moduleApparentDip .apparentDip3DCard{
    top:338px !important;
    bottom:9px !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:auto !important;
    box-sizing:border-box !important;
}

/* v132: final correction — Apparent Dip 3D card was still constrained by
   the legacy top:250px rule. */
body[data-learning-module="apparentDip"] #leftPanel #moduleApparentDip{
    position:absolute !important;
    left:9px !important;
    right:9px !important;
    top:9px !important;
    bottom:9px !important;
    height:auto !important;
    margin:0 !important;
}

body[data-learning-module="apparentDip"] #leftPanel #moduleApparentDip .apparentDipCard{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    width:100% !important;
    height:330px !important;
    box-sizing:border-box !important;
}

body[data-learning-module="apparentDip"] #leftPanel #moduleApparentDip .apparentDip3DCard{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:338px !important;
    bottom:0 !important;
    width:100% !important;
    height:auto !important;
    box-sizing:border-box !important;
    margin:0 !important;
}

body[data-learning-module="apparentDip"] #leftPanel #moduleApparentDip .apparentDip3DCard #container{
    top:105px !important;
    bottom:10px !important;
}

/* v133: compact True Dip input panel after removing the status message */
body[data-learning-module="apparentDip"] #leftPanel #moduleApparentDip .apparentDipCard{
    height:265px !important;
}

body[data-learning-module="apparentDip"] #leftPanel #moduleApparentDip .apparentDip3DCard{
    top:273px !important;
    bottom:0 !important;
    height:auto !important;
}

/* v134: Intersection of Planes — same two-panel design language */
body[data-learning-module="intersection"] #leftPanel #moduleIntersection{
    position:absolute !important;
    left:9px !important;
    right:9px !important;
    top:9px !important;
    bottom:9px !important;
    height:auto !important;
    margin:0 !important;
}

body[data-learning-module="intersection"] #leftPanel #moduleIntersection .intersectionCard{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    width:100% !important;
    height:330px !important;
    margin:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
}

body[data-learning-module="intersection"] #leftPanel #moduleIntersection .intersection3DCard{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:338px !important;
    bottom:0 !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:10px 11px 11px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
}

body[data-learning-module="intersection"] #leftPanel #moduleIntersection .intersection3DCard .panelTitle{
    position:relative !important;
    z-index:5 !important;
}

body[data-learning-module="intersection"] #leftPanel #moduleIntersection .intersection3DCard #container{
    position:absolute !important;
    left:10px !important;
    right:10px !important;
    top:55px !important;
    bottom:10px !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    border:1px solid rgba(100,110,120,.28) !important;
    border-radius:8px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    background:rgba(243,245,247,.97) !important;
}

body[data-learning-module="intersection"] #leftPanel #moduleIntersection .intersection3DCard #container canvas{
    display:block !important;
    width:100% !important;
    height:100% !important;
}

/* Modern compact Plane 1 / Plane 2 selector */
body[data-learning-module="intersection"] .intersectionTabs{
    display:flex !important;
    gap:6px !important;
    margin:8px 0 10px !important;
    padding:0 !important;
    border:0 !important;
    min-height:34px !important;
}

body[data-learning-module="intersection"] .intersectionTab{
    flex:1 1 0 !important;
    height:34px !important;
    padding:6px 10px !important;
    border:1px solid rgba(80,105,120,.22) !important;
    border-radius:7px !important;
    background:rgba(225,230,234,.55) !important;
    color:#263238 !important;
    font-size:15px !important;
    font-weight:700 !important;
    opacity:1 !important;
}

/* Intersection Tutor tabs use the same colors as the plane traces. */
body[data-learning-module="intersection"] .intersectionTab[data-plane-tab="1"]{
    color:#1565c0 !important;
}
body[data-learning-module="intersection"] .intersectionTab[data-plane-tab="2"]{
    color:#d81b9c !important;
}

body[data-learning-module="intersection"] .intersectionTab.active{
    background:rgba(21,101,192,.10) !important;
    box-shadow:inset 0 -2px 0 currentColor !important;
}

body[data-learning-module="intersection"] .intersectionTabPanel{
    padding:0 !important;
}

body[data-learning-module="intersection"] .intersectionCard .moduleHint{
    margin-bottom:8px !important;
}

body[data-learning-module="intersection"] .intersectionCard .moduleResult{
    margin-top:7px !important;
}

/* v135: Intersection 3D View transparency control */
body[data-learning-module="intersection"] #leftPanel #moduleIntersection .intersection3DCard .referenceControlInline{
    position:relative !important;
    z-index:5 !important;
    display:flex !important;
}
body[data-learning-module="intersection"] #leftPanel #moduleIntersection .intersection3DCard .referenceControlRow{
    flex:1 1 230px !important;
    min-width:180px !important;
}
body[data-learning-module="intersection"] #leftPanel #moduleIntersection .intersection3DCard #container{
    top:105px !important;
}

/* v136: give Intersection 3D View more vertical space */
body[data-learning-module="intersection"] #leftPanel #moduleIntersection .intersectionCard{
    height:300px !important;
}

body[data-learning-module="intersection"] #leftPanel #moduleIntersection .intersection3DCard{
    top:308px !important;
    bottom:0 !important;
    height:auto !important;
}

/* v138: Intersection layout matched to supplied reference screenshot */
body[data-learning-module="intersection"] #leftPanel{
    height:515px !important;
    max-height:515px !important;
    overflow:hidden !important;
}

body[data-learning-module="intersection"] #leftPanel #moduleIntersection{
    height:497px !important;
    bottom:auto !important;
}

body[data-learning-module="intersection"] #leftPanel #moduleIntersection .intersectionCard{
    height:300px !important;
}

body[data-learning-module="intersection"] #leftPanel #moduleIntersection .intersection3DCard{
    top:309px !important;
    height:188px !important;
    bottom:auto !important;
}

/* v139: Intersection uses the same full-height left-panel layout as
   Plotting Plane and True Dip from Apparent Dip. Remove the legacy
   fixed 515px constraint that was shrinking the 3D View. */
body[data-learning-module="intersection"] #leftPanel{
    top:66px !important;
    bottom:10px !important;
    height:auto !important;
    max-height:none !important;
    overflow:hidden !important;
}

body[data-learning-module="intersection"] #leftPanel #moduleIntersection{
    top:9px !important;
    bottom:9px !important;
    height:auto !important;
    overflow:visible !important;
}

body[data-learning-module="intersection"] #leftPanel #moduleIntersection .intersectionCard{
    top:0 !important;
    height:300px !important;
}

body[data-learning-module="intersection"] #leftPanel #moduleIntersection .intersection3DCard{
    top:309px !important;
    bottom:0 !important;
    height:auto !important;
}

/* v140: remove the legacy 190px max-height inherited by the generic
   referenceControlsCard. The Intersection 3D View must fill to the
   bottom of the left panel. */
body[data-learning-module="intersection"] #leftPanel #moduleIntersection .intersection3DCard{
    top:309px !important;
    bottom:9px !important;
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    overflow:hidden !important;
}

/* v142: compact Intersection top panel after removing the status message */
body[data-learning-module="intersection"] #leftPanel #moduleIntersection .intersectionCard{
    height:265px !important;
}

body[data-learning-module="intersection"] #leftPanel #moduleIntersection .intersection3DCard{
    top:274px !important;
    bottom:9px !important;
    height:auto !important;
    max-height:none !important;
}

/* v143: give the Intersection top panel enough room for the dip-direction
   text below the slider */
body[data-learning-module="intersection"] #leftPanel #moduleIntersection .intersectionCard{
    height:272px !important;
}

body[data-learning-module="intersection"] #leftPanel #moduleIntersection .intersection3DCard{
    top:281px !important;
    bottom:9px !important;
    height:auto !important;
    max-height:none !important;
}

/* v144: additional 8px room for the Intersection top panel */
body[data-learning-module="intersection"] #leftPanel #moduleIntersection .intersectionCard{
    height:280px !important;
}

body[data-learning-module="intersection"] #leftPanel #moduleIntersection .intersection3DCard{
    top:289px !important;
    bottom:9px !important;
    height:auto !important;
    max-height:none !important;
}

/* v154: compact True Dip from Apparent Dip inputs.
   Amount/Angle and Direction share one row for each observation. */
body[data-learning-module="apparentDip"] #moduleApparentDip .apparentDipInputGroup{
    margin-bottom:9px !important;
}

body[data-learning-module="apparentDip"] #moduleApparentDip .apparentDipInputLine{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
}

body[data-learning-module="apparentDip"] #moduleApparentDip .apparentDipInputLine .moduleInputRow{
    flex:1 1 0 !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    gap:5px !important;
}

body[data-learning-module="apparentDip"] #moduleApparentDip .apparentDipInputLine .moduleInputRow label{
    white-space:nowrap !important;
}

body[data-learning-module="apparentDip"] #moduleApparentDip .apparentDipInputLine .moduleInputRow input{
    flex:1 1 auto !important;
    min-width:45px !important;
    box-sizing:border-box !important;
}

/* v155: compact True Dip from Apparent Dip top panel and expand 3D View */
body[data-learning-module="apparentDip"] #leftPanel #moduleApparentDip .apparentDipCard{
    height:245px !important;
}

body[data-learning-module="apparentDip"] #leftPanel #moduleApparentDip .apparentDip3DCard{
    top:254px !important;
    bottom:9px !important;
    height:auto !important;
    max-height:none !important;
}

/* v156: Plot Plane top-panel wording */
body[data-learning-module="plane"] #modulePlane .plotPlaneSubline{
    margin-top:-3px !important;
    margin-bottom:8px !important;
    font-size:12px !important;
}

/* v157: restore the visual gap below the Plot Plane top panel */
body[data-learning-module="plane"] #leftPanel #modulePlane .referenceControlsCard{
    top:8px !important;
    bottom:9px !important;
    height:auto !important;
    max-height:none !important;
}

/* v158: restore Option 1's original two-panel geometry.
   The v157 rule incorrectly positioned the 3D card relative to the
   top of the module and caused it to cover the Plot Plane card. */
body[data-learning-module="plane"] #leftPanel #modulePlane .referenceControlsCard{
    position:absolute !important;
    left:9px !important;
    right:9px !important;
    top:210px !important;
    bottom:9px !important;
    width:auto !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;
    box-sizing:border-box !important;
}

/* v159: fix Plot Plane panel overlap and restore full matching width.
   The 3D card uses the same horizontal bounds as the top card and a
   fixed top offset that leaves a clean gap below it. */
body[data-learning-module="plane"] #leftPanel #modulePlane{
    overflow:visible !important;
}

body[data-learning-module="plane"] #leftPanel #modulePlane .orientationCard{
    left:0 !important;
    right:0 !important;
    width:100% !important;
    box-sizing:border-box !important;
    z-index:10 !important;
}

body[data-learning-module="plane"] #leftPanel #modulePlane .referenceControlsCard{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    top:218px !important;
    bottom:9px !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;
    box-sizing:border-box !important;
    z-index:1 !important;
}

/* v160: move Plot Plane 3D View down by 8px while keeping its width
   and bottom alignment unchanged. */
body[data-learning-module="plane"] #leftPanel #modulePlane .referenceControlsCard{
    top:226px !important;
    bottom:9px !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
}

/* v161: common geometry for all three learning options.
   Keep the top and bottom cards on identical horizontal and vertical
   boundaries for a consistent visual rhythm. */
body[data-learning-module="plane"] #leftPanel #modulePlane .orientationCard,
body[data-learning-module="apparentDip"] #leftPanel #moduleApparentDip .apparentDipCard,
body[data-learning-module="intersection"] #leftPanel #moduleIntersection .intersectionCard{
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:280px !important;
    box-sizing:border-box !important;
}

body[data-learning-module="plane"] #leftPanel #modulePlane .referenceControlsCard,
body[data-learning-module="apparentDip"] #leftPanel #moduleApparentDip .apparentDip3DCard,
body[data-learning-module="intersection"] #leftPanel #moduleIntersection .intersection3DCard{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:289px !important;
    bottom:9px !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;
    box-sizing:border-box !important;
}

/* Keep the 3D canvas aligned consistently inside each bottom card. */
body[data-learning-module="plane"] #leftPanel #modulePlane .referenceControlsCard #container,
body[data-learning-module="apparentDip"] #leftPanel #moduleApparentDip .apparentDip3DCard #container{
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
    width:auto !important;
    box-sizing:border-box !important;
}

.aboutStereographicBtn{white-space:nowrap!important}
.aboutModal[hidden]{display:none!important}
.aboutModal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center}
.aboutModalBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.58)}
.aboutModalDialog{position:relative;width:min(760px,calc(100vw - 40px));max-height:min(78vh,720px);overflow:hidden;border-radius:10px;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.35);display:flex;flex-direction:column}
.aboutModalHeader{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;background:#263238;color:#fff}
.aboutModalHeader h2{margin:0;font-size:18px;font-weight:600}
.aboutModalClose{border:0;background:transparent;color:#fff;font-size:26px;line-height:1;cursor:pointer;padding:2px 6px}
.aboutModalContent{overflow:auto;padding:20px 24px 24px;color:#263238;font-size:14px;line-height:1.55}
.aboutModalContent h3{margin:0 0 7px;font-size:16px;color:#263238}
.aboutModalContent h3:not(:first-child){margin-top:18px}
.aboutModalContent p{margin:0}.aboutModalContent ul{margin:7px 0 0 20px;padding:0}.aboutModalContent li{margin:0 0 9px}

/* v168: ensure Help modal is visible above all application layers */
#helpModal{
    position:fixed !important;
    inset:0 !important;
    z-index:20000 !important;
}
#helpModal .aboutModalBackdrop{
    position:absolute !important;
    inset:0 !important;
}
#helpModal .aboutModalDialog{
    position:relative !important;
    z-index:20001 !important;
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
}

/* v170: Explain button shows the complete construction sequence for the
   currently selected learning option. */
.explainAllStep{
    display:flex;
    gap:12px;
    padding:11px 0;
    border-bottom:1px solid rgba(38,50,56,.12);
}
.explainAllStep:last-child{border-bottom:0}
.explainAllStepNo{
    flex:0 0 28px;
    width:28px;
    height:28px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#263238;
    color:#fff;
    font-size:12px;
    font-weight:600;
}
.explainAllStepText{flex:1}
.explainAllStepTitle{
    font-size:14px;
    font-weight:600;
    margin-bottom:3px;
    color:#263238;
}
.explainAllStepBody{
    font-size:13px;
    line-height:1.48;
    color:#455a64;
}

/* v171: subtle Schmidt-net label at the lower-left of the middle panel */
.schmidtNetLabel{
    position:absolute !important;
    left:12px !important;
    bottom:10px !important;
    z-index:5 !important;
    pointer-events:none !important;
    color:rgba(90,90,90,.48) !important;
    font-size:12px !important;
    font-weight:500 !important;
    letter-spacing:.2px !important;
}

/* v173: keep the right panel fixed and visible; developer credit stays inside */
#rightPanel{
    display:block !important;
    position:fixed !important;
    z-index:60 !important;
    right:10px !important;
    left:auto !important;
    top:66px !important;
    bottom:10px !important;
    width:450px !important;
    box-sizing:border-box !important;
    padding:9px !important;
    overflow:auto !important;
}
.rightPanelDeveloper{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:10px !important;
    text-align:center !important;
    color:rgba(90,90,90,.58) !important;
    font-size:15px !important;
    font-weight:500 !important;
    pointer-events:none !important;
    z-index:5 !important;
}

/* v174: Manual mode uses drawing controls only. Animation controls are hidden,
   while the manual reset button is shown only when a manual module is active. */
#btnManualReset[hidden],
#btnStepMode[hidden],
#btnContinuousMode[hidden],
#btnAnimationSpeed[hidden],
#btnProjection[hidden]{display:none !important;}

/* v175: manual drawing uses compact icon tools; erase/reset uses an icon. */
.manualEraseTool{
    border-color:rgba(110,80,60,.35) !important;
    font-size:16px !important;
}

/* v177: larger manual drawing tool icons with clearer spacing */
.manualIconTool{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    margin:0 4px !important;
    border-radius:8px !important;
    font-size:22px !important;
    line-height:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    transition:background-color .15s ease, box-shadow .15s ease, transform .1s ease !important;
}
.manualIconTool.active{
    background:#fff3b0 !important;
    border-color:#d8b84c !important;
    color:#5d4b00 !important;
    box-shadow:0 0 0 2px rgba(216,184,76,.28), 0 2px 5px rgba(0,0,0,.12) !important;
}
.manualIconTool:hover{
    transform:translateY(-1px);
}
.arcToolIcon{
    display:block;
    width:29px;
    height:29px;
    transform:none;
}

/* v190: a horizontal plane has no unique strike */
#modulePlane #strike:disabled{
    opacity:.38;
    cursor:not-allowed;
}

/* v195: two-level navigation — Learning/Tutor and Manual modes */
#headerLearnControl{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
}
#headerLearnControl .headerLearnLabel{
    white-space:nowrap;
}
#learningMode{
    min-width:145px;
    font-weight:600;
}
#learnModule{
    min-width:220px;
}
.manualModeSelector{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
    padding-bottom:9px;
    border-bottom:1px solid rgba(100,110,120,.22);
}
.manualModeSelector label{
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
}
.manualModuleSelect{
    flex:1;
    min-width:0;
    padding:7px 9px;
    border:1px solid var(--border-color,#bfc5ca);
    border-radius:6px;
    background:var(--surface-2,#fff);
    color:inherit;
}

/* v196: point-on-great-circle manual tool */
.gcPointToolIcon{
    display:block;
    width:29px;
    height:29px;
}

/* v198: Draw Point icon — direction tick crossing the point */
.pointToolIcon{
    display:block;
    width:29px;
    height:29px;
}

/* v203: Manual tools use a common light stereonet as the icon background. */
.manualIconTool{
    position:relative;
    overflow:hidden;
}
.manualNetIcon{
    width:30px;
    height:30px;
    display:block;
}
.manualNetIcon .netBg{
    fill:none;
    stroke:currentColor;
    stroke-width:.65;
    opacity:.18;
}
.manualNetIcon .rotateGlyph{
    fill:none;
    stroke:currentColor;
    stroke-width:2.5;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.manualNetIcon .tickGlyph{
    fill:none;
    stroke:currentColor;
    stroke-width:2.4;
    stroke-linecap:round;
}
.manualNetIcon .lineGlyph{
    fill:none;
    stroke:currentColor;
    stroke-width:2.8;
    stroke-linecap:round;
}
.manualNetIcon .arcGlyph{
    fill:none;
    stroke:#3978c9;
    stroke-width:2.8;
    stroke-linecap:round;
}
.manualNetIcon .dipArcGlyph{
    fill:none;
    stroke:#3978c9;
    stroke-width:2.5;
    stroke-linecap:round;
}
.manualNetIcon .dipPointGlyph{
    fill:#3978c9;
}
.manualNetIcon .eraseGlyph{
    fill:none;
    stroke:currentColor;
    stroke-width:2.1;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.manualPlaneInputs{
    display:grid;
    grid-template-columns:92px minmax(210px,1fr);
    grid-template-areas:
        "dip direction"
        "strike strike";
    column-gap:12px;
    row-gap:8px;
    margin:12px 0 6px;
    align-items:end;
}
.manualInputGroup{display:flex;flex-direction:column;gap:4px;min-width:0}
.manualInputGroup label{font-size:12px;font-weight:700;line-height:1.2}
.manualInputGroup input{
    box-sizing:border-box;
    width:100%;
    height:34px;
    padding:6px 8px;
    border:1px solid rgba(120,120,120,.35);
    border-radius:6px;
    background:transparent;
    font-size:15px;
    font-weight:600;
}
.manualDipGroup{grid-area:dip}
.manualDipDirectionGroup{grid-area:direction;margin-left:18px}
.manualStrikeGroup{grid-area:strike}
.manualValueWithQuadrant{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}
.manualValueWithQuadrant input{flex:0 0 92px;width:92px}
.manualStrikeGroup .manualValueWithQuadrant input{flex-basis:92px}
.manualQuadrantValue,.manualStrikeQuadrantValue{
    display:inline-block;
    font-size:15px;
    line-height:34px;
    font-weight:800;
    white-space:nowrap;
}
.manualQuadrantValue{color:#1565c0}
.manualStrikeQuadrantValue{color:#5d4037}
.manualInputStatus{font-size:11px;min-height:18px;margin-bottom:8px}

.manualScoreBox{margin-top:8px;padding:10px 11px;border:1px solid rgba(120,120,120,.28);border-radius:8px}
.manualScoreTitle{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.manualScoreValue{font-size:26px;font-weight:800;line-height:1.15;margin:3px 0 7px}
.manualScoreRows{display:grid;gap:3px;font-size:11px}
.manualScoreRows div{display:flex;justify-content:space-between;gap:12px}


.manualConstructionScore{margin:10px 0;padding:12px;border:2px solid rgba(120,120,120,.35);border-radius:9px;text-align:center}
.manualConstructionScore[hidden]{display:none}
.manualConstructionScore .manualScoreTitle{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.manualConstructionScore .manualScoreValue{font-size:30px;font-weight:800;line-height:1.15;margin:4px 0 8px}
.manualConstructionScore .manualScoreRows{display:grid;gap:4px;text-align:left;font-size:11px}
.manualConstructionScore .manualScoreRows div{display:flex;justify-content:space-between}

.manualScoreRows .checkPass{font-weight:700}

/* v350: compact apparent-dip inputs and quadrant direction display */
body[data-learning-module="apparentDip"] #moduleApparentDip .apparentDipInputLine .moduleInputRow{
    gap:4px !important;
}
body[data-learning-module="apparentDip"] #moduleApparentDip .apparentDipInputLine .moduleInputRow input{
    flex:0 0 52px !important;
    width:52px !important;
    min-width:52px !important;
    max-width:52px !important;
    box-sizing:border-box !important;
    padding-left:5px !important;
    padding-right:5px !important;
}
body[data-learning-module="apparentDip"] #moduleApparentDip .apparentDipQuadrant{
    display:inline-block !important;
    width:48px !important;
    min-width:48px !important;
    font-size:16px !important;
    font-weight:600 !important;
    white-space:nowrap !important;
    text-align:left !important;
    margin-left:1px !important;
}

/* v351: stronger visual hierarchy for True Dip from Apparent Dip inputs */
body[data-learning-module="apparentDip"] #moduleApparentDip .apparentDipInputLine .moduleInputRow input{
    font-size:14px !important;
    font-weight:600 !important;
    line-height:1.2 !important;
    text-align:center !important;
}

/* Make the two observation headings prominent and visually distinct. */
body[data-learning-module="apparentDip"] #moduleApparentDip .apparentDipInputGroup:nth-of-type(1) .moduleSectionLabel{
    font-size:14px !important;
    font-weight:700 !important;
    color:#1565c0 !important;
    letter-spacing:.1px !important;
}
body[data-learning-module="apparentDip"] #moduleApparentDip .apparentDipInputGroup:nth-of-type(2) .moduleSectionLabel{
    font-size:14px !important;
    font-weight:700 !important;
    color:#8e24aa !important;
    letter-spacing:.1px !important;
}
body[data-learning-module="apparentDip"] #moduleApparentDip .apparentDipQuadrant{
    font-size:16px !important;
    font-weight:700 !important;
}

/* v352: explicit override for Apparent Dip observation headings.
   Use the direct child structure rather than nth-of-type so the rule
   is not affected by other moduleSectionLabel elements. */
body[data-learning-module="apparentDip"] #moduleApparentDip
.apparentDipInputGroup .moduleSectionLabel{
    font-size:16px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
    margin-bottom:6px !important;
    display:block !important;
}
body[data-learning-module="apparentDip"] #moduleApparentDip
.apparentDipInputGroup:nth-child(3) .moduleSectionLabel{
    color:#1565c0 !important;
}
body[data-learning-module="apparentDip"] #moduleApparentDip
.apparentDipInputGroup:nth-child(4) .moduleSectionLabel{
    color:#8e24aa !important;
}

/* v353: Dip 1 heading uses a color distinct from the blue True Dip graphics.
   Dip 2 retains its separate purple identification. */
body[data-learning-module="apparentDip"] #moduleApparentDip
.apparentDipInputGroup .moduleSectionLabel{
    font-size:16px !important;
    font-weight:800 !important;
}
body[data-learning-module="apparentDip"] #moduleApparentDip
.apparentDipInputGroup:nth-child(3) .moduleSectionLabel{
    color:#00897b !important; /* teal - distinct from True Dip blue */
}
body[data-learning-module="apparentDip"] #moduleApparentDip
.apparentDipInputGroup:nth-child(4) .moduleSectionLabel{
    color:#8e24aa !important; /* purple */
}


/* Manual Plot Plane: compact two-line Plane Information. */
#standardPlaneInfo.manualPlaneInfo { display:block; }
#standardPlaneInfo.manualPlaneInfo tr { display:flex !important; width:100%; align-items:center; min-height:27px; }
#standardPlaneInfo.manualPlaneInfo td { font-size:15px !important; line-height:1.25; padding:3px 6px; }
#standardPlaneInfo.manualPlaneInfo td:first-child { width:58px; font-weight:800; }
#standardPlaneInfo.manualPlaneInfo td:last-child { flex:1; font-size:16px !important; font-weight:700; white-space:nowrap; }
#standardPlaneInfo.manualPlaneInfo .manualDipRow td:last-child { color:#1565c0; }
#standardPlaneInfo.manualPlaneInfo .manualStrikeRow td:last-child { color:#5d4037; }



/* v0.8.12: Manual -> Plot a Plane heading and Plane editor match the Plane 1 style. */
.manualPlotPlaneHeading{
    margin-top:12px;
    margin-bottom:7px;
    font-size:15px;
    line-height:1.25;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--ink-soft);
}
.manualPlotPlaneTitle{
    margin:0 0 4px;
    font-size:18px !important;
    line-height:1.25;
    font-weight:700 !important;
    text-transform:none !important;
    letter-spacing:0 !important;
    color:#1565c0 !important;
}
.manualPlaneInputs .manualInputGroup label{
    font-size:12px;
    font-weight:700;
}
.manualPlaneInputs .manualInputGroup input{
    font-size:15px !important;
    font-weight:700 !important;
}

/* v0.8.11: Manual Plot a Plane fields match the compact Plane 1 editor. */
#manualPlaneInputs{
    grid-template-columns:90px 155px minmax(0,1fr);
    column-gap:8px;
}
#manualPlaneInputs .manualInputGroup input{
    font-size:15px !important;
    font-weight:700 !important;
}
#manualPlaneInputs .manualDipGroup input{
    width:70% !important;
}
#manualPlaneInputs .manualDipDirectionGroup{
    margin-left:-12px;
}
#manualPlaneInputs .manualValueWithQuadrant{
    gap:8px;
}
#manualPlaneInputs .manualDipDirectionGroup .manualValueWithQuadrant input{
    flex:0 0 92px;
    width:92px;
}
#manualPlaneInputs .manualStrikeGroup{
    margin-left:-10px;
}
#manualPlaneInputs .manualStrikeGroup .manualValueWithQuadrant input{
    flex:0 0 59px;
    width:59px;
}

/* v373: Manual Plot a Plane input card — dip + dip direction on line 1,
   strike on line 2, with live quadrant notation beside the numeric fields. */
#manualPlaneInputs .manualDipGroup input,
#manualPlaneInputs .manualValueWithQuadrant input{
    font-size:15px !important;
    font-weight:700 !important;
}
@media (max-width:560px){
    .manualPlaneInputs{grid-template-columns:78px minmax(0,1fr);column-gap:8px}
    .manualValueWithQuadrant{gap:6px}
    .manualQuadrantValue,.manualStrikeQuadrantValue{font-size:14px}
}

/* v375: Manual -> Plot an Apparent Dip uses the same two-observation
   input layout as the Tutor -> True Dip from Apparent Dip module. */
#manualApparentDipInputs{
    margin:12px 0 6px;
}
#manualApparentDipInputs .apparentDipInputGroup{
    margin-bottom:9px;
}
#manualApparentDipInputs .apparentDipInputGroup:last-child{
    margin-bottom:0;
}
#manualApparentDipInputs .apparentDipInputLine{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
}
#manualApparentDipInputs .apparentDipInputLine .moduleInputRow{
    flex:1 1 0;
    min-width:0;
    display:flex;
    align-items:center;
    gap:5px;
}
#manualApparentDipInputs .apparentDipInputLine .moduleInputRow label{
    white-space:nowrap;
    font-size:12px;
    font-weight:700;
}
#manualApparentDipInputs .apparentDipInputLine .moduleInputRow input{
    flex:1 1 auto;
    min-width:45px;
    box-sizing:border-box;
    height:34px;
    padding:6px 8px;
    border:1px solid rgba(120,120,120,.35);
    border-radius:6px;
    background:transparent;
    font-size:15px;
    font-weight:600;
}
#manualApparentDipInputs .moduleSectionLabel{
    font-size:16px;
    font-weight:800;
    margin-bottom:5px;
}
#manualApparentDipInputs .apparentDipInputGroup:first-child .moduleSectionLabel{
    color:#00897b;
}
#manualApparentDipInputs .apparentDipInputGroup:nth-child(2) .moduleSectionLabel{
    color:#8e24aa;
}
#manualApparentDipInputs .apparentDipQuadrant{
    white-space:nowrap;
    font-size:14px;
    font-weight:800;
}

/* Manual two-plane input card */
.manualTwoPlaneInputs{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.manualTwoPlaneGroup{padding:10px 0;border-top:1px solid rgba(127,127,127,.18)}
.manualPlaneEditGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:7px}
.manualPlaneEditGrid .manualInputGroup{min-width:0}
.manualPlaneEditGrid label{display:block;margin-bottom:4px}
.manualPlaneEditGrid input{width:100%;box-sizing:border-box}
/* Keep the dip-angle edit box compact to leave more room for the other fields. */
.manualPlaneEditGrid .manualInputGroup:first-child input{width:50%}
/* Fine-tune horizontal spacing: move Dip Direction right and Strike slightly right while keeping the Strike box compact. */
.manualPlaneEditGrid .manualInputGroup:nth-child(3){transform:translateX(-1px)}
.manualPlaneEditGrid .manualInputGroup:nth-child(3) .manualValueWithQuadrant input{width:48.4%}
/* Fine-tune the compact Dip field position. */
.manualPlaneEditGrid .manualInputGroup:first-child{transform:translateX(-7px)}
/* Balance the Dip Direction field with the compact Dip and Strike fields. */
.manualPlaneEditGrid .manualInputGroup:nth-child(2){transform:translateX(-27px)}
@media (max-width:720px){.manualPlaneEditGrid{grid-template-columns:1fr}.manualPlaneEditGrid .manualInputGroup:nth-child(2),.manualPlaneEditGrid .manualInputGroup:nth-child(3){transform:none}}

/* v377 layout refinement: balance the compact two-plane controls. */
/* v378: increase the compact Dip edit box by 40% while preserving the two-plane layout. */
.manualPlaneEditGrid{
    grid-template-columns:90px 155px minmax(0,1fr);
    gap:8px;
}
.manualPlaneEditGrid .manualInputGroup:first-child{
    transform:translateX(0);
}
.manualPlaneEditGrid .manualInputGroup:nth-child(2){
    /* Bring Dip Direction 7px closer to the compact Dip field. */
    transform:translateX(-12px);
}
.manualPlaneEditGrid .manualInputGroup:nth-child(3){
    /* Shift Strike and its quadrant together a further 5px to the left. */
    transform:translateX(-15px);
}
.manualPlaneEditGrid .manualInputGroup:first-child input{
    width:70%;
}
.manualPlaneEditGrid .manualInputGroup:nth-child(2) .manualValueWithQuadrant input{
    flex:0 0 92px;
    width:92px;
}
.manualPlaneEditGrid .manualInputGroup:nth-child(3) .manualValueWithQuadrant input{
    flex:0 0 59px;
    width:59px;
}
@media (max-width:720px){
    .manualPlaneEditGrid{grid-template-columns:1fr;}
    .manualPlaneEditGrid .manualInputGroup:nth-child(2),
    .manualPlaneEditGrid .manualInputGroup:nth-child(3){transform:none;}
}

/* v0.8.16: Manual -> Plot Plane uses the same field coordinates, widths and
   spacing as the Plane 1 editor in Manual -> Plot Two Planes. */
.manualPlaneInputs{
    display:grid;
    grid-template-columns:80px 163px minmax(0,1fr);
    gap:8px;
    margin:12px 0 6px;
    align-items:end;
}
.manualPlaneInputs .manualDipGroup,
.manualPlaneInputs .manualDipDirectionGroup,
.manualPlaneInputs .manualStrikeGroup{
    grid-area:auto;
    margin-left:0;
    transform:none;
}
.manualPlaneInputs .manualDipGroup input{
    width:65px !important;
}
.manualPlaneInputs .manualDipDirectionGroup .manualValueWithQuadrant input{
    flex:0 0 96px;
    width:96px;
}
.manualPlaneInputs .manualStrikeGroup .manualValueWithQuadrant input{
    flex:0 0 59px;
    width:59px;
}
.manualPlaneInputs .manualQuadrantValue,
.manualPlaneInputs .manualStrikeQuadrantValue{
    font-size:15px;
    font-weight:800;
    white-space:nowrap;
}
/* v0.8.17: align Plot a Plane strike quadrant text with Plane 1. */
#manualPlaneInputs .manualStrikeQuadrantValue{
    transform:translateX(-13.7px);
}
@media (max-width:720px){
    .manualPlaneInputs{
        grid-template-columns:1fr;
    }
}

/* v0.8.19: reduce manual quadrantal direction text by 1px in both Plot a Plane and Plot Two Planes. */
#manualTwoPlaneInputs .manualQuadrantValue,
#manualTwoPlaneInputs .manualStrikeQuadrantValue,
#manualPlaneInputs .manualQuadrantValue,
#manualPlaneInputs .manualStrikeQuadrantValue{
    font-size:14px !important;
}

/* v0.7.20 — enforce pure white stereonet canvas for paper-like appearance. */
#stereonetCanvas{ background:#FFFFFF !important; }

/* Manual undo button */
#stereonetPanel .manualUndoTool{font-size:20px;line-height:1;font-weight:700;}
#stereonetPanel .manualUndoTool:disabled,
#stereonetPanel .manualUndoTool.isDisabled{opacity:.38;cursor:not-allowed;}

/* Manual mode: single-box continuous Quick Help text. */
.learningStepList.manualQuickHelpList{
    display:block;
    list-style:none;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
}
.learningStepList.manualQuickHelpList .manualQuickHelpText{
    margin:0;
    padding:12px 14px;
    font-size:14px;
    line-height:1.6;
    color:var(--ink);
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:8px;
}
.learningStepList.manualQuickHelpList .manualQuickHelpText strong{
    font-weight:700;
}

/* Manual/Tutor UI refinement: larger Auto-mode step heading for better visibility. */
#stereonetPanel > .projectionStepOverlay .projectionStepTitle{
    font-size:19px !important;
    line-height:1.2;
}

/* Direction notation selector */
.directionFormatGroup{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-left:8px;
    padding:4px 8px;
    border:1px solid rgba(120,130,145,.55);
    border-radius:6px;
    background:rgba(255,255,255,.06);
    font-size:12px;
    white-space:nowrap;
}
.directionFormatLabel{font-weight:700;}
.directionFormatGroup label{display:inline-flex;align-items:center;gap:3px;cursor:pointer;font-weight:400;}
.directionFormatGroup input{margin:0;accent-color:var(--accent,#4f7cff);}
@media (max-width: 1050px){
    .directionFormatGroup{font-size:11px;gap:5px;}
}
/* Direction radio labels use sentence case exactly as written. */
#stereonetPanel .directionFormatGroup,
#stereonetPanel .directionFormatGroup label,
#stereonetPanel .directionFormatGroup .directionFormatLabel{
    text-transform:none !important;
    letter-spacing:0 !important;
}

/* Manual -> Two Planes: match Tutor Plane 1 / Plane 2 label styling. */
#manualTwoPlaneInputs .manualTwoPlaneGroup:nth-child(1) .moduleSectionLabel{
    font-size:15px !important;
    font-weight:700 !important;
    text-transform:none !important;
    letter-spacing:0 !important;
    color:#1565c0 !important;
}
#manualTwoPlaneInputs .manualTwoPlaneGroup:nth-child(2) .moduleSectionLabel{
    font-size:15px !important;
    font-weight:700 !important;
    text-transform:none !important;
    letter-spacing:0 !important;
    color:#d81b9c !important;
}

/* v0.8.17: align Plot a Plane strike quadrant text with Plane 1 in Plot Two Planes. */
#manualPlaneInputs .manualStrikeQuadrantValue{
    transform:translateX(-13.7px);
}

/* v0.8.21: Match Manual -> Plot a Plane field coordinates and spacing to
   the finalized Plane 1 / Plane 2 layout used by Plot Two Planes. */
#manualPlaneInputs{
    grid-template-columns:90px 155px minmax(0,1fr);
    gap:8px;
}
#manualPlaneInputs .manualDipGroup{
    transform:translateX(0);
}
#manualPlaneInputs .manualDipDirectionGroup{
    transform:translateX(-12px);
}
#manualPlaneInputs .manualStrikeGroup{
    transform:translateX(-15px);
}
#manualPlaneInputs .manualDipGroup input{
    width:70% !important;
}
#manualPlaneInputs .manualDipDirectionGroup .manualValueWithQuadrant input{
    flex:0 0 92px;
    width:92px;
}
#manualPlaneInputs .manualStrikeGroup .manualValueWithQuadrant input{
    flex:0 0 59px;
    width:59px;
}
#manualPlaneInputs .manualStrikeQuadrantValue{
    transform:none;
}
@media (max-width:720px){
    #manualPlaneInputs .manualDipDirectionGroup,
    #manualPlaneInputs .manualStrikeGroup{transform:none;}
}


/* v0.8.55: distinguish the Step/Play button by its current action. */
#btnProjection.projectionBtnStart{
    background:#2e7d32 !important;
    color:#fff !important;
}
#btnProjection.projectionBtnStart:hover{
    background:#388e3c !important;
}
#btnProjection.projectionBtnPlaying{
    background:#ef6c00 !important;
    color:#fff !important;
}
#btnProjection.projectionBtnPlaying:hover{
    background:#f57c00 !important;
}
#btnProjection.projectionBtnNext{
    background:#1565c0 !important;
    color:#fff !important;
}
#btnProjection.projectionBtnNext:hover{
    background:#1976d2 !important;
}


/* v0.8.59: 3D canvas zoom control and centered enlarged view. */
#container{
    position:relative;
}
.zoom3DButton{
    position:absolute;
    top:12px;
    right:12px;
    z-index:50;
    border:1px solid rgba(60,70,80,.28);
    border-radius:7px;
    background:rgba(255,255,255,.92);
    color:#263238;
    padding:6px 10px;
    font-size:13px;
    font-weight:600;
    line-height:1.2;
    cursor:pointer;
    box-shadow:0 2px 7px rgba(0,0,0,.12);
    backdrop-filter:blur(3px);
}
.zoom3DButton:hover{
    background:#fff;
    box-shadow:0 3px 10px rgba(0,0,0,.18);
}
.zoom3DModal{
    position:fixed;
    inset:0;
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(15,23,42,.48);
    padding:24px;
}
.zoom3DDialog{
    position:relative;
    width:min(92vw,1100px);
    height:min(84vh,760px);
    min-height:420px;
    background:#f8fafb;
    border:1px solid rgba(80,90,100,.25);
    border-radius:12px;
    box-shadow:0 18px 60px rgba(0,0,0,.30);
    overflow:hidden;
}
.zoom3DViewport{
    width:100%;
    height:100%;
}
.zoom3DViewport canvas{
    display:block;
    width:100% !important;
    height:100% !important;
}
.zoom3DClose{
    position:absolute;
    top:9px;
    right:10px;
    z-index:60;
    width:32px;
    height:32px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.90);
    color:#37474f;
    font-size:25px;
    line-height:30px;
    cursor:pointer;
    box-shadow:0 2px 7px rgba(0,0,0,.15);
}
.zoom3DClose:hover{
    background:#fff;
}
@media (max-width:720px){
    .zoom3DModal{padding:10px;}
    .zoom3DDialog{width:96vw;height:88vh;min-height:320px;}
}


/* v0.8.62: 3D top-view control. */


/* v0.8.88: True Dip from Apparent Dip typography */
body[data-learning-module="apparentDip"] #moduleApparentDip .apparentDipInputLine .moduleInputRow label{
    font-size:14px !important;
}
body[data-learning-module="apparentDip"] #moduleApparentDip .apparentDipInputLine .moduleInputRow input{
    font-size:16px !important;
}
body[data-learning-module="apparentDip"] .valueStrike{
    font-size:16px !important;
}

/* v0.8.90: make True Dip from Apparent Dip field labels match the fixed
   Strike / True Dip labels used by Intersection of Two Planes. */
body[data-learning-module="apparentDip"] #moduleApparentDip .apparentDipInputLine .moduleInputRow label{
    font-size:14px !important;
    font-weight:700 !important;
    color:var(--ink) !important;
    line-height:1.2 !important;
}

/* v0.8.89: match True Dip from Apparent Dip typography to Intersection fixed values */
.intersectionStrikeValue,
.intersectionCard #intDipValue1,
.intersectionCard #intDipValue2{
    font-weight:700 !important;
}

/* v0.8.89: give 16px apparent-dip edit values sufficient width and height */
body[data-learning-module="apparentDip"] #moduleApparentDip .apparentDipInputLine .moduleInputRow input{
    flex:0 0 60px !important;
    width:60px !important;
    min-width:60px !important;
    max-width:60px !important;
    height:34px !important;
    padding:5px 6px !important;
    box-sizing:border-box !important;
    font-size:16px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
}