/* Driver portal. Inherits the theme's custom properties where they exist,
   with fallbacks so it still looks deliberate under any theme. */

.usl-portal-gate {
  --p-ink:  var(--ink, #F2EFEA);
  --p-ink2: var(--ink-2, #A2ACB6);
  --p-ink3: var(--ink-3, #6E7A85);
  --p-rule: var(--rule, #303A44);
  --p-accent: var(--amber, #F0A828);
  max-width: 520px;
  border-left: 3px solid var(--p-accent);
  padding: 4px 0 4px 20px;
  color: var(--p-ink);
}
.usl-portal-note { color: var(--p-ink3, #6E7A85); font-size: 14px; }

.usl-portal-hello {
  font-family: var(--f-mono, monospace);
  font-size: 12.5px; letter-spacing: 0.04em;
  color: var(--ink-3, #6E7A85);
  border-bottom: 1px solid var(--rule, #303A44);
  padding-bottom: 14px; margin: 0 0 30px;
}

.usl-portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 34px;
}

.usl-portal-group h3 {
  font-family: var(--f-disp, inherit);
  font-size: 14px; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-3, #6E7A85);
  margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 2px solid var(--amber, #F0A828);
}
.usl-portal-group ul { list-style: none; margin: 0; padding: 0; }
.usl-portal-group li { margin: 0; border-bottom: 1px solid var(--rule, #303A44); }

.usl-portal-group a,
.usl-portal-missing {
  display: block; padding: 11px 0;
  font-size: 15.5px; text-decoration: none;
  color: var(--ink, #F2EFEA);
}
.usl-portal-group a:hover { color: var(--amber, #F0A828); }
.usl-portal-missing { color: var(--ink-3, #6E7A85); font-style: italic; }
.usl-portal-ext { font-size: 12px; color: var(--ink-3, #6E7A85); }

@media (max-width: 520px) {
  .usl-portal-grid { gap: 26px; }
}

/* ==========================================================================
   Driver report forms

   Self-contained on purpose. The driver applications plugin registers its
   form stylesheet and enqueues it from inside its own shortcode, so relying
   on it here meant these forms rendered unstyled. Everything the report forms
   need is scoped to .usl-report so the two never fight.
   ========================================================================== */

.usl-report {
  --r-ink:   var(--ink, #F2EFEA);
  --r-ink2:  var(--ink-2, #A2ACB6);
  --r-ink3:  var(--ink-3, #6E7A85);
  --r-rule:  var(--rule, #303A44);
  --r-rule2: var(--rule-2, #46525E);
  --r-field: var(--steel-2, #222A32);
  --r-accent:var(--amber, #F0A828);
  --r-alert: var(--alert, #E4705E);
  max-width: 640px;
  color: var(--r-ink);
}

.usl-report .usl-app-field { margin: 0 0 26px; }

.usl-report label,
.usl-report legend {
  display: block;
  font-family: var(--f-disp, inherit);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--r-ink2);
  margin: 0 0 8px;
  padding: 0;
}

.usl-report .req {
  font-family: var(--f-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--r-accent);
  margin-left: 8px;
}

.usl-report .usl-app-hint {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--r-ink3);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-family: var(--f-body, inherit);
  margin: -2px 0 9px;
}

.usl-report input[type="text"],
.usl-report input[type="tel"],
.usl-report input[type="email"],
.usl-report input[type="date"],
.usl-report input[type="datetime-local"],
.usl-report select,
.usl-report textarea {
  width: 100%;
  background: var(--r-field);
  border: 1px solid var(--r-rule);
  color: var(--r-ink);
  font-family: inherit;
  font-size: 16px;
  padding: 11px 13px;
  border-radius: 0;
}
.usl-report textarea { resize: vertical; min-height: 130px; }

.usl-report input:focus,
.usl-report select:focus,
.usl-report textarea:focus {
  outline: 2px solid var(--r-accent);
  outline-offset: 1px;
  border-color: transparent;
}

.usl-report fieldset { border: 0; margin: 0; padding: 0; }

.usl-report .usl-app-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.usl-report .usl-app-choices label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 10px 15px;
  border: 1px solid var(--r-rule);
  background: var(--r-field);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 15.5px;
  font-family: var(--f-body, inherit);
  color: var(--r-ink);
}
.usl-report .usl-app-choices label:hover { border-color: var(--r-rule2); }
.usl-report .usl-app-choices label:focus-within { outline: 2px solid var(--r-accent); outline-offset: 1px; }
.usl-report .usl-app-choices input { accent-color: var(--r-accent); margin: 0; width: auto; }

.usl-report .usl-app-fine {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--r-ink2);
  border-left: 2px solid var(--r-rule2);
  padding-left: 14px;
  margin: 0 0 30px;
}

.usl-report .usl-app-errors {
  border-left: 3px solid var(--r-alert);
  background: rgba(228, 112, 94, 0.09);
  padding: 14px 16px;
  margin: 0 0 28px;
  font-size: 15px;
}
.usl-report .usl-app-errors ul { margin: 8px 0 0; padding-left: 20px; }

.usl-report .usl-app-submit {
  font-family: var(--f-disp, inherit);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--r-accent);
  color: #1A1206;
  border: 0;
  padding: 14px 30px;
  cursor: pointer;
}
.usl-report .usl-app-submit:hover { background: #FFBB43; }
.usl-report .usl-app-submit:focus-visible { outline: 2px solid var(--r-ink); outline-offset: 3px; }

/* Shown in place of the form after a successful submission, so it sits
   outside .usl-report and cannot be scoped to it. */
.usl-app-done {
  max-width: 640px;
  border-left: 3px solid var(--clear, #6BAE81);
  padding: 4px 0 4px 20px;
  color: var(--ink, #F2EFEA);
}
.usl-app-done h3 { margin: 0 0 10px; }

/* File input */
.usl-report input[type="file"] {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--r-field);
  border: 1px dashed var(--r-rule2);
  color: var(--r-ink2);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}
.usl-report input[type="file"]:focus { outline: 2px solid var(--r-accent); outline-offset: 1px; }
.usl-report input[type="file"]::file-selector-button {
  font-family: var(--f-disp, inherit);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
  padding: 9px 16px;
  margin-right: 14px;
  border: 1px solid var(--r-rule2);
  background: none;
  color: var(--r-ink);
  cursor: pointer;
}
.usl-report input[type="file"]::file-selector-button:hover {
  border-color: var(--r-accent);
  color: var(--r-accent);
}

/* A date field should not stretch the width of a desktop form. */
.usl-report input[type="datetime-local"],
.usl-report input[type="date"] { max-width: 320px; }

@media (max-width: 620px) {
  .usl-report .usl-app-choices { flex-direction: column; align-items: stretch; }
  .usl-report .usl-app-submit { width: 100%; padding: 15px 20px; }
}