/* agentic.aisoft.us: matches the AISOFT marketing brand (aisoft.us).
   Tokens copied from assets/aisoft.css so the two sites read as one company:
   burnt orange on warm off-white, near-black inverse sections, pill buttons. */

:root {
  --primary: #9e3d00;
  --primary-container: #c64f00;
  --primary-fixed: #ffdbcd;
  --primary-fixed-dim: #ffb595;
  --on-primary: #ffffff;

  --surface: #fcf9f8;
  --surface-low: #f6f3f2;
  --surface-container: #f0edec;
  --surface-high: #ebe7e7;
  --surface-lowest: #ffffff;

  --on-surface: #1c1b1b;
  --on-surface-variant: #594238;
  --on-secondary-container: #656464;
  --outline: #8c7166;
  --outline-variant: #e0c0b2;

  --inverse-surface: #111110;
  --on-inverse-surface: #ffffff;
  --on-inverse-muted: rgba(255, 255, 255, 0.82);

  --page-max: 1200px;
  --page-narrow: 860px;
  --shadow-card: 0 22px 60px -34px rgba(45, 32, 27, 0.58), 0 1px 0 rgba(255,255,255,0.78) inset;
  --shadow-soft: 0 18px 45px -30px rgba(45, 32, 27, 0.55);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Manrope', 'Inter', sans-serif;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 .6rem;
}
h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 800; margin-top: 0; }
h3 { font-size: 1.05rem; font-weight: 700; }

p { margin: 0 0 1.15rem; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--primary-container); }

.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: var(--page-narrow); }

.eyebrow {
  display: inline-flex; color: var(--primary);
  font-size: .92rem; font-weight: 600; letter-spacing: 0;
  margin-bottom: 12px;
}
.on-dark .eyebrow { color: var(--primary-fixed-dim); }

/* ---------- announcement bar, as on aisoft.us ---------- */
.topbar {
  background: var(--inverse-surface); color: rgba(255,255,255,.72);
  font-size: .84rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar .wrap { display: flex; align-items: center; gap: 1rem; padding: 9px 24px; }
.topbar a { color: var(--primary-fixed-dim); text-decoration: none; font-weight: 600; }
.topbar a:hover { text-decoration: underline; }
.topbar-cta { margin: 0 auto; white-space: nowrap; }

/* ---------- header ---------- */
header.site {
  background: var(--surface-lowest);
  border-bottom: 1px solid rgba(140,113,102,.14);
  position: sticky; top: 0; z-index: 20;
}
header.site .wrap { display: flex; align-items: center; gap: .55rem; padding: 14px 24px; }
.brand {
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.05rem;
  color: var(--on-surface); text-decoration: none; letter-spacing: -.02em;
}
.brand:hover { color: var(--primary); }
.brand-sep { color: var(--outline-variant); font-weight: 300; }
.brand-section {
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.02rem;
  color: var(--primary); text-decoration: none; letter-spacing: -.02em;
}
header.site nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; font-size: .92rem; }
header.site nav a { color: var(--on-surface-variant); text-decoration: none; font-weight: 500; }
header.site nav a:hover { color: var(--primary); }
header.site nav a.off-site { color: var(--outline); }
header.site nav a.off-site:hover { color: var(--primary); }
.btn-sm { padding: 9px 20px; font-size: .89rem; }
/* the nav selector outranks .btn-primary, so restate the CTA colour at matching weight */
header.site nav a.btn-primary { color: var(--on-primary); }
header.site nav a.btn-primary:hover { color: #fff; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 14px 28px; border-radius: 999px;
  font-family: inherit; font-size: .97rem; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover {
  background: var(--primary-container); color: #fff;
  transform: translateY(-2px); box-shadow: 0 10px 28px rgba(158,61,0,.28);
}
.btn-ghost { background: transparent; color: var(--primary); border-color: var(--outline-variant); }
.btn-ghost:hover { background: var(--surface-high); transform: translateY(-2px); }
.on-dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,.28); }
.on-dark .btn-ghost:hover { background: rgba(255,255,255,.08); }

/* ---------- dark hero, dot texture as on aisoft.us ---------- */
.hero {
  background: var(--inverse-surface);
  color: var(--on-inverse-surface);
  position: relative; overflow: hidden;
  padding: 6rem 0 0;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at center, rgba(158,61,0,.30) 1.1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 95%);
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 95%);
  pointer-events: none;
}
.hero > .wrap { position: relative; }

/* The hero copy is deliberately narrow, which left the right half of a wide viewport
   empty. Fill it with a real transcribed session rather than decoration: it is the
   one claim the page makes that a picture can actually evidence. */
.hero-grid { display: grid; grid-template-columns: 1fr .92fr; gap: 4rem; align-items: center; }
.hero-capture { margin: 0; }
.hero-capture img {
  width: 100%; height: auto; display: block; border-radius: 14px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.8);
}
.hero-capture figcaption {
  margin-top: .9rem; color: rgba(255,255,255,.5);
  font-size: .84rem; line-height: 1.5;
}
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero-capture { max-width: 620px; }
}

.hero h1 { color: #fff; max-width: 15ch; }
.hero h1 .accent { color: var(--primary-fixed-dim); display: block; }
.hero .lede {
  color: var(--on-inverse-muted); font-size: 1.2rem; max-width: 46ch; margin-top: 1.4rem;
}
.hero .lede strong { color: #fff; font-weight: 600; }
.hero .actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2.2rem 0 .6rem; }
.hero .fineprint { color: rgba(255,255,255,.55); font-size: .88rem; margin-top: .4rem; }

/* the four-up proof strip, mirroring aisoft.us */
/* Sat 4.5rem below the hero with a rule above it, reading as a separate strip
   floating in dark space rather than part of the hero. Pulled up so it belongs
   to the block above it, and the four-up grid narrowed so the numbers group
   instead of spanning the full width. */
.proof {
  display: grid; grid-template-columns: repeat(4, auto); justify-content: start;
  gap: 2.6rem;
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 2.4rem; padding: 1.8rem 0 3.5rem; position: relative;
}
.proof div { padding-left: 16px; border-left: 2px solid var(--primary-container); }
.proof strong {
  display: block; font-family: 'Manrope', sans-serif; font-size: 1.875rem;
  font-weight: 800; line-height: 1; letter-spacing: -.02em; color: #fff; margin-bottom: 6px;
}
.proof span { color: var(--on-inverse-muted); font-size: .9rem; line-height: 1.4; }

/* ---------- sections ---------- */
section.band { padding: 5rem 0; }
section.band.alt { background: var(--surface-low); border-block: 1px solid rgba(140,113,102,.12); }
.section-head { max-width: 62ch; margin-bottom: 2.2rem; }
.section-head p { color: var(--on-surface-variant); font-size: 1.08rem; margin-bottom: 0; }
.prose { max-width: 62ch; }
.prose p { color: var(--on-surface-variant); }
.prose strong { color: var(--on-surface); font-weight: 600; }

.two-col { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: start; }

/* ---------- the parts table ---------- */
table.parts { border-collapse: collapse; width: 100%; font-size: .97rem; }
table.parts th {
  text-align: left; font-weight: 700; color: var(--outline);
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid var(--outline-variant); padding: 0 1rem .7rem 0;
}
table.parts th:last-child, table.parts td:last-child { text-align: right; padding-right: 0; }
table.parts td {
  border-bottom: 1px solid rgba(140,113,102,.16); padding: 1rem 1rem 1rem 0;
  vertical-align: top; color: var(--on-surface-variant);
}
table.parts td:first-child {
  font-family: 'Manrope', sans-serif; font-weight: 800; color: var(--on-surface);
  white-space: nowrap; padding-right: 1.6rem; font-size: 1rem;
}
table.parts td.n {
  font-family: 'Manrope', sans-serif; font-weight: 800; color: var(--primary);
  font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 1.05rem;
}
table.parts tr:hover td { background: rgba(158,61,0,.03); }
table.parts tr:last-child td { border-bottom: 0; }

/* ---------- artifact list ---------- */
.artifacts { display: grid; gap: 1.4rem; margin: 0; padding: 0; list-style: none; }
.artifacts li { padding-left: 18px; border-left: 2px solid var(--primary); }
.artifacts b { font-family: 'Manrope', sans-serif; font-size: 1.05rem; display: block; margin-bottom: 2px; }
.artifacts span { color: var(--on-surface-variant); font-size: .95rem; }

/* ---------- callout ---------- */
.callout {
  background: var(--inverse-surface); color: var(--on-inverse-muted);
  border-radius: 16px; padding: 2rem 2.2rem; box-shadow: var(--shadow-soft);
}
.callout b { color: #fff; font-family: 'Manrope', sans-serif; }
.callout p:last-child { margin-bottom: 0; }

/* ---------- CTA band ---------- */
.cta { background: var(--inverse-surface); color: #fff; padding: 5rem 0; text-align: left; }
.cta h2 { color: #fff; }
.cta p { color: var(--on-inverse-muted); max-width: 52ch; }

/* ---------- forms ---------- */
.formwrap { padding: 4rem 0 5rem; }
.panel {
  background: var(--surface-lowest); border: 1px solid var(--outline-variant);
  border-radius: 18px; padding: 2.4rem; max-width: 32rem; box-shadow: var(--shadow-card);
}
.panel h1 { font-size: 1.9rem; }
.panel .sub { color: var(--on-surface-variant); font-size: .95rem; margin-bottom: 1.6rem; }
label { display: block; font-size: .86rem; font-weight: 700; margin: 1.2rem 0 .4rem; }
label .opt { font-weight: 400; color: var(--outline); }
input, textarea {
  width: 100%; padding: .75rem .85rem; font: inherit; font-size: .97rem;
  border: 1px solid var(--outline-variant); border-radius: 10px;
  background: var(--surface-lowest); color: var(--on-surface);
}
input:focus, textarea:focus {
  outline: 3px solid var(--primary-fixed); outline-offset: 0; border-color: var(--primary);
}
textarea { min-height: 5.5rem; resize: vertical; }
.panel .btn { width: 100%; justify-content: center; margin-top: 1.8rem; }
.hint { font-size: .84rem; color: var(--outline); margin: .4rem 0 0; }

.error, .success { padding: .8rem 1rem; border-radius: 10px; font-size: .92rem; margin-bottom: 1rem; }
.error { background: #fdeceb; color: #8c2f22; border: 1px solid #f3c3bd; }
.success { background: #eaf6ee; color: #1d6b3e; border: 1px solid #bfe3cc; }

/* ---------- admin ---------- */
table.admin { border-collapse: collapse; width: 100%; font-size: .9rem; margin-top: 1rem; }
table.admin th, table.admin td {
  text-align: left; padding: .7rem .9rem .7rem 0;
  border-bottom: 1px solid rgba(140,113,102,.16); vertical-align: top;
}
table.admin th {
  font-size: .72rem; color: var(--outline); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.tag { font-size: .76rem; padding: .15rem .6rem; border-radius: 999px; border: 1px solid var(--outline-variant); }
.tag.pending { background: #fff5e8; border-color: #f0c99a; color: #8a5300; }
.tag.active { background: #eaf6ee; border-color: #bfe3cc; color: #1d6b3e; }
.tag.rejected, .tag.suspended { background: #fdeceb; border-color: #f3c3bd; color: #8c2f22; }
.inline-form { display: inline; }
.linkish {
  background: none; border: 0; padding: 0; font: inherit; font-size: .86rem;
  color: var(--primary); cursor: pointer; text-decoration: underline; font-weight: 600;
}

footer.site { background: var(--inverse-surface); color: rgba(255,255,255,.62); padding: 3.5rem 0 2rem; font-size: .9rem; }
footer.site a { color: rgba(255,255,255,.72); text-decoration: none; }
footer.site a:hover { color: var(--primary-fixed-dim); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer-grid h4 {
  font-family: 'Manrope', sans-serif; font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.42); margin: 0 0 .9rem; font-weight: 700;
}
.footer-grid div a { display: block; margin-bottom: .55rem; }
.footer-brand { color: #fff; font-size: 1.15rem; display: inline-block; margin-bottom: .8rem; }
.footer-brand:hover { color: var(--primary-fixed-dim); }
.footer-note { color: rgba(255,255,255,.55); font-size: .86rem; margin: 0 0 .8rem; max-width: 34ch; }
.footer-note a { color: var(--primary-fixed-dim); }
.footer-base {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 3rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.45); font-size: .84rem;
}

@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; gap: 2.5rem; }
  .proof { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .hero { padding-top: 3.5rem; }
  .proof { grid-template-columns: 1fr; }
  section.band { padding: 3.2rem 0; }
  .panel { padding: 1.5rem; }
  table.parts td:first-child { white-space: normal; }
  header.site nav { gap: 1rem; font-size: .88rem; }
}

/* The header is a single flex row, so at narrow widths the brand and the nav links
   were wrapping mid-phrase: "Agentic Engineering" over two lines, "Sign in" split.
   Keep every label on one line and drop the least load-bearing pieces as room runs out. */
.brand, .brand-section, header.site nav a { white-space: nowrap; }
@media (max-width: 620px) {
  header.site .wrap { padding: 12px 18px; gap: .4rem; }
  header.site nav { gap: .9rem; }
  .btn-sm { padding: 10px 16px; font-size: .86rem; }
}
@media (max-width: 460px) {
  .brand-sep, .brand-section { display: none; }
  header.site nav { gap: .75rem; font-size: .85rem; }
}

@media (max-width: 700px) {
  /* The capture is 80-column terminal output. Below roughly this width the text is
     too small to read, and an illegible screenshot is worse than none at all. */
  .hero-capture { display: none; }

  /* Three columns is one too many at phone width: the part name was breaking onto
     four lines to make room. Fold the lesson count up beside the name instead. */
  table.parts thead { display: none; }
  table.parts, table.parts tbody, table.parts tr, table.parts td { display: block; width: 100%; }
  table.parts tr { border-bottom: 1px solid rgba(140,113,102,.16); padding: 1rem 0; }
  table.parts tr:last-child { border-bottom: 0; }
  table.parts td { border: 0; padding: 0; }
  table.parts td:first-child { padding-right: 0; font-size: 1.05rem; }
  table.parts td:nth-child(2) { margin-top: .35rem; }
  table.parts td.n { text-align: left; margin-top: .5rem; font-size: .85rem; }
  table.parts td.n::after { content: " lessons"; font-weight: 500; color: var(--on-surface-variant); }
}

/* ---------- auth: dark split, form as the focal point ---------- */
.auth {
  background: var(--inverse-surface);
  color: var(--on-inverse-surface);
  position: relative; overflow: hidden;
  min-height: 34rem;
  display: flex; align-items: center;
  padding: 4rem 0;
}
.auth::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at center, rgba(158,61,0,.30) 1.1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, black 35%, transparent 92%);
  mask-image: radial-gradient(ellipse at 30% 40%, black 35%, transparent 92%);
  pointer-events: none;
}
.auth > .wrap { position: relative; }
.auth-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 4.5rem; align-items: center; }

.badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 7px 16px; border-radius: 999px;
  border: 1px solid rgba(255,181,149,.35); background: rgba(158,61,0,.14);
  color: var(--primary-fixed-dim); font-size: .8rem; font-weight: 600;
  margin-bottom: 1.6rem;
}
.auth h1 { color: #fff; font-size: clamp(2.4rem, 4.6vw, 3.5rem); }
.auth h1 .accent { color: var(--primary-fixed-dim); display: block; }
.auth .lede { color: var(--on-inverse-muted); font-size: 1.12rem; max-width: 44ch; margin-top: 1.2rem; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.chips li {
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78); font-size: .84rem;
}

.auth-facts {
  display: grid; grid-template-columns: repeat(3, auto); gap: 2.4rem;
  margin-top: 2.6rem; padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.12); justify-content: start;
}
.auth-facts div strong {
  display: block; font-family: 'Manrope', sans-serif; font-size: 1.7rem;
  font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.02em;
}
.auth-facts div span { color: rgba(255,255,255,.6); font-size: .84rem; }

/* the card sits on dark, so it needs its own light ground */
.auth .panel {
  background: var(--surface-lowest); color: var(--on-surface);
  border: 0; border-radius: 20px; padding: 2.4rem;
  max-width: none; width: 100%;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.75);
}
.auth .panel h1 { color: var(--on-surface); font-size: 1.75rem; }
.auth .panel .sub { color: var(--on-surface-variant); }

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  header.site nav a.off-site { display: none; }
}
@media (max-width: 940px) {
  .auth { min-height: 0; padding: 3rem 0 4rem; }
  .auth-grid { grid-template-columns: 1fr; gap: 2.8rem; }
  .auth-facts { gap: 1.6rem; }
  /* Stacking put the marketing column first, so the form, the only thing anyone
     came here to reach, sat below a headline, a lede, seven chips and three stats.
     On a phone the form comes first and the copy supports it from underneath. */
  .auth-grid > div:last-child { order: -1; }
  .auth h1 { font-size: clamp(1.9rem, 7vw, 2.4rem); }

  /* Desktop spacing on a 390px screen pushed the submit button two scrolls down,
     which loses the fix above. Tighten the rhythm so the whole form is reachable.
     Inputs go to 16px because anything smaller makes iOS zoom in on focus. */
  .auth .panel { padding: 1.5rem 1.25rem; border-radius: 16px; }
  .auth .panel h1 { font-size: 1.4rem; }
  .auth .panel .sub { font-size: .92rem; }
  .auth .panel label { margin: .85rem 0 .3rem; }
  .auth .panel input, .auth .panel textarea { padding: .6rem .75rem; font-size: 1rem; }
  .auth .panel textarea { min-height: 3.25rem; }
  .auth .panel .btn { margin-top: 1.1rem; }
}

/* ---------- feedback verdict picker ---------- */
/* Radios styled as full-width rows: on a phone a hit target the size of the label
   beats a 16px circle next to it. */
.verdicts { display: grid; gap: .6rem; margin: .2rem 0 1.4rem; }
.verdicts label {
  display: flex; align-items: flex-start; gap: .75rem; margin: 0;
  padding: 12px 14px; border: 1px solid var(--outline-variant); border-radius: 12px;
  cursor: pointer; font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: .95rem; color: var(--on-surface-variant);
}
.verdicts label:hover { border-color: var(--primary); background: rgba(158,61,0,.03); }
/* The shared `input, textarea` rule sets width:100%, which stretched each radio
   across half the row and pushed its label sideways. Radios are not text fields. */
.verdicts input[type="radio"] {
  width: auto; flex: 0 0 auto; margin-top: .25rem; padding: 0;
  border: 0; background: none; accent-color: var(--primary);
}
.verdicts b { display: block; color: var(--on-surface); font-weight: 600; }
.verdicts label:has(input:checked) {
  border-color: var(--primary); background: rgba(158,61,0,.06);
}

/* Scale rows are 1-5 buttons, not stacked statements: a row reads as a scale. */
.verdicts.scale-row { grid-auto-flow: column; grid-auto-columns: 1fr; }
.verdicts.scale-row label { justify-content: center; text-align: center; }
.verdicts.scale-row span { display: block; }
select {
  width: 100%; padding: .5rem .6rem; font: inherit; font-size: .9rem;
  border: 1px solid var(--outline-variant); border-radius: 8px;
  background: var(--surface-lowest); color: var(--on-surface);
}

/* ---------- survey builder ---------- */
/* The line syntax is still what posts. This is a front end over it, because a
   teacher typing `question:` got a form with the word "question:" printed on it
   and no warning. */
.q-bar { display: flex; align-items: center; gap: .75rem; margin: 1.2rem 0 .4rem; }
.q-bar label { font-size: .86rem; font-weight: 700; }
.q-count { color: var(--on-surface-variant); font-size: .82rem; margin-left: auto; }
.q-raw {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--primary); font: inherit; font-size: .82rem; text-decoration: underline;
}
.q-row {
  border: 1px solid var(--outline-variant); border-radius: 12px;
  padding: .8rem; margin-bottom: .6rem; background: var(--surface-lowest);
}
/* Kind and Remove share the top line; the question itself gets the full width,
   because squeezing it beside a dropdown truncated it at about four words. */
.q-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.q-kind { width: auto; min-width: 9.5rem; flex: 0 0 auto; }
.q-prompt { flex: 1 1 100%; }
.q-del {
  flex: 0 0 auto; margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--on-surface-variant); font: inherit; font-size: .82rem; text-decoration: underline;
}
.q-del:hover { color: var(--error, #b3261e); }
.q-opts { margin: .6rem 0 0 .35rem; padding-left: .75rem; border-left: 2px solid var(--outline-variant); }
.q-opt { display: flex; gap: .4rem; align-items: center; margin-bottom: .35rem; }
.q-opt input { font-size: .92rem; padding: .45rem .6rem; }
.q-opt-del {
  flex: 0 0 auto; width: 1.9rem; height: 1.9rem; line-height: 1;
  border: 1px solid var(--outline-variant); border-radius: 8px;
  background: none; cursor: pointer; color: var(--on-surface-variant); font-size: 1rem;
}
.q-opt-add {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--primary); font: inherit; font-size: .82rem;
}
.btn-quiet {
  background: none; border: 1px dashed var(--outline); color: var(--on-surface);
  width: 100%; justify-content: center; margin-top: .2rem;
}
.btn-quiet:hover { border-style: solid; border-color: var(--primary); color: var(--primary); }

@media (max-width: 620px) {
  .q-kind { flex: 1 1 auto; min-width: 0; }
}