/* ── bookmarked — System 7 / classic Mac desktop ── */
*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --ink:#000;
  --chrome:#dcdcdc;
  --sel:#c8d8f0;
}
html,body{height:100%;}
body{
  font-family:"Geneva","Verdana",-apple-system,sans-serif;
  font-size:12px;color:var(--ink);
  background-image: url("https://lh3.googleusercontent.com/d/1zCVe5vKxt-zzA7gfY2nRYWgU3KpM-56l");
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
}

/* MENU BAR */
#menubar{
  position:fixed;top:0;left:0;right:0;height:22px;
  background:#fff;border-bottom:1px solid #000;
  display:flex;align-items:center;gap:18px;padding:0 10px;
  font-size:12px;z-index:1000;
}
.mb-apple{font-size:13px;}
.mb-title{font-weight:bold;}
.mb-spacer{flex:1;}
.mb-clock{font-variant-numeric:tabular-nums;}

/* DESKTOP */
#desktop{position:fixed;inset:22px 0 0 0;}
#hint{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  color:#fff;text-shadow:1px 1px 0 #000;font-size:12px;white-space:nowrap;opacity:0.9;
}

/* DESKTOP ICONS */
.icon{
  position:absolute;width:96px;text-align:center;cursor:default;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:4px;
}
.icon .glyph{
  font-size:34px;line-height:1;width:52px;height:46px;
  display:flex;align-items:center;justify-content:center;
}
.folder-svg{width:48px;height:40px;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,0.3));}
.icon .lbl{
  font-size:11px;color:#fff;text-shadow:1px 1px 0 #000;
  padding:0 3px;max-width:96px;line-height:1.25;
}
.icon.selected .lbl{background:#000;color:#fff;text-shadow:none;}
.icon.dragging{opacity:0.6;}

/* WINDOWS (dynamic, multiple) */
.window{
  position:fixed;background:var(--chrome);
  border:1px solid #000;
  display:flex;flex-direction:column;
  min-width:240px;min-height:160px;
}
.title-bar{
  height:20px;border-bottom:1px solid #000;
  display:flex;align-items:center;gap:8px;padding:0 7px;
  background:repeating-linear-gradient(#fff,#fff 1px,#cfcfcf 1px,#cfcfcf 2px);
  cursor:move;
}
.close-box{
  width:11px;height:11px;border:1px solid #000;background:#dcdcdc;
  padding:0;cursor:pointer;flex:none;
}
.close-box:hover{background:#888;}
.title-text{font-weight:bold;background:var(--chrome);padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.title-count{margin-left:auto;color:#444;background:var(--chrome);padding:0 4px;white-space:nowrap;}

/* FOLDER WINDOW: sidebar + main split */
.window-body{flex:1;overflow:hidden;background:#fff;border-top:1px solid #888;}
.folder-split{display:flex;height:100%;}
.folder-sidebar{
  width:170px;flex:none;overflow-y:auto;background:#ededed;
  border-right:1px solid #aaa;padding:6px 0;
}
.side-item{
  display:flex;align-items:center;gap:6px;padding:4px 10px;
  font-size:11px;color:#000;text-decoration:none;cursor:default;line-height:1.3;
}
.side-item .se{flex:none;}
.side-item .side-count{margin-left:auto;color:#999;}
.side-item:hover{background:#dce6f5;}
.side-item.active{background:#3d92e8;color:#fff;}
.side-item.active .side-count{color:#dbe8fa;}
.folder-main{flex:1;overflow-y:auto;}

.subhead{
  font-weight:bold;font-size:11px;padding:8px 10px 3px;
  border-bottom:1px solid #e3e3e3;background:#f4f4f4;
  position:sticky;top:0;
}
.subhead .se{margin-right:5px;}
.filegrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));
  gap:6px;padding:10px 10px 18px;
}
.file{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  text-decoration:none;color:#000;padding:4px;cursor:default;
}
.file img{width:32px;height:32px;image-rendering:auto;}
.file .fname{font-size:10px;text-align:center;line-height:1.2;word-break:break-word;}
.file:hover .fname{background:#000;color:#fff;}



/* SPREADSHEET */
.sheet-body{background:#fff;overflow:auto;}
.sheet-toolbar{
  position:sticky;top:0;background:#ececec;border-bottom:1px solid #000;
  display:flex;gap:10px;align-items:center;padding:6px 8px;flex-wrap:wrap;z-index:2;
}
#search{font-family:inherit;font-size:12px;padding:3px 6px;border:1px solid #000;width:200px;background:#fff;}
.sheet-filters{display:flex;gap:4px;flex-wrap:wrap;}
.cat-pill{font-size:10px;padding:2px 7px;border:1px solid #000;cursor:pointer;background:#fff;}
.cat-pill.active{background:#000;color:#fff;}
table{width:100%;border-collapse:collapse;font-size:11px;}
thead th{
  position:sticky;top:35px;background:#dcdcdc;border-bottom:1px solid #000;border-right:1px solid #aaa;
  text-align:left;padding:4px 8px;cursor:pointer;font-weight:bold;
}
td{padding:3px 8px;border-bottom:1px solid #eee;border-right:1px solid #f0f0f0;vertical-align:middle;}
tbody tr:nth-child(even){background:#f7f7f7;}
tbody tr:hover{background:var(--sel);}
td.c-site a{color:#000;text-decoration:none;display:flex;align-items:center;gap:6px;}
td.c-site a:hover{text-decoration:underline;}
td.c-site img{width:14px;height:14px;opacity:0.8;}
.tag-cat{font-size:10px;}
.cc-DesignResources{color:#9E3C3C;}
.cc-DesignReferences{color:#B5651D;}
.cc-ToolsCommunity{color:#9A6D1F;}
.cc-LearnCollaborate{color:#2F6A3F;}
.cc-PassTime{color:#1E5F82;}
.empty{padding:30px;text-align:center;color:#888;}

@media(max-width:640px){
  .window{left:8px!important;right:8px;width:auto!important;top:40px!important;height:calc(100% - 56px)!important;}
  #hint{font-size:10px;white-space:normal;width:80%;text-align:center;}
}