/* =========================================================================
   707 Headband — shared Mac theme system
   Two themes: "platinum" (classic Mac OS 9 look, the original site style)
   and "snowleopard" (Mac OS X 10.6 Aqua). Switch via the Apple menu ▸
   System Preferences▸Appearance. Persisted in localStorage.
   ========================================================================= */

/* =========================================================================
   707 Headband — shared Mac theme system
   Three themes, switched via the Apple menu ▸ System Preferences ▸ Appearance,
   persisted in localStorage:
     - "snowleopard" — custom-built Mac OS X 10.6 Aqua reskin (no complete,
       reliable open-source Aqua library exists to drop in, so this is
       hand-built to match).
     - "platinum"    — the site's original Mac OS 8/9-inspired look.
     - "system6"     — real System 6 chrome from system.css by Sakun
       Acharige (MIT licensed): https://github.com/sakofchit/system.css
       Vendored + scoped copy lives at vendor/system.scoped.css (see that
       file's header for why it's scoped rather than loaded raw).
   ========================================================================= */
@import url("vendor/system.scoped.css");

:root{
  --sb-height:22px;
}

/* ---------- page offset so content clears the fixed system bar ---------- */
html{scroll-behavior:auto}
body{padding-top:var(--sb-height) !important}

/* =========================================================================
   GLOBAL SYSTEM MENU BAR (real macOS-style bar fixed at the very top)
   Built as <ul role="menu-bar"><li role="menu-item">…</li></ul> so the
   vendored system.css menu-bar rules apply directly under the System 6
   theme, alongside our own styling used by the other two themes.
   ========================================================================= */
#macMenuBar{
  position:fixed;top:0;left:0;right:0;height:var(--sb-height);z-index:9999;
  background:#dfe1e3;border-bottom:1px solid #8d8d8d;
  font:12px/1 "Lucida Grande","Segoe UI",Helvetica,Arial,sans-serif;
  user-select:none;
}
#macMenuBar .mm-bar{display:flex;align-items:stretch;height:100%;margin:0;padding:0;list-style:none}
#macMenuBar .mm-item{list-style:none}
#macMenuBar .mm-item{
  display:flex;align-items:center;padding:0 11px;cursor:default;
  color:#111;white-space:nowrap;position:relative;
}
#macMenuBar .mm-apple{padding:0 12px;display:flex;align-items:center}
#macMenuBar .mm-apple svg{width:13px;height:13px;display:block}
#macMenuBar .mm-appname{font-weight:700}
#macMenuBar .mm-item.open,#macMenuBar .mm-item:hover{background:#3b7fe0;color:#fff}
#macMenuBar .mm-spacer{flex:1}
#macMenuBar .mm-clock{padding:0 12px;display:flex;align-items:center;color:#333;font-size:11.5px}

.mm-menu{
  position:absolute;top:100%;left:0;min-width:190px;background:#fff;
  border:1px solid rgba(0,0,0,.35);border-top:none;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  padding:4px 0;display:none;z-index:9999;border-radius:0 0 6px 6px;
  font-size:13px;margin:0;list-style:none;
}
.mm-item.open .mm-menu{display:block}
.mm-menu .mm-row{padding:0;color:#111;position:relative;cursor:default;white-space:nowrap}
.mm-menu .mm-row button{all:unset;display:flex;justify-content:space-between;gap:18px;box-sizing:border-box;width:100%;padding:4px 20px 4px 22px;font:inherit;color:inherit;cursor:default}
.mm-menu .mm-row .mm-kbd{color:#888;font-size:11.5px}
.mm-menu .mm-row:hover:not(.mm-disabled) button{background:#3b7fe0;color:#fff}
.mm-menu .mm-row:hover:not(.mm-disabled) .mm-kbd{color:#e6f0ff}
.mm-menu .mm-row.mm-disabled button{color:#aaa;cursor:default}
.mm-menu .mm-sep{height:1px;background:#ddd;margin:4px 8px;list-style:none}

/* =========================================================================
   MAC-STYLE DIALOG / ABOUT / PREFERENCES WINDOWS (shared, theme-aware)
   ========================================================================= */
.mm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px}
.mm-win{background:#ececec;width:min(480px,92vw);border-radius:9px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.5);font:13px/1.45 "Lucida Grande","Segoe UI",Helvetica,Arial,sans-serif;color:#111}
.mm-win-title{height:26px;display:flex;align-items:center;justify-content:center;position:relative;font-weight:700;font-size:12.5px;
  background:linear-gradient(#e9e9e9,#c9c9c9);border-bottom:1px solid #999}
.mm-win-lights{position:absolute;left:9px;top:0;bottom:0;display:flex;align-items:center;gap:7px}
.mm-win-lights .l{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 0 0 1px rgba(0,0,0,.25);cursor:pointer}
.mm-win-lights .l.c{background:radial-gradient(circle at 35% 30%,#ff8f83,#e3392c)}
.mm-win-lights .l.m{background:radial-gradient(circle at 35% 30%,#ffd479,#e3a721)}
.mm-win-lights .l.z{background:radial-gradient(circle at 35% 30%,#8fe583,#28ab27)}
.mm-win-body{padding:22px 24px;background:#f4f4f4}
.mm-win-body h2{margin:0 0 4px;font-size:17px}
.mm-win-body .mm-sub{color:#666;margin:0 0 16px;font-size:12px}
.mm-win-body p{margin:0 0 10px}
.mm-about-icon{width:64px;height:64px;margin:0 auto 12px;display:block}

.mm-swatches{display:flex;gap:14px;margin-top:6px}
.mm-swatch{flex:1;border:2px solid transparent;border-radius:8px;padding:8px;cursor:pointer;text-align:center;background:#fff}
.mm-swatch.active{border-color:#3b7fe0;background:#eaf1ff}
.mm-swatch .mm-swatch-preview{height:56px;border-radius:5px;margin-bottom:8px;border:1px solid #bbb}
.mm-swatch .mm-swatch-preview.platinum{background:linear-gradient(#eee,#eee 60%,#ccc 60%,#ccc)}
.mm-swatch .mm-swatch-preview.snowleopard{background:linear-gradient(#f6f6f6,#dfe3e8 55%,#aab4c2 55%,#7f93ab)}
.mm-swatch .mm-swatch-preview.system6{background:repeating-linear-gradient(0deg,#fff 0 2px,#000 2px 3px);background-size:100% 8px}
.mm-swatches{flex-wrap:wrap}
.mm-swatch{flex:1 1 120px}
.mm-swatch-label{font-weight:700;font-size:12px}
.mm-swatch-check{font-size:11px;color:#3b7fe0;font-weight:700;height:14px}

.mm-win-footer{padding:12px 16px;display:flex;justify-content:flex-end;gap:8px;background:#eaeaea;border-top:1px solid #ccc}
.mm-btn{border:1px solid #999;background:linear-gradient(#fff,#e2e2e2);border-radius:5px;padding:6px 14px;font:inherit;font-weight:600;cursor:pointer}
.mm-btn:hover{background:linear-gradient(#fff,#d5e6ff)}
.mm-btn.primary{background:linear-gradient(#4d9bff,#1f6fe0);color:#fff;border-color:#1a5fc0}
.mm-btn.primary:hover{background:linear-gradient(#63a9ff,#2a7bf0)}

/* =========================================================================
   SNOW LEOPARD (Aqua) reskin — overrides the page's own Platinum rules.
   Applies to whichever Finder-style window classes exist on the page.
   ========================================================================= */
html[data-theme="snowleopard"] body{
  font-family:"Lucida Grande","Segoe UI",Helvetica,Arial,sans-serif !important;
}

/* --- desktop backdrop: Snow Leopard default aqua-blue gradient sky --- */
html[data-theme="snowleopard"] .desktop{
  background:linear-gradient(180deg,#1a4f8c 0%,#3f7fc4 32%,#8fbfe6 68%,#dfeefb 100%) !important;
}

/* --- window chrome: rounded corners, soft shadow, unified brushed bar --- */
html[data-theme="snowleopard"] .window{
  border:1px solid #6e6e6e !important;border-radius:8px !important;
  box-shadow:0 22px 48px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.15) inset !important;
  overflow:hidden;
}
html[data-theme="snowleopard"] .titlebar{
  background:linear-gradient(#f4f4f4,#dcdcdc 45%,#c6c6c6 46%,#b9b9b9) !important;
  border-bottom:1px solid #8a8a8a !important;
  height:23px !important;position:relative;
  grid-template-columns:1fr !important;
}
html[data-theme="snowleopard"] .titlebar .closebox,
html[data-theme="snowleopard"] .titlebar .zoombox{display:none !important}
html[data-theme="snowleopard"] .titlebar .lights{display:flex !important}
html[data-theme="snowleopard"] .title-lines{font-weight:700;font-size:12.5px;color:#333;text-shadow:0 1px 0 rgba(255,255,255,.6);padding:0 68px 0 68px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis}
html[data-theme="snowleopard"] .title-lines:before,
html[data-theme="snowleopard"] .title-lines:after{display:none !important}

.lights{display:none;position:absolute;left:9px;top:0;bottom:0;align-items:center;gap:7px;z-index:2}
.lights .light{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 0 0 1px rgba(0,0,0,.25);cursor:pointer;position:relative}
.lights .light.c{background:radial-gradient(circle at 35% 30%,#ff8f83,#e3392c)}
.lights .light.m{background:radial-gradient(circle at 35% 30%,#ffd479,#e3a721)}
.lights .light.z{background:radial-gradient(circle at 35% 30%,#8fe583,#28ab27)}
.lights .light:before{content:"";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:900;color:rgba(60,0,0,.55);opacity:0}
.lights:hover .light:before{opacity:1}
.lights .light.c:before{content:"×"}
.lights .light.m:before{content:"−"}
.lights .light.z:before{content:"+"}

/* elements only meaningful under the System 6 theme; hidden elsewhere */
.sys6-title{display:none}
.sys6-btn{display:none}
.apple{display:none}

/* --- old in-window decorative menubar is superseded by the real global
   system menu bar above, in both themes --- */
.menubar{display:none !important}

/* --- unified brushed toolbar (merges visually with titlebar, no seam) --- */
html[data-theme="snowleopard"] .toolbar{
  background:linear-gradient(#c6c6c6,#b7b7b7) !important;
  border-bottom:1px solid #8a8a8a !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
html[data-theme="snowleopard"] .bevel{
  border:1px solid #8f8f8f !important;border-radius:5px !important;
  background:linear-gradient(#fbfbfb,#e6e6e6 96%) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 1px 1px rgba(0,0,0,.08) !important;
  color:#222 !important;font-weight:600 !important;
}
html[data-theme="snowleopard"] .bevel:hover{background:linear-gradient(#fff,#eef4ff 96%) !important}
html[data-theme="snowleopard"] .bevel.active,
html[data-theme="snowleopard"] .bevel:active{
  background:linear-gradient(#3f8bf0,#1f6fe0) !important;color:#fff !important;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.35) !important;
}
.search-wrap{position:relative;display:inline-flex;align-items:center}
.search-icon{display:none}
html[data-theme="snowleopard"] .search{
  border:1px solid #9a9a9a !important;border-radius:12px !important;
  background:#fff !important;padding-left:22px !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.15) !important;
}
html[data-theme="snowleopard"] .search-icon{
  display:block;position:absolute;left:8px;top:50%;transform:translateY(-50%);
  color:#8a8a8a;font-size:13px;pointer-events:none;font-weight:700;
}

html[data-theme="snowleopard"] .pathbar{background:linear-gradient(#eef1f4,#dde2e7) !important;border-bottom:1px solid #b9c0c8 !important}
html[data-theme="snowleopard"] .pathbox{background:#fff !important;border:1px solid #b9c0c8 !important;border-radius:4px !important}

/* --- sidebar: Aqua source-list look with blue gradient selection --- */
html[data-theme="snowleopard"] .sidebar{
  background:linear-gradient(#e7ebf0,#dbe1e8) !important;border-right:1px solid #b9c0c8 !important;
}
html[data-theme="snowleopard"] .side-title{color:#5c6b7a !important;font-size:11px !important;text-transform:uppercase;letter-spacing:.03em}
html[data-theme="snowleopard"] .side-item{border-radius:5px !important;color:#2c3e50 !important}
html[data-theme="snowleopard"] .side-item:hover{background:rgba(59,127,224,.15) !important;color:#111 !important;border-color:transparent !important}
html[data-theme="snowleopard"] .side-item.active{
  background:linear-gradient(#5fa0ef,#2f74d8) !important;color:#fff !important;border-color:transparent !important;
  box-shadow:0 1px 1px rgba(0,0,0,.15) inset;
}
html[data-theme="snowleopard"] .foldericon{
  background:linear-gradient(#8fc0ff,#4f8fe6) !important;border:1px solid #3568b0 !important;
  border-radius:2px 4px 4px 4px !important;
}
html[data-theme="snowleopard"] .foldericon:before{
  background:linear-gradient(#8fc0ff,#4f8fe6) !important;border-color:#3568b0 !important;
}
html[data-theme="snowleopard"] .side-item.active .foldericon{
  background:#fff !important;border-color:rgba(255,255,255,.7) !important;
}
html[data-theme="snowleopard"] .side-item.active .foldericon:before{background:#fff !important;border-color:rgba(255,255,255,.7) !important}

/* --- content selection: Aqua blue rounded highlight instead of flat --- */
html[data-theme="snowleopard"] .icons .item.selected,
html[data-theme="snowleopard"] .large .item.selected,
html[data-theme="snowleopard"] .list .item.selected{
  background:linear-gradient(#5fa0ef,#2f74d8) !important;border-radius:6px !important;border-color:transparent !important;
}
html[data-theme="snowleopard"] #gallery.icons .item:hover{border-radius:6px !important;border:1px solid rgba(59,127,224,.4) !important}

/* --- status bar --- */
html[data-theme="snowleopard"] .status{
  background:linear-gradient(#dcdcdc,#c8c8c8) !important;border-top:1px solid #999 !important;color:#333 !important;
}

/* --- preview modal window --- */
html[data-theme="snowleopard"] .preview{border-radius:8px !important;overflow:hidden;box-shadow:0 22px 48px rgba(0,0,0,.5) !important;border:none !important}
html[data-theme="snowleopard"] .preview-title{
  background:linear-gradient(#f4f4f4,#dcdcdc 45%,#c6c6c6 46%,#b9b9b9) !important;border-bottom:1px solid #8a8a8a !important;
}

main.page{transition:max-width .25s ease}
main.page.zoomed{max-width:100% !important}

/* --- matcher page: light aqua touch-up for buttons/backlink --- */
html[data-theme="snowleopard"] .backlink{
  border-radius:14px !important;border:1px solid #999 !important;
  background:linear-gradient(#fbfbfb,#e2e2e2) !important;
}
html[data-theme="snowleopard"] .controls button{
  border:1px solid #8f8f8f !important;border-radius:5px !important;
  background:linear-gradient(#fbfbfb,#e6e6e6 96%) !important;font-weight:600 !important;
}
html[data-theme="snowleopard"] .controls button:hover{background:linear-gradient(#fff,#eef4ff 96%) !important}
html[data-theme="snowleopard"] .upload-button{box-shadow:inset 0 1px 0 #9bd8ff,0 5px 14px rgba(0,0,0,.35) !important}

/* --- matcher page under System 6: flatten to black/white, no radii --- */
html[data-theme="system6"] body{background:#fff !important}
html[data-theme="system6"] .backlink{background:#fff !important;color:#000 !important;border:1.5px solid #000 !important}
html[data-theme="system6"] .controls button{background:#fff !important;color:#000 !important;border:1.5px solid #000 !important}
html[data-theme="system6"] .scan-panel{border:1.5px solid #000 !important;border-radius:0 !important}
html[data-theme="system6"] .progress-wrap{border:1.5px solid #000 !important;border-top:none !important}
html[data-theme="system6"] .result-card img{border-radius:0 !important}
html[data-theme="system6"] .best{outline-color:#000 !important}

@media(max-width:700px){
  #macMenuBar .mm-item:not(.mm-apple-item):not(.mm-clock-holder){display:none}
  #macMenuBar .mm-appname{display:none}
  #macMenuBar .mm-clock{padding:0 8px;font-size:10.5px}
  #macMenuBar .mm-apple-item{padding:0 10px}
}

/* =========================================================================
   SYSTEM 6 (real system.css, vendored+scoped) — wiring our markup into it.
   The vendored file (imported at the top) supplies the actual monochrome
   rules for .window/.title-bar/.btn/ul[role=menu-bar] etc; everything here
   just (a) hides the other themes' own chrome for the same elements and
   (b) makes sure OUR pre-existing selectors (some using #id, which beats
   the vendor file's specificity) don't bleed blue accents into it.
   ========================================================================= */
html[data-theme="system6"] .desktop{background:#000 !important}
html[data-theme="system6"] #macMenuBar{background:#fff !important;border-bottom:1px solid #000 !important;height:20px !important}
html[data-theme="system6"] #macMenuBar .mm-bar{font-family:Chicago_12,Chicago,sans-serif !important}
html[data-theme="system6"] #macMenuBar .mm-item,
html[data-theme="system6"] #macMenuBar .mm-appname{color:#000 !important;font-weight:400 !important}
html[data-theme="system6"] #macMenuBar .mm-item.open,
html[data-theme="system6"] #macMenuBar .mm-item:hover{background:#000 !important;color:#fff !important}
html[data-theme="system6"] .mm-menu{border-radius:0 !important;font-family:Chicago_12,Chicago,sans-serif !important;box-shadow:2px 2px 0 #000 !important;border:1px solid #000 !important}
html[data-theme="system6"] .mm-menu .mm-row:hover:not(.mm-disabled) button{background:#000 !important;color:#fff !important}
html[data-theme="system6"] .mm-apple{display:none !important}
html[data-theme="system6"] .apple{display:inline-block !important}

/* window chrome: real dithered System 6 title bar + close/resize buttons */
html[data-theme="system6"] .window{border-radius:0 !important;box-shadow:2px 2px 0 #000 !important}
html[data-theme="system6"] .title-lines{display:none !important}
html[data-theme="system6"] .sys6-title{display:block !important}
html[data-theme="system6"] .sys6-btn{display:block !important}
html[data-theme="system6"] .closebox,html[data-theme="system6"] .zoombox,html[data-theme="system6"] .lights{display:none !important}

/* content chrome: plain black/white, no aqua/platinum accents */
html[data-theme="system6"] .toolbar,html[data-theme="system6"] .pathbar,html[data-theme="system6"] .status{
  background:#fff !important;border-color:#000 !important;color:#000 !important;
}
html[data-theme="system6"] .sidebar{background:#fff !important;border-color:#000 !important}
html[data-theme="system6"] .side-item.active{background:#000 !important;color:#fff !important;border-color:#000 !important}
html[data-theme="system6"] .foldericon,html[data-theme="system6"] .foldericon:before{background:#fff !important;border-color:#000 !important}
html[data-theme="system6"] .icons .item.selected,html[data-theme="system6"] .large .item.selected,html[data-theme="system6"] .list .item.selected{
  background:#000 !important;color:#fff !important;border-radius:0 !important;
}
html[data-theme="system6"] .search{border-radius:0 !important}
html[data-theme="system6"] .search-icon{display:none !important}
html[data-theme="system6"] .backlink,html[data-theme="system6"] .controls button{border-radius:0 !important}

html[data-theme="system6"] .mm-overlay{background:rgba(0,0,0,.5) !important}
html[data-theme="system6"] .mm-win{border-radius:0 !important;box-shadow:2px 2px 0 #000 !important;font-family:Chicago_12,Chicago,sans-serif !important}
html[data-theme="system6"] .mm-win-title{background:linear-gradient(#000 50%,transparent 0) !important;background-size:6.6% 13.3% !important;background-clip:content-box !important;border-bottom:none !important;padding:.2rem .1rem !important}
html[data-theme="system6"] .mm-win-title-text{background:#fff;color:#000;padding:0 .6em;position:relative}
html[data-theme="system6"] .mm-win-lights{display:none !important}
html[data-theme="system6"] .mm-btn{border-radius:0 !important;font-family:Chicago_12,Chicago,sans-serif !important}
html[data-theme="system6"] .mm-btn.primary{background:#000 !important;border-color:#000 !important}
html[data-theme="system6"] .mm-swatch{border-radius:0 !important}
html[data-theme="system6"] .mm-swatch.active{border-color:#000 !important;background:#eee !important}

@media(max-width:700px){
  html[data-theme="system6"] .sys6-title{padding:0 30px !important;font-size:11px !important}
  html[data-theme="system6"] .title-bar,html[data-theme="system6"] .inactive-title-bar{height:20px !important}
  html[data-theme="system6"] .title-bar button{transform:scale(.38) !important}
}