/* ============================================================
   components/number.css — Majestic V2 number & native date/time
   ------------------------------------------------------------
   Track A of the advanced control modules. Both sit inside the
   strict field shell (components/fields.css); this file only adds
   the numeric stepper affordance and the native date/time widget
   polish. The native <input> stays the source of truth in every
   case — the runtime never replaces it.

     <div class="majestic-field majestic-field--number">
         <div class="majestic-field__control">
             <input class="majestic-control" type="number" id="x"
                    min="0" max="100" step="1" placeholder=" ">
             <label class="majestic-field__label" for="x">Label</label>
             <!-- .majestic-field__stepper injected by the runtime -->
         </div>
     </div>

   Loads after fields.css in the shared component manifest.
   ============================================================ */

/* Kill the browser's native number spinner — the runtime supplies its own. */
.majestic-field--number .majestic-control[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
    font-variant-numeric: tabular-nums;
}
.majestic-field--number .majestic-control[type="number"]::-webkit-outer-spin-button,
.majestic-field--number .majestic-control[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- Stepper (right-stacked − / + pair) ----------------------------------- */

.majestic-field__stepper {
    order: 3;                       /* leading | prefix | control | suffix | action | stepper */
    display: grid;
    grid-template-rows: 1fr 1fr;
    flex: 0 0 auto;
    align-self: stretch;
    width: calc(var(--control-height) - 8px);
    margin: 3px 3px 3px 0;
    border-radius: calc(var(--radius-control) - 2px);
    overflow: hidden;
}

.majestic-field__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--text-muted-color);
    background: var(--surface-2);
    border: 1px solid var(--input-border-color);
    cursor: pointer;
    transition:
        color var(--motion-fast) var(--ease-out),
        background-color var(--motion-fast) var(--ease-out),
        border-color var(--motion-fast) var(--ease-out);
}
.majestic-field__step--up { border-radius: calc(var(--radius-control) - 2px) calc(var(--radius-control) - 2px) 0 0; }
.majestic-field__step--down { margin-top: -1px; border-radius: 0 0 calc(var(--radius-control) - 2px) calc(var(--radius-control) - 2px); }
.majestic-field__step .majestic-icon { width: 0.85rem; height: 0.85rem; }

.majestic-field__step:hover {
    color: var(--text-color);
    background: var(--surface-hover);
    border-color: var(--border-color-strong);
}
.majestic-field__step:active { background: var(--input-active-background); }
.majestic-field__step:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    z-index: 1;
}
.majestic-field__step:disabled {
    color: var(--disabled-text-color);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Give the value room so the stepper never sits under the digits. */
.majestic-field__control:has(.majestic-field__stepper) .majestic-control { padding-right: 6px; }

/* --- Native date / time widgets ------------------------------------------- */
/* Native pickers are kept for platform quality; the label always floats
   because these controls render their own format text and never match
   :placeholder-shown. The runtime adds --floated so the notch is stable. */

.majestic-field--datetime .majestic-control {
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}
/* An empty native date/time control renders its format hint muted. */
.majestic-field--datetime .majestic-control:not(:focus):invalid,
.majestic-field--datetime .majestic-control[data-empty="true"] {
    color: var(--text-subtle-color);
}

/* The calendar / clock indicator becomes a themed, tappable adornment. */
.majestic-field--datetime .majestic-control::-webkit-calendar-picker-indicator {
    order: 5;
    width: 1.05rem;
    height: 1.05rem;
    margin-inline: 4px 8px;
    padding: 2px;
    border-radius: calc(var(--radius-control) - 2px);
    cursor: pointer;
    opacity: 0.7;
    filter: var(--calendar-indicator-filter, none);
    transition: opacity var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}
.majestic-field--datetime .majestic-control::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    background: var(--surface-hover);
}
/* Dark surfaces need the default black glyph inverted to read on the shell. */
[data-theme="dark"] .majestic-field--datetime .majestic-control::-webkit-calendar-picker-indicator,
[data-theme="terminal"] .majestic-field--datetime .majestic-control::-webkit-calendar-picker-indicator {
    --calendar-indicator-filter: invert(1) brightness(0.85);
}
.majestic-field--datetime .majestic-control::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.majestic-field--datetime .majestic-control::-webkit-datetime-edit { line-height: 1.35; }

/* --- Reduced motion & forced colors --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .majestic-field__step { transition-duration: 0.01ms; }
}

@media (forced-colors: active) {
    .majestic-field__stepper { border: 1px solid ButtonText; }
    .majestic-field__step { border-color: ButtonText; }
    .majestic-field__step:focus-visible { outline-color: Highlight; }
}