/* YouTube to MP3 Converter — tool styles.
   Every value from a design token (§4.2). Scoped to .ftb-tool-ytmp3.
   Buttons, fields, messages and the file-picker pattern follow core.css and
   stl-viewer's drop zone. */

.ftb-tool-ytmp3 .ftb-ym-notice{margin:0 0 var(--ftb-space-5);padding:var(--ftb-space-4) var(--ftb-space-5);
  background:var(--ftb-surface-2);border:1px solid var(--ftb-border);border-left:4px solid var(--ftb-primary);
  border-radius:var(--ftb-radius);font-size:var(--ftb-text-sm);line-height:var(--ftb-lh-snug);color:var(--ftb-text)}
.ftb-tool-ytmp3 .ftb-ym-notice strong{display:block;margin-bottom:var(--ftb-space-1)}

/* ----------------------------------------------------------------- intake */

.ftb-tool-ytmp3 .ftb-ym-drop{display:flex;flex-direction:column;align-items:center;gap:var(--ftb-space-3);
  padding:var(--ftb-space-8) var(--ftb-space-5);background:var(--ftb-surface-2);
  border:2px dashed var(--ftb-border-strong);border-radius:var(--ftb-radius-lg);text-align:center;
  transition:border-color var(--ftb-transition),background var(--ftb-transition)}
.ftb-tool-ytmp3 .ftb-ym-drop[data-drag=over]{border-color:var(--ftb-primary);background:var(--ftb-primary-soft)}

/* The real file input stays in the DOM and in the tab order, only visually
   covered by its label, so keyboard users are never locked out. */
/* The picker is a <label> styled as a primary button. core.css sets
   `.ftb-tool label{color:var(--ftb-text)}` (0,1,1), which outranks
   `.ftb-btn--primary` (0,1,0) and put dark text on the indigo button at
   2.94:1. Found by measuring the live page, 2026-09-13. */
.ftb-tool-ytmp3 .ftb-ym-pick,
.ftb-tool-ytmp3 .ftb-ym-pick:hover{color:var(--ftb-on-primary)}
.ftb-tool-ytmp3 .ftb-ym-pick{position:relative;overflow:hidden;cursor:pointer}
.ftb-tool-ytmp3 .ftb-ym-pick input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.ftb-tool-ytmp3 .ftb-ym-pick:focus-within{outline:2px solid var(--ftb-primary);outline-offset:2px}
.ftb-tool-ytmp3 .ftb-ym-hint{margin:0;font-size:var(--ftb-text-sm);color:var(--ftb-text-muted)}

.ftb-tool-ytmp3 details summary{display:flex;align-items:center;min-height:var(--ftb-tap);cursor:pointer;
  font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-semi);color:var(--ftb-primary)}
.ftb-tool-ytmp3 details summary:focus-visible{outline:2px solid var(--ftb-primary);outline-offset:2px;
  border-radius:var(--ftb-radius-sm)}
.ftb-tool-ytmp3 .ftb-ym-linkbox{margin:var(--ftb-space-4) 0}
.ftb-tool-ytmp3 .ftb-ym-linkbody{padding-top:var(--ftb-space-2)}
.ftb-tool-ytmp3 .ftb-ym-linkmsg{padding:var(--ftb-space-4) var(--ftb-space-5);background:var(--ftb-surface-2);
  border-radius:var(--ftb-radius);font-size:var(--ftb-text-sm);line-height:var(--ftb-lh-snug)}
.ftb-tool-ytmp3 .ftb-ym-linkmsg p{margin:0 0 var(--ftb-space-2)}
.ftb-tool-ytmp3 .ftb-ym-linkmsg ul{margin:0 0 var(--ftb-space-3);padding-inline-start:var(--ftb-space-5)}
.ftb-tool-ytmp3 .ftb-ym-linkmsg li + li{margin-top:var(--ftb-space-1)}

/* ------------------------------------------------------------- file card */

.ftb-tool-ytmp3 .ftb-ym-card,
.ftb-tool-ytmp3 .ftb-ym-result{margin-top:var(--ftb-space-5);padding:var(--ftb-space-4) var(--ftb-space-5);
  background:var(--ftb-surface);border:1px solid var(--ftb-border);border-radius:var(--ftb-radius)}
.ftb-tool-ytmp3 .ftb-ym-name{margin:0;font-weight:var(--ftb-fw-semi);overflow-wrap:anywhere}
.ftb-tool-ytmp3 .ftb-ym-card .ftb-tool-msg{margin:var(--ftb-space-3) 0 0}
.ftb-tool-ytmp3 .ftb-ym-opts{display:grid;gap:0 var(--ftb-space-4);margin-top:var(--ftb-space-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
.ftb-tool-ytmp3 .ftb-ym-opts .ftb-field{margin-bottom:var(--ftb-space-3)}
.ftb-tool-ytmp3 input[aria-invalid=true]{border-color:var(--ftb-error)}

/* --------------------------------------------------------- progress/result */

.ftb-tool-ytmp3 .ftb-ym-progress{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ftb-space-3);
  margin-top:var(--ftb-space-5)}
.ftb-tool-ytmp3 .ftb-ym-progress progress{flex:1 1 100%;width:100%;height:var(--ftb-space-3);accent-color:var(--ftb-primary)}
.ftb-tool-ytmp3 .ftb-ym-progress-text{flex:1 1 auto;margin:0;font-size:var(--ftb-text-sm);font-variant-numeric:tabular-nums}

.ftb-tool-ytmp3 .ftb-ym-h{margin:0 0 var(--ftb-space-3);font-size:var(--ftb-text-lg);font-weight:var(--ftb-fw-semi)}
.ftb-tool-ytmp3 .ftb-ym-h:focus{outline:none}
.ftb-tool-ytmp3 .ftb-ym-result audio{display:block;width:100%}
.ftb-tool-ytmp3 .ftb-ym-result .ftb-tool-stat{overflow-wrap:anywhere}
.ftb-tool-ytmp3 .ftb-ym-credit{margin-top:var(--ftb-space-6)}

@media (max-width:479px){
  .ftb-tool-ytmp3 .ftb-ym-drop{padding:var(--ftb-space-6) var(--ftb-space-3)}
  .ftb-tool-ytmp3 .ftb-ym-card,.ftb-tool-ytmp3 .ftb-ym-result{padding:var(--ftb-space-3)}
  .ftb-tool-ytmp3 .ftb-tool-actions .ftb-btn{flex:1 1 auto}
}