/* Generated from web/assets/css/components.css by web/build.py. Edit the web copy. */
/* Applyready components: controls, cards, tabs, badges, dialogs, feedback. */

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  /* A label of two or three words broke over three lines inside a narrow row, and the button
     grew into a square. A button keeps its label on one line and the row around it wraps
     instead. */
  white-space: nowrap;
  padding: 0 var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  letter-spacing: -0.005em;
  text-align: center;
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  pointer-events: none;
}

.btn-primary {
  background: var(--accent-600);
  color: #fff;
  box-shadow: var(--shadow-1);
  transition: background-color var(--dur-2) var(--ease);
}

.btn-primary:hover {
  background: var(--accent-700);
}

.btn-secondary {
  background: var(--bg);
  color: var(--ink-900);
  border-color: var(--line-200);
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

.btn-secondary:hover {
  border-color: var(--ink-400);
  background: var(--surface);
}

.btn-ghost {
  /* Transparent, with the edge appearing only under a cursor, these read as text: Stop - the
     only control on the screen while a run works - This is the wrong posting, Show the match
     anyway, Copy name, Message draft. On a touch screen there is no cursor at all. */
  background: transparent;
  color: var(--ink-700);
  border: 1px solid var(--line-200);
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

.btn-ghost:hover {
  background: var(--surface-2);
  color: var(--ink-900);
  border-color: var(--ink-500);
}

.btn-danger {
  background: var(--stop-600);
  color: #fff;
  transition: background-color var(--dur-2) var(--ease);
}

.btn-danger:hover {
  background: var(--stop-700);
}

.btn-sm {
  min-height: 44px;
  padding: 0 var(--sp-4);
  font-size: var(--fs-small);
  border-radius: var(--r-sm);
}

.btn-lg {
  min-height: 52px;
  padding: 0 var(--sp-8);
  font-size: var(--fs-lead);
}

.btn-block {
  display: flex;
  width: 100%;
}

/* A switched-off button used to be the live one at 45 per cent, which on the blue one left white
   letters on pale violet at about 1.6 to 1 - and those letters are the only place the reason is
   written ("Not on sale yet"). It gets a palette of its own instead, after the variants so it
   wins over all of them: grey on grey, 5.2 to 1, plainly not pressable. */
.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--surface-2);
  border-color: var(--line-200);
  color: var(--ink-500);
  box-shadow: none;
}

.btn-icon {
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: var(--r-sm);
}

.btn .ico {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Links */

.link {
  color: var(--accent-600);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-2) var(--ease);
}

.link:hover {
  color: var(--accent-700);
}

.link-plain {
  color: var(--ink-700);
  transition: color var(--dur-2) var(--ease);
}

.link-plain:hover {
  color: var(--ink-900);
}

/* Fields */

.field {
  display: block;
}

.field + .field {
  margin-top: var(--sp-4);
}

/* A field and the button that submits it were touching - nought pixels between them - while the
   buttons below had twelve. The pair gets the same air as everything else in the form. */
.field + .btn,
.field + .error-text,
.error-text + .btn {
  margin-top: var(--sp-4);
}

/* Side by side the spacing belongs to the row's gap; the sibling margin pushed the second
   field down and left From and To on different lines. */
.row > .field + .field,
.link-row > .field + .field {
  margin-top: 0;
}

.label {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--ink-700);
  margin-bottom: var(--sp-2);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--sp-3);
  background: var(--bg);
  border: 1px solid var(--line-200);
  border-radius: var(--r-md);
  font-size: var(--fs-body);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--ink-400);
}

/* An amount carries a currency and a period, and a label that spells both out reads as a
   sentence where a name belongs. The unit sits with the box it belongs to. */
.input-unit {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.input-unit .input {
  flex: 1 1 auto;
  min-width: 0;
}

.input-unit .unit {
  flex: none;
  color: var(--ink-500);
  font-size: var(--fs-small);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--ink-400);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent-600);
  box-shadow: 0 0 0 3px var(--accent-100);
}

.textarea {
  min-height: 120px;
  resize: vertical;
  line-height: var(--lh-body);
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%235c6570' stroke-width='1.6'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  padding-right: var(--sp-10);
}

.hint {
  margin-top: var(--sp-2);
  font-size: var(--fs-micro);
  color: var(--ink-500);
}

.error-text {
  margin-top: var(--sp-2);
  font-size: var(--fs-micro);
  color: var(--stop-600);
}

.input.is-invalid {
  border-color: var(--stop-600);
}

.input.is-invalid:focus {
  box-shadow: 0 0 0 3px var(--stop-100);
}

/* Checkbox and switch */

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-height: 44px;
  padding-block: var(--sp-2);
  cursor: pointer;
}

.check input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--accent-600);
  flex: none;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  cursor: pointer;
}

.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch-track {
  width: 44px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line-200);
  padding: 2px;
  flex: none;
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

.switch-thumb {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease);
}

.switch input:checked + .switch-track {
  background: var(--accent-600);
  border-color: var(--accent-600);
}

.switch input:checked + .switch-track .switch-thumb {
  transform: translateX(18px);
}

.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--accent-600);
  outline-offset: 2px;
}

/* Segmented control */

.segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  gap: 2px;
}

.segmented button {
  /* the tone and length rows sit inside a tab the sweep never opened, so 38 px lived here
     under a 44 px rule for weeks */
  min-height: 44px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--ink-700);
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

.segmented button[aria-pressed="true"] {
  background: var(--bg);
  color: var(--ink-900);
  box-shadow: var(--shadow-1);
}

/* Cards */

.card {
  background: var(--bg);
  border: 1px solid var(--line-200);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}

.card-flat {
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}

/* A card that is a link looked exactly like a card that is not: same border, same ground, same
   type, and the only sign was a lift on hover, which a touch screen never shows. Its heading
   carries the colour links carry. */
.card-link {
  display: block;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}

.card-link .h3 {
  color: var(--accent-700);
}

.card-link:hover .h3 {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.card-link:hover {
  border-color: var(--ink-400);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

/* Badges and chips */

/* The wordmark of the extension. It stood in two stylesheets with two sizes and two marks,
   which is how one object becomes two. */
.panel-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-strong);
  font-size: var(--fs-small);
  letter-spacing: -0.01em;
}

.panel-brand svg {
  width: 20px;
  height: 20px;
  flex: none;
}

/* One mark for the site, the panel, the popup and the settings. Its colours used to be written
   into every copy of the SVG, so the brand lived in six files at once. */
.brand-plate {
  fill: var(--accent-600);
}

.brand-tick {
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* The path is measured as 1 by pathLength, so the dash below is the whole stroke whatever the
     mark is scaled to. The tick draws itself once when the page opens; a reader who asked for
     less motion gets it drawn in a millisecond, and it is a CSS animation, so a browser with
     scripts off draws it too. */
  stroke-dasharray: 1;
  animation: brand-tick var(--dur-4) var(--ease-out) 100ms both;
}

@keyframes brand-tick {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  background: var(--surface-2);
  color: var(--ink-700);
}

.badge-ok {
  background: var(--ok-100);
  color: var(--ok-700);
}

/* Counts and totals wear no status. Left on the base class they took whatever ink the page
   happened to give them, which is how a variant nobody declared drifts. */
.badge-quiet {
  background: var(--surface-2);
  color: var(--ink-700);
}

.badge-warn {
  background: var(--warn-100);
  color: var(--warn-700);
}

.badge-stop {
  background: var(--stop-100);
  color: var(--stop-700);
}

.badge-people {
  background: var(--people-100);
  color: var(--people-700);
}

.badge-accent {
  background: var(--accent-100);
  color: var(--accent-700);
}

/* Chips */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 32px;
  padding: 0 var(--sp-2) 0 var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: var(--fs-small);
  color: var(--ink-700);
}

.chip button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--ink-500);
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}

.chip button:hover {
  background: var(--line-200);
  color: var(--ink-900);
}

/* Tabs */

.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line-200);
}

.tab {
  position: relative;
  min-height: 44px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--ink-500);
  transition: color var(--dur-2) var(--ease);
}

.tab:hover {
  color: var(--ink-900);
}

.tab[aria-selected="true"],
.tab.is-active {
  color: var(--ink-900);
}

.tab::after {
  content: "";
  position: absolute;
  left: var(--sp-2);
  right: var(--sp-2);
  bottom: -1px;
  height: 2px;
  background: var(--accent-600);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-2) var(--ease);
}

.tab[aria-selected="true"]::after,
.tab.is-active::after {
  transform: scaleX(1);
}

.tabpanel[hidden] {
  display: none !important;
}

.tabpanel {
  animation: panel-in var(--dur-3) var(--ease-out) both;
}

@keyframes panel-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Accordion */

.acc-item {
  border-bottom: 1px solid var(--line-200);
}

.acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  min-height: 60px;
  padding: var(--sp-4) 0;
  text-align: left;
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  transition: color var(--dur-2) var(--ease);
}

.acc-head:hover {
  color: var(--accent-700);
}

.acc-sign {
  flex: none;
  width: 20px;
  height: 20px;
  transition: transform var(--dur-2) var(--ease);
}

.acc-head[aria-expanded="true"] .acc-sign {
  transform: rotate(45deg);
}

.acc-body {
  overflow: hidden;
  height: 0;
  transition: height var(--dur-3) var(--ease);
}

.acc-body-inner {
  padding-bottom: var(--sp-5);
  color: var(--ink-700);
  max-width: var(--measure);
}

/* Progress and skeleton */

.progress {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--accent-600);
  border-radius: var(--r-pill);
  transition: width var(--dur-3) var(--ease);
}

.skeleton {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line-100) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

@keyframes shimmer {
  from {
    background-position: 100% 50%;
  }
  to {
    background-position: 0 50%;
  }
}

/* Meter ring */

/* Dialog */

.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 17, 22, 0.45);
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  z-index: 60;
  animation: fade-in var(--dur-2) var(--ease) both;
}

.dialog {
  width: min(520px, 100%);
  background: var(--bg);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  padding: var(--sp-6);
  animation: dialog-in var(--dur-3) var(--ease-out) both;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes dialog-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Toast */

.toast-host {
  position: fixed;
  left: 50%;
  bottom: var(--sp-6);
  transform: translateX(-50%);
  display: grid;
  gap: var(--sp-2);
  z-index: 70;
  width: min(420px, calc(100% - 32px));
  /* A toast says something and holds nothing to press. On a phone it stood over the main button
     of the step somebody was on, and for two and a half seconds their tap went into the message
     instead of the button. */
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  /* A file name is one long word, and the box grew past the edge of a 400 px panel with the
     name cut in the middle. */
  max-width: 100%;
  overflow-wrap: anywhere;
  background: var(--ink-900);
  color: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  font-size: var(--fs-small);
  animation: toast-in var(--dur-3) var(--ease-out) both;
}

.toast.is-leaving {
  animation: toast-out var(--dur-2) var(--ease) both;
}

@keyframes toast-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
  }
}

/* On a phone the main button of a step sits at the bottom of the page, which is where a toast
   would land on top of it. Up here it covers nothing anybody is about to press. */
@media (max-width: 480px) {
  .toast-host {
    bottom: auto;
    /* Below the panel's header and below the sticky tab strip: the message about an edit used
       to stand over the tabs and over the counter it was reporting. */
    top: 140px;
  }
}

/* Empty state */

.empty {
  display: grid;
  gap: var(--sp-3);
  justify-items: center;
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  color: var(--ink-500);
}

.empty .empty-mark {
  width: 40px;
  height: 40px;
  color: var(--ink-400);
}

/* A person the panel found. Used on the site and inside the panel, so it lives here. */

.person {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line-200);
  border-radius: var(--r-md);
  background: var(--bg);
}

.person-name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
}

.person-role {
  font-size: var(--fs-micro);
  color: var(--ink-500);
}

.person-why {
  margin-top: var(--sp-2);
  font-size: var(--fs-micro);
  color: var(--ink-700);
}

/* One block of the confirmed profile: the editor renders these on the site and in the panel */

.parsed-block {
  border: 1px solid var(--line-200);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}

.parsed-block + .parsed-block {
  margin-top: var(--sp-3);
}

/* Resume preview: the plain one-column shape the export produces */

.resume-preview {
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--line-200);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  background: var(--bg);
}

.rsm {
  max-width: 640px;
  margin-inline: auto;
}

.rsm-name {
  font-size: var(--fs-h3);
  font-weight: var(--fw-strong);
}

.rsm-contacts {
  margin-top: var(--sp-1);
  font-size: var(--fs-micro);
  color: var(--ink-500);
}

.rsm-h {
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-700);
  border-bottom: 1px solid var(--line-200);
  padding-bottom: var(--sp-1);
}

.rsm-p {
  font-size: var(--fs-small);
  color: var(--ink-900);
}

.rsm-job + .rsm-job {
  margin-top: var(--sp-3);
}

.rsm-job-head {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-small);
}

.rsm-job-head span {
  color: var(--ink-500);
  white-space: nowrap;
  font-size: var(--fs-micro);
}

.rsm-list {
  margin-top: var(--sp-1);
  display: grid;
  gap: var(--sp-1);
}

.rsm-list li {
  position: relative;
  padding-left: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--ink-700);
}

.rsm-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-400);
}

/* Table */

.table {
  font-size: var(--fs-small);
}

.table th,
.table td {
  text-align: left;
  padding: var(--sp-3);
  border-bottom: 1px solid var(--line-200);
  vertical-align: top;
}

.table th {
  font-weight: var(--fw-semibold);
  color: var(--ink-700);
  white-space: nowrap;
}

/* A column heading is a word or two and stays on its line. A row label is a whole phrase -
   "Applications a month" - and on a 320 px phone it was cut off where the cell ended. */
.table th[scope="row"] {
  white-space: normal;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-200);
  border-radius: var(--r-lg);
}

/* A link is a label and an address side by side, until the panel is too narrow to hold both. */
.link-row {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-end;
  flex-wrap: wrap;
}

.link-row .field {
  flex: 1 1 150px;
  margin-bottom: 0;
}

.link-row .field-wide {
  flex: 2 1 200px;
}

@media (max-width: 520px) {
  .link-row {
    flex-direction: column;
    align-items: stretch;
  }

  /* stacked, the basis would set a height and leave a hole under every field */
  .link-row .field,
  .link-row .field-wide {
    flex: 0 0 auto;
  }

  .link-row .btn {
    align-self: flex-start;
  }
}

/* A four-column table cannot be read on a phone: two columns sit past the edge behind a scroll
   nobody sees. Below this width every row becomes a card, and each cell carries its own label. */
@media (max-width: 560px) {
  .table-wrap.table-cards {
    border: 0;
    overflow: visible;
  }

  .table-wrap.table-cards table,
  .table-wrap.table-cards tbody,
  .table-wrap.table-cards tr,
  .table-wrap.table-cards td,
  .table-wrap.table-cards th {
    display: block;
    width: auto;
  }

  .table-wrap.table-cards thead {
    display: none;
  }

  .table-wrap.table-cards tr {
    border: 1px solid var(--line-200);
    border-radius: var(--r-lg);
    padding: var(--sp-4);
    margin-bottom: var(--sp-3);
  }

  .table-wrap.table-cards th[scope="row"] {
    font-size: var(--fs-h4);
    padding: 0 0 var(--sp-2);
    border: 0;
  }

  .table-wrap.table-cards td {
    padding: var(--sp-1) 0;
    border: 0;
  }

  .table-wrap.table-cards td::before {
    content: attr(data-label) ": ";
    color: var(--ink-500);
  }

  /* A column centred in a table is a column; centred inside a card it is a value floating in
     the middle of a line whose label starts at the left. */
  .table-wrap.table-cards td,
  .table-wrap.table-cards th {
    text-align: left;
  }
}

/* Spacing on the scale, written in the stylesheet.

   These stood in the markup as style="margin-top: var(--sp-4)" - 157 of them across the site and
   the extension. An inline margin outranks every rule that follows it, so a narrow screen could
   not take it back, and the day somebody types 15px instead of a token nothing says so. */
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }
.mt-12 { margin-top: var(--sp-12); }
.mt-16 { margin-top: var(--sp-16); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }