:root {

  color-scheme: light;



  /* Core text */

  --ink: #292929;

  --label-ink: #343434;

  --muted: #575757;

  --choice-text: #555555;

  --transition-text: #444444;

  --preview-muted: #777777;

  --empty-text: #697184;

  --email-text: #171717;



  /* Surfaces */

  --canvas: #f4f4f2;

  --surface: #ffffff;

  --surface-2: #f8f8f6;

  --surface-3: #f0f0ee;

  --surface-submit: #fafaf8;

  --preview-surface: #f4f4f4;



  /* Lines */

  --line: #d8d8d4;

  --line-soft: #dedede;

  --line-file: #dddddd;

  --line-field: #aeb3b7;

  --line-choice: #b8bbbd;

  --line-plan: #bfc1bd;



  /* Brand */

  --charcoal: #333333;

  --orange: #f4a25c;

  --orange-hover: #f7b47f;

  --orange-soft: #fff1e6;

  --orange-section-line: #f0c7a6;

  --orange-service-line: #efb987;

  --orange-primary-line: #df8a47;

  --orange-selected-text: #543116;

  --orange-section-text: #5c371c;

  --orange-primary-text: #2d2118;



  /* Status */

  --danger: #b42318;

  --danger-ring: rgba(180, 35, 24, .16);



  --blue: #0f6cbd;

  --blue-soft: #edf5fc;

  --blue-line: #9bc4e8;



  --warning-text: #684b00;

  --warning-soft: #fff9e7;

  --warning-line: #d8a432;



  --disabled-bg: #b8b8b5;

  --disabled-line: #a3a3a0;

  --disabled-text: #666666;

  --spinner-line: #c5c5c2;



  /* Specialized states */

  --code-text: #e9edf0;

  --prep-text: #23527c;

  --prep-bg: #e5f0fa;

  --shoot-text: #79431d;



  /* Effects */

  --focus-ring: rgba(244, 162, 92, .25);

  --shadow-soft: rgba(0, 0, 0, .06);

  --shadow-modal: rgba(0, 0, 0, .25);

  --overlay: rgba(0, 0, 0, .45);

  --inverse-line: rgba(255, 255, 255, .45);



  /* Typography */

  --font-family: "Times New Roman", Times, serif;

  --fs-xs: .75rem;

  --fs-sm: .82rem;

  --fs-base: .9rem;

  --fs-md: 1rem;

  --fs-lg: 1.05rem;

  --fs-xl: 1.14rem;

  --fs-2xl: 1.35rem;

  --fs-h1: clamp(1.55rem, 3vw, 2.15rem);

  --fs-production: clamp(1.45rem, 2.6vw, 1.75rem);

  --fs-mobile-h1: 1.5rem;

  --fs-mobile-input: 1rem;



  font-family: var(--font-family);

}



* {

  box-sizing: border-box;

}



.visually-hidden {

  position: absolute !important;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;

}



html, body {

  max-width: 100%;

  overflow-x: hidden;

}



body {

  margin: 0;

  background: var(--canvas);

  color: var(--ink);

  min-height: 100vh;

}



button, input, textarea {

  font: inherit;

}



button {

  cursor: pointer;

}



.topbar {

  min-height: 76px;

  padding: 0 max(4vw, 24px);

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom: 4px solid var(--orange);

  background: var(--charcoal);

  position: sticky;

  top: 0;

  z-index: 20;

}



.brand {

  display: flex;

  gap: 13px;

  align-items: center;

  color: var(--surface);

  font-size: var(--fs-xl);

  font-weight: 700;

}



.brand img {

  width: 48px;

  height: auto;

  object-fit: contain;

  background: var(--surface);

  border-radius: 4px;

}



.sandbox-badge {

  color: var(--surface);

  border: 1px solid var(--inverse-line);

  padding: 7px 10px;

  border-radius: 4px;

  font-size: var(--fs-xs);

  letter-spacing: .06em;

}



main {

  width: min(1380px, 92vw);

  margin: 0 auto 72px;

}



.context-bar {

  position: relative;

  isolation: isolate;

  display: grid;

  justify-items: center;

  gap: 10px;

  padding: 20px 0 14px;

  overflow: hidden;

  text-align: center;

}



.context-bar > :not(.context-watermark) {

  position: relative;

  z-index: 1;

}



.context-watermark {

  position: absolute;

  z-index: 0;

  left: -2.5%;

  top: 50%;

  width: 185px;

  height: 185px;

  object-fit: contain;

  opacity: .85;

  transform: translateY(-50%);

  pointer-events: none;

}



h1, h2, p {

  margin-top: 0;

}



h1 {

  margin-bottom: 8px;

  padding-bottom: 3px;

  border-bottom: 3px solid var(--orange);

  color: var(--orange);

  font-size: var(--fs-h1);

  letter-spacing: -.015em;

}



h2 {

  margin-bottom: 5px;

  letter-spacing: -.015em;

}



.form-heading {

  display: grid;

  justify-items: center;

  width: min(680px, 100%);

  min-height: 96px;

  align-content: center;

  padding: 8px 18px;

}



.heading-rule {

  display: none;

}



.form-heading p {

  margin: 0;

  color: var(--ink);

  font-size: var(--fs-base);

  line-height: 1.35;

  white-space: nowrap;

}



.form-heading a {

  color: var(--orange);

  font-weight: 700;

}



.eyebrow {

  margin-bottom: 7px;

  color: var(--orange);

  text-transform: uppercase;

  letter-spacing: .1em;

  font-size: var(--fs-xs);

  font-weight: 800;

}



.production-lock {

  width: min(680px, 100%);

  padding: 10px 17px 26px;

  border: 0;

  background: transparent;

}



.production-lock strong {

  font-size: var(--fs-production);

}



.public-production-entry {

  display: none;

}



.public-mode .public-production-entry {

  display: grid;

  grid-column: 1 / -1;

  grid-template-columns: repeat(2, 1fr);

  gap: 16px;

  margin-bottom: 0;

}



.public-mode .production-lock {

  visibility: hidden;

  pointer-events: none;

  height: 66px;

  overflow: hidden;

}



.mode-tabs {

  display: flex;

  gap: 0;

  border-bottom: 1px solid var(--line);

  margin-bottom: 22px;

}



.tab {

  background: transparent;

  color: var(--muted);

  border: 0;

  border-bottom: 4px solid transparent;

  padding: 12px 16px;

  font-weight: 700;

}



.tab.is-active {

  color: var(--ink);

  border-color: var(--orange);

}



.tab-panel {

  display: none;

}



.tab-panel.is-active {

  display: block;

}



.embed-mode .topbar,

.embed-mode .mode-tabs,

.embed-mode .developer-only {

  display: none;

}



.embed-mode main {

  width: min(920px, 96vw);

  margin-bottom: 24px;

}



.embed-mode .context-bar {

  padding: 12px 0 10px;

}



.embed-mode .workspace-grid {

  display: block;

}



.embed-mode .request-form {

  box-shadow: none;

}



.workspace-grid {

  display: grid;

  grid-template-columns: minmax(0, 1.55fr) minmax(340px, .68fr);

  gap: 20px;

  align-items: start;

}



.request-form, .payload-panel, .engine-card {

  min-width: 0;

  border: 1px solid var(--line);

  background: var(--surface);

  overflow: hidden;

  box-shadow: 0 3px 16px var(--shadow-soft);

}



.new-request-notice {

  position: relative;

  padding: 13px 20px 17px;

  border: 0;

  background: var(--orange-soft);

  color: var(--ink);

  font-size: var(--fs-base);

  line-height: 1.35;

  text-align: center;

  white-space: nowrap;

}



.new-request-notice::after {

  content: "";

  position: absolute;

  right: 25px;

  bottom: 0;

  left: 25px;

  height: 4px;

  background: var(--orange);

}



.new-request-notice strong {

  color: var(--orange);

}



.form-section {

  position: relative;

  padding: 32px 25px;

  border: 0;

}



.form-section:not(:last-of-type)::after {

  content: "";

  position: absolute;

  right: 25px;

  bottom: 0;

  left: 25px;

  height: 4px;

  background: var(--orange);

}



.section-heading {

  display: flex;

  gap: 14px;

  margin-bottom: 21px;

}



.section-heading p {

  color: var(--muted);

  margin-bottom: 0;

}



.section-number {

  display: grid;

  place-items: center;

  flex: 0 0 36px;

  height: 36px;

  color: var(--orange-section-text);

  background: var(--orange-soft);

  border: 1px solid var(--orange-section-line);

  font-weight: 800;

}



.location-field {

  margin-top: 16px;

}



.location-field #location-autocomplete {

  margin-top: 0;

}





#location-autocomplete {

  position: relative;

  width: 100%;

}

.location-validation-proxy {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.location-field.location-invalid gmp-place-autocomplete {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px var(--danger-ring);
}




.plan-question {

  margin: 22px 0 0;

  padding: 18px;

  border: 0;

  border-top: 2px solid var(--ink);

  border-right: 2px solid var(--ink);

  border-left: 2px solid var(--ink);

  background: var(--surface);

}



.plan-question legend {

  padding: 0 9px;

  background: var(--surface);

  font-size: var(--fs-lg);

  font-weight: 800;

}



.plan-question > p {

  margin: 0 0 14px;

  color: var(--muted);

  line-height: 1.4;

}



.plan-choice-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 8px;

}



.plan-choice-grid label {

  display: block;

}



.plan-choice-grid input {

  position: absolute;

  opacity: 0;

  pointer-events: none;

}



.plan-choice-grid span {

  display: grid;

  gap: 3px;

  min-height: 62px;

  align-content: center;

  padding: 10px;

  border: 1px solid var(--line-choice);

  background: var(--surface);

  text-align: center;

}



.plan-choice-grid small {

  color: var(--muted);

  font-weight: 500;

}



.plan-choice-grid input:checked + span {

  color: var(--orange-selected-text);

  border-color: var(--orange);

  background: var(--orange-soft);

  box-shadow: inset 0 -3px 0 var(--orange);

}



/* =========================

   ADDITIONAL PLANS

   \========================= */



.additional-plans-section {

  margin-top: 18px;

  padding-top: 18px;

  border-top: 2px solid var(--ink);

}



.additional-plans-section[hidden] {

  display: none;

}



.additional-plans-heading {

  display: grid;

  gap: 4px;

  margin-bottom: 14px;

  text-align: left;

}



.additional-plans-heading strong {

  color: var(--orange);

  font-size: var(--fs-lg);

  font-weight: 900;

}



.additional-plans-heading small {

  color: var(--muted);

  font-size: var(--fs-sm);

  line-height: 1.35;

}



#additional-plans {

  display: grid;

  gap: 14px;

  margin-bottom: 14px;

}



.additional-plan-card {

  margin: 0;

  padding: 18px;

  border: 0;

  border-top: 2px solid var(--ink);

  border-right: 2px solid var(--ink);

  border-left: 2px solid var(--ink);

  background: var(--surface-2);

}



.additional-plan-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 16px;

}



.additional-plan-number {

  color: var(--orange);

  font-size: var(--fs-md);

  font-weight: 900;

}



.remove-additional-plan {

  border: 0;

  background: transparent;

  color: var(--danger);

  font-size: var(--fs-sm);

  cursor: pointer;

}



.additional-plan-card > label {

  margin-bottom: 14px;

}



.additional-plan-card > label:last-child {

  margin-bottom: 0;

}



.additional-plan-card input,

.additional-plan-card textarea {

  margin-top: 7px;

}



.additional-plan-title::-webkit-calendar-picker-indicator {

  display: none !important;

}



.additional-plan-streets {

  display: grid;

  gap: 14px;

}



.add-additional-plan-street {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: auto;

  min-height: 34px;

  margin: 14px 0 0;

  padding: 6px 11px;

  font-size: var(--fs-sm);

  justify-self: start;

}



#add-plan {

  min-height: 34px;

  padding: 6px 12px;

  color: var(--surface);

  font-size: var(--fs-sm);

}



/* COLLAPSIBLE REPEATERS */



.street-card.is-collapsed > :not(.street-header),

.additional-plan-card.is-collapsed > :not(.additional-plan-header) {

  display: none;

}



.street-card input,

.street-card textarea {

  background: var(--surface-2);

}



.repeater-toggle {

  margin-left: auto;

  border: 0;

  background: transparent;

  color: var(--orange);

  font-size: var(--fs-sm);

  font-weight: 700;

  cursor: pointer;

}



.street-header,

.additional-plan-header {

  cursor: default;

}



.street-card.is-collapsed,

.additional-plan-card.is-collapsed {

  padding-bottom: 18px;

}



.street-card.is-collapsed .street-header,

.additional-plan-card.is-collapsed .additional-plan-header {

  margin-bottom: 0;

}



.street-header legend {

  display: inline-flex;

  align-items: center;

  gap: 3px;

  white-space: nowrap;

}



.street-header .street-word,

.street-header .street-number,

.street-header .required-dot {

  display: inline;

}



.repeater-actions {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

}



.repeater-all-toggle {

  border: 0;

  background: transparent;

  color: var(--orange);

  font-size: var(--fs-sm);

  font-weight: 700;

  cursor: pointer;

  white-space: nowrap;

}



label, .field-label {

  display: grid;

  gap: 7px;

  color: var(--label-ink);

  font-size: var(--fs-base);

  font-weight: 650;

}



input, textarea {

  min-width: 0;

  width: 100%;

  color: var(--ink);

  background: var(--surface);

  border: 1px solid var(--line-field);

  border-radius: 2px;

  padding: 11px 12px;

  outline: none;

  resize: vertical;

}



input:focus, textarea:focus {

  border-color: var(--orange);

  box-shadow: 0 0 0 2px var(--focus-ring);

}



.field-grid {

  display: grid;

  gap: 16px;

  margin-bottom: 16px;

}



.two-up {

  grid-template-columns: repeat(2, 1fr);

}



.four-up {

  grid-template-columns: repeat(4, 1fr);

}



.four-up label {

  font-weight: 800;

  letter-spacing: .045em;

  text-align: center;

}



.four-up input {

  text-align: center;

  background: var(--surface-3);

}



.street-breakdown {

  margin: 0 0 18px;

  padding: 16px 18px 18px;

  border: 0;

  border-top: 4px solid var(--ink);

  border-right: 4px solid var(--ink);

  border-left: 4px solid var(--ink);

  background: var(--surface);

}



.street-breakdown legend {

  padding: 0 9px;

  background: var(--surface);

  color: var(--ink);

  font-size: var(--fs-lg);

  font-weight: 900;

}



.street-breakdown legend span {

  color: var(--orange);

}



.street-breakdown p {

  margin: 0;

  color: var(--muted);

  line-height: 1.45;

}



.streets {

  display: grid;

  gap: 14px;

  margin: 0 0 14px;

}



.street-card {

  margin: 0;

  padding: 18px;

  border: 0;

  border-top: 2px solid var(--ink);

  border-right: 2px solid var(--ink);

  border-left: 2px solid var(--ink);

  background: var(--surface-2);

}



.street-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 14px;

}



.street-header legend {

  font-weight: 800;

  font-size: var(--fs-md);

}



.street-word, .closure-details-title > span {

  color: var(--orange);

}



.closure-details-title > b {

  color: var(--ink);

}



.remove-street {

  color: var(--danger);

  background: transparent;

  border: 0;

  font-size: var(--fs-sm);

}



.street-card:first-child .remove-street {

  display: none;

}



.progressive {

  margin-top: 16px;

  animation: reveal .2s ease-out;

}



@keyframes reveal {

  from {

    opacity: 0;

    transform: translateY(-5px);

  }

}



.choice-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 8px;

}



.choice-grid label {

  display: block;

}



.choice-grid .choice-itc {

  grid-column: 2;

}



.choice-grid input {

  position: absolute;

  opacity: 0;

  pointer-events: none;

}



.choice-grid span {

  display: block;

  min-height: 44px;

  padding: 11px 9px;

  border: 1px solid var(--line-choice);

  text-align: center;

  background: var(--surface);

  color: var(--choice-text);

}



.choice-grid input:checked + span {

  color: var(--orange-selected-text);

  border-color: var(--orange);

  background: var(--orange-soft);

}



.service-options {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

  border: 0;

  padding: 0;

  margin: 6px 0 18px;

}



.service-options legend {

  grid-column: 1 / -1;

  margin-bottom: 7px;

  font-size: var(--fs-base);

  font-weight: 700;

}



.check-card {

  display: flex;

  align-items: flex-start;

  gap: 10px;

  padding: 13px;

  border: 1px solid var(--orange-service-line);

  background: var(--orange-soft);

}



.check-card input {

  flex: 0 0 22px;

  width: 22px;

  height: 22px;

  min-width: 22px;

  margin-top: 1px;

  accent-color: var(--orange);

}



.check-card span {

  display: grid;

  gap: 3px;

}



.check-card small {

  color: var(--muted);

  font-weight: 500;

}



.primary-button,

.secondary-button,

.tertiary-button {

  appearance: none;

  min-height: 42px;

  border-radius: 3px;

  padding: 10px 15px;

  font: inherit;

  font-weight: 750;

  cursor: pointer;

}



.primary-button {

  border: 1px solid var(--orange-primary-line);

  background: var(--orange);

  color: var(--orange-primary-text);

}



.primary-button:hover {

  background: var(--orange-hover);

}



.secondary-button {

  border: 1px solid var(--orange);

  background: var(--surface);

  color: var(--orange);

}



.secondary-button:hover {

  background: var(--orange-soft);

}



.tertiary-button {

  border-radius: 3px;

  background: var(--muted);

  color: var(--surface);

}



.tertiary-button:hover {

  background: var(--label-ink);

}



.primary-button:focus-visible,

.secondary-button:focus-visible,

.tertiary-button:focus-visible {

  outline: 2px solid var(--orange);

  outline-offset: 2px;

}



.submit-row {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 20px 25px;

  background: var(--surface-submit);

}



.submit-row p {

  position: absolute;

  left: 25px;

  margin: 0;

  color: var(--muted);

  font-size: var(--fs-sm);

}



.submit-row .primary-button {

  min-height: 48px;

  padding: 16px 64px;

  font-size: var(--fs-xl);

  font-weight: 800;



  display: inline-flex;

  align-items: center;

  justify-content: center;

  text-align: center;

}



.payload-panel {

  position: sticky;

  top: 96px;

  max-height: calc(100vh - 120px);

  display: flex;

  flex-direction: column;

}



.payload-heading {

  padding: 19px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  border-bottom: 1px solid var(--line);

}



.payload-heading h2 {

  margin: 0;

}



.state-pill {

  padding: 6px 9px;

  background: var(--blue-soft);

  border: 1px solid var(--blue-line);

  color: var(--blue);

  border-radius: 999px;

  font-size: var(--fs-xs);

  font-weight: 800;

}



.mapping-summary {

  display: grid;

  grid-template-columns: 1fr 1fr;

  border-bottom: 1px solid var(--line);

}



.mapping-summary div {

  padding: 15px 18px;

  display: grid;

  gap: 4px;

}



.mapping-summary div + div {

  border-left: 1px solid var(--line);

}



.mapping-summary span, .mapping-summary code {

  color: var(--muted);

  font-size: var(--fs-xs);

}



.mapping-summary strong {

  font-size: var(--fs-sm);

}



pre {

  margin: 0;

  padding: 18px;

  color: var(--code-text);

  background: var(--ink);

  font: 12px/1.58 ui-monospace, SFMono-Regular, Menlo, monospace;

  white-space: pre-wrap;

  overflow: auto;

}



#payload-output {

  min-height: 430px;

  flex: 1;

}



.engine-grid {

  display: grid;

  grid-template-columns: .9fr 1.1fr;

  gap: 20px;

}



.engine-card {

  padding: 24px;

}



.muted {

  color: var(--muted);

}



.plan-list {

  display: grid;

  gap: 10px;

  margin: 22px 0;

}



.plan-list article {

  display: grid;

  grid-template-columns: 118px 1fr;

  gap: 4px 12px;

  align-items: center;

  padding: 14px;

  border: 1px solid var(--line);

  background: var(--surface-2);

}



.plan-list small {

  grid-column: 2;

  color: var(--muted);

}



.plan-mode {

  padding: 5px 8px;

  border-radius: 999px;

  text-align: center;

  font-size: var(--fs-xs);

  font-weight: 800;

}



.plan-mode.prep {

  color: var(--prep-text);

  background: var(--prep-bg);

}



.plan-mode.shoot {

  color: var(--shoot-text);

  background: var(--orange-soft);

}



.engine-actions {

  display: flex;

  gap: 9px;

  flex-wrap: wrap;

}



.engine-result {

  margin-top: 20px;

}



.schedule-row {

  display: grid;

  grid-template-columns: 74px 104px 1fr;

  gap: 12px;

  padding: 12px 0;

  border-bottom: 1px solid var(--line);

  align-items: start;

}



.schedule-row .event-label {

  color: var(--orange);

  font-weight: 900;

}



.schedule-row small {

  color: var(--muted);

}



.review-box {

  padding: 16px;

  border: 1px solid var(--warning-line);

  background: var(--warning-soft);

  color: var(--warning-text);

}



.email-card {

  padding: 0;

}



.email-preview {

  margin: 18px;

  padding: 20px;

  background: var(--surface);

  color: var(--email-text);

  border: 1px solid var(--line);

  min-height: 380px;

}



.empty-state {

  display: grid;

  place-items: center;

  color: var(--empty-text);

  text-align: center;

}



.finished-plan-email h2 {

  font-family: var(--font-family);

  font-size: var(--fs-2xl);

}



.mail-event {

  display: grid;

  grid-template-columns: 1fr 150px;

  gap: 18px;

  border-top: 1px solid var(--line-soft);

  padding: 16px 0;

}



.mail-event-copy {

  display: grid;

  align-content: start;

  gap: 5px;

}



.mail-event-copy > strong {

  color: var(--orange);

  letter-spacing: .04em;

}



.mail-event-copy a {

  color: var(--orange);

  font-weight: 700;

}



.mail-transition {

  font-size: var(--fs-sm);

  font-weight: 800;

  color: var(--transition-text);

}



.mail-preview {

  border: 1px solid var(--line-soft);

  min-height: 96px;

  display: grid;

  place-items: center;

  color: var(--preview-muted);

  text-align: center;

  background: linear-gradient(135deg, var(--preview-surface), var(--surface));

}



.mail-preview img {

  max-width: 100%;

}



details {

  margin: 0 18px 18px;

  border: 1px solid var(--line);

  overflow: hidden;

}



summary {

  padding: 12px 14px;

  cursor: pointer;

  font-weight: 700;

}



details pre {

  max-height: 280px;

}



.required-dot {

  color: var(--danger);

  font-size: var(--fs-sm);

  margin-left: 3px;

  vertical-align: middle;

}



@media (max-width: 980px) {

  .workspace-grid, .engine-grid {

    grid-template-columns: 1fr;

  }



  .payload-panel {

    position: static;

    max-height: none;

  }



  .four-up {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 680px) {

  main {

    width: min(94vw, 680px);

  }



  .topbar {

    padding: 0 3vw;

  }



  .brand span {

    display: none;

  }



  .sandbox-badge {

    max-width: 125px;

    text-align: center;

  }



  .context-bar, .embed-mode .context-bar {

    padding: 28px 0 10px;

  }



  .two-up, .four-up, .choice-grid, .service-options, .plan-choice-grid {

    grid-template-columns: 1fr;

  }



  .choice-grid .choice-itc {

    grid-column: 1;

  }



  .new-request-notice {

    white-space: normal;

  }



  .form-heading p {

    white-space: normal;

  }



  .mail-event {

    grid-template-columns: 1fr;

  }

}



@media print {

  @page {

    size: Letter;

    margin: .3in;

  }



  body {

    background: var(--surface);

  }



  main, .embed-mode main {

    width: 100%;

    margin: 0;

  }



  .context-bar, .embed-mode .context-bar {

    padding: 4px 0 8px;

  }



  .context-watermark {

    left: 8px;

    width: 138px;

    height: 138px;

  }



  .form-heading {

    width: calc(100% - 170px);

    margin-left: 170px;

    min-height: 76px;

    padding: 2px 8px;

  }



  .form-heading p {

    white-space: normal;

  }



  .production-lock {

    padding-bottom: 16px;

  }



  .request-form {

    break-inside: auto;

  }



  .form-section, .street-card, .plan-question, .service-options, .submit-row {

    break-inside: avoid;

  }

}



.success-modal {

  position: fixed;

  inset: 0;

  background: var(--overlay);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 9999;

}



.success-modal[hidden] {

  display: none;

}



.success-modal-box {

  background: var(--surface);

  padding: 28px;

  border-radius: 8px;

  width: min(420px, 90vw);

  text-align: center;

  box-shadow: 0 12px 40px var(--shadow-modal);

}



.success-modal-box h2 {

  margin-top: 0;

}



.success-actions {

  display: flex;

  justify-content: center;

  gap: 12px;

  margin-top: 20px;

  flex-wrap: wrap;

}



.selected-file {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding: 8px 10px;

  margin-top: 6px;

  border: 1px solid var(--line-file);

  border-radius: 4px;

}



.remove-file {

  border: 0;

  background: none;

  cursor: pointer;

  font-size: var(--fs-sm);

  text-decoration: underline;

}



/* =========================

   MOBILE / PHONE LAYOUT

   \========================= */



@media (max-width: 640px) {

  /* Keep the page from feeling squeezed */



  body {

    margin: 0;

    padding: 0;

  }



  main,

  .embed-mode main {

    width: 100%;

    max-width: 100%;

    margin: 0;

  }



  .request-form {

    width: 100%;

    box-sizing: border-box;

    padding: 16px;

  }



  /* ----- LOGO / HEADER ----- */



  .context-bar {

    display: block;

    padding: 12px 16px 10px;

    text-align: center;

  }



  .context-watermark {

    max-width: 100px;

    height: 100px;

    margin: 0 auto 8px;

  }



  .form-heading {

    width: 100%;

  }



  .form-heading h1 {

    font-size: var(--fs-mobile-h1);

    line-height: 1.15;

    margin: 6px 0 8px;

  }



  .form-heading p {

    font-size: var(--fs-base);

    line-height: 1.4;

    margin: 8px auto;

  }



  .production-lock {

    width: 100%;

    margin-top: 10px;

    text-align: center;

    line-height: 1.35;

  }



  .production-lock strong {

    display: block;

    font-size: var(--fs-md);

  }



  /* ----- DATE FIELDS ----- */



  .field-grid.four-up {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

  }



  .field-grid.four-up label {

    min-width: 0;

  }



  .field-grid.four-up input[type="date"] {

    width: 100%;

    min-width: 0;

    box-sizing: border-box;

    font-size: var(--fs-mobile-input);

    padding: 10px 8px;

    cursor: pointer;

  }



  /* Two-column fields become one column */



  .field-grid.two-up {

    grid-template-columns: 1fr;

    gap: 12px;

  }



  /* Keep all normal inputs inside the screen */



  input,

  textarea,

  select {

    max-width: 100%;

    box-sizing: border-box;

  }



  /* Plan choice cards */



  .plan-choice-grid {

    grid-template-columns: 1fr;

  }



  /* Service cards */



  .service-options {

    width: 100%;

  }



  .check-card {

    width: 100%;

    box-sizing: border-box;

  }



  /* Buttons easier to tap */



  .primary-button,

  .secondary-button,

  .tertiary-button {

    min-height: 46px;

  }



  .submit-row {

  display: block;

  width: calc(100% + 32px);

  margin-left: -16px;

  margin-right: -16px;

  padding: 20px 16px;

}



 .submit-row .primary-button {

   width: 100%;

   min-height: 46px;

   padding: 10px 15px;

   font-size: var(--fs-base);

  }





}



@media (max-width: 640px) {

  /* Turn the watermark into a normal top logo on phones */



  .context-watermark {

    position: static !important;

    display: block;

    width: 90px;

    max-width: 36vw;

    height: auto;

    margin: 0 auto 4px;

    opacity: 1;

    transform: none !important;

  }



  .context-bar,

  .embed-mode .context-bar {

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 8px 16px 6px;

    text-align: center;

  }



  .form-heading {

    position: static;

    width: 100%;

    margin: 0;

    text-align: center;

  }



  .form-heading h1 {

    margin: 0 0 4px;

    font-size: var(--fs-mobile-h1);

    line-height: 1.15;

  }



  .form-heading p {

    margin: 3px auto;

    line-height: 1.35;

  }



  .production-lock {

    position: static;

    width: 100%;

    margin-top: 4px;

    text-align: center;

  }



  .public-mode .production-lock {

    display: none;

  }



  .public-mode .context-bar,

  .public-mode.embed-mode .context-bar {

    padding-bottom: 2px;

  }



  .additional-plans-section {

    margin-top: 16px;

    padding-top: 16px;

  }



  .additional-plan-card {

    padding: 16px;

  }



  #add-plan {

    width: auto;

  }

}



/* =========================================================

   SUBMIT STATE

   \========================================================= */



.primary-button.is-submitting,

.primary-button:disabled,

.secondary-button:disabled,

.tertiary-button:disabled {

  background: var(--disabled-bg) !important;

  border-color: var(--disabled-line) !important;

  color: var(--disabled-text) !important;

  cursor: not-allowed;

  opacity: 1;

}



.submit-loading {

  position: absolute;

  left: calc(50% + 145px);

  right: auto;

  top: 50%;

  transform: translateY(-50%);



  display: inline-flex;

  align-items: center;

  gap: 7px;



  color: var(--muted);

  font-size: var(--fs-md);

  white-space: nowrap;

}



@media (max-width: 640px) {

  .submit-loading {

    position: static;

    transform: none;

    display: flex;

    justify-content: center;

    margin: 10px 0 0;

  }

}



.submit-spinner {

  width: 15px;

  height: 15px;

  border: 2px solid var(--spinner-line);

  border-top-color: var(--orange);

  border-radius: 50%;

  animation: submit-spin .7s linear infinite;

}



@keyframes submit-spin {

  to {

    transform: rotate(360deg);

  }

}



/* Street cards stay gray; editable fields stay white */

.street-card input,

.street-card textarea,

.street-card input:focus,

.street-card textarea:focus {

  background-color: var(--surface) !important;

  -webkit-appearance: none;

  appearance: none;

}



.street-card input:-webkit-autofill,

.street-card input:-webkit-autofill:hover,

.street-card input:-webkit-autofill:focus {

  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;

  -webkit-text-fill-color: var(--ink) !important;

}



/* =========================================================

   ADDITIONAL PLANS — COMPACT HIERARCHY

   \========================================================= */



/* Only the section-level Collapse All remains. */

.toggle-additional-plan-streets {

  display: none !important;

}



/* Give plans stronger visual weight than the streets inside them. */

.additional-plan-card {

  border: 1px solid var(--line-plan);

  border-top: 3px solid var(--ink);

  background: var(--surface-2);

}



.additional-plan-header {

  padding-bottom: 11px;

  border-bottom: 1px solid var(--line);

}



.additional-plan-card.is-collapsed .additional-plan-header {

  padding-bottom: 0;

  border-bottom: 0;

}



.additional-plan-number {

  min-width: 0;

  font-size: var(--fs-lg);

}



.additional-plan-meta {

  margin-left: auto;

  color: var(--muted);

  font-size: var(--fs-sm);

  font-weight: 700;

  white-space: nowrap;

}



.additional-plan-header > .repeater-toggle {

  margin-left: 0;

}



/* Location becomes one compact row until the user asks to change it. */

.additional-plan-location-summary {

  display: grid;

  grid-template-columns: auto minmax(0, 1fr) auto;

  align-items: center;

  gap: 10px;

  margin: 2px 0 14px;

  padding: 9px 0 11px;

  border-bottom: 1px solid var(--line);

}



.additional-plan-location-summary-label {

  color: var(--label-ink);

  font-size: var(--fs-sm);

  font-weight: 800;

}



.additional-plan-location-summary-text {

  min-width: 0;

  overflow: hidden;

  color: var(--muted);

  font-size: var(--fs-sm);

  text-overflow: ellipsis;

  white-space: nowrap;

}



.additional-plan-location-summary-text[data-mode="override"] {

  color: var(--ink);

  font-weight: 650;

}



.additional-plan-location-actions {

  display: inline-flex;

  align-items: center;

  gap: 8px;

}



.additional-plan-location-change,

.additional-plan-location-primary {

  border: 0;

  padding: 0;

  background: transparent;

  color: var(--orange);

  font: inherit;

  font-size: var(--fs-sm);

  font-weight: 750;

  cursor: pointer;

}



.additional-plan-location-primary {

  color: var(--muted);

}



.additional-plan-location-field[hidden] {

  display: none !important;

}



/* Streets read as rows inside the plan instead of cards inside cards. */

.additional-plan-streets {

  gap: 0;

  margin-top: 4px;

}



.additional-plan-streets::before {

  content: "STREETS";

  display: block;

  padding: 4px 0 8px;

  color: var(--muted);

  font-size: var(--fs-xs);

  font-weight: 850;

  letter-spacing: .08em;

}



.additional-plan-street-card {

  padding: 10px 12px;

}



.additional-plan-street-card.is-collapsed {

  padding: 9px 12px;

}



.additional-plan-street-card .street-header {

  margin-bottom: 8px;

  min-height: 0;

}



.additional-plan-street-card.is-collapsed .street-header {

  margin-bottom: 0;

}



.additional-plan-streets {

  gap: 6px;

}



.additional-plan-card .additional-plan-street-card {

  padding: 14px 0;

  border: 0;

  border-top: 1px solid var(--line);

  background: transparent;

}



.additional-plan-card .additional-plan-street-card:last-child {

  border-bottom: 1px solid var(--line);

}



.additional-plan-card .additional-plan-street-card.is-collapsed {

  padding: 11px 0;

}



.additional-plan-card .additional-plan-street-card .street-header {

  gap: 10px;

  margin-bottom: 11px;

}



.additional-plan-card .additional-plan-street-card.is-collapsed .street-header {

  margin-bottom: 0;

}



.additional-plan-card .additional-plan-street-card .street-header legend {

  display: inline-flex;

  align-items: center;

  flex: 0 0 auto;

  gap: 3px;

  min-width: max-content;

  white-space: nowrap;

  line-height: 1.2;

}



.additional-plan-street-summary {

  display: block;

  overflow: hidden;

  color: var(--muted);

  font-size: var(--fs-xs);

  font-weight: 600;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.additional-plan-street-detail-preview {

  display: none;

  overflow: hidden;

  color: var(--muted);

  font-size: var(--fs-xs);

  font-weight: 500;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.additional-plan-street-card.is-collapsed

  .additional-plan-street-detail-preview:not([hidden]) {

  display: block;

}



.additional-plan-card .additional-plan-street-card .repeater-toggle {

  flex: 0 0 auto;

}



.additional-plan-card .add-additional-plan-street {

  margin-top: 10px;

}



@media (max-width: 620px) {

  .additional-plan-header {

    flex-wrap: wrap;

  }



  .additional-plan-meta {

    order: 2;

    margin-left: 0;

  }



  .additional-plan-header > .repeater-toggle {

    margin-left: auto;

  }



  .additional-plan-location-summary {

    grid-template-columns: 1fr auto;

  }



  .additional-plan-location-summary-label {

    grid-column: 1 / -1;

  }

}



/* Keep all editable fields white inside Additional Plans */

.additional-plan-card input,
.additional-plan-card textarea,
.additional-plan-card gmp-place-autocomplete {

  background: var(--surface) !important;

}



.additional-plan-card input:focus,

.additional-plan-card textarea:focus {

  background: var(--surface) !important;

}



/* Prevent autofill from turning fields gray */

.additional-plan-card input:-webkit-autofill,

.additional-plan-card input:-webkit-autofill:hover,

.additional-plan-card input:-webkit-autofill:focus {

  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;

  -webkit-text-fill-color: var(--ink) !important;

}

/* =========================================================
   REVISION WORKSPACE
   Used only for ?revision=<token>; normal request/edit styles
   remain unchanged.
   ========================================================= */

.revision-workspace[hidden],
#engine-demo-shell[hidden],
#revision-plan-editor[hidden],
#revision-empty-state[hidden] {
  display: none !important;
}

.revision-workspace {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.6fr);
  gap: 20px;
  align-items: start;
}

.revision-plan-panel,
.revision-detail-panel {
  min-width: 0;
}

.revision-plan-panel {
  position: sticky;
  top: 22px;
}

.revision-plan-list {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.revision-plan-choice {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-left: 4px solid transparent;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  font: inherit;
}

.revision-plan-choice:hover {
  border-color: var(--orange);
  background: var(--orange-soft);
}

.revision-plan-choice.is-selected {
  border-color: var(--orange);
  border-left-color: var(--orange);
  background: var(--orange-soft);
}

.revision-plan-choice strong {
  font-size: var(--fs-md);
}

.revision-plan-choice span,
.revision-plan-choice small {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.revision-empty-state {
  display: grid;
  place-items: center;
  min-height: 360px;
  gap: 7px;
  color: var(--muted);
  text-align: center;
}

.revision-empty-state strong {
  color: var(--ink);
  font-size: var(--fs-xl);
}


.revision-plan-heading h2 {
  margin-bottom: 4px;
}



.revision-date-section {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 2px solid var(--ink);
}

.revision-submit-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.revision-status {
  margin-right: auto;
  color: var(--muted);
  font-size: var(--fs-sm);
}


@media (max-width: 780px) {
  .revision-workspace {
    grid-template-columns: 1fr;
  }

  .revision-plan-panel {
    position: static;
  }

  .revision-plan-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .revision-plan-list {
    grid-template-columns: 1fr;
  }

  .revision-submit-row {
    align-items: stretch;
    flex-direction: column;
  }

  .revision-submit-row .primary-button {
    width: 100%;
  }
}


/* Revision link keeps both navigation tabs visible. */
.revision-mode .mode-tabs {
  display: flex !important;
}

/* Never expose the Bartram sandbox demo inside a real revision link. */
.revision-mode #engine-demo-shell {
  display: none !important;
}

/* =========================================================
   REVISION PORTAL — LOCKED REQUEST + NEW PLAN
   ========================================================= */

/* Request Portal is reference-only in revision mode.
   Additional Emails remains editable; collapse controls remain active. */
.revision-mode .revision-request-locked input:disabled:not([type="checkbox"]):not([type="radio"]),
.revision-mode .revision-request-locked textarea:disabled,
.revision-mode .revision-request-locked select:disabled {
  background: #e6e6e3 !important;
  border-color: #c6c6c2 !important;
  color: #747474 !important;
  -webkit-text-fill-color: #747474 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

/* Custom closure/plan choices use hidden native checkbox/radio inputs.
   Keep those native controls hidden in the locked Request Portal so they do
   not render as gray squares over the styled choice tiles. */
.revision-mode .revision-request-locked .choice-grid input:disabled,
.revision-mode .revision-request-locked .plan-choice-grid input:disabled {
  opacity: 0 !important;
  pointer-events: none !important;
}

.revision-mode .revision-request-locked input:disabled::placeholder,
.revision-mode .revision-request-locked textarea:disabled::placeholder {
  color: #90908c !important;
  opacity: 1;
}

.revision-mode .revision-request-locked label,
.revision-mode .revision-request-locked .field-label {
  color: #666663;
}

.revision-mode .revision-request-locked #location-autocomplete {
  pointer-events: none;
  opacity: 1;
}


.revision-mode .revision-request-locked .plan-choice-grid input:disabled + span {
  background: #e6e6e3 !important;
  border-color: #c6c6c2 !important;
  color: #777774 !important;
  box-shadow: none !important;
}

.revision-mode .revision-request-locked .plan-choice-grid input:disabled:checked + span {
  background: #d8d8d4 !important;
  border-color: #b9b9b5 !important;
  color: #555552 !important;
  box-shadow: inset 0 -3px 0 #777772 !important;
}

.revision-mode .revision-request-locked .check-card {
  background: #e6e6e3 !important;
  border-color: #c6c6c2 !important;
  color: #6f6f6c !important;
}

.revision-mode .revision-request-locked .check-card small,
.revision-mode .revision-request-locked .plan-choice-grid small {
  color: #858581 !important;
}

/* Keep the reference cards visibly locked without dimming
   the collapse / expand controls themselves. */
.revision-mode .revision-request-locked .street-card,
.revision-mode .revision-request-locked .additional-plan-card {
  background: #eeeeeb !important;
}

.revision-mode .revision-request-locked .street-card input:disabled,
.revision-mode .revision-request-locked .street-card textarea:disabled,
.revision-mode .revision-request-locked .additional-plan-card input:disabled,
.revision-mode .revision-request-locked .additional-plan-card textarea:disabled {
  background: #dededb !important;
}

.revision-mode .revision-request-locked .repeater-toggle,
.revision-mode .revision-request-locked .repeater-all-toggle {
  color: var(--orange) !important;
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.revision-mode .revision-request-locked .remove-street,
.revision-mode .revision-request-locked .remove-additional-plan,
.revision-mode .revision-request-locked .remove-file,
.revision-mode .revision-request-locked .additional-plan-location-change,
.revision-mode .revision-request-locked .additional-plan-location-primary {
  display: none !important;
}


/* Left side: use one consistent rhythm between each section. */
.revision-plan-panel {
  display: grid;
  gap: 18px;
}

.revision-plan-panel > .eyebrow,
.revision-plan-panel > h2,
.revision-plan-panel > .muted,
.revision-plan-panel > .revision-plan-list,
.revision-plan-panel > .revision-plan-actions,
.revision-plan-panel > .revision-notes-field,
.revision-plan-panel > .revision-attachments-field {
  margin: 0;
}

.revision-plan-list {
  gap: 10px;
}

.revision-plan-choice {
  padding-top: 16px;
  padding-bottom: 16px;
}

.revision-plan-actions .secondary-button,
.revision-plan-actions .primary-button {
  width: 100%;
}

.revision-plan-actions .primary-button {
  width: auto;
  color: var(--surface);
}

.revision-notes-field {
  gap: 9px;
}

.revision-notes-field textarea {
  min-height: 130px;
  resize: vertical;
}

.revision-attachments-field {
  gap: 9px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.revision-attachments-field small {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.35;
}

/* Right side: give the plan identity and street breakdown
   clearly separate visual zones. */
.revision-plan-heading {
  margin-bottom: 30px;
}

.revision-new-plan-title-field {
  margin: 0 0 34px;
}

.revision-new-plan-title-field + .revision-street-breakdown {
  margin-top: 0;
}

.revision-street-breakdown {
  margin-bottom: 22px;
}

.revision-new-plan-actions {
  margin: 8px 0 24px;
}

.revision-new-plan-actions .secondary-button {
  width: auto;
}

@media (max-width: 780px) {
  .revision-plan-panel {
    gap: 16px;
  }
}

@media (max-width: 520px) {
  .revision-new-plan-actions .secondary-button {
    width: 100%;
  }
}

/* Revision Request Portal: saved Location stays visible as a locked field. */
.revision-mode .revision-request-locked .revision-location-display {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  background: #e6e6e3 !important;
  border: 1px solid #c6c6c2 !important;
  color: #747474 !important;
  -webkit-text-fill-color: #747474 !important;
  opacity: 1 !important;
  cursor: not-allowed;
}


/* =========================================================
   REVISION PORTAL — NEW PLAN LOCATION
   ========================================================= */


.revision-new-plan-location-field {
  margin: 0 0 18px;
}

.revision-new-plan-location-autocomplete,
.revision-new-plan-location-autocomplete .revision-location-fallback-input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
}

.revision-new-plan-location-autocomplete .revision-location-fallback-input {
  margin: 0;
}


/* =========================================================
   REVISION PORTAL — PLAN LIST + LOCKED CHOICES
   ========================================================= */

/* Locked closure choices stay fully visible without a gray tile covering
   each option. The card surface shows through; text and borders darken to
   communicate read-only state. */
.revision-mode .revision-request-locked .choice-grid input:disabled + span {
  background: transparent !important;
  border-color: #9d9d98 !important;
  color: #666662 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.revision-mode .revision-request-locked .choice-grid input:disabled:checked + span {
  background: transparent !important;
  border-color: #6f6f6a !important;
  color: #444440 !important;
  font-weight: 800;
  box-shadow: inset 0 -2px 0 #777772 !important;
}

/* Make each plan read as one box. The Remove action lives visually inside
   the same plan card, like the Request Portal remove-plan/street controls. */
.revision-plan-list-item {
  position: relative;
  display: block;
}

.revision-plan-list-item .revision-plan-choice {
  width: 100%;
  min-width: 0;
  padding-right: 94px;
}

.revision-remove-plan {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  align-self: auto;
  min-width: 0;
  min-height: 0;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: var(--danger);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.revision-remove-plan:hover,
.revision-remove-plan:focus-visible {
  border: 0;
  background: transparent;
  color: var(--danger);
  text-decoration: underline;
}

@media (max-width: 520px) {
  .revision-plan-list-item {
    display: block;
  }

  .revision-plan-list-item .revision-plan-choice {
    padding-right: 88px;
  }

  .revision-remove-plan {
    top: 10px;
    right: 9px;
    min-height: 0;
  }
}


/* =========================================================
   REVISION STREET SURFACE + LOCATION INPUT
   ========================================================= */

/* Keep revision street cards light gray, but make the editable fields
   white to match the Request Portal form fields. */
.revision-streets .street-card {
  background: var(--surface-2) !important;
}

.revision-streets .street-card input,
.revision-streets .street-card textarea,
.revision-streets .street-card input:focus,
.revision-streets .street-card textarea:focus {
  background: var(--surface) !important;
}

/* Revision date fields match the white Request Portal input surface. */
.revision-date-section .four-up input {
  background: var(--surface) !important;
}


.additional-plan-card .additional-plan-street-card .street-header legend,
.additional-plan-card .additional-plan-street-card .street-header legend span {
  background: var(--surface-2) !important;
}


/* Google Places PlaceAutocompleteElement — restored original widget styling. */
#location-autocomplete,
.additional-plan-location-autocomplete,
.revision-new-plan-location-autocomplete {
  width: 100%;
}

gmp-place-autocomplete {
  width: 100%;
  display: block;
  background-color: var(--surface);
  border: 1px solid var(--line-field);
  border-radius: 2px;
  color: var(--ink);
  font-family: var(--font-family);
}

gmp-place-autocomplete:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

gmp-place-autocomplete::part(prediction-list) {
  background: var(--surface);
  border: 1px solid var(--line-field);
  border-radius: 2px;
  color: var(--ink);
}

gmp-place-autocomplete::part(prediction-item) {
  background: var(--surface);
  color: var(--ink);
  padding: 10px 12px;
}

gmp-place-autocomplete::part(prediction-item):hover {
  background: var(--orange-soft);
  color: var(--ink);
}

gmp-place-autocomplete::part(prediction-item-selected) {
  background: var(--orange-soft);
}

gmp-place-autocomplete::part(prediction-item-main-text) {
  color: var(--ink);
  font-weight: 700;
  font-family: var(--font-family);
}

gmp-place-autocomplete::part(prediction-item-secondary-text) {
  color: var(--muted);
  font-family: var(--font-family);
}

gmp-place-autocomplete::part(prediction-item-match) {
  color: var(--orange);
  font-weight: 800;
}

/* Fallback inputs only appear if the Google widget has not loaded. */
#location-autocomplete .location-fallback-input,
.additional-plan-location-autocomplete .additional-plan-location-fallback-input,
.revision-new-plan-location-autocomplete .revision-location-fallback-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-field);
  border-radius: 2px;
  color: var(--ink);
  font-family: var(--font-family);
}

#location-autocomplete .location-fallback-input:focus,
.additional-plan-location-autocomplete .additional-plan-location-fallback-input:focus,
.revision-new-plan-location-autocomplete .revision-location-fallback-input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

/* Revision Portal: keep Remove Street visible on every street card. */
.revision-street-card .remove-street:disabled {
  opacity: .45;
  cursor: not-allowed;
  text-decoration: none;
}


/* Destructive Remove actions use one consistent danger color. */
.remove-street,
.remove-additional-plan,
.remove-file,
.revision-remove-plan {
  color: var(--danger) !important;
  font-weight: 700;
}

.remove-street:hover,
.remove-street:focus-visible,
.remove-additional-plan:hover,
.remove-additional-plan:focus-visible,
.remove-file:hover,
.remove-file:focus-visible,
.revision-remove-plan:hover,
.revision-remove-plan:focus-visible {
  color: var(--danger) !important;
}

/* =========================================================
   REVISION PLAN CANCEL / RESTORE STATE
   ========================================================= */

.revision-plan-list-item.is-cancelled .revision-plan-choice,
.revision-plan-list-item.is-cancelled .revision-plan-choice:hover {
  border-color: #c6c6c2;
  border-left-color: #c6c6c2;
  background: #e6e6e3;
  color: #747474;
  cursor: not-allowed;
  opacity: 1;
}

.revision-plan-list-item.is-cancelled .revision-plan-choice strong,
.revision-plan-list-item.is-cancelled .revision-plan-choice span,
.revision-plan-list-item.is-cancelled .revision-plan-choice small {
  color: #747474;
}

.revision-remove-plan.is-restore,
.revision-remove-plan.is-restore:hover,
.revision-remove-plan.is-restore:focus-visible {
  color: var(--orange) !important;
}


/* Revision submit controls live in the left plans panel. */
.revision-plan-panel .revision-submit-row-left {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  align-items: stretch;
  flex-direction: column;
  gap: 10px;
}

.revision-plan-panel .revision-submit-row-left .revision-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-md);
  text-align: center;
}

.revision-plan-panel .revision-submit-row-left .primary-button {
  width: 100%;
}

/* Locked Request Portal: hide add controls only while viewing a revision. */
.revision-mode .revision-request-locked #add-street,
.revision-mode .revision-request-locked #add-plan,
.revision-mode .revision-request-locked .add-additional-plan-street {
  display: none !important;
}

/* =========================================================
   MOBILE DATE WIDTH FIX
   Keep date controls aligned with Add-On Services cards.
   ========================================================= */
@media (max-width: 640px) {
  .field-grid.four-up {
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
  }

  .field-grid.four-up > label {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .field-grid.four-up input[type="date"] {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 44px;
    margin: 0;
    padding: 9px 8px;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
  }

  .field-grid.four-up input[type="date"]::-webkit-date-and-time-value {
    min-width: 0;
    text-align: center;
  }
}

/* =========================================================
   MOBILE TOP FIELD SIZE FIX
   Keep Production / Project / Name / Email visually identical.
   ========================================================= */
@media (max-width: 640px) {
  .public-mode .public-production-entry {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .public-mode .public-production-entry label,
  .field-grid.two-up > label {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .public-mode .public-production-entry input,
  .field-grid.two-up > label > input {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0;
    padding: 9px 12px !important;
    box-sizing: border-box;
    font-size: var(--fs-mobile-input);
    line-height: 1.2;
  }
}

/* =========================================================
   MOBILE ADDITIONAL PLANS WIDTH FIX
   Prevent compact repeater content from widening the form.
   ========================================================= */
@media (max-width: 640px) {
  .additional-plans-section,
  #additional-plans,
  .additional-plan-card,
  .additional-plan-streets,
  .additional-plan-street-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .additional-plans-section,
  .additional-plan-card {
    overflow-x: clip;
  }

  .additional-plan-header,
  .additional-plan-card .additional-plan-street-card .street-header,
  .repeater-actions,
  .additional-plan-location-actions {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }

  .additional-plan-number,
  .additional-plan-meta,
  .additional-plan-street-summary,
  .additional-plan-street-detail-preview {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .additional-plan-meta,
  .additional-plan-street-summary,
  .additional-plan-street-detail-preview {
    white-space: normal;
    text-overflow: clip;
  }

  .additional-plan-location-summary {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .additional-plan-location-summary-label,
  .additional-plan-location-summary-text,
  .additional-plan-location-actions {
    grid-column: 1;
    min-width: 0;
    max-width: 100%;
  }

  .additional-plan-location-summary-text {
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }

  .additional-plan-card .additional-plan-street-card .street-header legend {
    flex: 1 1 120px;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .additional-plan-card .additional-plan-street-card .repeater-toggle,
  .additional-plan-header > .repeater-toggle,
  .remove-additional-plan {
    flex: 0 0 auto;
  }

  .additional-plan-card label,
  .additional-plan-card input,
  .additional-plan-card textarea,
  .additional-plan-card gmp-place-autocomplete,
  .additional-plan-card .choice-grid,
  .additional-plan-card .progressive {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .additional-plan-card .choice-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .additional-plan-card .add-additional-plan-street,
  #add-plan {
    max-width: 100%;
    white-space: normal;
  }
}

/* =========================================================
   MOBILE ADDITIONAL PLAN SUMMARY CLEANUP
   Hide selected closure-type summary text on phones only.
   ========================================================= */
@media (max-width: 640px) {
  .additional-plan-street-closures {
    display: none !important;
  }
}

/* Required fields: match Location's red invalid state after validation fires. */
input:required:user-invalid,
textarea:required:user-invalid,
select:required:user-invalid,
input:required:user-invalid:focus,
textarea:required:user-invalid:focus,
select:required:user-invalid:focus {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 2px var(--danger-ring) !important;
}


/* =========================================================
   MOBILE FORM PADDING ALIGNMENT
   Remove the extra outer form inset so sections, dividers,
   and the submit row share one consistent 16px mobile edge.
   ========================================================= */
@media (max-width: 640px) {
  .request-form {
    padding: 0;
  }

  .form-section {
    padding: 24px 16px;
  }

  .form-section:not(:last-of-type)::after,
  .new-request-notice::after {
    right: 16px;
    left: 16px;
  }

  .submit-row {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 20px 16px;
  }
}