/* Classic Mac OS (System 7) look: windows, buttons, lists, menu bar, dialogs. */
@font-face{ font-family:'Sillycon'; src:url('../assets/fonts/sillycon.ttf') format('truetype'); font-display:swap; }

:root{
  --mac-face:#d4d4d4;       /* window/dialog face */
  --mac-white:#ffffff;
  --mac-ink:#000000;
  --mac-shadow:rgba(0,0,0,.45);
  --mac-chrome:"Geneva","Helvetica Neue",Arial,sans-serif;
}

/* ---- window ---- */
.mac-window{ background:var(--mac-face); border:1px solid var(--mac-ink);
  box-shadow:1px 1px 0 var(--mac-ink), 3px 3px 6px var(--mac-shadow); color:#111; }
.mac-title{ position:relative; height:19px; background:#fff; border-bottom:1px solid var(--mac-ink);
  display:flex; align-items:center; justify-content:center; user-select:none; }
.mac-title .stripes{ position:absolute; left:6px; right:6px; top:4px; bottom:4px;
  background:repeating-linear-gradient(#000 0 1px, transparent 1px 3px); }
.mac-title .t{ position:relative; z-index:1; background:#fff; padding:0 10px;
  font:bold 12px var(--mac-chrome); letter-spacing:.02em; }
.mac-title .close{ position:absolute; left:6px; top:4px; width:11px; height:11px;
  border:1px solid var(--mac-ink); background:#fff; z-index:1; cursor:pointer; box-shadow:inset -1px -1px 0 #bbb; }
.mac-title .close:active{ background:#888; }

/* ---- buttons ---- */
.mac-btn{ font:600 12px var(--mac-chrome); color:#000; cursor:pointer;
  background:linear-gradient(#fff,#dcdcdc); border:1px solid #000; border-radius:9px;
  padding:3px 16px; min-width:64px; box-shadow:inset 0 1px 0 #fff, inset 0 -2px 1px #b6b6b6; }
.mac-btn:hover{ background:linear-gradient(#fff,#e8e8e8); }
.mac-btn:active{ background:#000; color:#fff; box-shadow:none; }
.mac-btn:disabled{ color:#9a9a9a; background:#d4d4d4; box-shadow:none; cursor:default; }
.mac-btn.default{ box-shadow:0 0 0 2px #000, inset 0 1px 0 #fff, inset 0 -2px 1px #b6b6b6; }
.mac-btn.small{ padding:1px 9px; min-width:0; border-radius:7px; font-size:11px; }

/* ---- list box ---- */
.mac-list{ background:#fff; border:1px solid #000; box-shadow:inset 1px 1px 0 #888; overflow:auto; }
.mac-list .row{ padding:3px 8px; font:12px var(--mac-chrome); border-bottom:1px solid #ededed; cursor:default; display:flex; gap:10px; }
.mac-list .row:hover{ background:#e6e6e6; }
.mac-list .row.sel{ background:#000020; color:#fff; }
.mac-list .row .grow{ flex:1; }
.mac-list .row .dim{ color:#666; }
.mac-list .row.sel .dim{ color:#aac; }

/* ---- menu bar ---- */
#mac-menubar{ position:fixed; left:0; right:0; top:0; height:20px; background:#fff;
  border-bottom:1px solid #000; display:flex; align-items:stretch; z-index:60;
  font:13px var(--mac-chrome); transition:transform .12s ease; }
#mac-menubar.hidden{ transform:translateY(-21px); }
#mac-menubar .m{ display:flex; align-items:center; padding:0 11px; cursor:default; }
#mac-menubar .m.apple{ font-family:'Sillycon',var(--mac-chrome); font-size:14px; padding:0 12px; }
#mac-menubar .m.open{ background:#000; color:#fff; }
.mac-menu{ position:fixed; background:#fff; border:1px solid #000; box-shadow:2px 2px 0 var(--mac-shadow);
  z-index:61; min-width:170px; padding:2px 0; font:13px var(--mac-chrome); }
.mac-menu .item{ padding:3px 22px 3px 20px; cursor:default; white-space:nowrap; display:flex; justify-content:space-between; gap:24px; }
.mac-menu .item .sk{ color:#666; }
.mac-menu .item:hover{ background:#000; color:#fff; }
.mac-menu .item:hover .sk{ color:#ccc; }
.mac-menu .item.disabled{ color:#aaa; }
.mac-menu .item.disabled:hover{ background:#fff; color:#aaa; }
.mac-menu .sep{ height:1px; background:#bbb; margin:3px 1px; }
#mac-hotzone{ position:fixed; top:0; left:0; right:0; height:5px; z-index:59; }

/* ---- dialogs ---- */
#mac-modals{ position:fixed; inset:0; z-index:70; pointer-events:none; }
.mac-overlay{ position:absolute; inset:0; background:rgba(20,24,30,.35);
  display:flex; align-items:center; justify-content:center; pointer-events:auto; }
.mac-dialog{ min-width:360px; max-width:600px; }
.mac-dialog .body{ padding:18px 20px; display:flex; gap:16px; }
.mac-dialog .ico{ flex:0 0 44px; }
.mac-dialog .ico .ev{ width:44px; height:44px; border:1px solid #000; border-radius:8px;
  background:radial-gradient(circle at 35% 30%,#9fd5ff,#1a4f86); display:flex; align-items:center; justify-content:center;
  font:bold 22px 'Sillycon',var(--mac-chrome); color:#fff; }
.mac-dialog .msg{ font:13px var(--mac-chrome); line-height:1.55; color:#111; }
.mac-dialog .msg h3{ margin:0 0 8px; font:bold 14px var(--mac-chrome); }
.mac-dialog .stat{ display:flex; justify-content:space-between; border-bottom:1px solid #c4c4c4; padding:2px 0; max-width:340px; }
.mac-dialog .stat b{ font-weight:600; }
.mac-dialog .buttons{ display:flex; justify-content:flex-end; gap:10px; padding:0 20px 16px; }