/* ==========================================================================
   BUMASS.STORE — chrome.css
   The widget kit. Windows, buttons, fields, tabs, progress, LEDs, icons.
   Nothing in here knows about page layout. Reuse freely.
   ========================================================================== */

/* ==========================================================================
   Window
   ========================================================================== */

.win {
  background: var(--face);
  box-shadow: var(--bevel-out);
  padding: 3px;
  min-width: 0;
}

.win__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 3px 3px 5px;
  background: linear-gradient(90deg, var(--cap-a-1) 0%, var(--cap-a-2) 100%);
  color: var(--cap-ink);
  --focus: #fff;
  user-select: none;
}

/* Inactive captions were white-on-grey in 1998 and unreadable. Dark ink. */
.win--idle > .win__bar {
  background: linear-gradient(90deg, var(--cap-i-1) 0%, var(--cap-i-2) 100%);
  color: #141414;
}
.win--idle > .win__bar .win__title { text-shadow: none; }

.win__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .45);
}

.win__ctrls {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
}

.win__btn {
  width: 20px;
  height: 18px;
  padding: 0;
  border: 0;
  background: var(--face);
  box-shadow: var(--bevel-thin-out), inset -2px -2px 0 var(--shadow-deep);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  --focus: #000;
}
.win__btn:active { box-shadow: var(--bevel-thin-in); transform: translate(1px, 1px); }
.win__btn[disabled] { color: var(--ink-dis); cursor: default; }

/* Authentic size is 20x18. Fingers disagree. */
@media (pointer: coarse) {
  .win__btn { width: 32px; height: 28px; font-size: 12px; }
}

.win__body {
  padding: var(--pad);
  background: var(--face);
}
.win__body--flush { padding: 0; }
.win__body--dark {
  background: var(--term-bg);
  color: var(--term-ink);
  font-family: var(--mono);
}

.win__status {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 3px;
  font-size: var(--fs-xs);
}
.win__status > * {
  padding: 2px 6px;
  box-shadow: var(--bevel-thin-in);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.win__status > :first-child { flex: 1 1 auto; min-width: 0; }

/* Shaded (minimised) — collapses to the title bar, content stays in the DOM. */
.win.is-shaded > :not(.win__bar) { display: none; }

/* Floating (dragged-out) state. Applied by js/windows.js. */
.win.is-floating {
  position: fixed;
  z-index: 400;
  margin: 0 !important;
  box-shadow: var(--bevel-out), 4px 4px 14px rgba(0, 0, 0, .45);
}
.win.is-floating > .win__bar { cursor: move; }
.win__placeholder { visibility: hidden; }

@media (hover: hover) and (pointer: fine) {
  .win[data-draggable] > .win__bar { cursor: grab; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 14px;
  border: 0;
  background: var(--face);
  box-shadow: var(--bevel-out);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}
.btn:visited { color: var(--ink); }
.btn:hover { background: var(--light); text-decoration: none; }
.btn:active,
.btn[aria-expanded="true"],
.btn[aria-pressed="true"] {
  box-shadow: var(--bevel-in);
  background: var(--face-dim);
  padding: 5px 13px 3px 15px;
}
.btn:focus-visible { outline-offset: -5px; }
.btn[disabled],
.btn[aria-disabled="true"] {
  color: var(--ink-dis);
  text-shadow: 1px 1px 0 var(--hilite);
  cursor: not-allowed;
}
.btn[disabled] { pointer-events: none; }
/* aria-disabled ones are inert <span>s — keep hover so the title can explain. */
.btn[aria-disabled="true"]:hover { background: var(--face); }

.btn--primary {
  background: var(--face);
  box-shadow: var(--bevel-out), inset 0 0 0 1px var(--ink);
  font-weight: 700;
}
.btn--primary:hover { background: #d8e8d8; }

.btn--danger { color: #6b0000; }
.btn--danger:hover { background: #e8d0d0; }

.btn--block { display: flex; width: 100%; }

.btn--lg { min-height: var(--tap); padding: 8px 20px; font-size: var(--fs-lg); }

/* Touch devices get bigger targets across the board. */
@media (pointer: coarse) {
  .btn { min-height: var(--tap); padding: 8px 16px; }
}

/* ==========================================================================
   Fields, wells, lists
   ========================================================================== */

.well {
  background: var(--well);
  box-shadow: var(--bevel-well);
  padding: var(--pad);
}
.well--dark {
  background: var(--term-bg);
  color: var(--term-ink);
  font-family: var(--mono);
  font-size: var(--fs-sm);
}
.well--paper { background: var(--well-alt); }

.field {
  width: 100%;
  padding: 4px 6px;
  border: 0;
  background: var(--well);
  box-shadow: var(--bevel-well);
  font-size: var(--fs-sm);
}
.field::placeholder { color: var(--ink-dis); }

.listbox {
  background: var(--well);
  box-shadow: var(--bevel-well);
  padding: 2px;
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.listbox li {
  padding: 3px 6px;
  font-size: var(--fs-sm);
  display: flex;
  gap: 6px;
  align-items: center;
}
.listbox li + li { border-top: 1px dotted #d5d5cc; }

/* ==========================================================================
   Tabs
   ========================================================================== */

.tabs {
  display: flex;
  gap: 2px;
  padding-left: 3px;
  margin-bottom: -2px;
  position: relative;
  z-index: 2;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  padding: 4px 12px 6px;
  background: var(--face);
  box-shadow:
    inset  1px  1px 0 var(--hilite),
    inset -1px  0   0 var(--shadow-deep),
    inset -2px  0   0 var(--shadow);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 3px 3px 0 0;
}
.tab[aria-current="page"] {
  background: var(--light);
  padding: 6px 14px 8px;
  margin-top: -2px;
}
.tab:hover { text-decoration: none; background: var(--light); }

/* ==========================================================================
   Progress + meters
   ========================================================================== */

.progress {
  height: 18px;
  padding: 2px;
  /* White trough, both for the sunken Win98 look and so the bar stands out. */
  background: var(--well);
  box-shadow: var(--bevel-well);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  width: 0%;
  background:
    repeating-linear-gradient(90deg,
      var(--cap-a-1) 0 8px,
      transparent   8px 10px);
  transition: width .35s steps(12);
}
.progress--go .progress__bar {
  background: repeating-linear-gradient(90deg, var(--go) 0 8px, transparent 8px 10px);
}
.progress--warn .progress__bar {
  background: repeating-linear-gradient(90deg, #b58900 0 8px, transparent 8px 10px);
}

/* Indeterminate "we have no idea" bar. */
.progress--busy .progress__bar {
  width: 34%;
  animation: slide-bar 2.4s linear infinite;
}
@keyframes slide-bar {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}

/* ==========================================================================
   LEDs / status lights
   ========================================================================== */

.led {
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  background: #2a2a2a;
  box-shadow: var(--bevel-thin-in), 0 0 0 1px rgba(0, 0, 0, .5);
  vertical-align: -1px;
}
.led--go   { background: var(--go-lit);    box-shadow: var(--bevel-thin-in), 0 0 5px var(--go); }
.led--warn { background: var(--warn);      box-shadow: var(--bevel-thin-in), 0 0 5px #a58200; }
.led--bad  { background: var(--danger-lit);box-shadow: var(--bevel-thin-in), 0 0 5px var(--danger); }
.led--off  { background: #3a3a3a; }
.led--blink { animation: led-blink 1.1s steps(1) infinite; }
@keyframes led-blink { 50% { opacity: .25; } }

/* ==========================================================================
   Badges, tags, stamps
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--face);
  box-shadow: var(--bevel-thin-out);
  white-space: nowrap;
}
.badge--ok   { background: #bfe6bf; }
.badge--warn { background: #f4e39a; }
.badge--bad  { background: #f0bcbc; }
.badge--dead { background: #cfcfcf; color: var(--ink-mute); }
.badge--hot  { background: var(--danger); color: #fff; }

.tag {
  display: inline-block;
  padding: 0 5px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  background: var(--well);
  box-shadow: var(--bevel-thin-in);
  color: var(--ink-soft);
}

/* Rubber-stamped diagonal text. */
.stamp {
  display: inline-block;
  padding: 2px 10px;
  border: 3px double var(--danger);
  color: var(--danger);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(-6deg);
  opacity: .85;
}

/* ==========================================================================
   Icons — pixel SVG data URIs. No image requests, no sprite fetch.
   ========================================================================== */

.ico {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: -3px;
  image-rendering: pixelated;
}
.ico--lg { width: 32px; height: 32px; }

.ico--folder  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M1 3h5l1 1h8v10H1z'/%3E%3Cpath fill='%23f0b429' d='M2 4h4l1 1h7v8H2z'/%3E%3Cpath fill='%23ffe08a' d='M2 4h4l1 1h7v1H2z'/%3E%3C/svg%3E"); }

.ico--exe     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M2 1h9l4 4v10H2z'/%3E%3Cpath fill='%23fff' d='M3 2h7v4h4v8H3z'/%3E%3Cpath fill='%23000080' d='M5 8h6v2H5z'/%3E%3Cpath fill='%23c00' d='M5 11h6v2H5z'/%3E%3C/svg%3E"); }

.ico--floppy  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M1 1h14v14H1z'/%3E%3Cpath fill='%23343434' d='M2 2h12v12H2z'/%3E%3Cpath fill='%23c0c0c0' d='M5 2h6v5H5zM4 9h8v5H4z'/%3E%3Cpath fill='%23000' d='M9 3h1v3H9zM5 10h6v1H5zM5 12h4v1H5z'/%3E%3C/svg%3E"); }

.ico--cd      { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.5' fill='%23000'/%3E%3Ccircle cx='8' cy='8' r='6.5' fill='%23a9bed6'/%3E%3Cpath fill='%23e6f0ff' d='M8 1.5A6.5 6.5 0 0 0 1.5 8h3A3.5 3.5 0 0 1 8 4.5z'/%3E%3Ccircle cx='8' cy='8' r='2.2' fill='%23fff'/%3E%3Ccircle cx='8' cy='8' r='1' fill='%23000'/%3E%3C/svg%3E"); }

.ico--warn    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 0l8 15H0z'/%3E%3Cpath fill='%23ffd400' d='M8 2.6L14 14H2z'/%3E%3Cpath fill='%23000' d='M7 6h2v4.5H7zM7 11.5h2V13H7z'/%3E%3C/svg%3E"); }

.ico--dl      { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M6 1h4v5h4l-6 7-6-7h4z'/%3E%3Cpath fill='%2312b312' d='M7 2h2v5h2.5L8 11.2 4.5 7H7z'/%3E%3Cpath fill='%23000' d='M2 14h12v2H2z'/%3E%3C/svg%3E"); }

.ico--globe   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.5' fill='%23000'/%3E%3Ccircle cx='8' cy='8' r='6.5' fill='%232e8bd6'/%3E%3Cpath fill='%23bfe6bf' d='M3 5h4l1 2-2 1 1 2-2 1-2-2zM10 3h3l1 3-2 2-2-1 1-2z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='.8' d='M1.5 8h13M8 1.5c2 2 2 11 0 13M8 1.5c-2 2-2 11 0 13'/%3E%3C/svg%3E"); }

.ico--term    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M0 1h16v14H0z'/%3E%3Cpath fill='%23111' d='M1 2h14v12H1z'/%3E%3Cpath fill='%232bff2b' d='M3 5h1v1H3zM4 6h1v1H4zM5 7h1v1H5zM4 8h1v1H4zM3 9h1v1H3zM7 9h5v1H7z'/%3E%3C/svg%3E"); }

.ico--game    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M2 4h12v8H2z'/%3E%3Cpath fill='%23888' d='M3 5h10v6H3z'/%3E%3Cpath fill='%23000' d='M5 6h1v3H5zM4 7h3v1H4z'/%3E%3Cpath fill='%23c00' d='M10 6h2v2h-2z'/%3E%3Cpath fill='%2312b312' d='M10 9h2v1h-2z'/%3E%3C/svg%3E"); }

.ico--skull   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M4 1h8v1h1v1h1v7h-1v1h-1v4h-1v-2H8v2H6v-2H5v2H4v-4H3v-1H2V3h1V2h1z'/%3E%3Cpath fill='%23f2f2f2' d='M5 3h6v1h1v5h-1v1H5V9H4V4h1z'/%3E%3Cpath fill='%23000' d='M5 5h2v3H5zM9 5h2v3H9zM7 8h2v2H7z'/%3E%3C/svg%3E"); }

.ico--trash   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M5 1h6v2h4v2H1V3h4z'/%3E%3Cpath fill='%23000' d='M3 6h10v9H3z'/%3E%3Cpath fill='%239a9a9a' d='M4 7h8v7H4z'/%3E%3Cpath fill='%23000' d='M6 8h1v5H6zM9 8h1v5H9z'/%3E%3C/svg%3E"); }

.ico--wrench  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M10.5.5a5 5 0 0 0-4.3 7.5L.6 13.6l1.8 1.8 5.6-5.6a5 5 0 0 0 6.4-6.3l-2.6 2.6-2-.5-.5-2z'/%3E%3Cpath fill='%23c9c9c9' d='M10.6 1.8a3.8 3.8 0 0 0-3 5.9L2.3 13l.9.9 5.3-5.3a3.8 3.8 0 0 0 5.2-4.3l-1.9 1.9-2.6-.7-.7-2.6z'/%3E%3C/svg%3E"); }

.ico--rat     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M2 6h2V4h2v2h3v1h2v1h2v1h1v3H3v-1H2V9H1V7h1z'/%3E%3Cpath fill='%23a0a0a0' d='M3 7h1V5h1v2h4v1h2v1h1v2H4v-1H3z'/%3E%3Cpath fill='%23000' d='M4 8h1v1H4zM13 11h3v1h-3z'/%3E%3Cpath fill='%23e2a0a0' d='M4 5h1v1H4z'/%3E%3C/svg%3E"); }

.ico--lock    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M4 6V4a4 4 0 0 1 8 0v2h1v9H3V6z'/%3E%3Cpath fill='%23f0b429' d='M4 7h8v7H4z'/%3E%3Cpath fill='%23000' d='M6 6V4a2 2 0 0 1 4 0v2H9V4a1 1 0 0 0-2 0v2z'/%3E%3Cpath fill='%23000' d='M7 9h2v3H7z'/%3E%3C/svg%3E"); }