/*
 * SUP! design system. Tokens and components come from
 * docs/design/pm_SUP! Carrier Setup Platform (1)/SUP Carrier Setup.dc.html
 */

:root {
  --paper: #F7F5F0;
  --paper-soft: #FBFAF7;
  --card: #fff;
  --ink: #1F2226;
  --ink-soft: #4A5059;
  --muted: #7A818B;
  --faint: #9AA1AA;
  --line: #E6E1D6;
  --line-soft: #EEEAE0;
  --field-line: #C9CED5;
  --navy: #1B2A41;
  --teal: #0E7C86;
  --teal-soft: #EAF5F5;
  --sand: #F6E2B1;
  --green: #2E9E52;
  --green-soft: #E8F6EC;
  --orange: #D97B0B;
  --orange-soft: #FDF1E0;
  --red: #C93B3B;
  --red-soft: #FBEAEA;
  --purple: #7A5AF8;
  --blue: #1668C7;
  --fill: #FFFBE6;
  --fill-line: #F0D65A;
  --display: Sora, Manrope, sans-serif;
  --body: Manrope, Helvetica, Arial, sans-serif;
  --shadow-card: 0 1px 2px rgba(27, 42, 65, .04);
  --shadow-sheet: 0 1px 3px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .06);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); color: var(--navy); margin: 0; letter-spacing: -.02em; }
h1 { font-size: 28px; font-weight: 800; }
h2 { font-size: 20px; font-weight: 800; }
h3 { font-size: 16px; font-weight: 700; }
p { margin: 0; }
a { color: var(--navy); text-decoration-color: #C9C2B3; text-underline-offset: 2px; }
a:hover { color: var(--teal); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
[hidden] { display: none !important; }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.nums { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stack { display: grid; gap: 20px; align-content: start; }
.stack-sm { display: grid; gap: 12px; align-content: start; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid #C9C2B3; border-radius: 10px; background: var(--card); color: var(--navy);
  font-weight: 700; font-size: 15px; padding: 11px 18px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--navy); color: var(--navy); }
.btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 6px 16px rgba(27, 42, 65, .18); }
.btn-primary:hover { background: #24375A; color: #fff; }
.btn-dark { background: var(--ink); border-color: var(--ink); color: #fff; border-radius: 6px; }
.btn-dark:hover { color: #fff; background: #000; }
.btn-go { background: var(--green); border-color: var(--green); color: #fff; }
.btn-go:hover { background: #26864A; color: #fff; border-color: #26864A; }
.btn-go:disabled, .btn-go:disabled:hover { opacity: .5; cursor: not-allowed; background: var(--green); border-color: var(--green); }
.btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn-danger:hover { background: #A92F2F; border-color: #A92F2F; color: #fff; }
.btn-sand { background: var(--sand); border-color: var(--sand); color: var(--navy); }
.btn-lg { padding: 14px 24px; }
.btn-sm { padding: 7px 14px; font-size: 13px; border-radius: 8px; }
.btn-block { width: 100%; }
.btn-wrap { white-space: normal; text-align: center; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
/* The wordmark's letters end about 6px above the image's bottom edge, where the magnifier
   handle hangs. The offset puts the lettering on the button text's baseline, and the matching
   negative margin keeps the shifted image from leaving a gap above. */
.btn-brand { align-items: baseline; max-width: 100%; }
.btn-logo { height: 26px; width: auto; position: relative; top: 6px; margin-top: -6px; }
.link-btn { border: 0; background: none; padding: 0; cursor: pointer; font-weight: 700; color: var(--navy); text-decoration: underline; text-decoration-color: #C9C2B3; text-underline-offset: 2px; }
.link-btn:hover { color: var(--teal); }
.icon-btn { border: 0; background: none; cursor: pointer; color: var(--faint); font-size: 15px; padding: 4px 6px; border-radius: 6px; }
.icon-btn:hover { color: var(--teal); background: var(--teal-soft); }
form.inline { display: inline; }

/* ---------- Forms ---------- */

.field { display: grid; gap: 6px; }
.field > label, .label { font-weight: 700; font-size: 14px; }
.field .hint { font-size: 12px; color: var(--muted); }
.input, .select, .textarea {
  width: 100%; border: 1px solid var(--field-line); border-radius: 6px; background: #fff;
  padding: 11px 14px; font-size: 16px; min-height: 46px;
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.input-lg { min-height: 50px; font-size: 18px; font-weight: 600; }
.input-fill { background: var(--fill); border-color: var(--fill-line); }
.input-group { display: flex; gap: 8px; }
.input-group .input { flex: 1; min-width: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--navy); flex-shrink: 0; }

.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice input:disabled { cursor: not-allowed; }
.choice input + span {
  display: block; border: 1px solid var(--field-line); border-radius: 6px; padding: 12px; text-align: center;
  font-weight: 600; font-size: 14px; color: var(--ink-soft); background: #fff;
}
.choice input:checked + span { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); background: var(--teal-soft); color: var(--ink); font-weight: 700; }
.choice input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.choice input:disabled + span { color: var(--faint); background: var(--paper-soft); }
.soon { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-left: 4px; }

/* ---------- Flash, cards, pills ---------- */

.flash-wrap { max-width: 1040px; width: 100%; margin: 16px auto 0; padding: 0 24px; display: grid; gap: 8px; }
.flash { border-radius: 8px; padding: 12px 16px; font-weight: 600; font-size: 14px; border: 1px solid #CFE7D6; background: #F2FAF4; color: #1D6B37; }
.flash-alert { border-color: #F0C9C9; background: var(--red-soft); color: #8F2424; }
.callout-warn { border: 1px solid #F2D2A6; background: var(--orange-soft); color: #8A4B06; border-radius: 8px; padding: 12px 16px; font-size: 14px; }
.callout-ok { border: 1px solid #BFE3C9; background: var(--green-soft); color: #1E6B38; border-radius: 8px; padding: 12px 16px; font-size: 14px; margin: 0; }
/* Rules tab. The broker's rules read as sentences with their numbers typed in; the vetting
   choice is the one strong element. */
.page.rules-page { max-width: 760px; padding-top: 32px; padding-bottom: 0; }
.rules-form { display: grid; gap: 24px; }
.rules-intro { display: grid; gap: 6px; }
.rules-intro p { max-width: 62ch; }

.vet-toggle { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
.vet-toggle > legend { padding: 0; margin-bottom: 10px; }
.vet-toggle-track { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.vet-option { position: relative; display: block; cursor: pointer; }
.vet-radio { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.vet-option-body { display: grid; gap: 3px; height: 100%; padding: 14px 16px; border-radius: 10px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); transition: background .15s, color .15s, box-shadow .15s; }
.vet-option-body strong { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; }
.vet-option:hover .vet-radio:not(:checked):not(:disabled) + .vet-option-body { background: rgba(255, 255, 255, .7); }
.vet-radio:checked + .vet-option-body { background: var(--navy); color: #C5CFDD; box-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 6px 16px rgba(27, 42, 65, .18); }
.vet-radio:checked + .vet-option-body strong { color: #fff; }
.vet-radio:focus-visible + .vet-option-body { outline: 2px solid var(--teal); outline-offset: 2px; }
.vet-option.is-locked, .vet-radio:disabled { cursor: not-allowed; }
.vet-radio:disabled + .vet-option-body strong { color: var(--muted); }
.vet-note { display: none; border: 1px solid #CDE6E7; background: var(--teal-soft); color: #0B5C63; border-radius: 10px; padding: 12px 16px; font-size: 14px; }

.rule-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.rule-card-head { display: grid; gap: 3px; padding: 16px 20px 14px; border-bottom: 1px solid var(--line-soft); }
.rule-list { list-style: none; margin: 0; padding: 0; }
.rule-item { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 20px; min-height: 60px; }
.rule-item + .rule-item { border-top: 1px solid var(--line-soft); }
.rule-text { display: grid; gap: 2px; min-width: 0; }
.rule-sentence { font-size: 15px; line-height: 2.1; color: var(--ink); transition: color .15s; }
.rule-lock { color: var(--muted); line-height: 1.3; }
.rule-item:has(.switch input:not(:checked)) .rule-sentence { color: var(--muted); }
.rule-item.is-locked .rule-sentence { color: var(--faint); }

.rule-input { display: inline-flex; align-items: center; margin: 0 6px; vertical-align: middle; border: 1px solid var(--field-line); border-radius: 6px; background: #fff; line-height: 1.4; }
.rule-input:focus-within { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.rule-input input { width: 4.5ch; border: 0; background: transparent; padding: 5px 8px; font-weight: 700; color: var(--navy); text-align: left; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.rule-input input::-webkit-inner-spin-button, .rule-input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rule-input input:focus { outline: 0; }
.rule-input.is-dollars input { width: 9ch; }
.rule-input .affix { color: var(--muted); font-weight: 600; }
.rule-input .affix:first-child { padding-left: 9px; }
.rule-input .affix:last-child { padding-right: 9px; }
.rule-input.is-dollars input { padding-left: 2px; }
.rule-input.is-percent input { width: 3.5ch; padding-right: 2px; }
.rule-item:has(.switch input:not(:checked)) .rule-input { background: var(--paper-soft); }
.rule-item:has(.switch input:not(:checked)) .rule-input input { color: var(--muted); }
.rule-input:has(input:disabled) { background: var(--paper-soft); border-color: var(--line); }

.switch { position: relative; display: inline-flex; flex-shrink: 0; }
.switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.switch input:disabled { cursor: not-allowed; }
.switch-track { position: relative; width: 42px; height: 24px; border-radius: 999px; background: #CDD2D9; transition: background .15s; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(27, 42, 65, .25); transition: transform .15s; }
.switch input:checked + .switch-track { background: var(--teal); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--teal); outline-offset: 2px; }
.switch input:disabled + .switch-track { opacity: .45; }

.rules-savebar { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin: 0 -24px; padding: 14px 24px 18px; background: rgba(255, 255, 255, .94); border-top: 1px solid var(--line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* With SearchCarriers vetting, only the two insurance minimums apply. The other rules stay in
   the form, hidden, so saving keeps them. */
.rules-form:has(#setup_pack_vetting_source_searchcarriers:checked) .for-rules { display: none; }
.rules-form:has(#setup_pack_vetting_source_searchcarriers:checked) .vet-note { display: block; }

@media (max-width: 560px) {
  .vet-toggle-track { grid-template-columns: 1fr; }
  .rule-item { padding: 12px 16px; gap: 14px; }
  .rule-card-head { padding: 14px 16px 12px; }
  .rules-savebar { margin: 0 -16px; padding: 12px 16px 16px; }
  .rules-savebar .small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vet-option-body, .switch-track, .switch-track::after, .rule-sentence { transition: none; }
}
.errors { border: 1px solid #F0C9C9; background: var(--red-soft); color: #8F2424; border-radius: 8px; padding: 12px 16px; font-size: 14px; font-weight: 600; }
.errors ul { margin: 0; padding-left: 18px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 18px; }
.card-lg { padding: 24px; }

.pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; color: var(--tone); border: 1px solid var(--tone); padding: 3px 10px 3px 8px; border-radius: 999px; white-space: nowrap; --tone: var(--faint); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); }
.tone-sent { --tone: var(--faint); }
.tone-opened { --tone: var(--blue); }
.tone-in_progress { --tone: var(--orange); }
.tone-pending_review { --tone: var(--purple); }
.tone-completed { --tone: var(--green); }
.tone-expired { --tone: var(--red); }
.badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, white); }
.tag { font-size: 12px; font-weight: 600; background: var(--paper); padding: 3px 8px; border-radius: 4px; white-space: nowrap; }
.token { background: #FFF4C2; border: 1px solid var(--fill-line); padding: 2px 8px; border-radius: 4px; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }
button.token:hover { background: var(--fill-line); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--faint)); display: inline-block; flex-shrink: 0; }

/* ---------- Broker shell ---------- */

.topbar { background: #fff; border-bottom: 1px solid var(--line); min-height: 60px; display: flex; align-items: stretch; padding: 0 20px; gap: 2px; position: relative; z-index: 5; }
.brand { align-self: center; margin-right: 16px; text-decoration: none; flex-shrink: 0; }
.logo {
  width: 72px; height: 72px; border-radius: 14px; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center;
  font: 800 22px var(--display); letter-spacing: -.03em; transform: rotate(-14deg); margin: 8px 4px -28px 0; position: relative; z-index: 5;
  box-shadow: 0 8px 20px rgba(14, 124, 134, .3);
}
.brand:hover .logo { transform: rotate(-8deg); transition: transform .15s; }
.topnav { display: flex; align-items: stretch; overflow-x: auto; }
.topnav a { display: flex; align-items: center; border-bottom: 3px solid transparent; border-top: 3px solid transparent; font-weight: 600; font-size: 14px; padding: 0 10px; color: #6B6F76; white-space: nowrap; text-decoration: none; }
.topnav a:hover { color: var(--navy); }
.topnav a[aria-current] { border-bottom-color: var(--teal); color: var(--navy); }
.topbar-end { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-shrink: 0; font-size: 13px; font-weight: 600; color: #6B6F76; }
/* Styled like the "Sign in with SearchCarriers" button: navy, with the white wordmark. */
.who { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: 10px; background: var(--navy); box-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 6px 16px rgba(27, 42, 65, .18); white-space: nowrap; }
.who-logo { display: block; height: 18px; width: auto; }
.who .live-dot, .who .live-dot::after { background: #3CC96B; }
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green); animation: live-pulse 1.8s ease-out infinite; }
@keyframes live-pulse {
  0% { transform: scale(1); opacity: .6; }
  100% { transform: scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot::after { animation: none; opacity: 0; }
}

.page { max-width: 1040px; width: 100%; margin: 0 auto; padding: 0 24px; }
.page-wide { max-width: 1280px; }
.page-head { padding-top: 40px; }
.band-white { background: #fff; flex: 1; }
.band-paper { background: var(--paper); border-bottom: 1px solid var(--line); }

.crumbs { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--ink); text-decoration: none; font-weight: 600; }
.crumbs .sep { color: #B0B6BE; }
.tabs { display: flex; gap: 28px; margin-top: 22px; font-weight: 600; font-size: 15px; overflow-x: auto; }
.tabs a { padding-bottom: 12px; color: var(--ink-soft); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs a[aria-current] { border-bottom-color: var(--teal); color: var(--teal); }

/* ---------- Dashboard ---------- */

.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter { font-weight: 600; font-size: 13px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-soft); display: flex; gap: 6px; align-items: center; white-space: nowrap; text-decoration: none; }
.filter .count { font-size: 11px; background: var(--paper); color: var(--ink-soft); padding: 1px 6px; border-radius: 999px; }
.filter[aria-current] { background: var(--navy); border-color: var(--navy); color: #fff; }
.filter[aria-current] .count { background: rgba(255, 255, 255, .18); color: #fff; }
.search { background: #fff; border: 1px solid var(--line); border-radius: 999px; height: 40px; width: 260px; max-width: 100%; padding: 0 16px; font-size: 14px; }
.search:focus { outline: 0; border-color: var(--teal); }

.table { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); }
.table-head, .table-row { display: grid; grid-template-columns: minmax(200px, 2fr) 1.2fr 1fr 1.3fr 1.4fr 70px; gap: 12px; padding: 14px 20px; align-items: center; }
.table-head { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8A8F98; border-bottom: 1px solid var(--line-soft); background: var(--paper-soft); }
.table-row { padding: 18px 20px; border-bottom: 1px solid var(--line-soft); position: relative; color: var(--ink-soft); }
.table-row:last-child { border-bottom: 0; }
.table-row:hover { background: var(--paper-soft); }
.table-row .carrier { display: flex; align-items: center; gap: 10px; min-width: 0; }
.table-row .carrier a { font-weight: 700; color: var(--navy); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-row .carrier a::after { content: ""; position: absolute; inset: 0; }
.table-row .actions { display: flex; gap: 4px; justify-content: flex-end; position: relative; z-index: 1; }
.monogram { width: 34px; height: 34px; border-radius: 8px; background: var(--sand); color: var(--navy); font: 700 12px var(--display); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.empty { padding: 56px 24px; text-align: center; display: grid; gap: 10px; justify-items: center; }

.promo { background: var(--navy); color: #C9D1DE; border-radius: 14px; padding: 32px 40px; display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.promo h3 { color: #fff; font-size: 20px; font-weight: 800; margin-bottom: 10px; }
.promo p { line-height: 1.55; margin-bottom: 20px; }
.promo-steps { display: grid; gap: 8px; width: 240px; font-size: 13px; font-weight: 600; }
.promo-steps span { border: 1px solid #34486A; border-radius: 8px; padding: 10px 12px; background: #243652; color: #C9D1DE; }
.promo-steps .done { color: #9BE0B1; }

/* ---------- Dialog ---------- */

dialog.modal { border: 0; padding: 0; border-radius: 10px; width: 560px; max-width: calc(100vw - 32px); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); margin-top: 80px; color: var(--ink); }
dialog.modal::backdrop { background: rgba(31, 34, 38, .45); }
.modal-head { padding: 22px 28px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.modal-body { padding: 24px 28px; display: grid; gap: 20px; }
.modal-foot { padding: 18px 28px; border-top: 1px solid #E3E6EA; display: flex; justify-content: flex-end; gap: 10px; }
dialog.modal-sm { width: 440px; }
.modal-close { border: 0; background: none; cursor: pointer; font-size: 22px; line-height: 1; color: var(--muted); }

.match { border: 1px solid #CFE7D6; background: #F2FAF4; border-radius: 8px; padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.match-miss { border-color: #F0C9C9; background: var(--red-soft); }
.tick { width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tick-sm { width: 18px; height: 18px; font-size: 11px; }
.tick-lg { width: 72px; height: 72px; font-size: 36px; margin: 0 auto 16px; }
.tick-soft { background: var(--green-soft); color: var(--green); }
.tick-warn { background: var(--orange-soft); color: var(--orange); }
.tick-idle { background: var(--paper); color: var(--faint); }

.linkbox { background: var(--paper); border-radius: 6px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.linkbox .mono { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Pack (contract) page ---------- */

.pack-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; padding-top: 32px; padding-bottom: 60px; }
.doc-list { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.doc-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 16px 20px; border-bottom: 1px solid #EEF0F3; }
.doc-row:last-child { border-bottom: 0; }
.doc-row strong { display: block; }
.doc-state { font-size: 13px; font-weight: 600; color: var(--tone, var(--muted)); }
.timeline { display: grid; gap: 12px; }
.timeline li { display: grid; grid-template-columns: 10px 1fr; gap: 12px; align-items: start; list-style: none; }
.timeline { padding: 0; margin: 0; }
.timeline .dot { width: 10px; height: 10px; margin-top: 5px; }
.timeline .when { display: block; color: var(--muted); font-size: 12px; }
.tone-neutral { --tone: var(--faint); }
.tone-info { --tone: var(--blue); }
.tone-success { --tone: var(--green); }
.tone-warn { --tone: var(--orange); }
.facts { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.facts dt { color: var(--muted); font-weight: 600; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.section-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }

/* ---------- Editor ---------- */

.editor { display: flex; flex-wrap: wrap; gap: 24px; padding-top: 28px; padding-bottom: 60px; }
.editor-library { flex: 1 1 220px; max-width: 260px; }
.editor-library .stack-sm { grid-template-columns: minmax(0, 1fr); }
.editor-canvas { flex: 100 1 460px; min-width: 0; }
.editor-inspector { flex: 1 1 240px; max-width: 320px; }
.library-item { width: 100%; min-width: 0; border: 1px solid #D9DCE1; border-radius: 6px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 600; cursor: grab; background: #fff; text-align: left; }
.library-item .grow { overflow-wrap: anywhere; }
.library-item .tag { flex-shrink: 0; }
.library-item:hover { border-color: var(--teal); box-shadow: 0 2px 8px rgba(14, 124, 134, .12); }
.grip { color: #B0B6BE; letter-spacing: -2px; cursor: grab; user-select: none; }
.page-tabs { display: flex; gap: 6px; align-items: flex-end; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.page-tab { white-space: nowrap; padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--ink-soft); border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; background: transparent; display: flex; gap: 8px; align-items: center; cursor: pointer; }
.page-tab[aria-selected="true"] { font-weight: 700; color: var(--ink); border-color: #E3E6EA; background: #F4F5F7; }
.page-tab.drop-target { border-color: var(--teal); background: var(--teal-soft); }
a.page-tab { text-decoration: none; }
.page-tab-pdf { color: var(--teal); }
.page-tab-pdf[aria-selected="true"] { cursor: default; }
.page-tabs form { display: contents; }
.page-add { padding: 10px 14px; font-size: 14px; font-weight: 700; color: var(--teal); cursor: pointer; border: 0; background: none; white-space: nowrap; }
.canvas { background: var(--paper); padding: 20px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; }
.sheet { background: #fff; box-shadow: var(--shadow-sheet); padding: 32px 28px; display: grid; gap: 10px; max-width: 720px; margin: 0 auto; }
.block { border: 1px dashed #D9DCE1; border-radius: 6px; padding: 14px 16px 14px 12px; display: flex; gap: 12px; background: #fff; cursor: pointer; }
.block:hover { border-color: var(--teal); }
.block[aria-selected="true"] { border-color: var(--blue); background: #F3F8FD; border-style: solid; }
.block.dragging, .page-tab.dragging { opacity: .4; }
.block.drop-before { box-shadow: 0 -3px 0 var(--teal); }
.block-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 8px; flex-wrap: wrap; }
.block-tools { display: flex; gap: 10px; font-size: 12px; }
.block-tools select { appearance: none; }
.block-tools button, .block-tools select { border: 0; background: none; padding: 0; font-size: 12px; color: var(--faint); cursor: pointer; }
.block-tools button:hover, .block-tools select:hover { color: var(--teal); }
.block-text { font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.block-text.is-heading { font: 800 18px var(--display); color: var(--navy); }
.block-text .tok { background: #FFF4C2; border-radius: 3px; padding: 0 2px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
/* The textarea and the highlighted copy behind it must wrap identically, so they share every rule that moves text. */
.block-edit-wrap { position: relative; background: #fff; border-radius: 4px; }
.block-edit { display: block; width: 100%; min-height: 3em; margin: 0; resize: none; overflow: hidden; font: inherit; font-size: 14px; line-height: 1.55; letter-spacing: normal; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; color: inherit; background: transparent; border: 1px solid #D9DCE1; border-radius: 4px; padding: 8px 10px; cursor: text; position: relative; }
.block-edit:focus { outline: 0; border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.block-edit.is-heading { font: 800 18px var(--display); color: var(--navy); }
.block-edit-backdrop { position: absolute; inset: 0; height: auto; color: transparent; border-color: transparent; pointer-events: none; }
.block-edit-backdrop .tok { background: #FFF4C2; color: transparent; border-radius: 3px; }
.dropzone { border: 2px dashed #9CCBCF; border-radius: 6px; padding: 18px; text-align: center; color: var(--teal); font-weight: 700; font-size: 14px; background: var(--teal-soft); }
.dropzone.drop-target { background: #D5ECEC; }
.save-state { color: var(--muted); font-size: 14px; }
.token-list { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Agreement sheet ---------- */

.agreement { background: #fff; box-shadow: var(--shadow-sheet); padding: 52px 56px; font-size: 14.5px; line-height: 1.7; }
.agreement + .agreement { margin-top: 20px; }
.page-label { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
.agreement h2 { margin: 0 0 18px; }
.agreement p { margin: 0 0 14px; }
.agreement p:last-child { margin-bottom: 0; }
mark.fill { background: var(--fill); border-bottom: 1px solid var(--fill-line); padding: 0 3px; color: inherit; }
mark.fill-empty { background: #F4F5F7; border-bottom-color: var(--field-line); color: var(--faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.signature-line { margin-top: 8px; border-top: 1px solid var(--ink); padding-top: 8px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); }
.signature-ink { font: italic 30px "Brush Script MT", "Segoe Script", cursive; color: var(--ink); min-height: 56px; display: flex; align-items: flex-end; }
.signature-ink img { max-height: 80px; max-width: 320px; }

/* ---------- Carrier shell ---------- */

.carrier-bar { background: #fff; border-bottom: 1px solid var(--line); min-height: 64px; display: flex; align-items: center; padding: 10px 24px; gap: 14px; flex-wrap: wrap; }
.carrier-bar .grow { min-width: 180px; }
.broker-mark { width: 36px; height: 36px; border-radius: 6px; background: var(--navy); color: var(--sand); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.carrier-main { flex: 1; }
.carrier-grid { max-width: 960px; margin: 0 auto; padding: 40px 24px 80px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
.sign-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; }
/* On wide screens the pack summary and signature form stay put while the agreement scrolls. The column scrolls on its own when taller than the window; the padding keeps focus rings from being clipped. */
@media (min-width: 861px) {
  .sign-aside { position: sticky; top: 16px; align-self: start; max-height: calc(100vh - 32px); overflow-y: auto; padding: 4px; margin: -4px; }
}
.steps { display: grid; gap: 4px; margin: 0; padding: 0; }
.steps li { list-style: none; }
.steps a, .steps span.step { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 6px; font-size: 14px; font-weight: 600; color: var(--ink-soft); text-decoration: none; }
.steps a:hover { background: #fff; }
.steps [aria-current] { background: #fff; font-weight: 700; color: var(--ink); }
.step-num { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--field-line); color: var(--muted); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
[aria-current] .step-num { border-color: var(--blue); background: var(--blue); color: #fff; }
.is-done .step-num { border-color: var(--green); background: var(--green); color: #fff; }
.found { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--green); }
.fill-note { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.fill-note::before { content: ""; width: 10px; height: 10px; background: var(--fill); border: 1px solid var(--fill-line); border-radius: 2px; }
.divider { border: 0; border-top: 1px solid #E3E6EA; margin: 0; }
.sigpad { position: relative; height: 130px; border: 1px dashed var(--field-line); border-radius: 6px; background: #FAFBFC; overflow: hidden; }
.sigpad canvas { width: 100%; height: 100%; touch-action: none; cursor: crosshair; display: block; }
.sigpad .typed { position: absolute; inset: auto 12px 8px auto; font: italic 28px "Brush Script MT", "Segoe Script", cursive; pointer-events: none; }
.sigpad .sig-hint { position: absolute; left: 12px; bottom: 10px; font-size: 12px; color: var(--faint); pointer-events: none; }
.file { border: 1px dashed var(--field-line); border-radius: 6px; padding: 14px; background: #FAFBFC; font-size: 14px; width: 100%; }

.center-card { max-width: 460px; margin: 72px auto; padding: 0 24px; }
.center-card .card { padding: 36px; display: grid; gap: 16px; justify-items: start; }
.center-card .logo { width: 96px; height: 96px; font-size: 30px; border-radius: 18px; margin: 0 0 12px; }
.center-card .sign-in { justify-items: center; text-align: center; }
/* The sign-in page reads best at what browser zoom calls 125%, so it is scaled the same way
   wherever the enlarged card fits. Under zoom, Chrome resolves the card's percentage width
   against the unzoomed viewport, so on a phone the scale would push the card off screen. */
@media (min-width: 640px) { body.sign-in-page { zoom: 1.25; } }
/* On a phone the card and its button get tighter so the unwrappable sign-in button fits. The
   logo's offset shrinks with it (see .btn-logo). */
@media (max-width: 480px) {
  .center-card { margin: 40px auto; padding: 0 16px; }
  .center-card .card { padding: 28px 20px; }
  .btn-brand { padding-left: 18px; padding-right: 18px; }
  .btn-logo { height: 21px; top: 5px; margin-top: -5px; }
}

/* ---------- PDF agreements ---------- */

.pdf-pages { display: grid; gap: 16px; }
.pdf-page { display: block; width: 100%; padding: 0; border: 0; background: #fff; box-shadow: var(--shadow-sheet); cursor: zoom-in; }
.pdf-page canvas, .pdf-sheet canvas { display: block; width: 100%; height: 100%; }
.pdf-page-error { display: block; padding: 24px 16px; font-size: 14px; color: var(--ink-soft); }
.pdf-zoom { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #2B2F36; }
.pdf-zoom-scroll { width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
.pdf-zoom-scroll canvas { display: block; background: #fff; }
.pdf-zoom-close { position: fixed; top: 12px; right: 12px; z-index: 1; }
.pdf-details { margin-top: 20px; display: grid; gap: 12px; font-size: 14px; }
.pdf-detail { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.pdf-sheets { display: grid; gap: 40px; padding-top: 22px; }
.pdf-sheet { position: relative; background: #fff; box-shadow: var(--shadow-sheet); }
.pdf-sheet::before { content: "Page " attr(data-number); position: absolute; top: -22px; left: 0; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.pdf-layer { position: absolute; inset: 0; }
.pdf-field { position: absolute; box-sizing: border-box; display: flex; align-items: flex-end; padding: 0 2px; overflow: hidden; white-space: nowrap; line-height: 1.15; color: var(--ink); background: rgba(255, 251, 230, .88); border: 1px solid var(--fill-line); cursor: move; touch-action: none; user-select: none; }
.pdf-field.is-signing { background: rgba(234, 245, 245, .88); border-color: var(--teal); }
.pdf-field.is-selected { outline: 2px solid var(--teal); outline-offset: 1px; overflow: visible; z-index: 1; }
.pdf-field-handle { display: none; position: absolute; right: -6px; bottom: -6px; width: 11px; height: 11px; border-radius: 2px; background: var(--teal); cursor: nwse-resize; }
.pdf-field.is-selected .pdf-field-handle { display: block; }
.pdf-small-note { display: none; flex: 1 1 100%; font-size: 14px; }
/* On wide screens both editors' library and inspector stay put while the page scrolls. Each scrolls on its own when taller than the window; the padding keeps hover shadows and focus rings from being clipped. */
@media (min-width: 861px) {
  .editor-library, .editor-inspector { position: sticky; top: 16px; align-self: flex-start; max-height: calc(100vh - 32px); overflow-y: auto; padding: 4px; margin: -4px; }
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .table-head { display: none; }
  .table-row { grid-template-columns: 1fr auto; row-gap: 6px; }
  .table-row .carrier { grid-column: 1 / -1; }
  .pack-grid, .carrier-grid, .sign-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .carrier-grid { padding-top: 24px; }
  .steps { grid-auto-flow: column; overflow-x: auto; justify-content: start; }
  .steps a span.step-label, .steps span.step span.step-label { display: none; }
  .steps [aria-current] span.step-label { display: inline; }
  .agreement { padding: 28px 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; gap: 2px 0; }
  .facts dd { margin-bottom: 10px; }
  .editor-library, .editor-inspector { max-width: none; }
  .logo { width: 56px; height: 56px; font-size: 18px; margin-bottom: -16px; }
  .who { display: none; }
  .pdf-small-note { display: block; }
  .pdf-editor-library, .pdf-field-tools { display: none; }
  .pdf-field { pointer-events: none; }
}

@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
  .agreement { box-shadow: none; padding: 0; break-after: page; }
  mark.fill { background: none; border: 0; padding: 0; }
}