/* ══════════════════════════════════════════════════════════════════
   12 — COMPONENT LAYER (client portal redesign, Phase 1)
   Nine components, faithful to the designer handoff
   (handoff_client_portal/files/Client Shell Component Layer.dc.html).
   Build screens as markup + these class names; stop styling in JS
   template strings. Closes friction F12, F17–F20, F22-adjacent.

   Rules the whole layer obeys:
   - Flat: no shadows, ever. Hierarchy = color, weight, borders, space.
   - Hover shifts background/border only; press = opacity .85;
     never transform, never elevation.
   - Gilroy three weights (300 body / 500 UI / 800 headings).
   - Focus: 3px oak ring at 50%, offset 2px, :focus-visible only.
   ══════════════════════════════════════════════════════════════════ */

/* ─── 1 · Form row — .wom-field ─────────────────────────────────────
   Label + control + help + error as ONE unit. Inline errors are the
   default; toasts are for outcomes, not validation. */
.wom-field { margin-bottom: var(--space-4); }
.wom-field label {
  display: block;
  font-weight: 500;
  font-size: var(--fs-body-sm);
  color: var(--navy-deep);
  margin-bottom: 7px;
}
.wom-field label .wom-optional { font-weight: 300; color: var(--dim); }
.wom-field input[type="text"],
.wom-field input[type="email"],
.wom-field input[type="url"],
.wom-field input[type="tel"],
.wom-field input[type="number"],
.wom-field input[type="password"],
.wom-field input[type="date"],
.wom-field select,
.wom-field textarea {
  font-family: inherit;
  font-weight: 300;
  font-size: var(--fs-body);
  color: var(--navy);
  background: var(--color-white);
  border: 1.5px solid var(--stone);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  width: 100%;
  outline: none;
  transition: border-color var(--dur-base) var(--ease-out);
}
.wom-field input::placeholder,
.wom-field textarea::placeholder { color: #b0a892; }
.wom-field input:focus,
.wom-field select:focus,
.wom-field textarea:focus {
  border-color: var(--oak);
  box-shadow: 0 0 0 3px rgba(180, 81, 67, 0.18); /* focus ring, not elevation */
}
.wom-field .wom-help {
  font-weight: 300;
  font-size: 12px;
  color: var(--dim);
  margin-top: 6px;
}
.wom-field .wom-error { display: none; }
.wom-field.has-error input,
.wom-field.has-error select,
.wom-field.has-error textarea {
  border-color: var(--oak);
  box-shadow: 0 0 0 3px rgba(180, 81, 67, 0.12);
}
.wom-field.has-error .wom-error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 12px;
  color: var(--oak);
  margin-top: 6px;
}
.wom-field.has-error .wom-help { display: none; }

/* ─── 2 · Button — .wom-btn ───────────────────────────────────────── */
.wom-btn {
  font-family: inherit;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  padding: 11px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  background: var(--oak);
  color: #fff;
}
.wom-btn:hover { background: var(--oak-light); }
.wom-btn:active { opacity: 0.85; }
.wom-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.wom-btn:focus-visible { outline: 3px solid rgba(180, 81, 67, 0.5); outline-offset: 2px; }
.wom-btn--ghost {
  background: var(--warm-white);
  color: var(--navy-deep);
  border: 1px solid var(--stone);
}
.wom-btn--ghost:hover { background: var(--cream-dark); }
.wom-btn--danger { background: var(--rust); }
.wom-btn--danger:hover { background: #a04535; }
.wom-btn--sm { padding: 8px 13px; font-size: var(--fs-body-sm); }
.wom-btn--full { width: 100%; }
@media (max-width: 768px) {
  .wom-btn { min-height: 48px; } /* touch target */
}

/* ─── 3 · Card — .wom-card ──────────────────────────────────────────
   White, 1px border, radius-lg. Hover tints the border oak — no lift. */
.wom-card {
  background: var(--color-white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
a.wom-card, .wom-card--hover { transition: border-color var(--dur-base) var(--ease-out); }
a.wom-card:hover, .wom-card--hover:hover { border-color: rgba(180, 81, 67, 0.35); }
.wom-card[data-accent="attention"] { border-left: 3px solid var(--oak); }
.wom-card[data-accent="hero"] {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: var(--cream);
}
.wom-card[data-accent="hero"] .wom-eyebrow { color: var(--gold); }
.wom-card .wom-card-title {
  font-weight: 800;
  font-size: var(--fs-h3);
  color: var(--navy-deep);
  letter-spacing: -0.01em;
  margin: 0;
}
.wom-card[data-accent="hero"] .wom-card-title { color: #fff; }

/* Eyebrow — the brand's signature move. Usable anywhere, not just cards. */
.wom-eyebrow {
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--dim);
}
.wom-eyebrow--oak { color: var(--oak); }

/* ─── 4 · Pill — .wom-pill ──────────────────────────────────────────
   Status: tint fill + ink text + dot. One family per semantic. */
.wom-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  background: var(--slate-bg);
  color: var(--slate-blue);
  /* Layer 10 already ships a .wom-pill (the loud rust tag) — neutralize
     its uppercase/tracking here; the loud look is opt-in via --loud. */
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
}
.wom-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex: none;
}
.wom-pill--success { background: var(--sage-bg); color: var(--sage-ink); }
.wom-pill--success::before { background: var(--sage); }
.wom-pill--warning { background: var(--amber-bg); color: var(--amber-ink); }
.wom-pill--warning::before { background: var(--amber); }
.wom-pill--attention { background: var(--oak-bg); color: var(--oak); }
.wom-pill--danger { background: var(--rust-bg); color: var(--rust-ink); }
.wom-pill--plain::before { display: none; }
/* Loud variant — solid fill, white, tracked caps. Reserve for type
   markers (APPROVAL / REQUEST) and hard states (OVERDUE). */
.wom-pill--loud {
  background: var(--oak);
  color: #fff;
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 5px;
}
.wom-pill--loud::before { display: none; }
.wom-pill--loud.wom-pill--danger { background: var(--rust); color: #fff; }
.wom-pill--loud.wom-pill--dark { background: var(--navy-deep); color: #fff; }

/* ─── 5 · Tab bar — .wom-tabs ───────────────────────────────────────
   THE one tab pattern. 2px oak underline on active; the container is
   the horizontal scroller, tabs never wrap. */
.wom-tabs {
  display: flex;
  gap: 26px;
  border-bottom: 1px solid var(--cream-dark);
  overflow-x: auto;
  scrollbar-width: none;
}
.wom-tabs::-webkit-scrollbar { display: none; }
.wom-tab {
  font-family: inherit;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 2px;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--dim);
  cursor: pointer;
  white-space: nowrap;
  flex: none;
}
.wom-tab:hover { color: var(--navy); }
.wom-tab.active { color: var(--navy-deep); border-bottom-color: var(--oak); }
.wom-tab:focus-visible { outline: 3px solid rgba(180, 81, 67, 0.5); outline-offset: -3px; }
.wom-tab .wom-tab-count {
  background: var(--oak);
  color: #fff;
  font-weight: 800;
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  margin-left: 6px;
}

/* ─── 6 · List row — .wom-row ───────────────────────────────────────
   One row for tables and lists. Uppercase dim header on warm white,
   hairline dividers, no zebra, hover warm white. */
.wom-list {
  background: var(--color-white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.wom-row,
.wom-row-head {
  display: grid;
  grid-template-columns: var(--wom-row-cols, 2fr 1fr 1fr 90px);
  gap: 14px;
  align-items: center;
  padding: 14px 20px;
}
.wom-row-head {
  padding: 12px 20px;
  background: var(--warm-white);
  border-bottom: 1px solid var(--cream-dark);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--dim);
}
.wom-row { border-bottom: 1px solid var(--cream); }
.wom-row:last-child { border-bottom: none; }
.wom-row:hover { background: var(--warm-white); }
.wom-row .wom-row-title { font-weight: 500; font-size: 13.5px; color: var(--navy-deep); }
.wom-row .wom-row-meta { font-weight: 300; font-size: 13px; color: var(--navy); }
@media (max-width: 768px) {
  /* Same row, stacked: meta drops under the title. */
  .wom-row { grid-template-columns: 1fr; gap: 4px; }
  .wom-row-head { display: none; }
}

/* ─── 7 · Nav item — .wom-nav-item ──────────────────────────────────
   ONE component, three placements (rail / mobile tab / More sheet).
   Same label, icon and badge everywhere — what keeps the two
   viewports honest. Placement is a modifier, not a new component. */
.wom-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  color: var(--navy);
  font-weight: 300;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.wom-nav-item:hover { background: var(--oak-bg); }
.wom-nav-item.active {
  background: var(--oak-bg);
  border-left-color: var(--oak);
  color: var(--navy-deep);
  font-weight: 500;
}
.wom-nav-item .wom-nav-label { flex: 1; }
.wom-nav-item svg { flex: none; }
.wom-nav-badge {
  background: var(--oak);
  color: #fff;
  font-weight: 800;
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  line-height: 1.4;
}
.wom-nav-group {
  font-weight: 500;
  font-size: 10px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--dim);
  padding: 14px 12px 4px;
}
/* More-sheet placement: bigger touch rows, chevron affordance. */
.wom-nav-item--sheet {
  padding: 14px 4px;
  border-left: none;
  border-radius: 0;
  border-bottom: 1px solid var(--cream-dark);
  font-size: 16px;
  min-height: 48px;
}
.wom-nav-item--sheet:hover { background: none; }
.wom-nav-item--sheet.active { background: none; border-left: none; }

/* ─── 8 · Skeleton — .wom-skeleton ──────────────────────────────────
   Warm shimmer that mirrors the real layout. No spinners on full
   pages — spinners are for small in-place actions only. */
@keyframes womShimmer12 {
  0% { background-position: -380px 0; }
  100% { background-position: 380px 0; }
}
.wom-skeleton {
  background: #ece6da;
  background-image: linear-gradient(90deg, #ece6da 0px, #f6f1e8 120px, #ece6da 240px);
  background-size: 380px 100%;
  border-radius: var(--radius-sm);
  animation: womShimmer12 1.3s linear infinite;
  color: transparent;
  pointer-events: none;
  user-select: none;
}
@media (prefers-reduced-motion: reduce) {
  .wom-skeleton { animation: none; }
}

/* ─── 9 · State blocks — .wom-state ─────────────────────────────────
   empty: icon chip + 800 headline + one line (≤42ch) + the action
   that fills it. error: plain language + retry. locked: dashed and
   calm, never an error, always carries the unlocking action. */
.wom-state {
  background: var(--color-white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  text-align: center;
}
.wom-state .wom-state-icon {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-lg);
  background: var(--warm-white);
  border: 1px solid var(--cream-dark);
  color: var(--copper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}
.wom-state .wom-state-title {
  font-weight: 800;
  font-size: var(--fs-h3);
  color: var(--navy-deep);
  margin: 0;
}
.wom-state p {
  margin: 6px auto 14px;
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--dim);
  max-width: 42ch;
}
.wom-state--error .wom-state-icon { color: var(--oak); }
.wom-state--locked {
  background: var(--warm-white);
  border: 1px dashed var(--tan);
}