/* ═══════════════════════════════════════════════════════════════════════════
   Pondros Foundation — component layer
   ───────────────────────────────────────────────────────────────────────────
   Adopts the Figma-confirmed component geometry from the Pondros Foundation
   design system onto the class names this app already ships. Nothing here
   invents a look: every value traces to a confirmed Figma component, and the
   handful of departures are called out inline with the reason.

   WHY A SEPARATE FILE, LOADED LAST
   base.html carries ~1200 lines of inline component CSS and is shared by BOTH
   products — the bare :root scope is the Amazon-ops product, html.pondros is
   Pondros. Editing those rules in place would either touch Amazon-ops or
   require re-scoping each rule by hand. Overriding from a later file, with
   every selector scoped to html.pondros, keeps Amazon-ops byte-identical and
   makes the whole design pass revertible by removing one <link>.

   WHAT THIS DELIBERATELY DOES NOT DO
   No markup changes. No copy changes. No re-ordering, no re-parenting, no
   element added or removed. Every selector below targets a class that already
   exists in the templates, so content and position are unchanged by
   construction — this file can only restyle what is already on the page.

   THE SHAPE RULE (from the Foundation's CLAUDE.md)
   Buttons, badges, toggles, avatars and other interactive pill controls always
   use --radius-pill. Containers — cards, dropdowns, inputs, alerts — use
   --radius-4 … --radius-16 and never pill. That single rule is the most
   visible change in this file: the app's 10px buttons and 4px pills become
   pills, while .card keeps a container radius.

   STATUS COLOURS
   The Foundation's --color-status-* are Figma-confirmed FILL colours for badge
   and alert backgrounds, not text colours. This file uses them as fills only.
   The app's --crit/--warn/--ok stay as the text colours they already are;
   measured on white, --warn #B45309 is 5.02:1 where --yellow-500 is 1.92:1.
   See the note in tokens.css.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Type ────────────────────────────────────────────────────────────────────
   Geist is loaded in tokens.css and --font-display already points at it, so
   anything reading that token picks it up with no rule here. This block only
   covers the elements that hard-code a family instead of reading the token.

   Tracking: the Foundation sets headings tighter than body. base.html already
   applies -0.02em to h1/h2/h3; kept, not re-declared. */
html.pondros body,
html.pondros button,
html.pondros input,
html.pondros select,
html.pondros textarea {
  font-family: var(--font-display);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ── Button ──────────────────────────────────────────────────────────────────
   Confirmed against the real Figma Button component (node 470:3583) via the
   Foundation package: 3 types x 6 sizes, every state.

   Mapping to this app's vocabulary:
     .btn            (no variant)  -> Foundation "secondary" at size md
     .btn-primary / .btn.primary   -> Foundation "primary"   at size md
     .btn-sm  / .btn.btn-sm        -> Foundation size sm
   The app's bare .btn already had a white fill, a 1px border and secondary
   text, which is exactly Foundation "secondary" — so the type mapping is a
   rename, not a re-design.

   md is height-neutral, which is why it is the default here rather than sm:
     app     padding 8px/14px + 12.5px text at line-height 1.3  = ~34px tall
     md      padding 6px/10px + 14px text at line-height 20px   =  34px tall
   Horizontal padding tightens by 4px a side while the label grows 12.5 -> 14px,
   so button widths land within a few px of where they were. Vertical rhythm,
   which is what would actually reflow a page, does not move.

   Two confirmed facts that look like bugs and are not:
   - Label weight is Regular (400) at every size, NOT Medium. The app had 600.
   - The focus state is a background FILL (brand-primary-subtle), not an
     outline ring. Implemented faithfully, with no ring added on top. */
html.pondros .btn {
  --_bg: var(--color-background-white);
  --_fg: var(--color-text-secondary);
  --_border: var(--color-border-default);
  --_hover-bg: var(--color-background-primary);
  --_hover-fg: var(--_fg);
  --_hover-border: var(--color-border-default);
  --_disabled-bg: var(--color-background-white);
  --_disabled-fg: var(--color-text-disabled);
  --_disabled-border: var(--color-border-default);

  appearance: none;
  border: 1px solid var(--_border);
  background: var(--_bg);
  color: var(--_fg);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 400;
  box-shadow: none;

  padding: var(--spacing-6) var(--spacing-10);
  gap: var(--spacing-6);
  font-size: 14px;
  line-height: 20px;
  --icon-size: 16px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease,
              color 160ms ease, transform 100ms ease;
}

/* Scoped to a real pointer: a plain :hover sticks on touch, because a tap
   simulates it and there is no pointer-leave to clear it. Same guard the
   Foundation applies to Dropdown and the Home meeting cards. */
@media (hover: hover) and (pointer: fine) {
  html.pondros .btn:hover:not(:disabled):not([disabled]) {
    background: var(--_hover-bg);
    color: var(--_hover-fg);
    border-color: var(--_hover-border);
  }
}

html.pondros .btn:active:not(:disabled):not([disabled]) {
  transform: translateY(1px);
}

/* Background fill, not a ring — confirmed on all 3 types. */
html.pondros .btn:focus-visible {
  background: var(--color-brand-primary-subtle);
  color: var(--color-text-secondary);
  outline: none;
}

html.pondros .btn:disabled,
html.pondros .btn[disabled] {
  cursor: not-allowed;
  background: var(--_disabled-bg);
  color: var(--_disabled-fg);
  border-color: var(--_disabled-border);
}

/* Primary carries the subtle shadow unconditionally, across every state —
   unlike tertiary, which only gets it on :focus-visible, and secondary, which
   never has it at any state. */
html.pondros .btn-primary,
html.pondros .btn.primary {
  --_bg: var(--color-brand-primary);
  --_fg: var(--color-text-inverse);
  --_border: transparent;
  --_hover-bg: var(--color-brand-primary-hover);
  --_hover-fg: var(--color-text-inverse);
  --_hover-border: transparent;
  --_disabled-bg: var(--color-brand-primary-subtle);
  --_disabled-fg: var(--color-text-disabled);
  --_disabled-border: transparent;
  box-shadow: 0 0 0.5px rgba(0, 0, 0, .27), 0 1px 1px rgba(0, 0, 0, .05);
}

/* Ghost/bare buttons in this app read as Foundation "tertiary": no fill, no
   border, hover washes to background/primary. */
html.pondros .btn-ghost,
html.pondros .btn.ghost,
html.pondros .btn-plain {
  --_bg: transparent;
  --_fg: var(--color-text-secondary);
  --_border: transparent;
  --_hover-bg: var(--color-background-primary);
  --_hover-border: transparent;
  --_disabled-bg: transparent;
  --_disabled-border: transparent;
  box-shadow: none;
}
html.pondros .btn-ghost:focus-visible,
html.pondros .btn.ghost:focus-visible,
html.pondros .btn-plain:focus-visible {
  box-shadow: 0 0 0.5px rgba(0, 0, 0, .27), 0 1px 1px rgba(0, 0, 0, .05);
}

/* Destructive is the Foundation's own addition (not in Figma): primary's
   shape with status colours. White stays literal rather than text-inverse,
   because status/error does not flip between light and dark the way
   brand/primary does. */
html.pondros .btn-danger,
html.pondros .btn.danger,
html.pondros .btn-destructive {
  --_bg: var(--color-status-error);
  --_fg: #ffffff;
  --_border: transparent;
  --_hover-bg: var(--color-status-error-hover);
  --_hover-fg: #ffffff;
  --_hover-border: transparent;
  --_disabled-bg: var(--color-status-error-bg);
  --_disabled-fg: var(--color-text-disabled);
  --_disabled-border: transparent;
  box-shadow: 0 0 0.5px rgba(0, 0, 0, .27), 0 1px 1px rgba(0, 0, 0, .05);
}

/* Size sm. Confirmed metrics, and near-identical to what .btn-sm already had
   (4px/8px padding, ~11.5px text), so this is the lowest-movement size in the
   set — it mostly just adopts the pill radius and 400 weight. */
html.pondros .btn-sm,
html.pondros .btn.btn-sm {
  padding: var(--spacing-4) var(--spacing-8);
  gap: var(--spacing-4);
  font-size: 12px;
  line-height: 18px;
  --icon-size: 12px;
}

/* Icon size does NOT track font-size 1:1 above sm — md/lg/xl are 14px text
   with a 16px icon. Driven by --icon-size, not 1em. */
html.pondros .btn svg,
html.pondros .btn [data-lucide] {
  width: var(--icon-size, 16px);
  height: var(--icon-size, 16px);
  flex: none;
}


/* ── Badge / status pill ─────────────────────────────────────────────────────
   Confirmed against the real Figma Badge component (node 470:11785).

   The app's .status-pill/.pill sat at radius 4px, 11.5px, weight 500. The
   Foundation's badge is a pill at 12px/18px, weight 400. Per the shape rule a
   badge is a pill control, so 4px -> --radius-pill is the intended change and
   the most visible single edit in this file.

   The colour classes (.s-crit/.pill-crit, .s-warn, .s-ok …) are left exactly
   as base.html defines them — they carry the AA-tuned text colours, and
   re-pointing them at --color-status-* would drop --warn from 5.02:1 to
   1.92:1 on white. Geometry here, colour there. */
html.pondros .status-pill,
html.pondros .pill {
  border-radius: var(--radius-pill);
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  gap: var(--spacing-4);
  padding: var(--spacing-2) var(--spacing-8);
}

/* The dot is a 4px circle in a 12px box — confirmed by downloading the actual
   SVG asset, not inferred from its bounding box. The app drew it at 6px. */
html.pondros .status-pill .dot,
html.pondros .pill .dot {
  width: 4px;
  height: 4px;
}

html.pondros .chip {
  border-radius: var(--radius-pill);
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  gap: var(--spacing-4);
  /* 2px rather than the 4px a chip would take from the badge spec: .chip
     carries a 1px border where .status-pill does not, so 4px here lands 4px
     taller than the chip already was and nudges every row it sits in. 2px
     keeps it within 2px of its previous 22px height. */
  padding: var(--spacing-2) var(--spacing-8);
}
html.pondros .chip .dot {
  width: 4px;
  height: 4px;
}

html.pondros .tag {
  border-radius: var(--radius-pill);
  font-weight: 400;
}


/* ── Card ────────────────────────────────────────────────────────────────────
   A card is a container, so it keeps a container radius and never goes pill.
   base.html already had 14px, and --radius-14 exists in the scale, so this is
   a tokenisation rather than a visual change — the value is byte-identical.
   Stated explicitly so a later pass does not "round it to the nearest step":
   the Foundation's scale genuinely includes 14. */
html.pondros .card {
  border-radius: var(--radius-14);
  border-color: var(--color-border-default);
}


/* ── Fields ──────────────────────────────────────────────────────────────────
   Confirmed against the real Figma Input/Textarea components (nodes 470:4739
   and 470:5213). Container radius, never pill: padding is a uniform 8px and
   the radius is --radius-10 — both taken from field.css in the Foundation
   package rather than eyeballed. This is the one control that gets
   materially taller (~33px -> 38px): the app's inputs were more compact than
   the design system specifies. Flagged rather than quietly re-tuned.

   States are real CSS (:focus, :disabled, :placeholder-shown), not template
   flags — no JS is needed for filled/focus behaviour and none is added.
   Disabled overrides destructive entirely: a disabled field shows no red
   anywhere, which is why the invalid rule carries :not(:disabled). */
html.pondros input[type="text"],
html.pondros input[type="email"],
html.pondros input[type="password"],
html.pondros input[type="number"],
html.pondros input[type="search"],
html.pondros input[type="url"],
html.pondros input[type="tel"],
html.pondros input[type="date"],
html.pondros select,
html.pondros textarea {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--color-text-primary);
  background: var(--color-background-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-10);
  padding: var(--spacing-8);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

html.pondros input::placeholder,
html.pondros textarea::placeholder {
  color: var(--color-text-tertiary);
}

html.pondros input:focus,
html.pondros select:focus,
html.pondros textarea:focus {
  outline: none;
  border-color: var(--color-border-focus);
}

html.pondros input:disabled,
html.pondros select:disabled,
html.pondros textarea:disabled {
  background: var(--color-background-primary);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

html.pondros input:invalid:not(:disabled):not(:placeholder-shown),
html.pondros textarea:invalid:not(:disabled):not(:placeholder-shown) {
  border-color: var(--color-status-error);
}


/* ── Dropdown item ───────────────────────────────────────────────────────────
   Confirmed against the real Figma panel (482:51454) and item (482:51412).
   Hover reuses --color-background-secondary (the same fill as `selected`) and
   focus-visible reuses --color-border-focus — both are confirmed tokens
   already used for this purpose elsewhere, not invented colours.

   Hover is inside the pointer guard for the same reason as .btn; selected and
   :focus-visible are real per-element states, not a hover simulation, so they
   stay outside it. */
html.pondros .dd-opt {
  border-radius: var(--radius-8);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

@media (hover: hover) and (pointer: fine) {
  html.pondros .dd-opt:hover {
    background: var(--color-background-secondary);
  }
}

html.pondros .dd-opt:focus-visible {
  outline: 1px solid var(--color-border-focus);
  outline-offset: -1px;
}

html.pondros .dd-opt[aria-selected="true"],
html.pondros .dd-opt.selected {
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
}