/* ============================================================================
   Awinel — Event logging buttons  (Direction B×C: category tints + press-select)
   Self-contained: concrete values below map to Forward design-system tokens
   (comments show the --forward-* equivalent). If your app already loads the
   Forward styles.css, you may swap the literals for the tokens.
   ============================================================================ */
.awb-grid {
  --awb-radius: 10px;            /* --forward-radius-md */
  --awb-surface: #FFFFFF;        /* --forward-surface */
  --awb-ink: #1E1D1A;            /* --forward-text-primary */
  --awb-label: #5A574F;          /* --forward-text-secondary */
  --awb-accent: #B85C3F;         /* --forward-accent */
  --awb-accent-active: #8F4229;  /* --forward-accent-active */
  --awb-sel-bg: #F7EAE4;         /* accent, 8% tint */
  /* category chip: [background, icon color] */
  --awb-heat-bg:  #F3E4DD;  --awb-heat-fg:  #A54E33;   /* combustion */
  --awb-water-bg: #E2E9EF;  --awb-water-fg: #3F607E;   /* atmosphere / water (info) */
  --awb-done-bg:  #E7EFE7;  --awb-done-fg:  #4C7850;   /* completed / output (success) */
  --awb-rec-bg:   #F0EEEA;  --awb-rec-fg:   #1E1D1A;   /* records */

  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 4 or 5 cols on wider screens — see media queries */
  gap: 10px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.awb-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  min-height: 92px; padding: 10px 8px;
  background: var(--awb-surface);
  border-radius: var(--awb-radius);
  transition: background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.awb-btn:active { transform: scale(0.97); }
.awb-icon {
  width: 46px; height: 46px; border-radius: var(--awb-radius);
  display: flex; align-items: center; justify-content: center;
  transition: background 120ms ease, color 120ms ease;
}
.awb-icon svg { width: 26px; height: 26px; display: block; }
.awb-label { font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: -0.01em; color: var(--awb-label); }

/* icon internals */
.awb-icon .ln  { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.awb-icon .ac  { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke: currentColor; }
.awb-icon .acf { stroke: none; fill: currentColor; }

/* ---- category tints (icon color flows via currentColor; .ac/.acf inherit it) ---- */
.awb-btn.cat-heat  .awb-icon { background: var(--awb-heat-bg);  color: var(--awb-heat-fg); }
.awb-btn.cat-water .awb-icon { background: var(--awb-water-bg); color: var(--awb-water-fg); }
.awb-btn.cat-done  .awb-icon { background: var(--awb-done-bg);  color: var(--awb-done-fg); }
.awb-btn.cat-rec   .awb-icon { background: var(--awb-rec-bg);   color: var(--awb-rec-fg); }
.awb-btn:hover .awb-icon { filter: brightness(0.97); }

/* ---- selected / active: ONE consistent terracotta signal, regardless of category ---- */
.awb-btn[aria-pressed="true"] {
  background: var(--awb-sel-bg);
  box-shadow: inset 0 0 0 2px var(--awb-accent);
}
.awb-btn[aria-pressed="true"] .awb-icon { background: var(--awb-accent); color: #fff; }
.awb-btn[aria-pressed="true"] .awb-label { color: var(--awb-accent-active); font-weight: 600; }

/* ---- keyboard focus (Forward focus ring: 2px canvas gap + 2px trust) ---- */
.awb-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FAFAF8, 0 0 0 4px #2B6A6A;
}
.awb-btn[aria-pressed="true"]:focus-visible {
  box-shadow: inset 0 0 0 2px var(--awb-accent), 0 0 0 2px #FAFAF8, 0 0 0 4px #2B6A6A;
}

/* ---- responsive columns ---- */
@media (min-width: 480px) { .awb-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 720px) { .awb-grid { grid-template-columns: repeat(5, 1fr); } }

/* ---- dark theme (optional; if app sets [data-theme="dark"]) ---- */
[data-theme="dark"] .awb-grid {
  --awb-surface: #1E1D1A; --awb-ink: #F0EDE5; --awb-label: #B8B4A8;
  --awb-heat-bg:#2E211C; --awb-heat-fg:#D98B70;
  --awb-water-bg:#1E2733; --awb-water-fg:#8FB0CE;
  --awb-done-bg:#1D2A1F; --awb-done-fg:#8FBF93;
  --awb-rec-bg:#26241F; --awb-rec-fg:#F0EDE5;
  --awb-sel-bg:#3A241C;
}