/* =========================================================
   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:365px 1fr 315px;

    grid-template-rows:56px 1fr 300px;

    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 1fr;

    gap:8px;

    background:var(--bg);

    margin-bottom:0;

    padding:8px;
}

#compassPanel,
#stereonetPanel{
    padding:8px;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    min-height:0;
}

#compassPanel{

    background:var(--surface);

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

#compassCanvas,
#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 #4aa3ff;
}

.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:3px;

}

.sliderHeaderDip{
    margin-top:9px;
}

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

.controlLabel{

    font-size:13px;

    font-weight:600;

    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; }
.valueDip{    background:var(--dip-soft);    color:#123f5c; }
.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); }

.dipDirRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:8px;
    padding-top:7px;
    border-top:1px dashed var(--line);
}

.dipDirLabel{
    font-size:12px;
    font-weight:600;
    color:var(--ink-soft);
    text-transform:uppercase;
    letter-spacing:.4px;
}

.dipDirToggle{
    display:flex;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:999px;
    padding:2px;
}

.dipDirOption{
    position:relative;
    display:flex;
    align-items:center;
    cursor:pointer;
}

.dipDirOption input{
    position:absolute;
    opacity:0;
    width:100%;
    height:100%;
    margin:0;
    cursor:pointer;
}

.dipDirOption span{
    display:inline-block;
    min-width:20px;
    text-align:center;
    padding:5px 12px;
    font-size:12px;
    font-weight:600;
    border-radius:999px;
    color:var(--ink-soft);
}

.dipDirOption input:checked + span{
    background:var(--dip);
    color:#fff;
}

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

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:280px;

    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:60vh;
        min-height:360px;
    }

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

    #compassPanel,
    #stereonetPanel{
        height:260px;
    }
}

/* =========================================================
   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;
}

#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;
}