@charset "UTF-8";
/* ============================================================================
   Standard 595 - tariff position calculator
   Add-on stylesheet. Load it after css/css.css, never instead of it.

   Every value here resolves to a token declared in css/css.css. No new colour,
   no new font size, no new spacing step. Three kinds of rule live in this file:

     1  Design system parts the documentation page did not need yet:
        the form primitives (section 4), the progress bar (5.6),
        the stat block (5.15) and the .container--reverse modifier (2.2).
     2  One composed component, .wizard, built from those primitives.
        The design system has no question-and-answer component, so it is
        composed here rather than imported from elsewhere.
     3  Print rules for the finished result.

   Nothing in this file is language specific.

   Contents
     1  Layout modifier              2.2
     2  Form primitives              4.1 4.2 4.3
     3  Progress bar                 5.6
     4  Stat                         5.15
     5  Wizard (composed)
     6  Result panel (composed)
     7  Print
   ========================================================================== */

/* ============================================================================
   1  LAYOUT MODIFIER  - 2.2
   The reading aside sits on the left by default. The calculator needs the
   opposite: the questions are the content and the running result is the aside,
   so the aside moves to the right and is authored after the main column. That
   keeps document order and reading order identical, on every screen size.
   ========================================================================== */
@media (min-width:768px) {
  .container--reverse .container__aside { grid-column: 9 / span 4; }
  .container--reverse .container__main  { grid-column: 1 / span 8; }
}
@media (min-width:1024px) {
  .container--reverse .container__aside { grid-column: 10 / span 3; }
  .container--reverse .container__main  { grid-column: 1 / span 9; }
}
@media (min-width:1280px) {
  .container--reverse .container__aside { grid-column: 10 / span 3; }
  .container--reverse .container__main  { grid-column: 1 / span 9; }
}
/* The questions carry short lines and counts, not running prose, so the 78ch
   measure cap of .container__main would waste the column it was given. */
.container--reverse .container__main { max-width: none; }

/* ============================================================================
   2  FORM PRIMITIVES  - 4.1 4.2 4.3
   Scoped to .wizard on purpose. The page header already carries a .select and a
   .select__icon for the language switcher, styled by css.css. A global .select
   rule here would land on it as well and push the language code out of view.
   The calculator has no select element, so the select rules of 4.5 are not
   needed and are deliberately left out.
   ========================================================================== */
.wizard .form__group__input { width: 100%; }
.wizard .form__group__input > * + * { margin-top: var(--space-2); }

.wizard .legend { padding-top: var(--space-2); color: var(--color-text-500); font-size: .75rem; }
@media (min-width:1280px) { .wizard .legend { font-size: .875rem; } }
@media (min-width:1920px) { .wizard .legend { font-size: 1rem; } }

.wizard .input,
.wizard input[type="text"],
.wizard input[type="search"],
.wizard input[type="date"] {
  width: 100%; padding: var(--space-3) var(--space-4); line-height: 1;
  min-height: var(--input-min-height);
  border: 1px solid var(--color-text-500); border-radius: var(--radius-input);
  background: #fff; color: var(--color-text-800);
  box-shadow: var(--shadow-none);
  font-family: inherit;
}
@media (min-width:1544px) {
  .wizard .input,
  .wizard input[type="text"],
  .wizard input[type="search"],
  .wizard input[type="date"] { min-height: var(--input-min-height-2xl); }
}
.wizard .input::placeholder,
.wizard input::placeholder { color: var(--color-secondary-400); }

.wizard .input--sm   { font-size: .875rem; line-height: 1.5rem; }
.wizard .input--base { font-size: 1rem;    line-height: 1.5rem; }
@media (min-width:1280px) { .wizard .input--base { font-size: 1.125rem; } }
.wizard .input--outline { color: var(--color-text-800); border-color: var(--color-text-500); }

/* ============================================================================
   3  PROGRESS BAR  - 5.6
   ========================================================================== */
.progress__header { display: flex; justify-content: space-between; align-items: baseline;
                    margin-bottom: var(--space-2); }
.progress__label  { color: var(--color-text-800); }
.progress__value  { color: var(--color-text-500); font-size: .875rem; }
.progress__track  { width: 100%; height: .5rem; overflow: hidden; background: var(--color-secondary-100); }
.progress__bar    { height: 100%; background: var(--color-secondary-500);
                    transition: width var(--duration-slow) var(--ease); }
.progress--success .progress__bar { background: #065f46; }

/* ============================================================================
   4  STAT  - 5.15
   ========================================================================== */
.stat        { display: flex; flex-direction: column; gap: var(--space-1); }
.stat__value { font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight: 400;
               line-height: 1.25; font-size: 2rem; color: var(--color-text-800);
               font-variant-numeric: tabular-nums; }
@media (min-width:1024px) { .stat__value { font-size: 2.5rem; } }
.stat__label { color: var(--color-text-500); font-size: .875rem; }

/* ============================================================================
   5  WIZARD  (composed from the primitives above)
   ========================================================================== */
.wizard { display: block; }

.wizard__toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4);
                   padding-bottom: var(--space-6); border-bottom: var(--border-hairline); }
.wizard__toolbar .form__group__input { flex: 0 1 18rem; }
.wizard__toolbar .legend { max-width: 46ch; }

.wizard__step { padding-block: var(--space-8) var(--space-2); border-top: var(--border-hairline-soft); }
.wizard__step:first-child { border-top: 0; }
.wizard__eyebrow { display: block;
                   font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight: 400;
                   font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em;
                   color: var(--color-text-500); }
.wizard__step--answered .wizard__eyebrow { color: var(--color-primary-700); }
.wizard__question { font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight: 400;
                    font-size: 1.125rem; line-height: 1.35; letter-spacing: -.01em;
                    color: var(--color-text-900); margin: var(--space-2) 0 var(--space-2); }
@media (min-width:1280px) { .wizard__question { font-size: 1.25rem; } }
.wizard__hint { color: var(--color-text-500); font-size: .875rem; max-width: 62ch;
                margin: 0 0 var(--space-4); }
.wizard__auto { color: var(--color-text-500); font-size: .875rem; margin: var(--space-1) 0 0; }

/* Answer options. A button, because choosing one rewrites the questions below
   it. Selected state repeats the segmented control fill of 5.2. */
.option-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.option { display: inline-flex; align-items: center; gap: var(--space-3);
          min-height: var(--input-min-height); padding: var(--space-2) var(--space-4);
          text-align: left; line-height: 1.3; cursor: pointer;
          color: var(--color-text-800); background: #fff;
          border: 1px solid var(--color-secondary-200); border-radius: var(--radius-btn);
          font-family: inherit; font-size: .9375rem;
          transition: border-color var(--duration-fast) var(--ease),
                      background-color var(--duration-fast) var(--ease),
                      color var(--duration-fast) var(--ease); }
@media (min-width:1280px) { .option { font-size: 1rem; } }
.option:hover { border-color: var(--color-secondary-400); color: var(--color-primary-700); }
.option--selected,
.option--selected:hover { background: var(--color-secondary-500); border-color: var(--color-secondary-500);
                          color: #fff;
                          font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight: 400; }
.option__count { flex-shrink: 0; color: var(--color-text-500); font-size: .8125rem;
                 font-variant-numeric: tabular-nums; }
.option--selected .option__count { color: var(--color-secondary-100); }

/* Searchable list of offers. Same option, stacked and scrollable. */
.option-list--stack { display: block; max-height: 22rem; overflow-y: auto;
                      border: 1px solid var(--color-secondary-200); background: #fff; }
.option-list--stack .option { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1);
                              width: 100%; border: 0; border-bottom: var(--border-hairline-soft);
                              border-radius: 0; padding: var(--space-3) var(--space-4); }
.option-list--stack .option:last-child { border-bottom: 0; }
.option-list--stack .option:hover { background: var(--color-secondary-50); }
.option-list--stack .option--selected,
.option-list--stack .option--selected:hover { background: var(--color-secondary-500); color: #fff; }
.option__meta { color: var(--color-text-500); font-size: .8125rem; line-height: 1.4; }
.option--selected .option__meta { color: var(--color-secondary-100); }
.option-list__empty { padding: var(--space-4); color: var(--color-text-500); font-size: .9375rem; }

.wizard__search { margin-bottom: var(--space-3); max-width: 32rem; }

/* ============================================================================
   6  RESULT PANEL  (composed)
   ========================================================================== */
.result { border: var(--border-hairline); background: var(--color-secondary-50); padding: var(--space-5); }
@media (min-width:1024px) { .result { padding: var(--space-6); } }
.result > * + * { margin-top: var(--space-4); }
.result__eyebrow { display: block;
                   font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight: 400;
                   font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em;
                   color: var(--color-text-500); }
.result__pending { color: var(--color-text-600); font-size: .9375rem; margin: 0; }
.result__plate { padding-top: var(--space-5); border-top: var(--border-hairline); }
.result__plate > * + * { margin-top: var(--space-3); }
.result__code { font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight: 400;
                font-size: 3rem; line-height: 1; letter-spacing: -.02em;
                color: var(--color-secondary-600); font-variant-numeric: tabular-nums;
                margin: var(--space-2) 0 0; }
.result__label { font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight: 400;
                 color: var(--color-text-900); line-height: 1.35; margin: 0; }
.result__trail { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.result__trail .badge { line-height: 1.4; }
.result__note { border-left: 2px solid var(--color-secondary-200); padding-left: var(--space-3);
                color: var(--color-text-600); font-size: .8125rem; line-height: 1.5;
                max-height: 12rem; overflow-y: auto; }
.result__note p { margin: 0; }
.result__flags { display: flex; flex-direction: column; gap: var(--space-2); }
.result__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.result__actions .btn { flex: 0 0 auto; }
.result .notification { padding: var(--space-3) var(--space-4); font-size: .875rem; }

/* ============================================================================
   7  PRINT
   The printed page is the answer, not the path to it.
   ========================================================================== */
@media print {
  .wizard__toolbar, .option-list, .wizard__search, .result__actions, .progress { display: none !important; }
  .result { border: 1px solid #000; background: #fff; }
  .result__note { max-height: none; overflow: visible; }
}