/*
 * Category petals (README "Category petals"): radius 999px, padding 3px 10px, 12px/700.
 * category_petal(category) picks the tone. Also used for 42px/72px category icon circles
 * (.icon-circle--<tone>) and the date discs in Recent updates.
 */
@layer components {
  .petal {
    display: inline-flex;
    flex: none;
    align-items: center;
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
  }

  .petal--policy { background: var(--petal-policy-bg); color: var(--petal-policy-fg); }
  .petal--ops { background: var(--petal-ops-bg); color: var(--petal-ops-fg); }
  .petal--lic { background: var(--petal-lic-bg); color: var(--petal-lic-fg); }
  .petal--staff { background: var(--petal-staff-bg); color: var(--petal-staff-fg); }
  .petal--form { background: var(--petal-form-bg); color: var(--petal-form-fg); }
  .petal--neutral { background: var(--color-neutral-200); color: var(--color-neutral-800); }

  /* Icon discs in category colors (Quick access, library rows, empty states) */
  .icon-circle {
    width: 42px;
    height: 42px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 18px;
  }
  .icon-circle--sm { width: 38px; height: 38px; font-size: 17px; }
  .icon-circle--md { width: 44px; height: 44px; font-size: 19px; }
  .icon-circle--lg { width: 52px; height: 52px; font-size: 24px; }
  .icon-circle--xl { width: 72px; height: 72px; font-size: 30px; }
  .icon-circle--bg { background: var(--color-bg); }
  .icon-circle--policy { background: var(--petal-policy-bg); color: var(--petal-policy-fg); }
  .icon-circle--ops { background: var(--petal-ops-bg); color: var(--petal-ops-fg); }
  .icon-circle--lic { background: var(--petal-lic-bg); color: var(--petal-lic-fg); }
  .icon-circle--staff { background: var(--petal-staff-bg); color: var(--petal-staff-fg); }
  .icon-circle--form { background: var(--petal-form-bg); color: var(--petal-form-fg); }
  .icon-circle--warn { background: var(--color-warn-soft); color: var(--color-warn-text); }
  .icon-circle--err { background: var(--color-err-soft); color: var(--color-err-text); }
  .icon-circle--ok { background: var(--color-accent-2-700); color: var(--color-bg); }
  .icon-circle--primary { background: var(--color-primary); color: var(--color-on-primary); }

  /* Date disc: "SEP / 29" (D-05 Recent updates) */
  .date-disc {
    width: 52px;
    height: 52px;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
  }
  .date-disc__month { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; }
  .date-disc__day { font-size: 18px; font-weight: 700; }
}