/* ui/qfracfr.css — Worker 23. Every selector prefixed .qf- . Loop IQ chrome.
   Card #FFF / 0.67px #E5E7EB / 12px / 24px. Pills 9999px. Primary filled #271257.
   The primary button declares BOTH background and colour, explicitly, because a button
   that rendered white-on-white passed every gate we had. */

.qf-wrap { display: flex; flex-direction: column; gap: 16px; max-width: 1180px; }

.qf-card {
  background: #FFF; border: 0.67px solid #E5E7EB; border-radius: 12px; padding: 24px;
}
.qf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .qf-two { grid-template-columns: 1fr; } }

.qf-head-l { display: flex; align-items: center; gap: 10px; }
.qf-head h2 { font-family: var(--font-head, 'Sansation', 'Poppins', sans-serif); font-size: 24px; font-weight: 600;
  color: #1A0B3D; margin: 0; }
.qf-head p { margin: 6px 0 0; color: #6B7280; font-size: 14px; }
.qf-lock { width: 20px; height: 20px; color: #4330F5; flex: 0 0 auto; }

.qf-pill { display: inline-flex; align-items: center; border-radius: 9999px;
  padding: 3px 10px; font-size: 11px; font-weight: 600; line-height: 1.6; }
.qf-pill--lock { background: #EDE9FE; color: #4330F5; }
.qf-pill--hot { background: #271257; color: #FFF; margin-left: 8px; }
.qf-pill--quiet { background: #F3F4F6; color: #6B7280; }
.qf-pill--held { background: #ECFDF5; color: #065F46; }
.qf-pill--conn { background: #EEF2FF; color: #4330F5; }
.qf-pill--yours { background: #F3F4F6; color: #6B7280; }

/* ---- the hook ---- */
.qf-hook { background: linear-gradient(180deg, #FFF 0%, #FAF9FF 100%);
  border-color: #DDD6FE; }
.qf-hook-top { display: flex; gap: 12px; align-items: flex-start; }
.qf-hook-top .qf-lock { width: 22px; height: 22px; margin-top: 2px; }
.qf-hook h3 { font-family: var(--font-head, 'Sansation', 'Poppins', sans-serif); font-size: 18px; color: #1A0B3D;
  margin: 0; font-weight: 600; }
.qf-hook-sub { margin: 4px 0 0; color: #4B5563; font-size: 13px; max-width: 70ch; }
.qf-hook-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 18px; }
@media (max-width: 900px) { .qf-hook-grid { grid-template-columns: 1fr; } }
.qf-hook-grid h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: #6B7280; margin: 0 0 8px; font-weight: 600; }
.qf-tick, .qf-dash { list-style: none; margin: 0; padding: 0; }
.qf-tick li, .qf-dash li { position: relative; padding-left: 18px; margin-bottom: 6px;
  font-size: 13px; color: #1F2937; }
.qf-tick li::before { content: "\2713"; position: absolute; left: 0; color: #4330F5;
  font-weight: 700; }
.qf-dash li::before { content: "\2014"; position: absolute; left: 0; color: #9CA3AF; }
.qf-auditor { margin: 10px 0 0; font-size: 12px; color: #6B7280; }

/* ---- the two returns ---- */
.qf-return-head { display: flex; align-items: center; justify-content: space-between; }
.qf-return h3 { font-family: var(--font-head, 'Sansation', 'Poppins', sans-serif); font-size: 16px; color: #1A0B3D;
  margin: 0; font-weight: 600; }
.qf-parts { list-style: none; margin: 16px 0 0; padding: 0; }
.qf-part { display: flex; gap: 10px; padding: 10px 0; border-top: 0.67px solid #F3F4F6; }
.qf-part:first-child { border-top: 0; }
.qf-part-n { flex: 0 0 20px; height: 20px; border-radius: 9999px; background: #F3F4F6;
  color: #6B7280; font-size: 11px; font-weight: 600; display: flex;
  align-items: center; justify-content: center; margin-top: 1px; }
.qf-part b { font-size: 13px; color: #111827; font-weight: 600; }
.qf-part p { margin: 2px 0 0; font-size: 12px; color: #6B7280; }
.qf-part--audited .qf-part-n { background: #4330F5; color: #FFF; }

.qf-dues { margin-top: 16px; padding-top: 12px; border-top: 0.67px solid #E5E7EB; }
.qf-due { display: flex; justify-content: space-between; font-size: 12px; color: #4B5563;
  padding: 3px 0; }
.qf-due b { color: #111827; }
.qf-duenote { margin: 8px 0 0; font-size: 11px; color: #9CA3AF; }

/* ---- pre-fill map ---- */
.qf-pf { width: 100%; border-collapse: collapse; margin-top: 12px; }
.qf-pf td { padding: 12px 8px; border-top: 0.67px solid #F3F4F6; vertical-align: top; }
.qf-pf tr:first-child td { border-top: 0; }
.qf-pf td:first-child { width: 148px; }
.qf-pf b { font-size: 13px; color: #111827; font-weight: 600; }
.qf-pf p { margin: 2px 0 0; font-size: 12px; color: #6B7280; max-width: 60ch; }
.qf-pf-ret { text-align: right; white-space: nowrap; }
.qf-pf-ret span { display: block; font-size: 11px; color: #9CA3AF; }

/* ---- coverage / systems ---- */
.qf-card h3 { font-family: var(--font-head, 'Sansation', 'Poppins', sans-serif); font-size: 16px; color: #1A0B3D;
  margin: 0 0 4px; font-weight: 600; }
.qf-cov { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0;
  border-top: 0.67px solid #F3F4F6; font-size: 13px; }
.qf-cov-l { color: #4B5563; }
.qf-cov-r { text-align: right; }
.qf-cov-r b { color: #111827; display: block; }

.qf-absent { color: #92400E; background: #FFFBEB; border-radius: 6px; padding: 1px 6px;
  font-size: 12px; display: inline-block; max-width: 46ch; }
.qf-absent--inline { margin-top: 4px; }

.qf-sysgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.qf-sys { border: 0.67px solid #E5E7EB; border-radius: 12px; padding: 12px; }
.qf-sys--seen { border-color: #DDD6FE; background: #FAF9FF; }
.qf-sys-top { display: flex; justify-content: space-between; align-items: center; }
.qf-sys-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: #6B7280; font-weight: 600; }
.qf-tickmark { color: #4330F5; font-weight: 700; }
.qf-sys b { display: block; margin-top: 4px; font-size: 13px; color: #111827; }
.qf-sys-feeds { margin: 4px 0 0; font-size: 11px; color: #9CA3AF; }

/* ---- CTA: the only primary button on this surface ---- */
.qf-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #FFF; border: 0.67px solid #E5E7EB; border-radius: 12px; padding: 20px 24px; }
.qf-cta b { font-size: 14px; color: #1A0B3D; font-weight: 600; }
.qf-btn-primary { background: #271257; color: #FFFFFF; border: 1px solid #271257;
  border-radius: 9999px; padding: 10px 20px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; }
.qf-btn-primary:hover:not(:disabled) { background: #1A0B3D; border-color: #1A0B3D;
  color: #FFFFFF; }
.qf-btn-primary:disabled { opacity: .55; cursor: default; color: #FFFFFF; }
.qf-cta--done { background: #FAF9FF; border-color: #DDD6FE; gap: 10px;
  justify-content: flex-start; }

.qf-note { margin: 0; font-size: 12px; color: #6B7280; }
.qf-src { margin: 0; font-size: 11px; color: #9CA3AF; }
.qf-src a { color: #581C87; text-decoration: none; }
.qf-src a:hover { text-decoration: underline; }


/* ============================================================================
   THE FORM. (W48)
   Namespaced qf- like the rest of this file. No bare element selectors: this
   mounts inside the shell and must not reach outside its own card.
   ============================================================================ */
.qf-formcard { padding-bottom: 14px; }

.qf-form-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.qf-form-head h3 { margin: 0; }
.qf-pickers { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qf-pickers select {
  font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 8px;
  border: 1px solid #E5E7EB; background: #FFF;
  color: inherit; max-width: 260px;
}
.qf-pickers select:focus-visible { outline: 2px solid var(--accent, #4330F5); outline-offset: 1px; }

/* --- the field table -------------------------------------------------------- */
.qf-fields { width: 100%; border-collapse: collapse; table-layout: fixed; }
.qf-fields td { padding: 9px 10px; border-top: 1px solid #F3F4F6; vertical-align: top; }
.qf-f-l { width: 30%; }
.qf-f-l label { display: block; font-weight: 600; cursor: pointer; }
.qf-f-u { width: 9%; color: var(--muted, #6b7480); font-size: 12px; white-space: nowrap; }
.qf-f-i { width: 13%; }
.qf-f-t { width: 20%; }
.qf-f-w { width: 28%; }

.qf-fields input[type="number"] {
  width: 100%; min-width: 0; font: inherit; font-size: 13px; padding: 6px 9px; border-radius: 8px;
  border: 1px solid #E5E7EB; background: #FFF; color: inherit;
  text-align: right;
}
.qf-fields input:focus-visible { outline: 2px solid var(--accent, #4330F5); outline-offset: 1px; }
.qf-f--bad input[type="number"] { border-color: #C0435A; }

/* The estimate we pre-filled, showing its own arithmetic. */
.qf-est {
  display: block; font-size: 11px; color: var(--muted, #6b7480);
  font-weight: 400; margin-top: 2px;
}

/* A trap chip: it sits on the exact row the trap bites. */
.qf-trap {
  display: inline-block; margin: 0 4px 4px 0; padding: 2px 7px; border-radius: 999px;
  font-size: 11px; line-height: 1.6; cursor: pointer; text-align: left;
  white-space: nowrap;   /* a chip that wraps is a blob, not a chip */
  border: 1px solid #F3D78C; background: #FFFBEB;
  color: #B45309;
}
.qf-trap:hover { filter: brightness(0.97); }
.qf-trap:focus-visible { outline: 2px solid var(--accent, #4330F5); outline-offset: 1px; }

.qf-prob { display: block; font-size: 12px; color: #A3243C; }
.qf-src-q { display: block; font-size: 11px; color: var(--muted, #6b7480); }

.qf-f--derived td { border-top: 2px solid #DDD6FE; background: #FAF9FF; }
.qf-f-i--out { text-align: right; padding-right: 15px; }

/* --- the traps, in full, one click away ------------------------------------- */
details.qf-traps { margin: 0 0 10px; }
details.qf-traps > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #4330F5; padding: 4px 0; }
details.qf-traps > summary:focus-visible { outline: 2px solid var(--accent, #4330F5); }
.qf-trapd { padding: 8px 0; border-top: 1px solid var(--line, #eceff3); }
.qf-trapd h4 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: #6B7280; font-weight: 600; }
.qf-trapd p { margin: 0 0 4px; }
.qf-trapd-on { font-size: 11px; color: var(--muted, #6b7480); }
.qf-trapd-src { font-size: 11px; color: var(--muted, #6b7480); margin-top: 6px; }

@media (max-width: 860px) {
  .qf-fields, .qf-fields tbody, .qf-fields tr, .qf-fields td { display: block; width: auto; }
  .qf-fields tr { border-top: 1px solid var(--line, #eceff3); padding: 6px 0; }
  .qf-fields td { border-top: 0; padding: 2px 0; }
  .qf-fields input[type="number"] { max-width: 200px; }
}

/* The home picker is a type-ahead over the provider's homes. A name it does not recognise
   is refused here and refused again by the route — never resolved to "the first home". */
.qf-pickers input#qf-home {
  font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 8px; min-width: 210px;
  border: 1px solid #E5E7EB; background: #FFF; color: inherit;
}
.qf-pickers input#qf-home:focus-visible {
  outline: 2px solid var(--accent, #4330F5); outline-offset: 1px;
}
.qf-pickers input.qf-bad { border-color: #C0435A; }


/* ---- config tab (WGS-104): the inline patch styles, moved into classes.
   Chrome matches the QI config window (qi_integration_config.css); the
   qfr-cfg- prefix namespaces this module's deltas (gate_css_namespace). ---- */
.qfr-cfg { padding: 0; }
.qfr-cfg-card { padding: 16px 20px; }
.qfr-cfg-desc { margin: 4px 0 12px; font-size: 13px; color: var(--lq-text-sub, #6B7280); }
.qic-qfirst .qfr-cfg-cascade { flex-direction: column; align-items: stretch; gap: 10px; }
.qfr-cfg-availrow { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.qfr-cfg-avail { font-size: 10.5px; font-weight: 700;
  color: var(--lq-success, #0B8A4B); background: #E7F7EE;
  border: 1px solid #B8E6CD; border-radius: 9999px; padding: 2px 9px; white-space: nowrap; }
.qfr-cfg-actions { display: flex; align-items: center; gap: 8px; }
.qfr-cfg-meta { margin: 8px 0 0; font-size: 11px; color: var(--lq-text-sub, #6B7280); }