/* tutoring-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, form layout, the bootstrap
 * banner, and the progress timeline (the parent-portal headline).
 *
 * darntech cycle-57 Huey L05 · 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 session 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 input[type=date],
form.tool-form input[type=time], form.tool-form input[type=url],
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;
}
/* the complete-session + reschedule forms aren't wrapped in .tool-form but
   share its field styling — apply to bare forms inside the session detail too */
form input[type=text], form input[type=number], form input[type=url],
form input[type=date], form input[type=time], form select, form textarea {
  font: inherit;
}
.field-hint { font-size: .8rem; color: var(--c-text-3); font-weight: 400; }
.session-detail form label { display: block; margin: .6rem 0 .15rem; font-weight: 600; }

/* ── 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); }

/* ════════════════════════════════════════════════════════════════════════
 * tutoring-bundle additions — the progress timeline (parent-portal headline).
 * darntech cycle-57 Huey L05. A parent opens one link and sees session-over-
 * session what their student worked on and how it's going.
 * ════════════════════════════════════════════════════════════════════════ */

.progress-list {
  display: flex; flex-direction: column; gap: .7rem; margin: 1rem 0 1.5rem;
}
.progress-entry {
  border: 1px solid var(--c-border); border-left: 3px solid var(--c-action);
  border-radius: 6px; padding: .7rem .9rem; background: var(--c-surface);
}
.progress-head {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin-bottom: .3rem;
}
.progress-date {
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: .85rem;
}
.progress-subject {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-text-3); background: var(--c-info-soft);
  padding: .1rem .5rem; border-radius: 999px;
}
.progress-head .stars { color: #f1a900; letter-spacing: .05em; font-size: .85rem; }
.progress-note { margin: 0; font-size: .92rem; color: var(--c-text); }