/* DBL Code Generator — tool styles.
   Every value from a design token (§4.2). Scoped to .ftb-tool-dbl. */

/* ---------------------------------------------------------------- notice */

/* Sits above the tool deliberately: the correction has to arrive before the
   buttons, not after them. Styled as information, not as an error — it is a
   fact about what the tool does, not a failure. */
.ftb-tool-dbl .ftb-dbl-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-dbl .ftb-dbl-notice strong{display:block;margin-bottom:var(--ftb-space-1)}

/* ------------------------------------------------------------------ tabs */

.ftb-tool-dbl .ftb-dbl-tabs{display:flex;gap:var(--ftb-space-2);
  margin-bottom:var(--ftb-space-5);border-bottom:1px solid var(--ftb-border)}
.ftb-tool-dbl .ftb-dbl-tab{padding:var(--ftb-space-3) var(--ftb-space-5);
  min-height:var(--ftb-tap);font:inherit;font-size:var(--ftb-text-sm);
  font-weight:var(--ftb-fw-semi);color:var(--ftb-text-muted);
  background:none;border:none;border-bottom:3px solid transparent;
  margin-bottom:-1px;cursor:pointer}
.ftb-tool-dbl .ftb-dbl-tab:hover{color:var(--ftb-text)}
.ftb-tool-dbl .ftb-dbl-tab[aria-selected=true]{color:var(--ftb-primary);
  border-bottom-color:var(--ftb-primary)}
.ftb-tool-dbl .ftb-dbl-tab:focus-visible{outline:2px solid var(--ftb-primary);
  outline-offset:-2px;border-radius:var(--ftb-radius-sm)}

/* ---------------------------------------------------------------- inputs */

.ftb-tool-dbl .ftb-dbl-row{display:grid;gap:var(--ftb-space-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.ftb-tool-dbl .ftb-dbl-row > *{min-width:0}
.ftb-tool-dbl .ftb-dbl-row .ftb-field{margin-bottom:0}
.ftb-tool-dbl textarea[data-ftb=codes]{min-height:7rem;font-family:var(--ftb-mono);
  text-transform:uppercase}
.ftb-tool-dbl input[data-ftb=template],
.ftb-tool-dbl input[data-ftb=decode-input]{font-family:var(--ftb-mono);
  font-size:var(--ftb-text-code)}

.ftb-tool-dbl .ftb-dbl-adv{margin-bottom:var(--ftb-space-5);
  border:1px solid var(--ftb-border);border-radius:var(--ftb-radius);
  background:var(--ftb-surface)}
.ftb-tool-dbl .ftb-dbl-adv summary{padding:var(--ftb-space-3) var(--ftb-space-4);
  min-height:var(--ftb-tap);display:flex;align-items:center;cursor:pointer;
  font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-semi)}
.ftb-tool-dbl .ftb-dbl-adv summary:focus-visible{outline:2px solid var(--ftb-primary);
  outline-offset:-2px}
.ftb-tool-dbl .ftb-dbl-advbody{padding:0 var(--ftb-space-4) var(--ftb-space-4)}
.ftb-tool-dbl .ftb-dbl-advbody .ftb-field:last-child{margin-bottom:0}

.ftb-tool-dbl .ftb-dbl-upload{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--ftb-space-3);margin-bottom:var(--ftb-space-4)}
/* The real file input stays in the DOM and focusable — only visually replaced
   by its label. display:none would take it out of the tab order. */
.ftb-tool-dbl .ftb-dbl-file{position:relative;overflow:hidden;cursor:pointer}
.ftb-tool-dbl .ftb-dbl-file input[type=file]{position:absolute;inset:0;
  width:100%;height:100%;opacity:0;cursor:pointer}
.ftb-tool-dbl .ftb-dbl-file:focus-within{outline:2px solid var(--ftb-primary);
  outline-offset:2px}

/* --------------------------------------------------------------- results */

.ftb-tool-dbl .ftb-dbl-empty{margin:var(--ftb-space-5) 0 0;
  padding:var(--ftb-space-8) var(--ftb-space-5);text-align:center;
  border:2px dashed var(--ftb-border-strong);border-radius:var(--ftb-radius-lg);
  font-size:var(--ftb-text-sm);color:var(--ftb-text-muted)}

.ftb-tool-dbl .ftb-dbl-grid{display:grid;gap:var(--ftb-space-5);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));
  margin-top:var(--ftb-space-5)}

.ftb-tool-dbl .ftb-dbl-card{padding:var(--ftb-space-4);text-align:center;
  background:var(--ftb-surface);border:1px solid var(--ftb-border);
  border-radius:var(--ftb-radius-lg)}
/* Reserved square so the QR appearing never shifts the page (§10, CLS). */
.ftb-tool-dbl .ftb-dbl-qr{aspect-ratio:1/1;width:100%;max-width:13rem;
  margin:0 auto var(--ftb-space-3);background:#fff;border-radius:var(--ftb-radius);
  padding:var(--ftb-space-2)}
.ftb-tool-dbl .ftb-dbl-qr svg{display:block;width:100%;height:100%}
.ftb-tool-dbl .ftb-dbl-fc{margin:0;font-family:var(--ftb-mono);
  font-size:var(--ftb-text-base);font-weight:var(--ftb-fw-semi);
  letter-spacing:.06em;text-transform:uppercase;overflow-wrap:anywhere}
.ftb-tool-dbl .ftb-dbl-payload{margin:var(--ftb-space-2) 0 var(--ftb-space-3);
  font-family:var(--ftb-mono);font-size:var(--ftb-text-sm);
  color:var(--ftb-text-muted);overflow-wrap:anywhere}
.ftb-tool-dbl .ftb-dbl-cardbtns{display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--ftb-space-2)}
.ftb-tool-dbl .ftb-dbl-cardbtns .ftb-btn{padding:0 var(--ftb-space-3);
  min-height:var(--ftb-tap);font-size:var(--ftb-text-sm)}
.ftb-tool-dbl .ftb-dbl-card[data-bad=true]{border-color:var(--ftb-error)}
.ftb-tool-dbl .ftb-dbl-cardmsg{margin:0;font-size:var(--ftb-text-sm);
  color:var(--ftb-error);line-height:var(--ftb-lh-snug)}

/* ------------------------------------------------------------------ read */

.ftb-tool-dbl .ftb-dbl-verdict{padding:var(--ftb-space-4) var(--ftb-space-5);
  margin-bottom:var(--ftb-space-5);border:1px solid currentColor;
  border-left-width:4px;border-radius:var(--ftb-radius)}
/* These pairs are the ones core.css already uses for tool messages, so they
   are contrast-checked in both themes. Do not substitute a raw colour. */
.ftb-tool-dbl .ftb-dbl-verdict[data-state=fresh]{background:var(--ftb-success-soft);color:var(--ftb-success)}
.ftb-tool-dbl .ftb-dbl-verdict[data-state=stale]{background:var(--ftb-warning-soft);color:var(--ftb-warning)}
.ftb-tool-dbl .ftb-dbl-verdict[data-state=broken]{background:var(--ftb-error-soft);color:var(--ftb-error)}
.ftb-tool-dbl .ftb-dbl-verdict-line{margin:0;font-size:var(--ftb-text-lg);
  font-weight:var(--ftb-fw-semi);letter-spacing:var(--ftb-ls-tight)}
.ftb-tool-dbl .ftb-dbl-verdict-sub{margin:var(--ftb-space-2) 0 0;
  font-size:var(--ftb-text-sm);line-height:var(--ftb-lh-snug);color:var(--ftb-text)}

.ftb-tool-dbl .ftb-dbl-table{width:100%;border-collapse:collapse;
  font-size:var(--ftb-text-sm);line-height:var(--ftb-lh-snug)}
.ftb-tool-dbl .ftb-dbl-table th,
.ftb-tool-dbl .ftb-dbl-table td{padding:var(--ftb-space-3);text-align:left;
  border-bottom:1px solid var(--ftb-border);vertical-align:top}
.ftb-tool-dbl .ftb-dbl-table thead th{font-weight:var(--ftb-fw-semi);
  color:var(--ftb-text-muted);white-space:nowrap}
.ftb-tool-dbl .ftb-dbl-table td:nth-child(2){font-family:var(--ftb-mono);
  overflow-wrap:anywhere}
.ftb-tool-dbl .ftb-dbl-table td:last-child{color:var(--ftb-text-muted);min-width:12rem}

.ftb-tool-dbl .ftb-dbl-notes{margin:var(--ftb-space-4) 0 0;
  padding:var(--ftb-space-4) var(--ftb-space-5) var(--ftb-space-4) var(--ftb-space-8);
  background:var(--ftb-warning-soft);border-radius:var(--ftb-radius);
  font-size:var(--ftb-text-sm);line-height:var(--ftb-lh-snug);color:var(--ftb-text)}
.ftb-tool-dbl .ftb-dbl-notes li + li{margin-top:var(--ftb-space-2)}

.ftb-tool-dbl .ftb-tool-disclaimer{margin:var(--ftb-space-6) 0 0;
  padding: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);color:var(--ftb-text-muted)}

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

@media (max-width:479px){
  .ftb-tool-dbl .ftb-dbl-tab{flex:1 1 auto;padding:var(--ftb-space-3) var(--ftb-space-2);
    text-align:center}
  .ftb-tool-dbl .ftb-dbl-grid{grid-template-columns:1fr}
  .ftb-tool-dbl .ftb-dbl-empty{padding:var(--ftb-space-5) var(--ftb-space-4)}
  .ftb-tool-dbl .ftb-tool-actions .ftb-btn{flex:1 1 auto}
  .ftb-tool-dbl .ftb-dbl-table td:last-child{min-width:9rem}
}