/* ==========================================================================
   GripCalc – UX kernel styles
   Provenance chips, toasts, destructive-action modal, stale results,
   responsive app bar, and the results surface.
   ========================================================================== */

/* These tokens follow data-theme, not the system preference. theme.css is
   dark by default and turns light only on [data-theme="light"] or on Auto
   under a light system; keying this file to prefers-color-scheme put dark
   chips on light paper whenever the two disagreed. Dark is the default here
   for the same reason it is there.

   The tone values are theme.css's provenance palette, so a chip reads the
   same whichever stylesheet ends up painting it. Every tone clears 4.5:1 on
   its own tinted background in both themes. */
:root {
  --ux-good: #3fd07f;
  --ux-good-bg: rgba(63, 208, 127, 0.12);
  --ux-warn: #f0b13d;
  --ux-warn-bg: rgba(240, 177, 61, 0.12);
  --ux-info: #a4a9a8;
  --ux-info-bg: rgba(164, 169, 168, 0.12);
  --ux-danger: #ffb4ab;
  --ux-hairline: rgba(255, 255, 255, 0.14);
  --ux-sunken: rgba(255, 255, 255, 0.05);
}

:root[data-theme="light"] {
  --ux-good: #18623b;
  --ux-good-bg: rgba(24, 98, 59, 0.12);
  --ux-warn: #734e09;
  --ux-warn-bg: rgba(115, 78, 9, 0.12);
  --ux-info: #43484a;
  --ux-info-bg: rgba(67, 72, 74, 0.12);
  --ux-danger: #ba1a1a;
  --ux-hairline: rgba(0, 0, 0, 0.10);
  --ux-sunken: rgba(0, 0, 0, 0.03);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --ux-good: #18623b;
    --ux-good-bg: rgba(24, 98, 59, 0.12);
    --ux-warn: #734e09;
    --ux-warn-bg: rgba(115, 78, 9, 0.12);
    --ux-info: #43484a;
    --ux-info-bg: rgba(67, 72, 74, 0.12);
    --ux-danger: #ba1a1a;
    --ux-hairline: rgba(0, 0, 0, 0.10);
    --ux-sunken: rgba(0, 0, 0, 0.03);
  }
}

/* --------------------------------------------------------------------------
   Accessibility primitives
   -------------------------------------------------------------------------- */

.ux-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ux-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 4000;
  background: var(--md-sys-color-primary);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
  font: 600 14px 'Roboto', sans-serif;
  text-decoration: none;
}

.ux-skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Provenance chips – attached to every authority-bearing value
   -------------------------------------------------------------------------- */

.ux-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 600 11px/1.4 'Roboto', system-ui, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  background: var(--ux-info-bg);
  color: var(--ux-info);
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.ux-chip:hover { box-shadow: inset 0 0 0 1px currentColor; }

/* The chip's focus ring lives in theme.css, which loads after this file and
   overrides every declaration a rule here could set. */

/* The dot is the tone at full strength: it is the only part of the chip that
   is allowed to be loud, and it is what the eye finds first in a list. */
.ux-chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.ux-chip--good { background: var(--ux-good-bg); color: var(--ux-good); }
.ux-chip--warn { background: var(--ux-warn-bg); color: var(--ux-warn); }
.ux-chip--info { background: var(--ux-info-bg); color: var(--ux-info); }

/* The value the driver typed: its marker carries the accent. */
.ux-chip[data-truth="entered"] .ux-chip__dot { background: var(--accent); }

/* Small round "?" that sits beside a rendered metric. */
.ux-why {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  border: 1px solid var(--ux-hairline);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font: 600 12px/1 'Roboto', sans-serif;
  cursor: pointer;
  padding: 0;
  opacity: 0.75;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.ux-why:hover { opacity: 1; border-color: currentColor; }
.ux-why:focus-visible {
  outline: none;
  opacity: 1;
  box-shadow: 0 0 0 2px var(--md-sys-color-primary);
}

/* --------------------------------------------------------------------------
   Results surface
   -------------------------------------------------------------------------- */

.ux-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.ux-summary {
  font-size: 13px;
  color: var(--md-sys-color-on-surface-variant);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ux-facts {
  display: grid;
  gap: 1px;
  background: var(--ux-hairline);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.ux-fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--md-sys-color-surface);
  flex-wrap: wrap;
}

.ux-fact__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
}

.ux-fact__value {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--md-sys-color-on-surface);
}

.ux-fact__value--muted {
  font-size: 13px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
}

/* Stale state: the answer is dimmed and struck through with a banner, never
   silently refreshed. */
.result-card.is-stale .pressure-grid,
.result-card.is-stale .ux-facts {
  opacity: 0.38;
  filter: grayscale(0.6);
  transition: opacity 0.2s ease;
}

.ux-stale-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: var(--ux-warn-bg);
  color: var(--ux-warn);
  font-size: 13px;
  font-weight: 500;
}

.ux-stale-banner[hidden] { display: none; }

.ux-inline-btn {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 3px 12px;
  font: 600 12px 'Roboto', sans-serif;
  cursor: pointer;
}

/* Pressure tiles gain a corner-position layout and a units caption that is
   always rendered from the same converter as the value. */
.pressure-item {
  position: relative;
}

.pressure-item__delta {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.75;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Required-field state for the star rating (was a blocking alert). */
.star-rating--error {
  outline: 2px solid var(--ux-danger);
  outline-offset: 6px;
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   Toasts
   -------------------------------------------------------------------------- */

.ux-toast-host {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(560px, calc(100vw - 24px));
  pointer-events: none;
}

.ux-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  border-radius: 12px;
  background: #303338;
  color: #f2f2f4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  font-size: 14px;
  animation: ux-toast-in 0.18s ease-out;
}

.ux-toast--out { opacity: 0; transform: translateY(6px); transition: all 0.2s ease; }
.ux-toast--warn { background: #5a3a00; color: #ffe0a8; }
.ux-toast--error { background: #6b1414; color: #ffdad6; }
.ux-toast--success { background: #10401f; color: #b8f0c6; }
.ux-toast__text { flex: 1; }

.ux-toast__action {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  border-radius: 999px;
  padding: 5px 14px;
  font: 600 13px 'Roboto', sans-serif;
  cursor: pointer;
  flex: none;
}

.ux-toast__close {
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  font-size: 13px;
  padding: 4px;
  flex: none;
}

.ux-toast__close:hover { opacity: 1; }

@keyframes ux-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Destructive-action modal
   -------------------------------------------------------------------------- */

.ux-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 3500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ux-modal {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border-radius: 16px;
  padding: 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

.ux-modal__title { margin: 0 0 8px; font-size: 20px; font-weight: 600; }
.ux-modal__body { margin: 0 0 20px; font-size: 14px; line-height: 1.5;
  color: var(--md-sys-color-on-surface-variant); }
.ux-modal__actions { display: flex; justify-content: flex-end; gap: 8px; }

.ux-btn {
  border-radius: 999px;
  padding: 10px 20px;
  font: 600 14px 'Roboto', sans-serif;
  cursor: pointer;
  border: none;
}

.ux-btn--text { background: transparent; color: var(--md-sys-color-primary); }
.ux-btn--danger { background: var(--ux-danger); color: #fff; }
.ux-btn:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   App bar – was overflowing the viewport by 140px on a 390px phone, which
   put History, Feedback, Help and Settings off-screen with no way to reach
   them. Now it wraps, and units get their own row on small screens.
   -------------------------------------------------------------------------- */

.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.top-bar-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.top-bar-actions { display: flex; align-items: center; gap: 2px; flex: none; }

.unit-toggles { display: flex; align-items: center; gap: 10px; }

.unit-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--md-sys-color-on-surface-variant);
}

.unit-toggle__active { font-weight: 700; color: var(--md-sys-color-on-surface); }

@media (max-width: 700px) {
  .top-bar-inner { flex-wrap: wrap; row-gap: 4px; }
  .app-title { font-size: 20px !important; white-space: nowrap; }
  .top-bar-actions { order: 2; margin-left: auto; }
  .unit-toggles {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    gap: 16px;
    padding-top: 4px;
    border-top: 1px solid var(--ux-hairline);
    margin-top: 4px;
  }
  .top-bar-actions md-icon-button {
    --md-icon-button-icon-size: 20px;
    width: 38px;
    height: 38px;
  }
}

/* Nothing in this app should ever scroll sideways. */
html, body { max-width: 100%; overflow-x: hidden; }

/* --------------------------------------------------------------------------
   Keyboard affordances
   -------------------------------------------------------------------------- */

.ux-kbd-hint {
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
  margin-top: 8px;
}

kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--ux-hairline);
  background: var(--ux-sunken);
  font: 500 11px/1.6 ui-monospace, Menlo, monospace;
}

/* Visible focus for everything, including inside drawers. */
:focus-visible { outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Pyrometer surface
   -------------------------------------------------------------------------- */

.pyro-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 4px 0 16px;
}

.ux-ghost-btn {
  border: 1px solid var(--ux-hairline);
  background: transparent;
  color: var(--md-sys-color-primary);
  border-radius: 999px;
  padding: 7px 16px;
  font: 600 13px 'Roboto', sans-serif;
  cursor: pointer;
}

.ux-ghost-btn:hover { background: var(--ux-sunken); }

.ux-window-note {
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Persistent provenance under an input, for values the app supplied itself. */
.ux-source-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0 0 4px;
  min-height: 0;
}

.ux-source-row:empty { display: none; }

/* Autocomplete with no match: the moment the user most needs telling. */
.autocomplete-empty {
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ux-warn);
  background: var(--ux-warn-bg);
  border-radius: 8px;
}