/* =========================
   gravvin – iOS-like MVP CSS (CLEAN)
   - Single source of truth for BottomBar
   - Settings is INSIDE BottomBar (no floating settingsFab)
   ========================= */


/* ---------- Tokens ---------- */
:root{
    /* base */
    --bg: #211E1E;
    --txt: rgba(255,255,255,0.92);
    --txtDim: rgba(255,255,255,0.72);

    /* glass */
    --glass: rgba(20,20,20,0.8);
    --glass2: rgba(0,0,0,0.22);
    --stroke: rgba(255,255,255,0.12);
    --stroke2: rgba(255,255,255,0.18);

    /* radii / shadow */
    --r: 22px;
    --r2: 16px;
    --pill: 999px;
    --shadow: 0 18px 50px rgba(0,0,0,0.45);
    --field-r: 10px;
    --inline-field-r: 8px;

    /* overlay knob */
    --overlay-scale: 0.92;

    /* ===== BottomBar sizing (single truth) ===== */
    --bar-h: 84px;
    --bar-max-w: 360px;
    --bar-w: min(92vw, var(--bar-max-w));

    --navbtn-h: 68px;
    --navbtn-w: 84px;
    --navbtn-r: 42px;

    --ico-size: 26px;
    --label-size: 11px;

    --glass: rgba(20,20,20,.75);
    --glass2: rgba(0,0,0,.22);
    --stroke: rgba(255,255,255,.12);
    --txt: rgba(255,255,255,.92);
    --txtDim: rgba(255,255,255,.72);

    /* iOS 17 Pro – Glass */
    --glass-bg: rgba(18,18,18,.52);
    --glass-bg-strong: rgba(18,18,18,.64);
    --glass-stroke: rgba(255,255,255,.10);
    --glass-stroke-strong: rgba(255,255,255,.14);

    /* shadows */
    --shadow: 0 18px 40px rgba(0,0,0,.45);
    --shadow-soft: 0 10px 24px rgba(0,0,0,.35);

    /* radii */
    --r-card: 22px;
    --r-key: 18px;
    --r-pill: 999px;

    /* type */
    --txt: rgba(255,255,255,.92);
    --txt-dim: rgba(255,255,255,.70);

    /* accent */
    --accent: #8dff60;
    --accent-dim: rgba(141,255,96,.25);

    /* spacing */
    --p-card: 14px;
    --gap: 12px;

    --bg-a: #0b0c0f;
    --bg-b: #151724;

    --dock-h: 92px;
    --top-gap: 18px;
    --mid-ui-h: 96px;
    
     --sage:      #BFC8B6;
    --olive:     #8F9A88;
    --charcoal:  #2E2E2E;
    --warmgray:  #6F6A63;
    --warmdarkergray:  #59554f;
    --moss:      #A8B79F;
    --deepmoss:  #7E8C76;
    
    --gravin-stroke: #A8FF60;
    
    
    --gravvin-logo-outer: #EBEFE1;
    /*--bg-bottom-bar: rgba(231,227,220,0.92);*/
    --bg-bottom-bar: rgba(231,227,220,1);
    /*--bg-tool-bar: rgba(231,227,220,0.92);*/
    --bg-tool-bar: rgba(231,227,220,1);
    
    --bg: #f2ede6;
    /* NuMPAD --*/
  --gv-bg:           #f0f1f2;   /* kühl, leicht bläulich-grau */
  --gv-panel:        #eaebec;   /* Panel, einen Tick dunkler */
  --gv-key:          #e2e3e5;   /* Keys */
  --gv-key-del:      #d8d9db;   /* Delete */
  --gv-key-active:   #4a5568;   /* Pressed — dunkelblaugrau */
  --gv-border:       #d0d2d4;   /* Borders */
  --gv-text-primary: #111214;   /* Fast schwarz */
  --gv-text-label:   #8a8f96;   /* Labels */
  --gv-text-sub:     #adb0b5;   /* Subtitles */
  --gv-lime:         #a8e63d;   /* Gravvin Lime — bleibt */
  --gv-lime-dark:    #7aaa2a;
  --gv-lime-tint:    rgba(168, 230, 61, 0.08);
  
  
  /* ── Bottom Bar ── */
  --gv-bar-bg:          rgba(20, 22, 24, 0.88);
  --gv-bar-bg-full:          rgba(20, 22, 24, 0.90);
  --gv-bar-border:      rgba(255, 255, 255, 0.08);
  --gv-bar-icon:        rgba(255, 255, 255, 0.8);
  --gv-bar-icon-active: #ffffff;
  --gv-bar-pill:        rgba(200, 245, 90, 0.18);
  --gv-workflow-btn-pill:        rgba(177, 231, 45, 0.5);
    
}

*{
    /*box-sizing:border-box;*/
    font-family: -apple-system, 'SF Pro Display', 'Google Sans', Roboto, sans-serif;
}

html, body {
    height: 100%;
    margin: 0;
    overscroll-behavior: none;
    font-family: -apple-system, 'SF Pro Display', 'Google Sans', Roboto, sans-serif;
}

html {
    background: #0b0c0f;
    background-image: var(--bg-img);
    -webkit-text-size-adjust: 100%;
}

body{
    font-family: -apple-system, 'SF Pro Display', 'Google Sans', Roboto, sans-serif;
    background-color: var(--bg-a);
    background-image: var(--bg-img);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#rectifiedImg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.debugLog{
    position: fixed;
    left: 0;
    right: 0;
    top: 2px;
    background: rgba(0,0,0,0.85);
    color: rgba(231,227,220,1);
    font-family: monospace;
    font-size: 12px;
    padding: 8px 12px;
    z-index: 9999;
    pointer-events: none;
    white-space: pre;
}

html::before,
body::before,
html::after,
body::after {
    display: none !important;
    content: none !important;
}

/*.canvasWrap{
    position: relative;
    overflow: hidden;
    background: var(--s2-base) center / contain no-repeat;
    background-color: #0b0c0f;
    
   background: rgba(30, 30, 30, 0.65);   ← gleiche Farbe wie bottomBar 
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    
}*/

#cPts{
    position: relative;
    z-index: 2;
    display:block;
}

body::before{
    content:"";
    position: fixed;
    inset: 0;
    z-index: -1;
}

/* ---------- Screens ---------- */
.screen{
    position: fixed;
    inset: 0;
    display: none;
    /*background: var(--bg);*/
    background: transparent;
}
.screen.active{
    display:block;
}

/* ---------- Canvas ---------- */
.canvasWrap {
    position: fixed;
    inset: 0;
    overflow: hidden;
    min-height: 100vh;
    min-height: calc(100vh - var(--bar-h) * 2);
    
    padding-top: calc(18px + env(safe-area-inset-top));
    padding-bottom: calc((var(--bar-h) * 1.25) + env(safe-area-inset-bottom));

    /* ── Hintergrund ── */
    background: rgba(30, 30, 30, 0.65);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.canvasWrap::after {
    display: none !important;
}
/* Overlay */
.progressOverlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6,8,10, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    z-index: 10;
    margin-bottom: 80px;
}
.progressOverlay.inProgress {
    opacity: 1;
    pointer-events: all;
}
.progressOverlay__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
.progressOverlay__icon {
    width: 15vh;
    height: 25vh;
    opacity: 0.5;
    color: rgba(184, 255, 92, 1.0);
    display: none;
}
.progressOverlay.is-home .progressOverlay__icon {
    display: block !important;
}
.progressOverlay__logo_subline {
    display: none;
}
.progressOverlay.is-home .progressOverlay__logo_subline {
    display: block;
}
.progressOverlay.is-home .progressOverlay__text {
    display: none;
}
.progressOverlay__icon line {
    stroke-dasharray: 6 6;
    animation: gravvinBusy 1.6s linear infinite;
}
@keyframes gravvinBusy {
    to { stroke-dashoffset: -12; }
}
.progressOverlay__text {
    font-size: 12px;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .75);
    width: 70vw;
    text-align: center;
}
.progressOverlay__sub {
    font-size: 12px;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .4);
    width: 70vw;
    text-align: center;
    min-height: 1em;
}

#cPts.inProgress,
#cWork.inProgress {
    opacity: 0.25;
}

#dockMarker.inProgressNull,
#dock.inProgressNull{
    opacity: 0;
}

canvas{
    width:100%;
    height:100%;
    display:block;
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
    -webkit-tap-highlight-color:transparent;
}
canvas.onRectify {
    opacity: 0.5;
}

.rectified-fit {
    /*width: 100vw;    */
    /* height: 100vh; */
    /* margin: auto; */
    /* margin-bottom: 85px; */
    /* margin-top: calc(10px + env(safe-area-inset-top));
    margin-bottom: calc((var(--bar-h) * 1) + env(safe-area-inset-bottom)); */
        /* width: 100%;
        height: 100%; */
        max-width: 100vw;
        max-height: calc(100vh - env(safe-area-inset-top) - var(--bar-h) - env(safe-area-inset-bottom));
        margin-top: calc(10px + env(safe-area-inset-top));
        margin-bottom: calc((var(--bar-h) * 1) + env(safe-area-inset-bottom));
        object-fit: contain;
        display: block;
    

}

#dockMarker,
#dock{
    transform: translate(var(--dock-tx, 0px), -50%);
    z-index: 20;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
#dock.collapsed .dockBody {
    display: none;
}
#dockMarker.collapsed,
#dock.collapsed {
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
}

.hiddenDuringServer{
    display:none !important;
}

.numpadCard{
    background: var(--glass-bg);
    border: 1px solid var(--glass-stroke);
    border-radius: var(--r-card);
    box-shadow: var(--shadow);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    background: rgba(16,16,16,.56);
}
.numpadCard *{
    scrollbar-width: none;
}
.numpadCard *::-webkit-scrollbar{
    width: 0;
    height: 0;
}

/* =========================
   Dock slide rail
   ========================= */
#dockMarker,
#dock{
    position: absolute;
    z-index: 20;
    will-change: transform;
    transform: translate(var(--dock-tx, 0px), -50%);
    width: calc(400px * var(--overlay-scale));
    max-width: calc(110vw * var(--overlay-scale));
    max-height: 72vh;
    border-top-right-radius:  calc(0.5 * var(--r) * var(--overlay-scale));
    border-bottom-right-radius: calc(0.5 * var(--r) * var(--overlay-scale));
    border: 1px solid var(--stroke);
    background: var(--glass);
    box-shadow: 0 30px 80px rgba(0,0,0,0.55);
    overflow: hidden;
    pointer-events: auto;
    touch-action: none;
    font-size: calc(22px * var(--overlay-scale));
    display: flex;
    flex-direction: column;
}

#dockMarker {
    width: calc(100px * var(--overlay-scale));
    max-width: calc(50vw * var(--overlay-scale));
    max-height: 72vh;
}

#dock.hidden{
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}

#dockRail {
    border: 0 !important;
    box-shadow: none !important;
}
#dockRail::before,
#dockRail::after {
    content: none !important;
}
#dockStatus::before,
#dockStatus::after{
    content: none !important;
    display: none !important;
}

.dockRail{
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 16px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}
.dockRail:active{ cursor: grabbing; }

.dockRailGrip{
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 64px;
    border-radius: 6px;
    background: linear-gradient(to right, rgba(255,255,255,0.35), rgba(255,255,255,0.65), rgba(255,255,255,0.35));
    opacity: 0.55;
    cursor: grab;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}
.dockRailGrip:active{
    cursor: grabbing;
    opacity: 0.75;
}

.dock.isParked .dockRail{
    background: rgba(255,255,255,0.14);
    border-color: rgba(168,255,96,0.22);
}

.dockHeader{
    padding: 10px 12px 8px;
}

.dockMarkerStatusHeader,
.dockStatusInDock,
.dockStatus{
    font-size: 13px;
    line-height: 1.25;
    opacity: 0.92;
    color: #fff;
    position: relative;
}

.dockBody{
    flex: 1 1 auto;
    padding: calc(12px * var(--overlay-scale));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: calc(12px * var(--overlay-scale) + 20px);
}

.panelStatus{
    font-size: 13px;
    line-height: 1.3;
    opacity: 0.85;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.dock.collapsed .dockStatusHeader,
.dock.collapsed .dockStatusInDock,
.dock.collapsed .dockHeader,
.dock.collapsed .dockBody{
    display: none;
}
.dock.collapsed{
    max-height: none;
}

#dockStatusHeader,
#dockBodyNum{
    margin-right: calc(45px * var(--overlay-scale));
    margin-left: calc(20px * var(--overlay-scale));
}

/* default hidden */
#dock,
#dockMarker,
#dockMarkerStatusHeader,
#dockStatusHeader,
#dockStatusInDock,
#dockBodyNum {
    display: none;
}

/* explicit visible state */
#dock.show,
#dockMarker.show,
#dockMarkerStatusHeader.show,
#dockStatusHeader.show,
#dockStatusInDock.show,
#dockBodyNum.show,
#dockBodyMarker.show {
    display: block;
}

/* ===== Thickness input ===== */
#thInput{
    width: 120px;
    padding: calc(10px * var(--overlay-scale)) calc(12px * var(--overlay-scale));
    border-radius: calc(var(--field-r) * var(--overlay-scale));
    background: rgba(0,0,0,0.62);
    border: 1px solid rgba(168,255,96,0.85);
    color: rgba(168,255,96,0.98);
    font-weight: 500;
    font-size: 1.5em;
    outline: none;
    box-shadow: 0 0 0 1px rgba(168,255,96,0.18) inset, 0 10px 28px rgba(0,0,0,0.40);
    appearance: none;
    -webkit-appearance: none;
}
#thInput::placeholder{
    color: rgba(255,255,255,0.35);
    font-weight: 500;
}
#thInput:focus{
    box-shadow: 0 0 0 1px rgba(168,255,96,0.26) inset, 0 0 0 2px rgba(168,255,96,0.18), 0 10px 28px rgba(0,0,0,0.40);
}
#thInput::-webkit-outer-spin-button,
#thInput::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
#thInput[type="number"]{ -moz-appearance: textfield; appearance: textfield; }



/* ---------- Misc ---------- */
.row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(10px * var(--overlay-scale));
    margin-top: calc(10px * var(--overlay-scale));
}
.row:first-child{ margin-top: 0; }

label{
    font-weight: 850;
    font-size: 0.95em;
    color: rgba(255,255,255,0.84);
}
.inline{
    display: flex;
    align-items: center;
    gap: calc(8px * var(--overlay-scale));
}
.unit{
    font-weight: 850;
    font-size: 0.92em;
    color: rgba(255,255,255,0.70);
}

.miniBtn {
    min-height: calc(46px * var(--overlay-scale));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(var(--r2) * var(--overlay-scale));
    border: none;
    background: rgba(255,255,255,0.92);
    color: #000;
    font-weight: 700;
    font-size: 1.05em;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 90ms ease, background 90ms ease;
    width: 25%;
}
.miniBtn.primary{ width: 40%; }
.miniBtn:active{ transform: scale(.98); }


input.defaultTablePourHeight,
input.defaultTableW,
input.defaultTableH {
    font-size: 1.5em;
    text-align: right;
    background-color: #c4c4c4;
    width: 4em;
    padding: 0.25em;
    border: none;
    border-radius: 0.125em;
}

input.defaultTableUnit,
input.defaultTablePourHeight,
select.defaultTableVolumeUnit {
    font-size: 1.5em;
    background-color: #c4c4c4;
    padding: 0.25em;
    border: none;
    border-radius: 0.125em;
    color: #111;
}
.volUnitBtn {
    font-size: 1em;
    background-color: #c4c4c4;
    color: #111;
    border: none;
    border-radius: 0.125em;
    padding: 0.25em 0.5em;
    opacity: 0.45;
    cursor: pointer;
}
.volUnitBtn.active {
    opacity: 1;
    font-weight: 700;
}

/* =========================
   Bottom bar
   ========================= */


.bottomBar{
    z-index: 100;
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border-top: 1px solid var(--gv-bar-border);
    display: flex;
    align-items: flex-start;
    justify-content: space-around;

    background: var(--gv-bar-bg);

    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 83px;
    padding-bottom: env(safe-area-inset-bottom);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 0.5px solid rgba(0, 0, 0, 0.10);

    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 60;
    font-family: -apple-system, 'SF Pro Display', 'Google Sans', Roboto, sans-serif;
}

.serverBtn,
.navHome {
    font-size: 1.75em;
    color: #000;
    border-radius: 0.25em;
    font-weight: 100;
    border: 1px solid #c4c4c4;
    padding: 0.25em 0.5em;
    background-color: aliceblue;
    width: 10em;
}



.navBtn{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 16px;
    border-radius: 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.15s ease;
    min-width: 60px;
    color: var(--gv-bar-icon);
    font-family: -apple-system, 'SF Pro Display', 'Google Sans', Roboto, sans-serif;
        font-weight: 100;
 
}

.navBtn .ico{
    width: 22px;
    height: 22px;
    color: var(--gv-bar-icon);
    transition: color 0.15s ease;
}

.navBtn.isActive{
    color: var(--gv-bar-icon-active);
}

.navBtn.isActive .ico{
    color:var(--gv-bar-icon-active);  
    stroke: var(--gv-bar-icon-active);
    stroke: rgb(183, 255, 92, 0.78);
}

.navBtn.disAbled{
    color: rgba(255,255,255,0.35);
    cursor: default;
}



.navBtnSettings{
    width: 78px;
}



/* =========================
   Settings menu
   ========================= */
.settingsMenu{
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 12px);
    z-index: 120;
    display: none;
}
.settingsMenu.show{ display: block; }

.settingsCard{
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    box-shadow: var(--shadow);
    padding: 12px;
    background: rgba(0,0,0,0.85);
    color: #00ff88;
    color: rgba(231,227,220,1);

}
.settingsRow{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}
.settingsRowGroup{
    border-top: 1px solid silver;
    margin-top: 1em;
}
.settingsLabel{
    font-weight: 900;
    color: rgba(255,255,255,0.86);
}
.settingsActions{
    display: flex;
    gap: 10px;
}

.miniCircle{
    width: 42px;
    height: 42px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.92);
    display: grid;
    place-items: center;
    -webkit-tap-highlight-color: transparent;
}
.miniCircle:active{ transform: scale(.98); }

.icoSm{
    width: 22px;
    height: 22px;
}

#panelMarker{
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 9999;
    touch-action: none;
    max-width: min(92vw, 520px);
    max-height: 90vh;
    overflow: auto;
}

/* Runde Calculate Taste */
.calcBtn{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(180deg,#A8FF60,#8DFF60);
    color: rgba(0,0,0,.9);
    font-weight: 600;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(141,255,96,.35), inset 0 1px 0 rgba(255,255,255,.35);
}

/* =========================
   Responsive tweaks
   ========================= */
@media (max-width: 768px){
    .numpad{ gap: calc(14px * var(--overlay-scale)); }
    .key{
        min-height: calc(50px * var(--overlay-scale));
        font-size: 1.35em;
        font-weight: 300;
    }
    .key.wide{ min-height: calc(58px * var(--overlay-scale)); }
    .settingsCard { font-size: calc(12px * var(--overlay-scale)); font-family: monospace; }
}

@media (max-width: 380px){
    :root{
        --bar-max-w: 340px;
        --navbtn-w: 78px;
        --ico-size: 25px;
        --label-size: 11px;
        --bar-h: 52px;
        --navbtn-h: 45px;
    }
    .dock{ max-height: 65vh; }
    .settingsCard { font-size: calc(12px * var(--overlay-scale)); }
}

@media (hover:none) and (pointer:coarse) and (min-width: 390px) and (min-height: 800px){
    :root{
        --bar-h: 55px;
        --bar-max-w: 340px;
        --navbtn-h: 48px;
        --navbtn-w: 90px;
        --ico-size: 25px;
        --label-size: 11px;
    }
    .settingsCard { font-size: calc(12px * var(--overlay-scale)); }
    .navBtn {   font-size: 12pt;}
}

@media (hover:none) and (pointer:coarse) and (min-height: 880px){
    :root{
        --bar-h: 60px;
        --bar-max-w: 350px;
        --navbtn-h: 47px;
        --navbtn-w: 90px;
        --ico-size: 25px;
    }
    .settingsCard { font-size: calc(12px * var(--overlay-scale)); }
}

@media (hover:none) and (pointer:coarse) {
    :root{
        --bar-h: 85px;
        --bar-max-w: 350px;
        --navbtn-h: 47px;
        --navbtn-w: 90px;
        --ico-size: 25px;
    }
    .settingsCard { font-size: 11px; }
    #dock {
        max-width: 75vw;
        max-height: 60vh;
    }
        .navBtn {   font-size: 12pt;}

}

/* global motion */
*{
    transition:
        background-color 180ms ease,
        transform 180ms cubic-bezier(.2,.8,.2,1),
        opacity 180ms ease;
}
.dock{
    transition:
        transform 260ms cubic-bezier(.22,.61,.36,1),
        opacity 220ms ease;
}

@media (hover:none) and (pointer:coarse) and (min-width: 400px) and (max-width: 430px) {
    .settingsCard{ font-size: 12px; }
}
@media (hover:none) and (pointer:coarse) and (min-width: 750px) and (max-width: 800px) {
    .settingsCard{ font-size: 12px; }
        /*.navBtn {   font-size: 12pt;}*/

}

/* Save button */
.saveBtn {
    position: relative;
    transition: opacity .2s ease;
}
.saveBtn.is-saving {
    pointer-events: none;
    opacity: .7;
}
.saveBtn.is-saving::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 1px solid rgba(255,255,255,.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .6s linear infinite;
}
.saveBtn.is-done {
    background: #a1d99b;
    transition: background .2s ease;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}