/* ==========================================================================
   ConvoAll - tool page
   ========================================================================== */

.tool-hero { padding-block: clamp(1.25rem, 0.8rem + 2vw, 2.25rem) 0; }
.tool-hero__top { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.tool-hero__head { display: flex; gap: var(--sp-4); align-items: flex-start; }
.tool-hero__title { font-size: var(--step-5); letter-spacing: -0.028em; margin: 0.35rem 0 0.4rem; }
.tool-hero__tagline { font-size: var(--step-1); color: var(--text-soft); margin: 0 0 var(--sp-3); max-width: 58ch; }
.tool-hero__desc { color: var(--text-muted); font-size: var(--step--1); margin: 0; max-width: 68ch; }

.tool-io { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* --------------------------------------------------------------------------
   Uploader
   -------------------------------------------------------------------------- */
.uploader { display: flex; flex-direction: column; gap: var(--sp-4); }
.uploader__head { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; }
.uploader__limits { font-size: var(--step--2); color: var(--text-faint); }

.url-input-block { display: flex; flex-direction: column; gap: 0.5rem; padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }

.filelist__order { display: flex; flex-direction: column; gap: 2px; }
.filelist__actions { display: flex; align-items: center; gap: 0.35rem; }
.filelist__thumb { width: 34px; height: 34px; border-radius: var(--radius-xs); display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-muted); flex: none; }

/* --------------------------------------------------------------------------
   Options
   -------------------------------------------------------------------------- */
.options { display: flex; flex-direction: column; gap: var(--sp-3); }
.opt-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.opt-group > summary {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1rem;
  font-weight: 640; font-size: var(--step-0);
  cursor: pointer; list-style: none;
  background: var(--surface-2);
  transition: background-color var(--dur) var(--ease);
}
.opt-group > summary::-webkit-details-marker { display: none; }
.opt-group > summary:hover { background: var(--surface-3); }
.opt-group > summary .icon-chevron { margin-left: auto; color: var(--text-faint); transition: transform var(--dur) var(--ease); }
.opt-group[open] > summary .icon-chevron { transform: rotate(180deg); }
.opt-group[open] > summary { border-bottom: 1px solid var(--border); }
.opt-group__body { padding: var(--sp-4) 1rem var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-5); }
.opt-group__count { font-size: var(--step--2); color: var(--text-faint); font-weight: 550; }

.opt { display: flex; flex-direction: column; gap: 0.4rem; }
.opt.is-hidden { display: none; }
.opt--inline { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; }
.opt__head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.opt__label { font-weight: 610; font-size: var(--step--1); color: var(--text); }
.opt__value { font-family: var(--font-mono); font-size: var(--step--2); color: var(--accent); font-weight: 600; }

.opt--password { padding: var(--sp-4); border-radius: var(--radius-md); background: var(--brand-50); border: 1px solid var(--border-brand); }
[data-theme="dark"] .opt--password { background: #171c3d; }
.opt--password .field__label { font-size: var(--step-0); }
.opt--password .input { font-size: var(--step-1); letter-spacing: 0.06em; }
.pw-meter { display: flex; align-items: center; gap: 0.5rem; }
.pw-meter__bars { display: flex; gap: 3px; }
.pw-meter__bar { width: 26px; height: 5px; border-radius: var(--radius-pill); background: var(--surface-3); }
.pw-meter__bar.is-on { background: var(--success); }
.pw-meter__bar.is-weak { background: var(--warning); }
.pw-meter__text { font-size: var(--step--2); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Actions bar
   -------------------------------------------------------------------------- */
.tool-actions {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.tool-actions__hint { font-size: var(--step--2); color: var(--text-muted); margin-left: auto; }
@media (min-width: 720px) {
  .tool-actions--sticky { position: sticky; bottom: 1rem; z-index: 5; }
}

/* --------------------------------------------------------------------------
   State panels
   -------------------------------------------------------------------------- */
.state { display: none; }
.state.is-active { display: block; animation: pop-in var(--dur) var(--ease); }

.progress-panel { display: flex; flex-direction: column; gap: var(--sp-5); }
.progress-panel__top { display: flex; gap: var(--sp-4); align-items: center; }
.progress-panel__ring { flex: none; }

.result-head { display: flex; gap: var(--sp-4); align-items: flex-start; }
.result-head__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: var(--radius-lg);
  background: var(--success-soft); color: var(--success); border: 1px solid var(--success-line);
}
.result-list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.result-list__item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.result-list__name { font-weight: 600; font-size: var(--step--1); overflow-wrap: anywhere; }
.result-list__size { color: var(--text-faint); font-size: var(--step--2); }
.result-foot { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: var(--sp-5); }
.countdown { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--step--2); color: var(--text-muted); }
.countdown strong { font-variant-numeric: tabular-nums; color: var(--text-soft); }

.hint-list { margin: 0.75rem 0 0; padding-left: 1.1rem; color: var(--text-muted); font-size: var(--step--1); }
.hint-list li { margin-bottom: 0.25rem; }

/* --------------------------------------------------------------------------
   Side rail
   -------------------------------------------------------------------------- */
.rail { display: flex; flex-direction: column; gap: var(--sp-5); }
.rail__card { padding: var(--sp-5); }
.rail__title { font-size: var(--step--1); font-weight: 650; margin: 0 0 0.6rem; display: flex; align-items: center; gap: 0.4rem; }
.rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.rail__list li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: var(--step--1); color: var(--text-muted); }
.rail__list .icon { color: var(--success); margin-top: 0.2rem; }
.rail__tools { display: flex; flex-direction: column; gap: 0.25rem; }
.rail-tool { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.55rem; border-radius: var(--radius-sm); text-decoration: none; color: inherit; }
.rail-tool:hover { background: var(--surface-2); }
.rail-tool__title { font-weight: 600; font-size: var(--step--1); }
.rail-tool__tag { font-size: var(--step--2); color: var(--text-muted); }

@media (min-width: 1000px) {
  .tool-hero__head { align-items: center; }
}