/* Native sound player, replacing musicplayer.swf.
 *
 * Matches what the Flash button looked like: a round button on a transparent
 * background — not white — with no drop shadow. Sized from --wt-player-size,
 * which the helper sets from the dimensions each call site passed to the Flash
 * object (12px for the tone lists, 36px for the v3 variant).
 *
 * Four states, the same four the movie had: idle, loading, playing, error.
 */

.wt-player {
  --wt-player-size: 12px;
  --wt-player-bg: #4685c4;
  --wt-player-fg: #ffffff;

  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}

.wt-player audio {
  display: none;
}

.wt-play-button {
  display: block;
  width: var(--wt-player-size);
  height: var(--wt-player-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--wt-player-bg);
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
  /* Transparent surround, and deliberately no box-shadow. */
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.wt-play-button:focus-visible {
  outline: 2px solid var(--wt-player-fg);
  outline-offset: 1px;
}

/* Idle: a play triangle, drawn rather than imaged so it scales with the
 * button. Nudged right by a hair because a triangle's optical centre sits
 * left of its bounding box. */
.wt-idle .wt-play-button,
.wt-error .wt-play-button {
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.4 3.1 L9 6 L4.4 8.9 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 62% 62%;
}

/* Playing: a stop square. */
.wt-playing .wt-play-button {
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='4' y='4' width='4' height='4' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 62% 62%;
}

/* Loading: the eight-spoke throbber the movie used, spun with a step timing
 * function so the spokes tick round rather than sweep. */
.wt-loading .wt-play-button {
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23ffffff'%3E%3Crect x='7.2' y='1' width='1.6' height='4' rx='.8' opacity='1'/%3E%3Crect x='7.2' y='1' width='1.6' height='4' rx='.8' opacity='.85' transform='rotate(45 8 8)'/%3E%3Crect x='7.2' y='1' width='1.6' height='4' rx='.8' opacity='.7' transform='rotate(90 8 8)'/%3E%3Crect x='7.2' y='1' width='1.6' height='4' rx='.8' opacity='.55' transform='rotate(135 8 8)'/%3E%3Crect x='7.2' y='1' width='1.6' height='4' rx='.8' opacity='.4' transform='rotate(180 8 8)'/%3E%3Crect x='7.2' y='1' width='1.6' height='4' rx='.8' opacity='.3' transform='rotate(225 8 8)'/%3E%3Crect x='7.2' y='1' width='1.6' height='4' rx='.8' opacity='.2' transform='rotate(270 8 8)'/%3E%3Crect x='7.2' y='1' width='1.6' height='4' rx='.8' opacity='.12' transform='rotate(315 8 8)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 88% 88%;
  animation: wt-player-spin 800ms steps(8) infinite;
}

@keyframes wt-player-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .wt-loading .wt-play-button { animation-duration: 2400ms; }
}

/* Error: the same play triangle, dimmed, so a failed sound still looks like
 * something you can retry rather than a dead control. */
.wt-error .wt-play-button {
  opacity: 0.45;
}

/* Phone widget, replacing fone_mini_site.swf.
 *
 * Sizes and colours are taken from the movie's own shape records, not from
 * looking at a rendering. Ruffle draws through WebGL without
 * preserveDrawingBuffer, so its canvas reads back blank and cannot be sampled;
 * the DefineShape tags carry RGBA fills and bounds in twips, which give exact
 * numbers:
 *
 *   panel        180 x 261   #242424
 *   status bar   174 x 35    #000099, text #0099FF
 *   Call/Hangup   90 x 22    face #a0a0a0, edge #767676
 *   select bars  174 x 14.5  #767676 on #3c3c3c
 *   keypad cell   58 x 35    grid #3c3c3c
 *
 * 35 + 22 + 15 + (4 x 35) + 11 + 15 + 14 comes to 262, which is the movie's
 * stage height, so the bands are laid out at their true heights rather than
 * flexed to fit.
 *
 * One deliberate departure, at the owner's request: the selectors use a small
 * inline caret on the same grey as the field, rather than the movie's large
 * square dropdown button.
 */

.wt-phone {
  width: 180px;
  height: 262px;
  box-sizing: border-box;
  padding: 3px;
  background: #242424;
  color: #a0a0a0;
  font-size: 10px;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wt-phone-panel {
  flex: none;
  height: 35px;
  box-sizing: border-box;
  background: #000099;
  border: 1px solid #767676;
  padding: 1px 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}
.wt-phone-status {
  color: #0099ff;
  font-size: 10px;
  line-height: 1.15;
  max-height: 22px;
  overflow: hidden;
}
/* The editable line inside the blue panel, not a box hanging off the bottom. */
.wt-phone-number {
  width: 100%;
  box-sizing: border-box;
  height: 14px;
  font: inherit;
  font-size: 10px;
  color: #0099ff;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #3a3ac0;
  padding: 0;
  outline: none;
}
.wt-phone-number::placeholder { color: #3a6fd0; }
.wt-phone-status-connected { color: #00ff00; }
.wt-phone-status-error     { color: #ffcc00; }
.wt-phone-status-busy      { opacity: .85; }

.wt-phone-actions { display: flex; gap: 2px; flex: none; }
.wt-phone-call,
.wt-phone-hangup {
  flex: 1;
  height: 22px;
  box-sizing: border-box;
  font: inherit;
  font-weight: bold;
  font-size: 11px;
  color: #000000;
  background: #a0a0a0;
  border: 1px solid #767676;
  cursor: pointer;
}
.wt-phone-call:hover:not(:disabled),
.wt-phone-hangup:hover:not(:disabled) { background: #ffffff; }
.wt-phone-call:disabled,
.wt-phone-hangup:disabled { color: #3c3c3c; background: #767676; cursor: default; }
.wt-ico {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 3px;
  vertical-align: -2px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.wt-ico-call {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 2.2 6 2l1.2 3-1.5 1.2a9 9 0 0 0 4.1 4.1L11 8.8l3 1.2-.2 1.8c-.1.7-.8 1.2-1.5 1.1A11.5 11.5 0 0 1 3.1 3.7c-.1-.7.4-1.4 1.1-1.5z' fill='%23000000'/%3E%3C/svg%3E");
}
.wt-ico-hangup {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg transform='rotate(135 8 8)'%3E%3Cpath d='M4.2 2.2 6 2l1.2 3-1.5 1.2a9 9 0 0 0 4.1 4.1L11 8.8l3 1.2-.2 1.8c-.1.7-.8 1.2-1.5 1.1A11.5 11.5 0 0 1 3.1 3.7c-.1-.7.4-1.4 1.1-1.5z' fill='%23000000'/%3E%3C/g%3E%3C/svg%3E");
}

.wt-phone-bar { display: flex; gap: 2px; align-items: stretch; flex: none; height: 15px; }
.wt-phone-bar select {
  flex: 1;
  min-width: 0;
  height: 15px;
  box-sizing: border-box;
  font: inherit;
  font-size: 10px;
  color: #000000;
  background-color: #767676;
  border: 1px solid #3c3c3c;
  padding: 0 13px 0 3px;
  -webkit-appearance: none;
  appearance: none;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 3px center;
  background-size: 7px 5px;
}

.wt-phone-mute {
  width: 15px;
  height: 15px;
  flex: none;
  padding: 0;
  border: 1px solid #3c3c3c;
  border-radius: 50%;
  background: #a0a0a0
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 6h3l4-3.5v11L5 10H2z' fill='%23000000'/%3E%3Cpath d='M11 5.5a4 4 0 0 1 0 5M12.8 3.6a6.5 6.5 0 0 1 0 8.8' stroke='%23000000' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 11px 11px no-repeat;
  cursor: pointer;
}
/* Muted: the same speaker with a cross, the conventional pairing. */
.wt-phone-mute.wt-phone-muted {
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 6h3l4-3.5v11L5 10H2z' fill='%23000000'/%3E%3Cpath d='M11 5.5l4 5M15 5.5l-4 5' stroke='%23000000' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Four rows of 35px cells, 58px wide, separated by #3c3c3c lines. */
.wt-phone-keys {
  flex: none;
  height: 140px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 35px);
  background: #3c3c3c;
  gap: 1px;
  border: 1px solid #3c3c3c;
  box-sizing: border-box;
}
.wt-phone-key {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 1px 3px;
  border: 0;
  background: #242424;
  color: #767676;
  cursor: pointer;
  overflow: hidden;
  font: inherit;
  text-align: left;
}
.wt-phone-key:hover:not(:disabled) { background: #333333; }
.wt-phone-key:active:not(:disabled) { background: #494949; }
.wt-phone-key:disabled { cursor: default; color: #3c3c3c; }

.wt-phone-digit {
  font-family: "Courier New", monospace;
  font-size: 11px;
  line-height: 1.1;
  color: #767676;
}
.wt-phone-tone {
  /* Fills the cell, otherwise the box shrinks to the text and sits at the
     left however the text inside it is aligned. */
  width: 100%;
  text-align: center;
  font-size: 8px;
  line-height: 1.1;
  color: #a0a0a0;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.wt-phone-by {
  flex: none;
  height: 11px;
  box-sizing: border-box;
  background: #767676;
  color: #ffffff;
  text-align: right;
  padding: 0 4px;
  font-size: 9px;
  line-height: 11px;
}

.wt-phone-foot {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  font-size: 9px;
}
.wt-phone-cid { display: flex; align-items: center; gap: 3px; cursor: pointer; }
.wt-phone-cid-box { width: 9px; height: 9px; margin: 0; }
.wt-phone-help { color: #767676; text-decoration: underline; }


/* ---------------------------------------------------------------------------
   Full-screen phone, used by the iphone interface.

   The v3 widget is a fixed 180x262 box because the Flash movie it replaces was
   that size. On a phone the widget is the whole page, so this variant scales to
   the viewport instead: the keypad takes the space left over once the panel,
   buttons and selectors have had theirs, and the keys grow with it.
   --------------------------------------------------------------------------- */
.wt-phone-full {
  width: 100%;
  max-width: 100%;
  height: auto;
  /* The viewport minus the page's own chrome. 100svh on its own made the
     widget exactly one screen tall while it starts below the nav bar, so the
     scene selector sat just under the fold. Measured: 38px nav, 51px footer. */
  min-height: calc(100svh - 92px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Both numbers on screen at once, labelled as the iphone page labelled them. */
.wt-phone-panel-both { height: auto; padding: 6px 8px; gap: 4px; }
.wt-phone-panel-both .wt-phone-status { max-height: none; font-size: 13px; }
.wt-phone-row { display: flex; align-items: center; gap: 6px; }
.wt-phone-row label {
  flex: none;
  min-width: 74px;
  text-align: right;
  color: #0099ff;
  font-size: 13px;
}
.wt-phone-row .wt-phone-number {
  flex: 1;
  min-width: 0;
  height: 22px;
  font-size: 15px;   /* 16px or above stops iOS zooming the page on focus */
  border-bottom: 1px solid #3a3ac0;
}

.wt-phone-full .wt-phone-actions { flex: none; }
.wt-phone-full .wt-phone-call,
.wt-phone-full .wt-phone-hangup { height: 40px; font-size: 15px; }
.wt-phone-full .wt-phone-padselect,
.wt-phone-full .wt-phone-sceneselect { height: 30px; font-size: 14px; }
.wt-phone-full .wt-phone-bar { height: auto; }

/* The keypad takes whatever vertical space is left. The base rule pins the
   rows to the movie's 35px cell, and grid-auto-rows does not override an
   explicit template, so the rows have to be restated to share the height. */
.wt-phone-full .wt-phone-keys {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  grid-template-rows: repeat(4, minmax(0, 1fr));
}
.wt-phone-full .wt-phone-key { height: auto; padding: 4px 6px; }
.wt-phone-full .wt-phone-digit { font-size: 16px; }
.wt-phone-full .wt-phone-tone { font-size: 12px; -webkit-line-clamp: 3; }
.wt-phone-full .wt-phone-by { font-size: 12px; height: auto; }
.wt-phone-full .wt-phone-foot { font-size: 13px; }
.wt-phone-full .wt-phone-mute { width: 30px; height: 30px; }


/* ---------------------------------------------------------------------------
   Sound editor, replacing soundeditor.swf.

   Sizes are the movie's own, read from its shape records rather than chosen:
   the frame is 445x140, the waveform panel 434x98, the toolbar strip 445x35 and
   the buttons 41x29. So are the accents - #68AE00 markers and an #FF9900
   crossfade accent.

   The surfaces are not. The movie was #E3E3E3 and white because it was a Flash
   object on a page that had no say in it; embedded in the v3 panel it read as a
   white cut-out, and the eye had to cross a hard light/dark edge to get from
   the sound to the form under it. The surfaces now use the v3 palette the rest
   of the panel is built from - #242424 ground, #333333 raised, #666666 borders,
   #CCCCCC text - so the toolbar, the waveform and the form below are one
   object. Layout, proportions, icons and accents are untouched.

   Canvas colours are variables because the waveform is painted in JavaScript;
   keeping them here means the whole palette is in one file.
   --------------------------------------------------------------------------- */
.wt-se {
  box-sizing: border-box;
  width: 445px;
  max-width: 100%;
  background: #333333;
  border: 1px solid #666666;
  padding: 3px;
  color: #cccccc;
  font-size: 11px;
  font-family: 'Lucida Grande', Arial, Helvetica, Verdana, sans-serif;

  --wt-se-wave-ink: #68ae00;
  --wt-se-wave-grid: #4a4a4a;
}
.wt-se-wave {
  position: relative;
  height: 98px;
  background: #242424;
  border: 1px solid #666666;
  cursor: crosshair;
  touch-action: none;   /* pointer drag selects, rather than scrolling */
  overflow: hidden;
}
.wt-se-canvas { display: block; width: 100%; height: 100%; }

/* The movie marked a selection with full-height green bars. */
.wt-se-sel {
  position: absolute;
  top: 0;
  bottom: 0;
  display: none;
  background: rgba(104, 174, 0, 0.18);
  border-left: 2px solid #68ae00;
  border-right: 2px solid #68ae00;
  pointer-events: none;
}

.wt-se-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 35px;
  margin-top: 3px;
  padding: 0 2px;
  background: #2b2b2b;
  border: 1px solid #666666;
  /* No wrapping: ten buttons plus separators exceed the movie's 445px frame,
     and a wrapped row sat on top of the form underneath. They shrink to fit
     instead, and the row scrolls if it is ever narrower still. */
  flex-wrap: nowrap;
  overflow-x: auto;
}
.wt-se-gap { flex: 0 0 8px; }
.wt-se-bar button {
  font: inherit;
  font-size: 11px;
  min-width: 41px;
  height: 29px;
  padding: 0 7px;
  color: #cccccc;
  background: #3d3d3d;
  border: 1px solid #666666;
  cursor: pointer;
}
.wt-se-bar button:hover:not(:disabled) { background: #4a4a4a; border-color: #868686; }
/* Disabled has to be obviously dead rather than merely dimmer - undo and redo
   sit disabled most of the time, and at low contrast they read as available. */
.wt-se-bar button:disabled {
  color: #5c5c5c;
  background: #2b2b2b;
  border-color: #444444;
  cursor: default;
}
.wt-se-status { margin-top: 3px; min-height: 14px; color: #999999; }
/* Stays up for as long as an edit is uncommitted, so the difference between
   what the waveform shows and what the stored sound is cannot pass unnoticed. */
.wt-se-pending {
  margin-top: 3px;
  padding: 3px 5px;
  color: #ffb340;
  background: #2b2b2b;
  border: 1px solid #ff9900;
  font-size: 11px;
}
.wt-se-pending[hidden] { display: none; }
.wt-se-status.wt-se-busy  { color: #68ae00; }
.wt-se-status.wt-se-error { color: #ff9900; }

/* Icon buttons, fade bars and the movie's two dialogs. */
.wt-se-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 41px;
  width: 41px;
  min-width: 30px;
  height: 29px;
  padding: 0;
  color: #cccccc;
}
.wt-se-bar button svg { pointer-events: none; }

/* The bar the movie drew at each end to show the blended region. */
.wt-se-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  display: none;
  background: rgba(255, 153, 0, 0.20);
  pointer-events: none;
}
.wt-se-fade-left  { border-right: 2px solid #ff9900; }
.wt-se-fade-right { border-left: 2px solid #ff9900; }

.wt-se-dialog,
.wt-se-crossfade-panel {
  position: relative;
  z-index: 1;
  margin-top: 3px;
  padding: 5px 6px;
  background: #2b2b2b;
  border: 1px solid #666666;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.wt-se-dialog[hidden],
.wt-se-crossfade-panel[hidden] { display: none; }
.wt-se-dialog p { margin: 0 6px 0 0; }
.wt-se-dialog button,
.wt-se-crossfade-panel button {
  font: inherit;
  font-size: 11px;
  height: 22px;
  padding: 0 8px;
  width: auto;
  min-width: 0;
  background: #3d3d3d;
  border: 1px solid #666666;
  cursor: pointer;
}
.wt-se-dialog input[type="text"],
.wt-se-dialog select {
  font: inherit;
  font-size: 11px;
  color: #cccccc;
  background: #242424;
  border: 1px solid #666666;
  padding: 2px 3px;
}
.wt-se-dialog input[type="text"]:focus,
.wt-se-dialog select:focus { border-color: #68ae00; outline: none; }
.wt-se-fade-value { color: #68ae00; min-width: 34px; }

/* The Flash object was a fixed 381x120 on v3 (455x150 on v2), so #soundeditor
   was pinned to those numbers with z-index 1000000 to sit over the page. The
   native editor is taller than that and grows further when the crossfade or
   save panels open, so the fixed height made it overlap the form beneath and
   the z-index made it paint on top. It sizes to its content instead.

   This stylesheet is linked after v3/main.css, so the ID selector wins. */
#soundeditor {
  position: static;
  height: auto;
  width: auto;
  max-width: 100%;
  z-index: auto;
}

/* ---------------------------------------------------------------------------
   The edit panel around the sound editor (recordings, tones, scenes - they all
   render .edit_sound).

   The fields were inheriting whatever the browser felt like: the name field
   came out white on dark text, the description box mid-grey on white text, and
   Cancel was default link blue. Three different treatments for one form, next
   to a fourth for the editor. They use the panel's own palette here - #242424
   recessed for anything you type into, #333333 raised for anything you press,
   #666666 borders throughout - so the form reads as one surface with the editor
   above it. Loaded after v3/main.css, so the original stylesheet is untouched.
   --------------------------------------------------------------------------- */
.edit_sound input[type="text"],
.edit_sound input[type="password"],
.edit_sound textarea {
  box-sizing: border-box;
  font: inherit;
  font-size: 11px;
  color: #cccccc;
  background: #242424;
  border: 1px solid #666666;
  padding: 3px 4px;
}
.edit_sound textarea { width: 100%; max-width: 300px; resize: vertical; }
.edit_sound input[type="text"]:focus,
.edit_sound textarea:focus { border-color: #68ae00; outline: none; }

.edit_sound input[type="submit"] {
  font: inherit;
  font-size: 11px;
  color: #cccccc;
  background: #3d3d3d;
  border: 1px solid #666666;
  padding: 3px 12px;
  cursor: pointer;
}
.edit_sound input[type="submit"]:hover { background: #4a4a4a; border-color: #868686; }
.edit_sound input[type="submit"]:disabled {
  color: #5c5c5c;
  background: #2b2b2b;
  border-color: #444444;
  cursor: default;
}

/* Cancel sits beside Submit, so link blue made it the loudest thing in the
   panel while being the thing you least often want. */
.edit_sound a { color: #999999; text-decoration: underline; }
.edit_sound a:hover { color: #cccccc; }

.edit_sound .instruction,
.edit_sound .prompt { color: #cccccc; }
.edit_sound .prompt { vertical-align: top; padding-top: 4px; }
.edit_sound table td { padding-bottom: 4px; }