/* ============================================================
   AWASE — Components  (SSOT: 02 §B案 トンマナ)
   浮遊系カード・計器の語彙（チップ/リング/バー）・角丸3種
   ============================================================ */
@layer components {

  /* ---- buttons ---- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
    padding: 12px 22px; border-radius: var(--radius-pill);
    font-family: var(--font-head); font-weight: 600; font-size: .95rem;
    transition: transform var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease);
    text-decoration: none;
  }
  .btn:active { transform: translateY(1px); }
  .btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-md); }
  .btn--primary:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
  .btn--secondary { background: var(--brand); color: #fff; }
  .btn--secondary:hover { background: var(--brand-900); }
  .btn--ghost { background: transparent; color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
  .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--brand); }
  .btn-sm { padding: 8px 16px; font-size: .85rem; }
  .btn:disabled, .btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

  /* ---- card ---- */
  .card {
    background: var(--surface); border-radius: var(--radius-m);
    box-shadow: var(--shadow-md); padding: var(--sp-3);
    transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
  }
  a.card, .card--link { display: block; }
  a.card:hover, .card--interactive:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .card__kicker { margin-block-end: var(--sp-0); }
  .card__title { font-size: var(--fs-h3); margin-block-end: var(--sp-1); }

  /* ---- chip / tag ---- */
  .chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: var(--radius-pill);
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--border);
    font-size: .85rem; color: var(--text); transition: box-shadow var(--dur-micro) var(--ease), background var(--dur-micro);
  }
  .chip[aria-pressed="true"], .chip--active { background: var(--brand); color: #fff; box-shadow: none; }
  .chip__dot { width: 10px; height: 10px; border-radius: 50%; }

  /* ---- five-taste badge & bar ---- */
  .taste { --c: var(--umami); --f: var(--umami-fill); }
  .taste--sweet  { --c: var(--sweet);  --f: var(--sweet-fill); }
  .taste--acid   { --c: var(--acid);   --f: var(--acid-fill); }
  .taste--salt   { --c: var(--salt);   --f: var(--salt-fill); }
  .taste--bitter { --c: var(--bitter); --f: var(--bitter-fill); }
  .taste--umami  { --c: var(--umami);  --f: var(--umami-fill); }
  .taste-badge {
    display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
    border-radius: var(--radius-pill); background: var(--f); color: var(--text);
    font-size:.8rem; font-weight:600;
  }
  .bar { height: 8px; border-radius: var(--radius-pill); background: var(--border); overflow: hidden; }
  .bar__fill { display: block; height: 100%; background: var(--c); border-radius: inherit; transition: width var(--dur-reveal) var(--ease); }

  /* ---- effect labels (rules: 6 kinds) ---- */
  .effect { font-size:.78rem; font-weight:600; padding:3px 10px; border-radius: var(--radius-pill); }
  .effect--suppress { background:#E4F1F4; color:#155563; }
  .effect--contrast { background:#FBF1DC; color:#6E4A0A; }
  .effect--synergy  { background:#E7F1EA; color:#245c3c; }
  .effect--complete { background:#EEE9F1; color:#4b3a56; }
  .effect--soothe   { background:#EAF0F4; color:#2b4a5e; }
  .effect--risk     { background:#FBE3E9; color:#8f1839; }

  /* ---- score meter (simulator) ---- */
  .score { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight:700; color: var(--brand); }
  .score--big { font-size: clamp(2.5rem, 1.5rem + 4vw, 4rem); line-height: 1; }

  /* ---- badges (achievements) ---- */
  .badge { display:inline-flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
  .badge__medal { width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
    background: var(--tint); box-shadow: var(--shadow-sm); }
  .badge--locked { opacity:.4; filter:grayscale(1); }

  /* ---- pill toggle group (segmented control) ---- */
  .seg { display:inline-flex; background: var(--surface); border-radius: var(--radius-pill); padding:4px; box-shadow: inset 0 0 0 1px var(--border); gap:2px; }
  .seg button { padding:8px 16px; border-radius: var(--radius-pill); font-size:.85rem; font-weight:600; color: var(--text-muted); }
  .seg button[aria-selected="true"] { background: var(--brand); color:#fff; }

  /* ---- notice / callout ---- */
  .notice { border-radius: var(--radius-m); padding: var(--sp-2) var(--sp-3); background: var(--info-tint); color: var(--text); }
  .notice--warn { background: var(--warn-tint); }
  .notice--risk { background: var(--ng-tint); }

  /* ---- header / footer / tab-bar (rendered by web components, light DOM) ---- */
  .site-header {
    position: sticky; top: 0; z-index: 100; height: var(--header-h);
    display:flex; align-items:center; justify-content:space-between;
    padding-inline: var(--gutter); background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--border);
  }
  .site-header__brand { display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:700; color:var(--brand); font-size:1.15rem; }
  .site-nav { display:none; gap:4px; }
  @media (min-width:768px){ .site-nav { display:flex; } }
  .site-nav a { padding:8px 14px; border-radius: var(--radius-pill); font-weight:600; font-size:.9rem; color: var(--text-muted); }
  .site-nav a[aria-current="page"] { color: var(--brand); background: var(--surface); box-shadow: var(--shadow-sm); }
  .site-nav a:hover { color: var(--brand); }

  .tab-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; height: var(--tabbar-h);
    display:flex; background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(10px); border-top: 1px solid var(--border);
  }
  @media (min-width:768px){ .tab-bar { display:none; } }
  .tab-bar a { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    font-size:.68rem; color: var(--text-muted); }
  /* 現在地は色だけでなく上罫線＋太字でも示す（WCAG 1.4.1・design-review Low L3対応） */
  .tab-bar a[aria-current="page"] { color: var(--accent); font-weight: 700; box-shadow: inset 0 2px 0 var(--accent); }
  .tab-bar svg { width:22px; height:22px; }

  .site-footer { padding: var(--sp-4) var(--gutter); background: var(--brand-900); color:#C7CCD6; }
  .site-footer a { color:#E7EAF0; text-decoration: underline; }
  .site-footer__credits { font-size:.82rem; color:#9AA2B0; max-width: var(--prose); }

  /* ---- hero ---- */
  .hero { display:grid; gap: var(--sp-4); align-items:center; }
  @media (min-width:1024px){ .hero { grid-template-columns: 1.05fr .95fr; } }
  .hero__title { font-size: var(--fs-h1); }
  .hero__lede { font-size: 1.1rem; color: var(--text-muted); max-width: 46ch; }
}