/* Carry's mode bar (2026-11-03): one drop-down at the top flips the whole app between
   Round, League and Tournament. Green is the one "press this" color everywhere; the bar
   itself stays quiet so the page under it does the talking. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: mb-out .18s ease both; }
::view-transition-new(root) { animation: mb-in .26s cubic-bezier(.2,.8,.2,1) both; }
@keyframes mb-out { to { opacity: 0; transform: scale(.985); } }
@keyframes mb-in { from { opacity: 0; transform: translateY(8px); } }

.mb{position:relative;z-index:600;background:var(--bg,#EFF2EE);padding-top:env(safe-area-inset-top)}
.mb .in{max-width:560px;margin:0 auto;padding:10px 12px 6px;display:flex;align-items:center;gap:8px}
.mb .word{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink,#0E1411)}
.mb .word i{font-style:normal;color:var(--g,#136A4B)}
.mb .pick{margin-left:auto;display:flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 10px;border-radius:999px;
  background:var(--card,#fff);border:1px solid var(--line,rgba(14,20,17,.08));box-shadow:var(--sh1);
  font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink,#0E1411)}
.mb .pick .dot{width:8px;height:8px;border-radius:50%;background:var(--g,#136A4B)}
.mb .pick .car{color:var(--ink3,#8A938D);font-size:11px;margin-left:2px}
.mb .gear{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ink2,#59635D);
  background:var(--card,#fff);border:1px solid var(--line,rgba(14,20,17,.08));box-shadow:var(--sh1)}
.mb-sheet svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mb svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* the sheets */
.mb-sheet{position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-start;justify-content:center}
.mb-sheet .mb-scrim{position:absolute;inset:0;background:rgba(14,20,17,.32);animation:mbf .18s ease both}
.mb-sheet .mb-box{position:relative;box-sizing:border-box;display:block;height:auto;border:0;color:var(--ink,#0E1411);text-align:left;margin-top:calc(env(safe-area-inset-top) + 56px);width:calc(100% - 24px);max-width:420px;
  background:var(--card,#fff);border-radius:20px;box-shadow:0 24px 60px -20px rgba(14,20,17,.45);padding:8px;
  animation:mbd .24s cubic-bezier(.2,.8,.2,1) both;transform-origin:top right}
.mb-sheet.mb-bottom{align-items:flex-end}
.mb-sheet.mb-bottom .mb-box{margin:0 0 calc(env(safe-area-inset-bottom) + 12px);transform-origin:bottom center;padding:16px}
@keyframes mbf{from{opacity:0}}
@keyframes mbd{from{opacity:0;transform:translateY(-6px) scale(.97)}}
.mb-sheet .mb-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:13px 12px;border-radius:14px}
.mb-sheet .mb-opt:active{background:var(--card2,#F5F7F4)}
.mb-sheet .mb-opt .mb-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:var(--card2,#F5F7F4);color:var(--ink2,#59635D)}
.mb-sheet .mb-opt .mb-ic svg{width:21px;height:21px}
.mb-sheet .mb-opt b{display:block;font-size:16px;font-weight:650;letter-spacing:-.015em}
.mb-sheet .mb-opt span{display:block;font-size:13px;color:var(--ink3,#8A938D);margin-top:2px;line-height:1.3}
.mb-sheet .mb-opt.on{background:var(--g-l,#E6F0EA)}
.mb-sheet .mb-opt.on .mb-ic{background:var(--g,#136A4B);color:#fff}
.mb-sheet .mb-opt .mb-tick{margin-left:auto;color:var(--g,#136A4B);font-weight:700}
.mb-sheet h3{margin:2px 4px 12px;font-size:17px;font-weight:650;letter-spacing:-.02em}
.mb-sheet .mb-lab{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3,#8A938D);margin:14px 4px 7px}
.mb-sheet .mb-seg{display:flex;background:var(--card2,#F5F7F4);border-radius:12px;padding:3px;gap:3px}
.mb-sheet .mb-seg button{flex:1;height:38px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--ink2,#59635D)}
.mb-sheet .mb-seg button.on{background:var(--card,#fff);color:var(--ink,#0E1411);box-shadow:var(--sh1)}
.mb-sheet .mb-row{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.mb-sheet .mb-done{height:44px;padding:0 22px;border-radius:12px;background:var(--g,#136A4B);color:#fff;font-weight:650;font-size:15px}
.mb-sheet .mb-plain{font-size:13.5px;color:var(--ink3,#8A938D);font-weight:500;padding:8px 4px}

/* text size: everything but maps grows (a zoomed Leaflet map taps the wrong spot) */
html[data-size="l"] .zoomable{zoom:1.12}
html[data-size="xl"] .zoomable{zoom:1.25}

/* the sheet must look the same on all three pages, whatever each page's own style says */
.mb-sheet .mb-box{background:#fff!important}
.mb-sheet .mb-opt{border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.mb-sheet .mb-opt.on{background:var(--g-l,#E6F0EA)}
.mb-sheet input{font:inherit;font-size:16px;width:100%;box-sizing:border-box;border:1px solid rgba(14,20,17,.14);border-radius:11px;padding:11px 12px;background:#fff}
.mb-sheet .mb-row>*{flex:none}

/* On a computer (2026-11-03, Auston: "it's got to feel like an actual app"): the app sits in a
   phone-sized frame in the middle of the screen, with the bottom bar inside the frame, instead
   of a phone layout stretched across a monitor. Same on all three modes. */
@media (min-width:720px){
  html{background:#D8DDD6;overflow:auto}
  body{max-width:430px;margin:28px auto!important;min-height:calc(100vh - 56px);border-radius:30px;overflow:clip;
    box-shadow:0 0 0 1px rgba(14,20,17,.07),0 40px 90px -40px rgba(14,20,17,.55)}
  #nav{left:50%!important;right:auto!important;width:430px;transform:translateX(-50%);bottom:28px!important;
    border-radius:0 0 30px 30px;padding-bottom:0!important}
  #toast{left:50%!important;right:auto!important;width:auto;max-width:400px;transform:translateX(-50%)!important;bottom:104px!important}
  .mb .in,#hdr .in,.hdr .in,.wrap{max-width:430px}
  .mb-sheet .mb-box{max-width:400px}
  .mb-sheet:not(.mb-bottom) .mb-box{margin-top:84px}
  .mb-sheet.mb-bottom{align-items:center}
  .mb-sheet.mb-bottom .mb-box{margin:0}
  #sheet .panel{max-width:430px!important;border-radius:22px!important;margin-bottom:28px}
}
/* ask for a change (2026-11-04) */
.mb-sheet .mb-ask{display:block;width:100%;text-align:left;padding:12px 14px;border-radius:12px;border:1px solid rgba(19,106,75,.25);background:#fff;font-weight:650;font-size:15px;color:var(--g,#136A4B)}
.mb-sheet .mb-ask span{display:block;font-size:12.5px;font-weight:500;color:var(--ink3,#8A938D);margin-top:2px}
.mb-sheet .mb-in{display:block;width:100%;box-sizing:border-box;margin:8px 0 0;padding:11px 12px;border-radius:12px;border:1px solid rgba(14,20,17,.14);font:inherit;font-size:15px;resize:vertical;background:#fff}
.mb-sheet .mb-note{margin:2px 4px 4px;color:var(--ink2,#59635D);font-size:13.5px;line-height:1.4}
.mb-sheet .mb-note.bad{color:#B23B2E}
.mb-sheet .mb-askrow{display:flex;gap:10px;align-items:flex-start;padding:9px 4px;border-top:1px solid rgba(14,20,17,.08);font-size:14px}
.mb-sheet .mb-askrow>div{flex:1}.mb-sheet .mb-askrow small{display:block;color:var(--ink3,#8A938D);font-size:12px;margin-top:2px}
.mb-sheet .mb-askrow b{font-size:11.5px;font-weight:650;white-space:nowrap;color:var(--ink3,#8A938D)}
.mb-sheet .mb-askrow b.st-got,.mb-sheet .mb-askrow b.st-building{color:#B7791F}.mb-sheet .mb-askrow b.st-live{color:var(--g,#136A4B)}