/* =========================================================================
   plumsy's kit — kit.plumsy.dev
   Built to look like the thing it came out of: grey panels, 1px bevels,
   LEDs, small dense type. No blur, no glow, no rounded pills.
   ========================================================================= */

:root {
  --desk:      #2c2c31;   /* behind the window */
  --frame:     #4a4a52;   /* title bar / toolbars */
  --frame-hi:  #55555f;
  --frame-lo:  #414148;
  --pane:      #3b3b42;   /* panel body */
  --pane-head: #464650;
  --well:      #212126;   /* lists */
  --well-2:    #17171b;   /* displays */
  --row-alt:   #26262c;
  --sel:       #5e4620;   /* selected row, dark orange */
  --sel-line:  #ff8000;

  --hi:        #6d6d78;   /* bevel light */
  --lo:        #212126;   /* bevel dark */
  --edge:      #1a1a1e;   /* outer borders */

  --txt:       #dcdce2;
  --txt-2:     #a0a0aa;
  --txt-3:     #77777f;

  --orange:    #ff8000;
  --orange-2:  #ffab4a;
  --led:       #7ee02c;
  --led-2:     #d8d81e;
  --red:       #e0503c;
  --violet:    #9a7ce0;

  /* folder swatches — kit.json names these */
  --fl-orange: #ff8000;
  --fl-red:    #e0503c;
  --fl-cyan:   #3fb8d8;
  --fl-violet: #9a7ce0;
  --fl-pink:   #e0629c;
  --fl-green:  #7ee02c;

  --ui:   Tahoma, Verdana, Geneva, "DejaVu Sans", sans-serif;
  --mono: Consolas, "Lucida Console", "DejaVu Sans Mono", monospace;

  --gut: 14px;
}

@media (min-width: 820px) { :root { --gut: 26px; } }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--desk);
  color: var(--txt);
  font: 12px/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
}

canvas, svg { display: block; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--orange); color: #201000; }

:focus-visible { outline: 1px dotted var(--orange-2); outline-offset: 1px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: fixed; top: 6px; left: 6px; z-index: 60;
  padding: 6px 12px; background: var(--orange); color: #201000;
  font-weight: bold; transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ----------------------------------------------------------------- page */

.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--gut) var(--gut) 30px;
}
@media (min-width: 820px) { .page { padding-top: 30px; } }

/* --------------------------------------------------------------- window */

.win {
  background: var(--pane);
  border: 1px solid var(--edge);
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo), 0 3px 0 rgba(0, 0, 0, 0.3);
}

.win__bar {
  display: flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 4px 0 8px;
  background: linear-gradient(var(--frame-hi), var(--frame-lo));
  border-bottom: 1px solid var(--edge);
}
.win__icon { width: 17px; height: 17px; color: var(--orange); flex: none; }
.win__icon svg { width: 100%; height: 100%; }
.win__title { margin: 0; font-size: 13px; font-weight: bold; }
.win__sep { width: 1px; height: 14px; background: var(--lo); box-shadow: 1px 0 0 #5c5c66; }
.win__sub { font-size: 11px; color: var(--txt-2); }
.win__sub i, .win__count i, .foot i, .status__keys i { color: var(--txt-3); font-style: normal; }
.win__spacer { flex: 1 1 auto; }
.win__count { font-size: 11px; color: var(--txt-2); white-space: nowrap; }
.win__count b { color: var(--txt); font-weight: normal; }

.win__btns { display: flex; gap: 2px; margin-left: 4px; }
.win__btns i {
  width: 17px; height: 15px;
  background: linear-gradient(#51515b, #43434b);
  box-shadow: inset 1px 1px 0 #6a6a75, inset -1px -1px 0 var(--lo);
}
.win__btns i::after {
  content: ''; display: block; margin: 6px auto 0; width: 7px; height: 1px; background: var(--txt-3);
}
@media (max-width: 700px) { .win__btns, .win__sub, .win__sep { display: none; } }

/* -------------------------------------------------------------- toolbar */

.win__tools {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 6px 8px;
  background: var(--frame);
  border-bottom: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 #5e5e68;
}

.tbtn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 9px; border: 1px solid var(--edge);
  background: linear-gradient(#50505a, #43434b);
  box-shadow: inset 1px 1px 0 #6c6c77, inset -1px -1px 0 #2b2b31;
  font-size: 11px; color: var(--txt); cursor: pointer;
}
.tbtn svg { width: 13px; height: 13px; }
.tbtn:hover { background: linear-gradient(#585863, #4a4a53); }
.tbtn:active,
.tbtn[aria-pressed='true'] {
  background: #3a3a41;
  box-shadow: inset 1px 1px 0 #222227, inset -1px -1px 0 #5a5a64;
}
.tbtn[aria-pressed='true'] { color: var(--orange-2); }
.tbtn:disabled { color: var(--txt-3); cursor: default; }
.tbtn:disabled:hover { background: linear-gradient(#50505a, #43434b); }

.tbtn--play { width: 34px; padding: 0; justify-content: center; color: var(--led); }
.tbtn--play:disabled { color: #4d5c3a; }
.tbtn--play .i-stop { display: none; }
.tbtn--play.is-playing { color: var(--orange); }
.tbtn--play.is-playing .i-play { display: none; }
.tbtn--play.is-playing .i-stop { display: block; }

.clock {
  display: flex; align-items: baseline; gap: 5px;
  height: 26px; padding: 0 9px;
  background: var(--well-2);
  border: 1px solid var(--edge);
  box-shadow: inset 1px 1px 0 #0e0e11, inset -1px -1px 0 #4e4e58;
  font: 12px/26px var(--mono);
}
.clock__now { color: var(--orange-2); }
.clock__of, .clock__len { color: var(--txt-3); }

.vol { display: flex; align-items: center; gap: 7px; }
.vol label { font-size: 11px; color: var(--txt-2); }

.vol input[type='range'] {
  -webkit-appearance: none; appearance: none;
  width: 84px; height: 26px; margin: 0; background: transparent; cursor: pointer;
}
.vol input::-webkit-slider-runnable-track {
  height: 6px; background: var(--well-2);
  box-shadow: inset 1px 1px 0 #0e0e11, inset -1px -1px 0 #4e4e58;
}
.vol input::-moz-range-track {
  height: 6px; background: var(--well-2);
  box-shadow: inset 1px 1px 0 #0e0e11, inset -1px -1px 0 #4e4e58;
}
.vol input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px; height: 20px; margin-top: -7px;
  background: linear-gradient(#5c5c67, #45454d);
  border: 1px solid var(--edge);
  box-shadow: inset 1px 1px 0 #75757f, inset -1px -1px 0 #2b2b31;
}
.vol input::-moz-range-thumb {
  width: 11px; height: 20px; border-radius: 0;
  background: linear-gradient(#5c5c67, #45454d);
  border: 1px solid var(--edge);
  box-shadow: inset 1px 1px 0 #75757f, inset -1px -1px 0 #2b2b31;
}

.led {
  display: flex; flex-direction: column; gap: 2px;
  width: 42px; padding: 3px;
  background: var(--well-2);
  border: 1px solid var(--edge);
  box-shadow: inset 1px 1px 0 #0e0e11;
}
.led i {
  display: block; height: 4px; width: 0%;
  background: linear-gradient(90deg, var(--led) 0 62%, var(--led-2) 62% 84%, var(--red) 84% 100%);
  background-size: 34px 100%;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 4px);
  mask-image: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 4px);
}
@media (max-width: 560px) { .clock__of, .clock__len, .led { display: none; } }

/* ------------------------------------------------------------- download */

.dl {
  display: inline-flex; align-items: center; gap: 7px;
  height: 26px; padding: 0 11px;
  background: linear-gradient(#ff9a28, #e06800);
  border: 1px solid #7a3a00;
  box-shadow: inset 1px 1px 0 #ffc37a, inset -1px -1px 0 #a24c00;
  color: #2a1200; font-size: 11px; font-weight: bold; cursor: pointer;
}
.dl svg { width: 13px; height: 13px; }
.dl:hover { background: linear-gradient(#ffab45, #f07400); }
.dl:active {
  background: #d96400;
  box-shadow: inset 1px 1px 0 #9a4800, inset -1px -1px 0 #ffb765;
}
.dl em {
  font-style: normal; font-family: var(--mono); font-size: 10px;
  padding: 1px 4px; background: rgba(0, 0, 0, 0.22);
}
.dl--big { height: 34px; padding: 0 16px; font-size: 13px; }
.dl--big svg { width: 15px; height: 15px; }

/* ------------------------------------------------------------- win body */

.win__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 820px) {
  .win__body { grid-template-columns: 236px minmax(0, 1fr); height: clamp(380px, 58vh, 560px); }
}

.pane__head {
  display: flex; align-items: center; gap: 8px;
  height: 22px; padding: 0 8px;
  background: var(--pane-head);
  border-bottom: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 #575761;
  font-size: 11px; color: var(--txt-2);
}
.pane__head-right { margin-left: auto; color: var(--txt-3); font-family: var(--mono); font-size: 10px; }

/* -------------------------------------------------------------- browser */

.browser { display: flex; flex-direction: column; min-height: 0; }
@media (min-width: 820px) { .browser { border-right: 1px solid var(--edge); } }

/* stacked: preview on top so tapping a file changes something you can see,
   list underneath, both on screen at once */
@media (max-width: 819px) {
  .preview { order: 1; }
  .browser { order: 2; border-top: 1px solid var(--edge); }
  .display { min-height: 140px; }
}

.browser__scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  background: var(--well);
  box-shadow: inset 1px 1px 0 var(--lo);
  scrollbar-width: thin;
  scrollbar-color: #5a5a64 var(--well-2);
}
@media (max-width: 819px) { .browser__scroll { max-height: 34vh; min-height: 180px; } }

.browser__scroll::-webkit-scrollbar { width: 13px; }
.browser__scroll::-webkit-scrollbar-track { background: var(--well-2); }
.browser__scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #5c5c67, #46464f);
  border: 1px solid var(--edge);
  box-shadow: inset 1px 1px 0 #74747e;
}

.tree { list-style: none; margin: 0; padding: 2px 0 8px; }
.tree ul { list-style: none; margin: 0; padding: 0; }

.folder {
  display: flex; align-items: center; gap: 5px; width: 100%;
  height: 22px; padding: 0 8px 0 4px;
  background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--txt); font-size: 12px;
}
.folder:hover { background: #2b2b32; }
.folder__arrow { width: 9px; color: var(--txt-3); font-size: 9px; line-height: 1; }
.folder__swatch { width: 8px; height: 8px; flex: none; background: var(--c, var(--orange)); }
.folder__name { font-weight: bold; }
.folder__count { margin-left: auto; color: var(--txt-3); font-family: var(--mono); font-size: 10px; }

.file {
  display: flex; align-items: center; gap: 6px; width: 100%;
  height: 21px; padding: 0 8px 0 20px;
  background: none; border: 0; border-left: 2px solid transparent;
  cursor: pointer; text-align: left; color: var(--txt-2); font-size: 12px;
}
.tree ul li:nth-child(even) .file { background: var(--row-alt); }
.file:hover { background: #30303a; color: var(--txt); }
.file[aria-current='true'] {
  background: var(--sel); border-left-color: var(--sel-line); color: #fff;
}
.file__kind {
  font-family: var(--mono); font-size: 9px; color: var(--txt-3);
  width: 24px; flex: none; text-align: center; letter-spacing: 0.02em;
}
.file[aria-current='true'] .file__kind { color: var(--orange-2); }
.file__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file__name i { font-style: normal; color: var(--txt-3); }
.file:hover .file__name i { color: var(--txt-2); }
.file[aria-current='true'] .file__name i { color: #e8c89a; }
.file__len { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--txt-3); }
.file[aria-current='true'] .file__len { color: #e8c89a; }
.file__led {
  width: 5px; height: 5px; flex: none; background: #33333a;
  box-shadow: inset 1px 1px 0 #1a1a1e;
}
.file.is-playing .file__led { background: var(--led); box-shadow: none; }

/* -------------------------------------------------------------- preview */

.preview { display: flex; flex-direction: column; min-height: 0; }

.display {
  position: relative; flex: 1 1 auto; min-height: 168px;
  margin: 8px; background: var(--well-2);
  border: 1px solid var(--edge);
  box-shadow: inset 1px 1px 0 #0e0e11, inset -1px -1px 0 #4e4e58;
}
.display.has-file { cursor: crosshair; }
.display canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.display__empty {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-items: center;
  color: var(--txt-3); font-size: 11px; pointer-events: none;
}
.display.has-file .display__empty { display: none; }

.specs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; margin: 0 8px 8px; padding: 1px;
  background: var(--pane);
  border: 1px solid var(--edge);
  outline: 1px solid var(--edge); outline-offset: -1px;
}
@media (min-width: 560px) { .specs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .specs { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.specs > div { background: var(--pane); padding: 5px 8px 6px; min-width: 0; }
.specs dt { font-size: 10px; color: var(--txt-3); }
.specs dd {
  margin: 1px 0 0; font-family: var(--mono); font-size: 12px; color: var(--txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.specs dd.is-accent { color: var(--orange-2); }
.specs dd.is-dim { color: var(--txt-3); }

/* --------------------------------------------------------------- status */

.win__status {
  display: flex; align-items: center; gap: 8px;
  height: 24px; padding: 0 8px;
  background: var(--frame);
  border-top: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 #5e5e68;
  font-size: 11px; color: var(--txt-2);
}
.status__keys { color: var(--txt-3); }
@media (max-width: 700px) { .status__keys { display: none; } }

kbd {
  display: inline-block; min-width: 15px; padding: 0 4px; margin: 0 1px;
  background: #45454e; border: 1px solid var(--edge);
  box-shadow: inset 1px 1px 0 #62626c, inset -1px -1px 0 #2b2b31;
  font: 10px/15px var(--mono); color: var(--txt-2); text-align: center;
}

/* --------------------------------------------------------------- strips */

.strips {
  display: grid; gap: 12px; margin-top: 12px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 820px) { .strips { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }

.strip {
  background: var(--pane);
  border: 1px solid var(--edge);
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo), 0 3px 0 rgba(0, 0, 0, 0.3);
  display: flex; flex-direction: column;
}
.strip__head {
  height: 22px; padding: 0 8px;
  background: var(--pane-head);
  border-bottom: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 #575761;
  font: 11px/22px var(--ui); color: var(--txt-2);
}
.strip__body { padding: 12px; }
.strip__body p { margin: 0 0 12px; color: var(--txt-2); max-width: 56ch; }
.strip__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.linkcopy {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font-size: 11px; color: var(--txt-3); border-bottom: 1px dotted var(--txt-3);
}
.linkcopy:hover { color: var(--orange-2); border-bottom-color: var(--orange-2); }

.breakdown { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 11px; }
.breakdown td { padding: 4px 6px; border-top: 1px solid #33333a; }
.breakdown td:first-child { padding-left: 0; }
.breakdown td:last-child { text-align: right; padding-right: 0; color: var(--txt-3); font-family: var(--mono); }
.breakdown .bd__swatch { display: inline-block; width: 8px; height: 8px; margin-right: 7px; vertical-align: -1px; }
.breakdown .bd__n { font-family: var(--mono); color: var(--txt-2); }

.strip--readme pre {
  margin: 0; padding: 14px; flex: 1 1 auto;
  background: var(--well-2);
  box-shadow: inset 1px 1px 0 #0e0e11;
  font: 12px/1.85 var(--mono); color: #b8b8c0;
  white-space: pre-wrap; word-break: break-word;
}
.strip--readme .k { color: var(--orange-2); }

/* ----------------------------------------------------------------- foot */

.foot {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-top: 18px; font-size: 11px; color: var(--txt-3);
}

/* ---------------------------------------------------------------- toast */

.toast {
  position: fixed; left: 50%; bottom: 18px; z-index: 50;
  transform: translateX(-50%);
  padding: 7px 14px;
  background: var(--frame);
  border: 1px solid var(--edge);
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo), 0 3px 0 rgba(0, 0, 0, 0.3);
  font-size: 11px;
  visibility: hidden;
}
.toast.is-on { visibility: visible; }