/* phone-repair-bundle · app · live-tool CSS additions.
 *
 * Layered ON TOP of landing-base.css (@imports tokens.css). landing-base
 * gives the chrome, the pills, the tier cards. This file adds only the
 * interactive-tool bits the static demo never needed: the action bar, the
 * quote-line editor, form layout, the bootstrap banner.
 *
 * cycle-43 Huey L01 · the deployable tool.
 */
@import url("landing-base.css");

/* ── the live-tool banner — replaces the static demo's mockup-banner ── */
.tool-banner {
  background: var(--c-action);
  color: #fff;
  font-size: .8rem;
  letter-spacing: .03em;
  text-align: center;
  padding: .35rem .5rem;
  margin: -1rem -1rem 1.5rem;
}
.tool-banner a { color: #fff; text-decoration: underline; }

/* ── operator top bar ── */
.op-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .9rem;
  border-bottom: 1px solid var(--c-border);
  padding-bottom: .5rem;
  margin-bottom: 1rem;
}
.op-bar .who { color: var(--c-text-3); }

/* ── the repair board — clickable rows ── */
.op-row.clickable { cursor: pointer; text-decoration: none; color: inherit; }
.op-row.clickable:hover { border-color: var(--c-action); background: var(--c-info-soft); }
.op-row .code { font-variant-numeric: tabular-nums; }

/* ── count strip ── */
.count-strip {
  display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem;
}
.count-chip {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 999px; padding: .15rem .7rem; font-size: .8rem;
}
.count-chip strong { color: var(--c-action); }

/* ── action bar (transition buttons) ── */
.action-bar {
  display: flex; flex-wrap: wrap; gap: .5rem;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 6px; padding: .8rem; margin: 1rem 0;
}
.action-bar form { margin: 0; }
.action-bar button {
  background: var(--c-action); color: #fff; border: 0;
  border-radius: 4px; padding: .45rem .9rem; font-size: .9rem; cursor: pointer;
}
.action-bar button.ghost {
  background: transparent; color: var(--c-action);
  border: 1px solid var(--c-action);
}
.action-bar button.danger { background: var(--c-danger); }

/* ── forms ── */
form.tool-form label { display: block; margin: .6rem 0 .15rem; font-weight: 600; }
form.tool-form input[type=text], form.tool-form input[type=email],
form.tool-form input[type=tel], form.tool-form input[type=password],
form.tool-form input[type=number], form.tool-form select,
form.tool-form textarea {
  width: 100%; max-width: 26rem; padding: .4rem .5rem;
  border: 1px solid var(--c-border); border-radius: 4px; font: inherit;
}
form.tool-form .row { display: flex; gap: 1rem; flex-wrap: wrap; }
form.tool-form .submit {
  background: var(--c-action); color: #fff; border: 0; border-radius: 4px;
  padding: .55rem 1.3rem; font-size: 1rem; cursor: pointer; margin-top: 1rem;
}
.field-hint { font-size: .8rem; color: var(--c-text-3); font-weight: 400; }

/* ── quote-line editor ── */
table.quote-editor input { width: 100%; box-sizing: border-box;
  padding: .3rem; border: 1px solid var(--c-border); border-radius: 3px; }
table.quote-editor td { padding: .25rem; }
.add-line {
  background: transparent; border: 1px dashed var(--c-action);
  color: var(--c-action); border-radius: 4px; padding: .35rem .8rem;
  cursor: pointer; font-size: .85rem;
}

/* ── flash messages ── */
.flash {
  background: var(--c-info-soft); border-left: 3px solid var(--c-action);
  padding: .6rem .8rem; border-radius: 4px; margin: 1rem 0;
}
.flash.err { background: var(--c-danger-soft); border-left-color: var(--c-danger); }