@font-face {
  font-family: "Merriweather Sans";
  src: url("/assets/MerriweatherSans-Regular.ttf");
  font-weight: 400;
}

@font-face {
  font-family: "Merriweather Sans";
  src: url("/assets/MerriweatherSans-Medium.ttf");
  font-weight: 500;
}

@font-face {
  font-family: "Merriweather Sans";
  src: url("/assets/MerriweatherSans-SemiBold.ttf");
  font-weight: 600;
}

@font-face {
  font-family: "Merriweather Sans";
  src: url("/assets/MerriweatherSans-Bold.ttf");
  font-weight: 700;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Merriweather Sans", sans-serif;
  font-weight: 400;
}

/* ── Theme tokens ────────────────────────────────────────────────────────────
   The auth pages load this file and nothing else - shell.css, where the rest
   of the app keeps its palette, is never fetched here. So every token these
   pages read has to be defined in this file. It previously named nine it did
   not define (--surface, --tint-info, --input-bg and friends); an undefined
   var() makes the whole declaration invalid at computed-value time, so
   `background: var(--surface)` fell back to transparent and both halves of
   the login page rendered as bare white in either theme.

   Values are kept in step with the same tokens in shell.css. If one moves
   there, it moves here too. */
:root {
  color-scheme: light;

  --success: #22c55e;
  --info: rgb(52, 101, 247);
  --error: #ef4444;

  --dark-bg: #1e293b;
  --light-bg: #f0f3f5;
  --page-bg: #eef1f6;
  --surface: #ffffff;
  --surface-sunken: #e8edf5;
  --input-bg: #ffffff;

  --border-color: #a6a9ac;
  --border-subtle: #ebebeb;
  --border-faint: #e0e0e0;

  --text-primary: #1e293b;
  --text-secondary: #455366;
  --text-tertiary: #929dad;
  --text-muted: #6b7280;
  --text-faint: #9ca3af;
  --text-on-accent: #ffffff;

  --surface-muted: #f2f5fa;
  --border-input: #ccc;

  /* The illustration half of the login page. It gets its own token rather than
     borrowing the info tint, which means "informational notice" and also paints
     the offline banner - sharing one name stops either being tuned alone. */
  --auth-panel: #dbeafe;

  --tint-info: #dbeafe;
  --tint-info-fg: #1e40af;
  --tint-success: #dcfce7;
  --tint-success-fg: #166534;
  --tint-error: #fee2e2;
  --tint-error-fg: #991b1b;
  --tint-success-border: #a7e0bb;
  --tint-error-border: #f7bfbf;

  --box-shadow:
    0 3px 6px rgba(25, 32, 36, 0.16), 0 -1px 4px rgba(25, 32, 36, 0.04);
}

/* Only the tokens move, exactly as in shell.css. `color-scheme` matters as
   much as the colours: without it the native controls, the scrollbar and the
   autofill wash stay in light dress on a dark panel, which is most of what
   reads as a half-themed page. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --dark-bg: #44506b;
  --light-bg: #0f1319;
  --page-bg: #0f1319;
  --surface: #232935;
  --surface-sunken: #171c24;
  --input-bg: #171b22;

  --border-color: #39424f;
  --border-subtle: #2a313b;
  --border-faint: #333c48;

  --text-primary: #e6e9ef;
  --text-secondary: #a8b2c1;
  --text-tertiary: #7c8798;
  --text-muted: #a8b2c1;
  --text-faint: #7c8798;
  --text-on-accent: #ffffff;

  --surface-muted: #1c222b;
  --border-input: #3a4250;

  /* Deepened well clear of --surface. Left at the --tint-info value the two
     halves of the login page landed within 1.03 of each other and the split
     stopped reading as a split at all. */
  --auth-panel: #141d33;

  --tint-info: #1b2b45;
  --tint-info-fg: #93c5fd;
  --tint-success: #16301f;
  --tint-success-fg: #86efac;
  --tint-error: #3a1e21;
  --tint-error-fg: #fca5a5;
  --tint-success-border: #245c38;
  --tint-error-border: #6c3236;

  --box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.45), 0 -1px 4px rgba(0, 0, 0, 0.25);
}

/* Offline indicator banner */
html.is-offline body::before {
  content: "Offline mode";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 6px 16px;
  background: var(--tint-info);
  color: var(--tint-info-fg);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

html.is-offline .auth-container {
  padding-top: 30px;
}

body {
  min-height: 100vh;
  display: flex;
  /* Painted explicitly. The two panels cover it in the usual case, but with
     no background of its own the body fell through to the browser default -
     white - which is what showed when the panel tokens were undefined, and
     what still shows in a dark theme behind anything the grid does not
     cover. */
  background-color: var(--page-bg);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

.auth-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  width: 100%;
  min-height: 100vh;
}

.left-section {
  background: var(--auth-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.auth-illustration {
  width: 100%;
  max-width: 480px;
}

.auth-svg {
  width: 100%;
  height: auto;
}

.right-section {
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 30px;
  overflow-y: auto;
}

.auth-card {
  width: 100%;
  max-width: 500px;
}

.auth-header {
  padding: 0 0 40px 0;
  text-align: center;
}

.auth-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.auth-header p {
  font-size: 14px;
  color: var(--text-secondary);
}

.auth-error {
  margin: 12px 0 16px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.35;
  border: 1px solid var(--tint-error-border);
  background: var(--tint-error);
  color: var(--tint-error-fg);
}

.auth-success {
  margin: 12px 0 16px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.35;
  border: 1px solid var(--tint-success-border);
  background: var(--tint-success);
  color: var(--tint-success-fg);
}

.auth-status-panel {
  text-align: center;
}

.auth-status-hero {
  margin-top: 0;
}

.auth-status-panel .auth-header {
  padding: 0;
  text-align: center;
}

.auth-status-panel .auth-header h1 {
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
  text-align: center;
}

.auth-status-panel .auth-header p {
  font-size: 15px;
  line-height: 1.65;
  max-width: 34rem;
  margin: 0 auto;
}

.auth-status-copy {
  margin-top: 14px;
  color: var(--text-secondary);
  text-align: center;
}

.auth-status-copy p {
  font-size: 14px;
  line-height: 1.65;
}

.auth-status-copy p + p {
  margin-top: 8px;
}

.auth-status-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
  text-align: left;
}

.auth-status-summary-item {
  padding: 14px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: var(--surface-muted);
}

.auth-status-summary-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.auth-status-summary-value {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-primary);
}

.auth-status-payment {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.72) 0%, rgba(255, 255, 255, 0.96) 100%);
  text-align: left;
}

.auth-status-payment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.auth-status-payment-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  background: var(--surface);
}

.auth-status-payment-item-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--tint-info-fg);
}

.auth-status-payment-item-value {
  font-size: 16px;
  line-height: 1.35;
  color: var(--text-primary);
}

.auth-status-payment-item-hint {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.auth-status-payment-empty {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px dashed rgba(148, 163, 184, 0.35);
  border-radius: 16px;
  background: var(--surface);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* The M-Pesa prompt on the locked-out page. Sits between the paybill details
   and the way back to sign in: paying here is the quickest route, but the
   reference above still works for anyone who would rather use it. */
.auth-status-pay {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid var(--wash-brand-border, var(--border-subtle));
  border-radius: 14px;
  background: var(--wash-brand, var(--surface-muted));
}

.auth-status-pay .form-group {
  margin-bottom: 12px;
}

.auth-status-pay label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.auth-status-pay input[type="tel"] {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border-input, var(--border-color));
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 14px;
}

.auth-status-pay-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}

.auth-status-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.auth-form {
  width: 100%;
}

.auth-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* A row holding a single field spans both columns. Without this the field keeps
   the first column's width and leaves a gap beside itself. */
.auth-form-row > .form-group:only-child {
  grid-column: 1 / -1;
}

.auth-step-pane[hidden] {
  display: none !important;
}

.step-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.section-helper {
  margin: 0 0 16px 0;
}

.register-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.register-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 600;
}

.register-step-badge {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--surface);
}

.register-step.is-active {
  color: var(--text-primary);
}

.register-step.is-active .register-step-badge {
  background: var(--info);
  border-color: var(--info);
  color: var(--text-on-accent);
}

.register-step.is-complete .register-step-badge {
  background: var(--success);
  border-color: var(--success);
  color: var(--text-on-accent);
}

.register-step-divider {
  flex: 1;
  height: 1px;
  background: var(--border-faint);
  max-width: 30px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
  min-width: 0;
}

.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}

.req::after {
  content: " *";
  color: var(--error);
  font-weight: 700;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"],
.form-group input[type="text"][data-password-input],
.form-group input[type="date"],
.form-group select {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--input-bg);
  transition: all 0.05s ease;
}

.form-group input::placeholder {
  color: var(--text-faint);
}

.form-group select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23666666' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 12px;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--info);
}

.password-field {
  position: relative;
  display: block;
  width: 100%;
}

.password-field input[data-password-input] {
  display: block;
  width: 100%;
  min-height: 42px;
  padding-right: 46px;
}

.password-toggle {
  --password-toggle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 0;
  font-weight: 700;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.password-toggle [data-password-toggle-text] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.password-toggle::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--password-toggle-icon) center / contain no-repeat;
  mask: var(--password-toggle-icon) center / contain no-repeat;
}

.password-toggle::after {
  content: none;
}

.password-field input[data-password-input]:focus + .password-toggle,
.password-toggle[aria-pressed="true"] {
  background: transparent;
  color: var(--text-secondary);
}

.password-toggle:hover {
  background: transparent;
  color: var(--text-primary);
}

.password-toggle:focus-visible {
  outline: 2px solid rgba(52, 101, 247, 0.24);
  outline-offset: 2px;
}

.password-toggle[aria-pressed="true"] {
  --password-toggle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.7 5.1A10.7 10.7 0 0 1 12 5c6.5 0 10 7 10 7a13.2 13.2 0 0 1-1.7 2.7'/%3E%3Cpath d='M6.6 6.6C4 8.4 2 12 2 12s3.5 7 10 7a10.7 10.7 0 0 0 5.4-1.6'/%3E%3Cpath d='M14.1 14.1a3 3 0 0 1-4.2-4.2'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 1 4.2 4.2'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
}

.helper-text {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.auth-form-row-helper {
  grid-column: 1 / -1;
  margin: -6px 0 0 0;
}

/* Form Options */
.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

/* Checkbox Group */
.checkbox-group {
  margin-bottom: 16px;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

/* The same sliding switch the signed-in shell uses, repeated here because the
   auth pages load this stylesheet on its own. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 23px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 23px;
  background-color: var(--border-input);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background-color: var(--input-bg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.28);
  transition: transform 0.2s ease;
}

input[type="checkbox"]:checked {
  background-color: var(--success);
}

input[type="checkbox"]:checked::after {
  transform: translateX(19px);
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

.checkbox-label input[type="checkbox"] {
  margin-top: 1px;
}

.checkbox-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.link {
  color: var(--info);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.link:hover {
  color: #3b82f6;
  text-decoration: underline;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 30px;
}

.btn-back,
.btn-next,
.btn-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}

.btn-back {
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-back:hover {
  background: var(--light-bg);
}

.btn-next {
  background: var(--info);
  color: var(--text-on-accent);
  flex: 1;
  justify-content: center;
}

.btn-next:hover {
  background: #3b82f6;
  box-shadow: 0 4px 12px rgba(52, 101, 247, 0.3);
}

.btn-submit {
  width: 100%;
  background: var(--dark-bg);
  color: var(--text-on-accent);
}

.btn-submit .btn-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-submit .btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--border-subtle);
  border-radius: 50%;
  display: none;
  animation: auth-button-spin 0.7s linear infinite;
}

.form-actions .btn-submit {
  width: auto;
  flex: 1;
}

.btn-submit:hover {
  background: var(--text-secondary);
  box-shadow: 0 4px 12px rgba(30, 41, 59, 0.3);
}

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

.btn-submit:disabled {
  cursor: not-allowed;
}

.btn-submit:disabled:hover {
  background: var(--text-secondary);
  box-shadow: none;
}

.btn-submit.is-loading {
  cursor: wait;
  pointer-events: none;
}

.btn-submit.is-loading .btn-spinner {
  display: inline-block;
}

@keyframes auth-button-spin {
  to {
    transform: rotate(360deg);
  }
}

label.btn-next,
label.btn-back {
  cursor: pointer;
}

.auth-footer {
  padding: 32px 0 0;
  text-align: center;
}

.auth-footer p {
  font-size: 14px;
  color: var(--text-secondary);
}

.auth-footer .link {
  font-size: 14px;
}

.auth-resend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 18px;
  padding: 13px 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--light-bg);
  text-align: left;
}

.auth-resend-copy {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
}

.auth-resend-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 13px;
  border: 1px solid var(--info);
  border-radius: 8px;
  background: var(--surface);
  color: var(--info);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.auth-resend-button:hover {
  background: var(--info);
  color: var(--text-on-accent);
  box-shadow: 0 4px 12px rgba(52, 101, 247, 0.22);
}

.auth-resend-button:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

.auth-resend-button:disabled,
.auth-resend-button.is-loading {
  cursor: wait;
  opacity: 0.72;
}

.auth-resend-button .btn-spinner { display: none; }
.auth-resend-button.is-loading .btn-spinner { display: inline-block; }

@media (max-width: 480px) {
  .auth-resend { align-items: stretch; flex-direction: column; }
  .auth-resend-button { width: 100%; }
}

.divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.divider span {
  font-size: 13px;
  color: var(--text-tertiary);
  font-weight: 500;
}

@media (max-width: 968px) {
  .auth-container {
    grid-template-columns: 1fr;
  }

  .left-section {
    display: none;
  }

  .right-section {
    padding: 40px 20px;
  }
}

@media (max-width: 640px) {
  .right-section {
    padding: 30px 20px;
  }

  .auth-header h1 {
    font-size: 28px;
  }

  .auth-status-panel {
    padding: 24px 20px;
    border-radius: 24px;
  }

  .auth-status-panel .auth-header h1 {
    font-size: 23px;
  }

  .auth-status-summary,
  .auth-status-payment-grid {
    grid-template-columns: 1fr;
  }

  .auth-card {
    max-width: 100%;
  }

  .auth-form-row {
    grid-template-columns: 1fr;
  }

  .form-actions {
    flex-direction: column-reverse;
  }

  .btn-next,
  .btn-submit {
    width: 100%;
  }
}

/*
 * The "Optional" pill, as the rest of the application draws it.
 *
 * The register form's employee step marks its one optional field, and the
 * markup uses `.stock-package-optional-pill` - but that rule lives in
 * shared-table.css and this page loads only auth.css, so the span rendered as
 * plain body text beside a label styled nothing like the same pill elsewhere.
 * A rule in a stylesheet the page never loads is not a rule.
 *
 * Copied rather than shared: the sign-in pages load before a session exists
 * and are kept deliberately small. The values are taken from the
 * shared-table.css rule unchanged so the two pills are the same pill, and no
 * dark variant is given because this stylesheet has no dark mode to join.
 */
.stock-package-optional-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--tint-info-fg);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}