@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@import '/assets/b156259ecf951ea64c145aa0f54c7115e89156d2e5434dff5584e0328b19afe7/components/input/input.css';

@layer cinder.components {
  /* TimeField now composes FormFieldFrame itself, so its root also carries
     `.cinder-form-field`. Cinder component sidecars carry cascade LAYER
     membership, not import ORDER — a per-subpath consumer may load
     form-field.css before or after time-field.css in any order (see
     AGENTS.md's component-authoring section) — so this compound selector
     out-specificities the shared base rule (`display:flex; gap:1.5;`)
     regardless of which one a consumer's bundler resolves first. */
  .cinder-time-field,
  .cinder-time-field.cinder-form-field {
    display: grid;
    gap: var(--cinder-space-2);
    color: var(--cinder-text-default);
  }

  .cinder-time-field__label,
  .cinder-time-field__label.cinder-form-field__label {
    font-size: var(--cinder-text-sm);
    font-weight: var(--cinder-font-semibold);
  }

  .cinder-time-field__controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cinder-space-2);
    align-items: center;
  }

  /* TimeField composes FormFieldFrame itself, which puts the nested Input
     inside a FormFieldContext. Input always renders its own nested
     FormFieldFrame there now (CIN-511: no more arm switch between a bare
     control and a framed one — see input.svelte), with label/description/
     error absent since TimeField never gives Input its own. That frame
     always carries `.cinder-input-field` and is a direct child of this row,
     so this single selector covers it regardless of whether a future
     TimeField variant ever does pass Input its own label. */
  .cinder-time-field__controls > .cinder-input-field {
    flex: 0 1 12rem;
    inline-size: auto;
  }

  .cinder-time-field__timezone {
    flex: 0 1 14rem;
    min-height: 2.25rem;
    /* padding-block matches .cinder-input's space-1-5 (input.css) so the
       timezone select and its sibling time Input share the same vertical
       rhythm and read as a matched pair, not two independently-tuned
       controls that happen to share a row. */
    padding-block: var(--cinder-space-1-5);
    padding-inline-start: var(--cinder-space-3);
    /* space-8 (2rem) reserves room for the native caret. This is a native
       <select> (no `appearance: none`), so the browser itself lays out the
       arrow glyph in its own reserved region and clips/repositions the
       selected-option text around it — author padding here is extra
       breathing room, not what keeps text off the arrow. The longest label
       shipped anywhere in this component's examples/fixtures is
       'America/Denver' (14 chars); at --cinder-text-sm that's well inside
       the 12rem min-inline-size floor even after this end padding and the
       space-3 start padding are subtracted, so nothing crowds the caret. */
    padding-inline-end: var(--cinder-space-8);
    min-inline-size: 12rem;
    /* Native <select> elements don't inherit form-control typography by
       default, so without this the timezone select renders in
       browser-default type next to an Input rendering --cinder-text-sm —
       two boxes of matched height, border, and radius, but mismatched
       type, still don't read as a pair. */
    font-family: inherit;
    font-size: var(--cinder-text-sm);
    line-height: var(--cinder-leading-normal);
    color: var(--cinder-text-default);
    background: var(--cinder-surface-raised);
    border: 1px solid var(--cinder-border);
    border-radius: var(--cinder-radius-md);
    /* Long IANA identifiers (e.g. 'America/Argentina/ComodRivadavia', 33
       chars) exceed what the fixed 12-14rem box can show. This clips
       predictably rather than leaving the browser's undefined default
       clipping, without reflowing the box.

       Assistive technology is unaffected: a <select> exposes its selected
       option's full text as the control's value, so the truncation is
       visual only. The `title` on the <select> (time-field.svelte) is a
       POINTER affordance — browsers surface a title tooltip on hover, not
       on keyboard focus — so it helps a mouse user and does nothing for a
       sighted keyboard-only user, who sees only the ellipsis. Opening the
       select still reveals the full option text, which is the reliable
       disclosure path for everyone. Don't describe `title` as a
       focus-time affordance; it isn't one. */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .cinder-time-field__timezone:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    /* Ring replaces the border while focused rather than stacking on it — the two
       together read as one heavier shape than either was designed to be. */
    border-color: transparent;
    box-shadow: var(--_cinder-focus-ring-shadow);
  }

  @media (forced-colors: active) {
    .cinder-time-field__timezone:focus-visible {
      outline: var(--cinder-ring-width) solid ButtonText;
      outline-offset: 3px;
      box-shadow: none;
    }
  }

  .cinder-time-field__description,
  .cinder-time-field__description.cinder-form-field__description,
  .cinder-time-field__error,
  .cinder-time-field__error.cinder-form-field__error {
    margin: 0;
    font-size: var(--cinder-text-sm);
  }

  .cinder-time-field__description {
    color: var(--cinder-text-muted);
  }

  .cinder-time-field__error {
    color: var(--cinder-status-danger-text);
  }
}