/*
 * Zip Splitter. Every value here comes from ../styles/tokens.css — if a hex or
 * a pixel count shows up in this file, it wants to be a token instead.
 */

.notice,
.warn,
.error {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  max-width: var(--measure);
}
.notice { border-left-color: var(--status-ok); }
.warn { border-left-color: var(--status-warn); margin-bottom: var(--space-4); }
.error { border-left-color: var(--status-error); margin-top: var(--space-4); }

/* The UA stylesheet hides [hidden] with display:none, but any author display
   rule outranks it — and .drop below is display:flex. Without this, toggling the
   attribute in JS would do nothing at all. */
[hidden] { display: none !important; }

/* --- Step 1: the drop target ---------------------------------------------- */

.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin-top: var(--space-8);
  padding: var(--space-12) var(--space-4);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition), background var(--transition);
}
.drop:hover,
.drop:focus-within,
.drop.is-over {
  border-color: var(--accent);
  background: var(--surface);
}
.drop__title { font-size: var(--text-lg); font-weight: 600; }
.drop__hint { font-size: var(--text-sm); }

/* --- Step 2: what was loaded ---------------------------------------------- */

.summary { margin-top: var(--space-8); }
.summary__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;
  justify-content: space-between;
}
.summary__name {
  margin: 0;
  font-weight: 600;
  word-break: break-all;
}
.summary__facts { margin: 0; font-size: var(--text-sm); }

.sizes { gap: var(--space-2); }
.preset.is-on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-foreground);
}

.custom {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
}
.custom input {
  width: 7rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--foreground);
  font: inherit;
}

.footnote { font-size: var(--text-xs); margin-top: var(--space-2); }

/* --- Step 3: the plan ------------------------------------------------------ */

.parts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.part {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.part__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
}
.part__name { font-weight: 600; }
.part__size { font-family: var(--font-mono); font-size: var(--text-sm); }
.part__count { font-size: var(--text-sm); }
/* Pushes the download button to the far end, and holds the row's shape before
   one exists so the layout doesn't jump when the parts are built. */
.part__slot { margin-left: auto; min-height: 2rem; display: flex; align-items: center; }
.part__get { font-size: var(--text-sm); }

.bar {
  margin-top: var(--space-3);
  height: 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  overflow: hidden;
}
.bar__fill { display: block; height: 100%; background: var(--accent); }
.bar--over .bar__fill { background: var(--status-warn); }

.part__files { margin-top: var(--space-3); font-size: var(--text-sm); }
.part__files summary { cursor: pointer; font-size: var(--text-xs); }
.part__files ul {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  max-height: 14rem;
  overflow-y: auto;
}
.part__files li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--border);
}
.part__files li code { word-break: break-all; }
.part__files li span { white-space: nowrap; font-size: var(--text-xs); }

.actions { margin-top: var(--space-6); }
.actions .muted { font-size: var(--text-sm); }

button:disabled { opacity: 0.5; cursor: default; }

/* --- Narrow screens -------------------------------------------------------- */

@media (max-width: 30rem) {
  .part__slot { margin-left: 0; width: 100%; }
  .part__get { width: 100%; text-align: center; }
  .summary__head { flex-direction: column; }
}

/* --- The support nudge ----------------------------------------------------- */

.nudge {
  position: relative;
  margin-top: var(--space-8);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  max-width: var(--measure);
}

.nudge__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--foreground-muted);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}
.nudge__close:hover { background: var(--surface-sunken); color: var(--foreground); }

.nudge__title {
  margin: 0 0 var(--space-2);
  font-weight: 600;
  /* Clears the close button so a long count never runs under it. */
  padding-right: var(--space-8);
}
.nudge__body { margin: 0 0 var(--space-4); font-size: var(--text-sm); }
.nudge__actions { margin-bottom: var(--space-4); }
.nudge__actions:last-child { margin-bottom: 0; }

.nudge__form { border-top: 1px solid var(--border); padding-top: var(--space-4); }
.nudge__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  color: var(--foreground-muted);
}
.nudge__row { gap: var(--space-2); }
.nudge__row input {
  flex: 1 1 12rem;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--foreground);
  font: inherit;
  font-size: var(--text-sm);
}
.nudge__result:empty { display: none; }
.nudge__result { margin: var(--space-2) 0 0; font-size: var(--text-sm); }

/* Off-screen rather than display:none — a bot reading the DOM still finds it,
   which is the entire point, but no person can tab to or see it. */
.nudge__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* --- Footer ---------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: var(--space-16);
  padding: var(--space-8) var(--space-4);
  text-align: center;
}
.site-footer p { margin: 0 auto; font-size: var(--text-sm); max-width: var(--measure); }

.site-footer__support {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-4) auto 0;
}
.site-footer__support .button { font-size: var(--text-sm); }