/* MyTube — the 2001 shareware skin, for the app that opens inside the paper tool window.
   EVERYTHING here is scoped under .mt so none of it can reach the rest of the shell: this is
   a dark, bevelled, fixed-pitch world and the desk around it is warm paper. The two are
   supposed to look like different decades, because they are.

   No CSS variables from modern.css are used on purpose — if the paper palette is retuned,
   this window must not move with it. */

.mt {
  --mt-win:   #232323;
  --mt-title: #2e2e2e;
  --mt-face:  #3a3a3a;
  --mt-edge:  #4a4a4a;
  --mt-ink:   #d8d8d8;
  --mt-dim:   #8d8d8d;
  --mt-green: #5fd75f;
  --mt-amber: #ffb454;
  --mt-black: #0d0d0d;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.4;
}

.mt-win {
  background: var(--mt-win);
  border: 1px solid #101010;
  box-shadow: inset 1px 1px 0 #3d3d3d, inset -1px -1px 0 #141414;
  color: var(--mt-ink);
  display: flex;
  flex-direction: column;
  min-height: 320px;
}


/* --- the frame ----------------------------------------------------------------------------
   Deliberately plain. Earlier passes tried a procedural CRT here — first a 9-slice bezel, then
   a whole rendered device — and both fought the medium and lost. What is left is the shell's
   OWN paper panel, unmodified, with the app filling it: the tool window keeps exactly the
   frame Notes and Readme wear, and the only override is that MyTube is allowed to use the
   whole board instead of the 900px column. The experiments live on in design/tools/ if the
   device idea ever comes back, and the honest answer there is an authored render, not a
   generated one. */
/* A CRT case, kept deliberately simple: flat beige plastic, one bevel, and a
   dark ring around the screen. No art and no generator — earlier passes built a
   9-slice bezel and then a whole rendered device, and both cost far more than
   they returned. Those experiments are still in design/tools/ if the idea comes
   back, and the answer there is an authored render, not a generated one. */
#view-tool:has(.mt) {
  max-width: none;                 /* .center > * caps everything else at 900px */
  --case-pad: clamp(24px, 4.2vw, 56px);
  --collar: 13px;        /* how far the collar stands OUTSIDE the screen */
  --collar-lip: 5px;     /* and how far it laps back OVER the screen's edge */
  border: 0;
  border-image: none;
  border-radius: 10px;
  padding: var(--case-pad);
  background: #cdc0a0;
  box-shadow:
    inset 0 2px 0 rgba(255, 252, 240, 0.5),        /* light catches the top */
    inset 0 -3px 7px rgba(88, 76, 52, 0.42),       /* and dies at the bottom */
    inset 3px 0 6px rgba(255, 252, 240, 0.16),
    inset -3px 0 7px rgba(88, 76, 52, 0.3),
    0 6px 18px rgba(0, 0, 0, 0.34);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* the paper sheet's curvature wash belongs to paper, not to moulded plastic */
#view-tool:has(.mt)::after { content: none; }

/* The collar between glass and case, as a real element rather than box-shadow
   rings. Rings are flat by construction — every side gets the identical colour,
   so in a front view it reads as painted-on trim. A gradient gives it a lit
   upper-left and a fallen-away lower-right, which is what makes it read as
   rubber with a roll on it. It sits UNDER the app (z-index), so only the collar
   width shows around the screen. */
#view-tool:has(.mt)::before {
  content: '';
  position: absolute;
  /* symmetric on all four sides. The shadow-ring version carried a downward
     y-offset, which is exactly why the top edge was covered less than the rest. */
  inset: calc(var(--case-pad) - var(--collar));
  z-index: 2;                       /* ON TOP of the screen, like a real bezel */
  pointer-events: none;
  border-radius: calc(10px + var(--collar) + var(--collar-lip));
  /* A RING, not a filled panel: the padding area is the collar, and the middle
     is masked out so the app shows through. That is what lets it sit above the
     glass and lap over its edge — underneath it, the screen's own hard edge was
     still on show, which is the seam you were seeing. */
  padding: calc(var(--collar) + var(--collar-lip));
  /* FLAT. One colour the whole way round — a gradient made each side a different
     tone, which reads as lighting rather than as a single moulded part. */
  background: #1c1e21;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  /* only the hairline: a spread shadow here would be clipped by the mask, so the
     collar's cast shadow lives on .mt-win instead, where it can escape */
  box-shadow: 0 0 0 1px rgba(30, 25, 17, 0.6);
}
/* the app carries its own title bar and its own ✕, so the paper ones would double up */
#view-tool:has(.mt) > .window-bar,
#view-tool:has(.mt) > #tool-title { display: none; }

/* Fill the chain top to bottom. min-WIDTH:0 as well as min-height: a flex item defaults to
   min-width:auto and refuses to shrink below its content, and the player is a fixed 425px —
   which dragged the whole chain wider than a phone screen and clipped the video. */
#view-tool:has(.mt) > #tool-host { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; }
#view-tool:has(.mt) .mt { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; }
/* The tube: rounded, ringed by the dark surround every CRT has between its glass
   and its case, and sunk into the plastic. That ring is doing most of the work —
   without it a dark rectangle on beige is just a dark rectangle. */
#view-tool:has(.mt) .mt-win {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  border: 0;
  position: relative;
  z-index: 1;                      /* under the collar, which laps over its edge */
  /* matches the ring's INNER radius: outer (10 + collar + lip) minus the ring's
     own thickness (collar + lip) comes back to 10, so the two curves are
     concentric and the corners cannot poke out from under the collar */
  border-radius: 10px;
  /* Breathing room INSIDE the screen. Without it the app's chrome runs straight
     into the collar's lip; this is plain screen colour, so it reads as the app
     being centred on the glass rather than as another band. */
  padding: clamp(9px, 1.1vw, 16px);
  box-shadow:
    inset 0 0 0 1px #0a0a0a,
    inset 0 0 16px rgba(0, 0, 0, 0.85),        /* the collar casting onto the glass */
    0 0 20px 9px rgba(56, 46, 28, 0.3);        /* and the whole assembly into the case */
}
#view-tool:has(.mt) .mt-body { overflow-y: auto; min-width: 0; }

/* --- title bar ------------------------------------------------------------------------- */
.mt-titlebar {
  background: var(--mt-title);
  border-bottom: 1px solid #141414;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
}
.mt-tbtitle {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #cfcfcf;
}
.mt-tbbtns { display: flex; gap: 3px; }
.mt-tbbtns b, .mt-tbclose {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 13px; font-size: 9px; font-weight: 400;
  font-family: inherit; line-height: 1;
  background: var(--mt-face); color: #cfcfcf;
  border: 1px solid var(--mt-edge); border-bottom-color: #202020; border-right-color: #202020;
}
.mt-tbclose { cursor: pointer; padding: 0; }
.mt-tbclose:hover { background: #6d3b3b; color: #fff; }
.mt-tbclose:active { border-color: #202020 var(--mt-edge) var(--mt-edge) #202020; }
.mt-tbclose:focus-visible { outline: 1px dotted var(--mt-amber); outline-offset: 1px; }

/* --- menu strip ------------------------------------------------------------------------ */
.mt-menubar {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 5px 6px;
  background: #292929;
  border-bottom: 1px solid #141414;
}
.mt-menu {
  font: inherit; font-size: 11px;
  padding: 2px 10px;
  color: var(--mt-ink);
  background: var(--mt-face);
  border: 1px solid var(--mt-edge);
  border-bottom-color: #1d1d1d; border-right-color: #1d1d1d;
  cursor: pointer;
}
.mt-menu:hover { background: #454545; }
.mt-menu:active { border-color: #1d1d1d #4a4a4a #4a4a4a #1d1d1d; }
.mt-menu.on { background: #1b1b1b; color: var(--mt-amber); border-color: #141414 #4a4a4a #4a4a4a #141414; }
.mt-menu:focus-visible { outline: 1px dotted var(--mt-amber); outline-offset: 1px; }

/* --- body / status --------------------------------------------------------------------- */
.mt-body { padding: 10px; flex: 1 1 auto; min-width: 0; }
.mt-load { color: var(--mt-dim); font-size: 11px; margin: 6px 2px; }

.mt-statusbar {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 3px 7px;
  background: #262626;
  border-top: 1px solid #141414;
  box-shadow: inset 0 1px 0 #333;
  font-family: Consolas, "Courier New", monospace;
  font-size: 10px; color: var(--mt-dim);
}
.mt-stright { color: #6f6f6f; }

/* --- browse grid ----------------------------------------------------------------------- */
.mt-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.mt-cell {
  display: flex; flex-direction: column; gap: 2px;
  width: 138px; padding: 4px; text-align: left;
  font: inherit; color: var(--mt-ink);
  background: #272727; border: 1px solid #171717; cursor: pointer;
}
.mt-cell:hover { background: #303030; border-color: var(--mt-edge); }
.mt-cell:focus-visible { outline: 1px dotted var(--mt-amber); outline-offset: 1px; }
.mt-shot { position: relative; display: block; line-height: 0; }
.mt-thumb { display: block; width: 130px; height: 97px; border: 1px solid #101010; }
.mt-len {
  position: absolute; right: 2px; bottom: 2px;
  background: rgba(0, 0, 0, .82); color: #e6e6e6;
  font-family: Consolas, "Courier New", monospace; font-size: 9px;
  line-height: 1.5; padding: 0 3px;
}
.mt-ct { font-size: 11px; font-weight: 700; line-height: 1.25; margin-top: 3px; }
.mt-cmeta { font-size: 10px; color: var(--mt-dim); }

.mt-stars { font-size: 11px; letter-spacing: -1px; }
.mt-st { color: #4a4a4a; }
.mt-st.on { color: var(--mt-amber); }
.mt-votes { color: #6f6f6f; font-size: 9px; letter-spacing: 0; margin-left: 3px; }

/* --- watch ----------------------------------------------------------------------------- */
.mt-vtitle { font-size: 15px; margin: 0 0 8px; color: #ededed; font-weight: 700; }
.mt-player {
  width: 425px; max-width: 100%;
  background: #000; border: 1px solid #0d0d0d;
  box-shadow: inset 1px 1px 0 #333;
}
.mt-video { display: block; width: 100%; height: auto; background: #000; }
.mt-ctl {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; background: #1c1c1c; border-top: 1px solid #333;
}
.mt-pp {
  flex: 0 0 auto; width: 26px; height: 20px;
  font: inherit; font-size: 10px; line-height: 1;
  color: #e0e0e0; background: var(--mt-face);
  border: 1px solid var(--mt-edge); border-bottom-color: #141414; border-right-color: #141414;
  cursor: pointer;
}
.mt-pp:active { border-color: #141414 #4a4a4a #4a4a4a #141414; }
.mt-bar {
  flex: 1 1 auto; position: relative; height: 9px;
  background: #0b0b0b; border: 1px solid #3a3a3a; cursor: pointer;
}
.mt-buf { position: absolute; inset: 0 auto 0 0; width: 0; background: #3f3f3f; }
.mt-prog { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--mt-green); }
.mt-tc {
  flex: 0 0 auto; font-family: Consolas, "Courier New", monospace;
  font-size: 10px; color: #b6b6b6;
}
.mt-spk { flex: 0 0 auto; font-size: 8px; color: #8a8a8a; }
.mt-volbar {
  flex: 0 0 auto; width: 46px; height: 9px;
  background: #0b0b0b; border: 1px solid #3a3a3a; cursor: pointer;
}
.mt-volbar:focus-visible { outline: 1px dotted var(--mt-amber); outline-offset: 1px; }
.mt-volfill { height: 100%; background: #8fa0a8; width: 70%; }

.mt-infobar {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin: 8px 0 6px; padding: 4px 7px;
  background: #292929; border: 1px solid #171717;
  font-size: 11px; color: #c2c2c2;
}
.mt-desc { margin: 8px 0 4px; color: #c8c8c8; }
.mt-tags { margin: 0 0 10px; font-size: 11px; color: var(--mt-dim); }

/* The readout. Green on black, fixed pitch — the one panel that earns the skin. */
.mt-tech {
  background: var(--mt-black);
  border: 1px solid #313131;
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #2a2a2a;
  padding: 7px 9px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 11px;
  max-width: min(425px, 100%);
}
.mt-techhead {
  color: #3f8f3f; font-size: 9px; letter-spacing: .18em;
  border-bottom: 1px solid #1d3d1d; padding-bottom: 3px; margin-bottom: 5px;
}
.mt-techrow { display: flex; gap: 10px; }
.mt-techk { flex: 0 0 62px; color: #4d7a4d; }
.mt-techv { color: var(--mt-green); }

@media (max-width: 640px) {
  .mt-grid { gap: 8px; justify-content: center; }
  .mt-body { padding: 7px; }
}

/* Narrow: the 138px card leaves a single column with half the width dead, because
   the thumbnail is a fixed 130px and cannot shrink. Go to a ROW — thumb left, text
   right — which is both a better fit and what the period actually did on narrow
   layouts. Grid, so no markup changes: the shot spans all three text rows. */
@media (max-width: 560px) {
  /* No room for a control panel at phone width — the knobs would land around
     20px, well under a usable touch target. Drop it and go back to an even
     shell; the in-app "← Back" and the title bar's ✕ already cover the actions. */

  .mt-grid { gap: 9px; }
  .mt-cell {
    width: 100%;
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 9px;
    align-content: start;
    padding: 5px;
  }
  .mt-cell > .mt-shot { grid-row: 1 / span 3; grid-column: 1; }
  .mt-cell > .mt-ct { margin-top: 0; align-self: end; }
  .mt-ct, .mt-cmeta { overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: no-preference) {
  .mt-cell { transition: background 90ms linear; }
}