/* language: css */
/* Win98 Explorer theme with responsive scaling (rem-based),
   so 24" 1080p at 100% looks like 14" 1200p at ~125% */

/* System colors */
:root {
  /* Base scaling: 16px default; scale up on large screens */
  font-size: 16px;

  --btn-face: #C0C0C0;
  --btn-hilite: #FFFFFF;
  --btn-shadow: #808080;
  --btn-dkshadow: #404040;
  --frame: #000000;
  --title-active: #000080;
  --title-active2: #0000A0;
  --desktop: #008080;
  --pane-bg: #FFFFFF;

  /* Locked nav width in rem so it scales with root font-size */
  --nav-width-rem: 17.5; /* 17.5rem = 280px at 16px, 350px at 20px */
}

/* Upscale at wider breakpoints to approximate 125% zoom on 24" */
@media (min-width: 1200px) {
  :root { font-size: 18px; } /* ~112% */
}
@media (min-width: 1600px) {
  :root { font-size: 20px; } /* 125% */
}

/* Base */
html, body { height: 100%; margin: 0; padding: 0; }
body {
  background: var(--desktop);
  font-family: "MS Sans Serif", Tahoma, Verdana, Arial, sans-serif;
  -webkit-font-smoothing: none;
}

/* Desktop wallpaper and icons (hidden on phones) */
.desktop-wallpaper { position: relative; min-height: 100%; padding: 1.75rem 0.75rem 3.5rem; box-sizing: border-box; }
.desktop-icons { position: relative; height: 0; }
.desktop-icon { position: absolute; width: 6.75rem; text-align: center; color: #fff; text-shadow: 1px 1px #000; font-size: 0.75rem; }
.desktop-icon img { display: block; margin: 0 auto 0.375rem; }
.desktop-icon span { display: block; line-height: 1.1; }
@media (max-width: 767px) { .desktop-icons { display: none; } }

/* 32x32 icons that scale up on large screens but never below 32px */
.icon-32 { width: clamp(32px, 2rem, 3rem); height: clamp(32px, 2rem, 3rem); image-rendering: pixelated; }

/* Window frame (Win98 bevel) */
.win98-window {
  display: flex; flex-direction: column;
  max-width: 68.75rem; /* 1100px at 16px */
  margin: 1.125rem auto;
  background: var(--btn-face);
  border: 1px solid var(--frame);
  box-shadow:
    inset 1px 1px 0 var(--btn-hilite),
    inset 2px 2px 0 #DFDFDF,
    inset -1px -1px 0 var(--btn-shadow),
    inset -2px -2px 0 var(--btn-dkshadow);
  min-height: 65vh; /* so panes reach toward the status bar */
}

/* Title bar (compact but fits 32px icon) */
.title-bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 2.125rem; /* ~34px at 16 */
  padding: 0.0625rem 0.25rem;
  background: linear-gradient(to right, var(--title-active), var(--title-active2));
  color: #fff; user-select: none;
}
/* 2) Compact the title bar ("Hardware Catalog" zone) */
.title-bar {
  height: 1.5rem;             /* was ~2.125rem; still fits a 32px icon at base scale */
  padding: 0 0.25rem;       /* reduce vertical padding */
}
.title-left { gap: 0.3rem; }
.title-text { font-size: 0.8rem; }  /* was ~0.8125rem */

.title-left { display: flex; align-items: center; gap: 0.375rem; }
.title-text { font-size: 0.8125rem; font-weight: bold; text-shadow: 1px 1px 0 #000; }

/* Caption buttons (decorative) */
.window-controls { display: flex; align-items: center; gap: 0.1875rem; }
.caption-btn {
  position: relative; width: 1.125rem; height: 1.125rem;
  border: 1px solid var(--frame); background: var(--btn-face);
  box-shadow: inset 1px 1px 0 var(--btn-hilite), inset -1px -1px 0 var(--btn-shadow);
  padding: 0; cursor: default;
}
.caption-btn:active { box-shadow: inset 1px 1px 0 var(--btn-shadow), inset -1px -1px 0 var(--btn-hilite); }
.caption-btn.minimize::before { content: ""; position: absolute; left: 0.1875rem; right: 0.1875rem; bottom: 0.25rem; height: 0.125rem; background: #000; box-shadow: 0 -1px 0 #fff; }
.caption-btn.maximize::before { content: ""; position: absolute; left: 0.1875rem; top: 0.1875rem; width: 0.75rem; height: 0.625rem; border: 1px solid #000; box-shadow: inset 0 1px 0 #fff; }
.caption-btn.close::before, .caption-btn.close::after { content: ""; position: absolute; left: 0.1875rem; right: 0.1875rem; top: 0.5rem; height: 1px;  transform-origin: center; }
.caption-btn.close::before { transform: rotate(45deg); } .caption-btn.close::after { transform: rotate(-45deg); }


/* Menu bar */
.menu-bar {
  height: 1.375rem; display: flex; align-items: center; gap: 1rem; padding: 0 0.375rem;
  background: var(--btn-face);
  border-top: 1px solid #DFDFDF; border-bottom: 1px solid var(--btn-shadow);
}
.menu-bar {
  height: 1.2rem;           /* was ~1.375rem */
  padding: 0 0.25rem;       /* tighter side padding */
  gap: 0.5rem;              /* reduce gaps between menu items */
}
.menu-item { font-size: 0.75rem; color: #000; padding: 0.125rem 0.375rem; border: 1px solid transparent; }
.menu-item {
  font-size: 0.7rem;        /* was 0.75rem */
  padding: 0.05rem 0.3rem;  /* tighter click target */
}
.menu-item:hover { background: var(--title-active); color: #fff; border-color: var(--title-active); }

/* Client area (grey) and inner frame */
.client-area {
  padding: 0.375rem; background: var(--btn-face); flex: 1 1 auto; position: relative;
  box-shadow: inset 1px 1px 0 var(--btn-hilite), inset -1px -1px 0 var(--btn-shadow);
}
.client-frame {
  height: 100%; padding: 0.375rem; background: var(--btn-face);
  box-shadow: inset 1px 1px 0 var(--btn-hilite), inset -1px -1px 0 var(--btn-shadow);
}

/* Two white panes with a 10px Win98 splitter */
.client-split { display: flex; align-items: stretch; height: 100%; min-height: 20rem; }
.pane { background: var(--pane-bg); border: 1px solid #E0E0E0; overflow: auto; }
.pane-left {
  width: calc(var(--nav-width-rem) * 1rem);
  min-width: calc(var(--nav-width-rem) * 1rem);
  max-width: calc(var(--nav-width-rem) * 1rem);
  flex: 0 0 calc(var(--nav-width-rem) * 1rem);
  padding: 0.5rem;
}
.pane-left .tree-link {
  background: transparent;   /* pane is white, so this looks clean */
  border: none;
  box-shadow: none;
  padding: 0.25rem 0.5rem;   /* compact spacing without a box */
}
.pane-left .tree-link:hover,
.pane-left .tree-link:focus {
  background: #F3F3F3;       /* subtle Win98-like hover */
  color: #000;
  outline: 1px dotted #000;  /* keep accessibility focus */
}
.pane-right { flex: 1 1 auto; min-width: 0; padding: 0.75rem; }
.pane-right .win98-icon-list {
  margin: 0.5rem 0 1rem; /* keep some spacing above/below the list */
}
.pane-right .win98-icon-list li:hover {
  background: #F3F3F3;
  outline: 1px dotted #000;  /* classic focus style */
  outline-offset: 0;
}
.pane-right .win98-icon-list li {
  background: transparent;   /* remove white tile */
  border: none;              /* remove 1px frame */
  box-shadow: none;          /* ensure no inner shadow remains */
  padding: 0.25rem 0.5rem;   /* compact spacing like Explorer lists */
  margin-bottom: 0.25rem;    /* tighter vertical rhythm */
  cursor: default;
}
.pane-right .win98-icon-list .icon-32 {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}
.splitter-10 {
  width: 0.625rem; /* 10px at 16px root; scales up on large screens */
  background: #C0C0C0;
  box-shadow:
    inset 1px 0 0 var(--btn-hilite),
    inset -1px 0 0 var(--btn-shadow);
}

/* Sidebar (tree) populated by sidebar.js */
.panel-title { font-size: 0.75rem; margin-bottom: 0.375rem; color: #000; }
.win98-tree { list-style: none; margin: 0; padding: 0; }
.win98-tree .tree-item {
  margin-bottom: 0.25rem;
}
.tree-item { margin-bottom: 0.375rem; }
.tree-link {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; color: #000;
  background: #FFFFFF; border: 1px solid #E0E0E0; text-decoration: none; font-size: 0.8125rem;
}
.tree-link:hover, .tree-link:focus { background: #F3F3F3; color: #000; outline: 1px dotted #000; text-decoration: none; }
.tree-sub { list-style: none; margin: 0.375rem 0 0 1.125rem; padding: 0; }
.tree-sub li { margin: 0.25rem 0; }
.tree-sublink { color: #000; text-decoration: none; font-size: 0.75rem; }
.tree-sublink:hover, .tree-sublink:focus { text-decoration: underline; outline: none; }

/* Mobile top nav */
.top-nav { margin-bottom: 0.75rem; }
.top-nav .nav-pills > li > a {
  display: inline-flex; align-items: center; gap: 0.5rem; background: #FFFFFF; color: #000;
  border: 1px solid #E0E0E0; margin: 0.25rem 0.125rem; padding: 0.375rem 0.5rem; font-size: 0.8125rem;
}
.top-nav .nav-pills > li > a:hover, .top-nav .nav-pills > li > a:focus { background: #F3F3F3; color: #000; outline: 1px dotted #000; }
.top-nav .nav-pills > li > a {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0.375rem 0.5rem;
}
.top-nav .nav-pills > li > a:hover,
.top-nav .nav-pills > li > a:focus {
  background: #F3F3F3;
  color: #000;
  outline: 1px dotted #000;
}
.top-nav .dropdown-menu { background: #FFFFFF; border: 1px solid #E0E0E0; }
.top-nav .dropdown-menu > li > a { color: #000; font-size: 0.75rem; }
.top-nav .dropdown-menu > li > a:hover { background: #F3F3F3; }

/* Right pane content */
.page-title { margin: 0.375rem 0 0.625rem; font-size: 1.25rem; color: #000; }
.win98-icon-list { list-style: none; padding: 0; margin: 0.5rem 0 1rem; }
.win98-icon-list li {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; margin-bottom: 0.375rem;
  background: #FFFFFF; color: #000; border: 1px solid #E0E0E0; font-size: 0.8125rem;
}

/* Carousel (white pane) */
.win98-carousel { border: 1px solid #E0E0E0; background: #FFFFFF; padding: 0.5rem; }
.win98-carousel .carousel-caption {
  background: rgba(255,255,255,0.95); color: #000; text-shadow: none; border: 1px solid #E0E0E0; padding: 0.375rem 0.5rem; font-size: 0.75rem;
}
.win98-carousel .carousel-indicators li { border: 1px solid #E0E0E0; background: #FFFFFF; }
.win98-carousel .carousel-indicators .active { background: #BDBDBD; }
.win98-carousel-control { color: #000; text-shadow: none; }
.win98-carousel-control:hover, .win98-carousel-control:focus { color: #000; }
.win98-carousel {
  background: #FFFFFF !important;
  border: 1px solid #E0E0E0; /* keep the subtle frame */
}
.win98-carousel .carousel-inner,
.win98-carousel .item {
  background: #FFFFFF !important;
}
/* Remove Bootstrap’s default dark overlay on controls */
.win98-carousel .left.carousel-control,
.win98-carousel .right.carousel-control {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none;
}
/* Keep caption and indicators consistent with white theme */
.win98-carousel .carousel-caption {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #E0E0E0;
  color: #000;
}
.win98-carousel .carousel-indicators li {
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
}
.win98-carousel .carousel-indicators .active {
  background: #BDBDBD;
}
/* Status bar */
.status-bar {
  display: flex; align-items: center; justify-content: space-between; height: 1.375rem; margin-top: 0.375rem; padding: 0 0.375rem;
  background: var(--btn-face); border-top: 1px solid var(--btn-hilite);
  box-shadow: inset 0 1px 0 var(--btn-hilite), inset 0 -1px 0 var(--btn-shadow);
  font-size: 0.75rem;
}

/* Resizer grip */
.resizer-grip {
  position: absolute; right: 0.375rem; bottom: 0.5rem; width: 0.75rem; height: 0.75rem;
  background:
    linear-gradient(135deg, transparent 0 0.375rem, var(--btn-shadow) 0.375rem 0.4375rem, transparent 0.4375rem),
    linear-gradient(135deg, transparent 0.25rem, var(--btn-hilite) 0.25rem 0.3125rem, transparent 0.3125rem),
    linear-gradient(135deg, transparent 0.5rem, var(--btn-hilite) 0.5rem 0.5625rem, transparent 0.5625rem);
  pointer-events: none;
}

/* Taskbar */
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 2.75rem;
  background: var(--btn-face); border-top: 1px solid var(--frame);
  box-shadow: inset 0 2px 0 var(--btn-hilite), inset 0 4px 0 #DFDFDF;
  display: flex; align-items: center; padding: 0.375rem; gap: 0.375rem; z-index: 1000;
}
.start-button {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem; height: 1.875rem; background: var(--btn-face); color: #000;
  border: 1px solid var(--frame); font-size: 0.8125rem; box-shadow: inset 1px 1px 0 var(--btn-hilite), inset -1px -1px 0 var(--btn-shadow);
  cursor: default;
}
.start-button:active { box-shadow: inset 1px 1px 0 var(--btn-shadow), inset -1px -1px 0 var(--btn-hilite); }
.start-icon { width: clamp(32px, 2rem, 3rem); height: clamp(32px, 2rem, 3rem); image-rendering: pixelated; }
.start-text { font-weight: bold; }
.task-button {
  min-width: 11.25rem; height: 1.875rem; display: inline-flex; align-items: center; padding: 0 0.625rem; background: var(--btn-face); color: #000;
  border: 1px solid var(--frame); box-shadow: inset 1px 1px 0 var(--btn-hilite), inset -1px -1px 0 var(--btn-shadow);
}
.task-title { font-size: 0.75rem; }
.taskbar-spacer { flex: 1 1 auto; }
.system-tray {
  height: 1.875rem; display: inline-flex; align-items: center; padding: 0 0.625rem; background: var(--btn-face); color: #000;
  border: 1px solid var(--frame); box-shadow: inset 1px 1px 0 var(--btn-hilite), inset -1px -1px 0 var(--btn-shadow);
}
.clock { font-size: 0.75rem; }

/* 3) Compact the taskbar (Start area) */
.taskbar {
  height: 2.5rem;           /* was 2.75rem */
  padding: 0.25rem;         /* slightly tighter */
}
/* Keep 32x32 Start icon; adjust button/tray heights to sit nicely within taskbar */
.start-button {
  height: 1.6rem;           /* button height inside the 2.5rem taskbar */
  padding: 0 0.6rem;
}
.task-button {
  height: 1.6rem;
  padding: 0 0.6rem;
}
.system-tray {
  height: 1.6rem;
  padding: 0 0.6rem;
}
.task-title { font-size: 0.7rem; }
/* Optional: reduce bottom padding under the desktop so the smaller taskbar spacing looks balanced */
.desktop-wallpaper {
  padding-bottom: 3rem;     /* was ~3.5rem; tweak if you want more/less breathing room */
}
Notes









/* Phones: hide splitter; left pane replaced by top nav */
@media (max-width: 767px) {
  .splitter-10 { display: none; }
  .win98-window { margin: 0.75rem auto 1.5rem; }
}