/* Browser-first tools: a design that belongs to this site.
 *
 * The problem these rules solve
 * -----------------------------
 * The three tools moved back into the browser (background remover, audio
 * compressor, Word to PDF) were rendering with boxed sk-media-panel sections and
 * browser-default form controls. Next to the study tools, which sit flat on the
 * page with no panels and no fills, they looked like a different website bolted
 * on. That is the specific thing being fixed here.
 *
 * What the house style actually is, read off the live pages rather than guessed
 *
 *   paper        #faf9f6
 *   tint         #f6f5f1
 *   accent       #0007cb
 *   body ink     #111111  (16px / 1.62)
 *   muted ink    #414141
 *   hairline     #e1e8ed
 *   h1           weight 300, tight tracking, large
 *   h2           weight 700, 16.3px
 *   inputs       transparent fill, 1px #e1e8ed, 3px radius, 40px tall
 *
 * What is deliberately absent: box shadows, gradients on surfaces, filled cards,
 * large corner radii, icon soup. The reference site looked good because of
 * whitespace and type contrast, not because of decoration. None of it is copied
 * literally; what is taken is the discipline of a flat surface, one accent, and
 * generous vertical rhythm.
 *
 * Dark mode follows prefers-color-scheme and re-derives every value, because a
 * tint that was 4% darker than paper in light mode is invisible in dark mode.
 */

/* ---------------------------------------------------------------- containers */

/* Panels become plain sections separated by a hairline. A border-top and a
 * margin is the whole treatment: it reads as a chapter break in a document,
 * which is what these tools are. */
.sk-bf-page .sk-media-panel,
.sk-bf-page .sk-bg-panel,
.sk-bf-page .sk-ac-panel,
.sk-bf-page .sk-dp-panel {
  background: none;
  border: 0;
  border-top: 1px solid #e1e8ed;
  border-radius: 0;
  box-shadow: none;
  padding: 2rem 0 0;
  margin: 0 0 2.25rem;
}

.sk-bf-page .sk-media-panel:first-of-type,
.sk-bf-page .sk-bg-panel:first-of-type,
.sk-bf-page .sk-ac-panel:first-of-type,
.sk-bf-page .sk-dp-panel:first-of-type {
  border-top: 0;
  padding-top: 0;
}

/* Section headings: small, bold, slightly tracked. Not a card title. */
.sk-bf-page .sk-media-panel > h2,
.sk-bf-page .sk-bg-panel > h2,
.sk-bf-page .sk-ac-panel > h2,
.sk-bf-page .sk-dp-panel > h2 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #282e38;
}

/* ------------------------------------------------------------- prospect note */

/* The privacy statement sits at the top of each tool and is the most important
 * sentence on the page, so it gets a rule on its left and no box. The accent is
 * used exactly once per page, here. */
.sk-bf-note {
  margin: 0 0 2rem;
  padding: 0 0 0 1.1rem;
  border-left: 3px solid #0007cb;
  font-size: 0.94rem;
  line-height: 1.65;
  color: #414141;
}

.sk-bf-note p { margin: 0; }
.sk-bf-note p + p { margin-top: 0.7rem; }
.sk-bf-note strong { color: #111; font-weight: 600; }

/* ------------------------------------------------------------------- selects */

/* The default select box is the single most recognisable "unstyled web form"
 * artifact on these pages. Removing the native chrome and drawing a chevron in
 * the hairline colour makes it sit with the house inputs instead of beside
 * them. */
.sk-bf-page select,
.sk-bf-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 40px;
  padding: 0 2.1rem 0 0.85rem;
  border: 1px solid #e1e8ed;
  border-radius: 3px;
  background-color: transparent;
  /* The chevron, drawn as an inline SVG rather than a background image so it
   * inherits the colour and needs no second network request. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  font: inherit;
  font-size: 0.95rem;
  color: #111;
  cursor: pointer;
}

.sk-bf-page select:hover { border-color: #cbd5e1; }

.sk-bf-page select:focus-visible,
.sk-bf-page input:focus-visible,
.sk-bf-page button:focus-visible,
.sk-bf-page a:focus-visible {
  outline: 2px solid #0007cb;
  outline-offset: 2px;
}

.sk-bf-page select:disabled {
  color: #9ca3af;
  border-color: #eef1f4;
  cursor: not-allowed;
}

/* Field labels: small, quiet, above the control. Same rhythm as the study
 * planner's field labels so the two tool families look related. */
.sk-bf-field { display: grid; gap: 0.4rem; }

.sk-bf-field > label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}

.sk-bf-grid {
  display: grid;
  gap: 1.1rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin: 1.1rem 0 0;
}

/* ----------------------------------------------------------------- drop zone */

/* A dashed rule, transparent fill, and nothing else. The previous version was a
 * filled grey card, which is the generic file-upload look the site avoids. */
.sk-bf-drop {
  display: grid;
  gap: 0.3rem;
  padding: 1.75rem 1.25rem;
  border: 1px dashed #cfd8df;
  border-radius: 3px;
  background: none;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sk-bf-drop:hover,
.sk-bf-drop:focus-within {
  border-color: #0007cb;
  background: rgba(0, 7, 203, 0.025);
}

.sk-bf-drop strong {
  font-size: 0.98rem;
  font-weight: 600;
  color: #111;
}

.sk-bf-drop span { font-size: 0.9rem; color: #414141; }
.sk-bf-drop small {
  font-size: 0.78rem;
  color: #8a8f96;
  letter-spacing: 0.02em;
}

/* Dragging over the zone. Set by the tools' own JS. */
.sk-bf-drop[data-drag='true'] {
  border-color: #0007cb;
  background: rgba(0, 7, 203, 0.05);
}

/* ------------------------------------------------------------------- buttons */

/* One filled button per screen: the primary action. Everything else is a text
 * link with an underline, which is how the rest of the site does secondary
 * actions. */
.sk-bf-button,
.sk-bf-page .sk-media-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 40px;
  padding: 0 1.15rem;
  border: 1px solid #0007cb;
  border-radius: 3px;
  background: #0007cb;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.sk-bf-button:hover {
  background: #00069f;
  border-color: #00069f;
  color: #fff;
}

/* The quieter action. Transparent, hairline border, ink text. */
.sk-bf-button--quiet,
.sk-bf-page .sk-media-button--quiet {
  background: none;
  border-color: #e1e8ed;
  color: #282e38;
}

.sk-bf-button--quiet:hover {
  background: #f6f5f1;
  border-color: #cfd8df;
  color: #111;
}

.sk-bf-button[disabled] { opacity: 0.45; pointer-events: none; }
.sk-bf-button[hidden] { display: none; }

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

/* One line under the controls. No card, no icon, no colour until it matters.
 * A status message that is always coloured teaches the reader to ignore it. */
.sk-bf-status {
  margin: 0.9rem 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #414141;
  min-height: 1.35rem;
}

.sk-bf-status[data-kind='done'] { color: #0f5132; }
.sk-bf-status[data-kind='error'] { color: #9c1c1c; }
.sk-bf-status[data-kind='error']::before { content: ''; }

/* A quiet progress hairline while the model or the encoder works, so a long
 * operation has feedback without a spinner or a modal. */
.sk-bf-page[aria-busy='true'] .sk-bf-progress {
  display: block;
}

.sk-bf-progress {
  display: none;
  position: relative;
  height: 2px;
  margin: 0.8rem 0 0;
  overflow: hidden;
  background: #eef1f4;
}

.sk-bf-progress::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 30%;
  background: #0007cb;
  animation: sk-bf-slide 1.1s ease-in-out infinite;
}

@keyframes sk-bf-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

@media (prefers-reduced-motion: reduce) {
  .sk-bf-progress::after { animation: none; width: 100%; opacity: 0.35; }
  .sk-bf-drop, .sk-bf-button { transition: none; }
}

/* ------------------------------------------------------------------ previews */

/* The checkerboard is the only place on the page where a pattern is allowed,
 * and it earns it: without it a transparent PNG is indistinguishable from a
 * white-background image, so the visitor cannot tell the tool worked. */
.sk-bf-preview {
  display: block;
  max-width: 100%;
  max-height: 56vh;
  margin: 0 auto;
  border: 1px solid #e1e8ed;
  border-radius: 3px;
  background-image:
    linear-gradient(45deg, #eceff2 25%, transparent 25%),
    linear-gradient(-45deg, #eceff2 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eceff2 75%),
    linear-gradient(-45deg, transparent 75%, #eceff2 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-color: #fff;
}

.sk-bf-page audio { width: 100%; }

/* ------------------------------------------------------- kept / lost columns */

/* Used by Word to PDF to say what survives. Two columns, hairline above, no
 * boxes. The heading colour carries the meaning, not a filled background. */
.sk-bf-columns {
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 1.25rem 0 0;
}

.sk-bf-columns > div {
  padding: 1.1rem 0 0;
  border-top: 2px solid #e1e8ed;
}

.sk-bf-columns h3 {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
}

.sk-bf-columns ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  line-height: 1.75;
  color: #414141;
}

.sk-bf-columns--kept > div { border-top-color: #0f5132; }
.sk-bf-columns--kept h3 { color: #0f5132; }
.sk-bf-columns--lost > div { border-top-color: #9c1c1c; }
.sk-bf-columns--lost h3 { color: #9c1c1c; }

/* ------------------------------------------------------------------ dark mode */

/* Every value is re-derived. A tint that is 4% off paper in light mode is
 * invisible against paper in dark mode, so the charcoal is given more
 * separation than the cream had. */
@media (prefers-color-scheme: dark) {
  .sk-bf-page .sk-media-panel,
  .sk-bf-page .sk-bg-panel,
  .sk-bf-page .sk-ac-panel,
  .sk-bf-page .sk-dp-panel {
    border-top-color: #2b3138;
  }

  .sk-bf-page .sk-media-panel > h2,
  .sk-bf-page .sk-bg-panel > h2,
  .sk-bf-page .sk-ac-panel > h2,
  .sk-bf-page .sk-dp-panel > h2 { color: #e8eaed; }

  .sk-bf-note { border-left-color: #6b7bff; color: #b6bcc4; }
  .sk-bf-note strong { color: #f2f4f6; }

  .sk-bf-page select,
  .sk-bf-select {
    border-color: #2b3138;
    color: #e8eaed;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa2ad' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .sk-bf-page select:hover { border-color: #3d454e; }
  .sk-bf-page select:disabled { color: #6b7280; border-color: #23282e; }
  .sk-bf-page select option { background: #1a1d21; color: #e8eaed; }

  .sk-bf-field > label { color: #8d949c; }

  .sk-bf-drop { border-color: #3d454e; }
  .sk-bf-drop:hover,
  .sk-bf-drop:focus-within { border-color: #6b7bff; background: rgba(107, 123, 255, 0.07); }
  .sk-bf-drop strong { color: #f2f4f6; }
  .sk-bf-drop span { color: #b6bcc4; }
  .sk-bf-drop small { color: #8d949c; }

  .sk-bf-button,
  .sk-bf-page .sk-media-button {
    background: #3b4fff;
    border-color: #3b4fff;
    color: #fff;
  }
  .sk-bf-button:hover { background: #5566ff; border-color: #5566ff; }

  .sk-bf-button--quiet,
  .sk-bf-page .sk-media-button--quiet {
    background: none;
    border-color: #2b3138;
    color: #e8eaed;
  }
  .sk-bf-button--quiet:hover { background: #1f2327; border-color: #3d454e; color: #fff; }

  .sk-bf-status { color: #b6bcc4; }
  .sk-bf-status[data-kind='done'] { color: #6ee7a8; }
  .sk-bf-status[data-kind='error'] { color: #f19a9a; }

  .sk-bf-progress { background: #23282e; }
  .sk-bf-progress::after { background: #6b7bff; }

  .sk-bf-preview {
    border-color: #2b3138;
    background-image:
      linear-gradient(45deg, #262b31 25%, transparent 25%),
      linear-gradient(-45deg, #262b31 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #262b31 75%),
      linear-gradient(-45deg, transparent 75%, #262b31 75%);
    background-color: #1a1d21;
  }

  .sk-bf-columns > div { border-top-color: #2b3138; }
  .sk-bf-columns h3 { color: #8d949c; }
  .sk-bf-columns ul { color: #b6bcc4; }
  .sk-bf-columns--kept > div { border-top-color: #3f9c6d; }
  .sk-bf-columns--kept h3 { color: #6ee7a8; }
  .sk-bf-columns--lost > div { border-top-color: #b4544f; }
  .sk-bf-columns--lost h3 { color: #f19a9a; }
}

/* ------------------------------------------------------------------- narrow */

@media (max-width: 620px) {
  .sk-bf-grid { grid-template-columns: 1fr; }
  .sk-bf-drop { padding: 1.4rem 1rem; }
  .sk-bf-button,
  .sk-bf-page .sk-media-button { width: 100%; }
}