/*
 * Internal-app adapter for the canonical Hustle design core 1.1.0.
 * Reuses canonical tokens, local fonts, and the shared Estimator-style form
 * variant. Context-specific estimator panels keep their existing geometry.
 * The public page-level core.css is not loaded here: its marketing layout and
 * global resets are inappropriate for the gated internal application.
 */
@import url("./v1/tokens.css");
@import url("./v1/fonts.css");
@import url("./v1/forms.css");

@font-face {
  font-family: Superstar;
  src: url("./v1/assets/fonts/superstar-m54-symbols.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Superstar M54 Symbols";
  src: url("./v1/assets/fonts/superstar-m54-symbols.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --hustle-ink: var(--brown);
  --hustle-gold: var(--yellow);
  --hustle-cloud: var(--cloud);
  --hustle-muted: #5f5851;
  --hustle-paper: #fff;
  --hustle-field-border: #d9dfd8;
  --hustle-outline: 2px solid var(--brown);
  --hustle-panel-radius: 23px;
  --hustle-panel-shadow: 4px 4px 0 var(--brown);
  --hustle-control-radius: 14px;
  --hustle-heading-tracking: .025em;
  --hustle-heading-leading: 1.14;
  --hustle-body-font: "DM Sans", Arial, sans-serif;
  --hustle-display-font: Superstar, Georgia, serif;

  /* Existing page variables now resolve through the shared source tokens. */
  --black: var(--brown);
  --grey: var(--cloud);
  --line: var(--brown);
  --dim: var(--hustle-muted);
  --white: var(--brown);
  --field: var(--hustle-paper);
  --fieldline: var(--hustle-field-border);
  --ink: var(--hustle-ink);
  --muted: var(--hustle-muted);
  --paper: var(--hustle-paper);
  --canvas: var(--yellow);
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--hustle-body-font);
}

h1,
h2,
h3,
.brand .l2,
.brand b,
.gate-logo .l2,
.tool-card .c-title,
.menu-label,
.section-head,
.portal-heading h1,
.panel-heading h2,
.draft-transfer h2,
.form-flow-title,
.form-step-card-title,
.result-title,
.wizard-title,
.wizard-access-card h2,
.wizard-pane .section-title h2,
.wizard-pane .card h2,
.card h2,
.card h3,
.preview h3,
.planner-output h3,
.internal-price-head h2,
.price-result h3,
.price-inputs h3,
.quick-card h3,
.quote-choice-head h3,
.print-options-sheet h1,
.print-options-sheet h2 {
  font-family: var(--hustle-display-font);
  font-weight: 400;
  letter-spacing: var(--hustle-heading-tracking);
  line-height: var(--hustle-heading-leading);
}

.brandmark,
.gate-brandmark,
.brand .mark {
  background: transparent;
  border-radius: 0;
  object-fit: contain;
}

/* Portal navigation cards use a shared outlined panel, not the public joined
   service-card layout. The Estimator's own form/card geometry stays in place. */
.hustle-tool-panel {
  box-sizing: border-box;
  min-width: 0;
  border: var(--hustle-outline);
  border-radius: 22px;
  background: var(--hustle-paper);
  color: var(--hustle-ink);
  box-shadow: var(--hustle-panel-shadow);
}

.hustle-ui-panel {
  box-sizing: border-box;
  min-width: 0;
  border: var(--hustle-outline);
  border-radius: var(--hustle-panel-radius);
  background: var(--hustle-paper);
  color: var(--hustle-ink);
  box-shadow: var(--hustle-panel-shadow);
}

.hustle-ui-panel--rail { border-radius: 20px; }

/* Semantic marker only: the Estimator retains its established border, radius,
   padding, shadows and responsive layout. */
.hustle-estimator-panel { border-color: var(--brown); }

.hustle-choice {
  box-sizing: border-box;
  min-width: 0;
  min-height: 52px;
  border: var(--hustle-outline);
  border-radius: 15px;
  background: var(--hustle-paper);
  color: var(--hustle-ink);
  font-family: var(--hustle-body-font);
  cursor: pointer;
  touch-action: manipulation;
}

.hustle-choice[aria-selected="true"],
.hustle-choice[aria-pressed="true"] {
  background: var(--hustle-gold);
  box-shadow: 2px 2px 0 var(--hustle-ink);
}

.hustle-action {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  min-height: 48px;
  padding: 12px 16px;
  border: var(--hustle-outline);
  border-radius: var(--hustle-control-radius);
  font: 800 14px/1.25 var(--hustle-body-font);
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}

.hustle-action--pill { border-radius: 999px; text-transform: uppercase; letter-spacing: .06em; }
.hustle-action--dark { background: var(--hustle-ink); color: var(--hustle-gold); }
.hustle-action--gold { background: var(--hustle-gold); color: var(--hustle-ink); }
.hustle-action--light { background: var(--hustle-paper); color: var(--hustle-ink); }
.hustle-action:active { transform: translateY(1px); }
:focus-visible { outline: 3px solid var(--hustle-ink); outline-offset: 3px; }

.portal-main .tool-card.hustle-tool-panel { overflow: visible; }
.screen .form-flow.hustle-ui-panel { padding: 14px 16px; }
.screen .result-wrap.hustle-ui-panel { border-radius: 24px; }

.service-tab.hustle-choice,
.quick-choice.hustle-choice,
.choice-button.hustle-choice,
.quick-service-buttons .hustle-choice { font-weight: 800; }

.submit-bar .btn-primary.hustle-action,
.result-actions .btn-primary.hustle-action,
.wizard-actions .btn.hustle-action,
.quick-select.hustle-action {
  box-shadow: 2px 2px 0 var(--hustle-ink);
}

.submit-bar .btn-primary.hustle-action--gold,
.result-actions .btn-primary.hustle-action--gold,
.quick-select.hustle-action--gold { background: var(--hustle-gold); color: var(--hustle-ink); }
.wizard-actions .btn.hustle-action--dark { background: var(--hustle-ink); color: var(--hustle-paper); }
.wizard-actions .btn.hustle-action--light { background: var(--hustle-paper); color: var(--hustle-ink); }

@media (max-width: 640px) {
  .hustle-tool-panel { border-radius: 19px; }
  .hustle-ui-panel { border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .hustle-action { transition: none; }
}