/* Shared decorative summary cards. Screen-only so printed reports stay clean. */
@media screen {
  :is(.tile, .att-stat, .fin-card, .platform-summary, #results .stat) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 24px;
  }
  :is(.tile, .att-stat, .fin-card, .platform-summary, #results .stat)::before,
  :is(.tile, .att-stat, .fin-card, .platform-summary, #results .stat)::after {
    content: '';
    display: block;
    position: absolute;
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
    width: 190px;
    height: 190px;
    inset-inline-start: auto;
    inset-inline-end: -70px;
    inset-block-start: -65px;
    inset-block-end: auto;
    background: rgb(255 255 255 / .22);
    border: 0;
    box-shadow: -20px 115px 0 10px rgb(255 255 255 / .14);
    transform: none;
  }
  :is(.tile, .att-stat, .fin-card, .platform-summary, #results .stat)::after {
    inset-inline-end: 28px;
    inset-block-start: -96px;
    background: transparent;
    border: 2px solid rgb(255 255 255 / .32);
    box-shadow: none;
  }
  [dir='rtl'] :is(.tile, .att-stat, .fin-card, .platform-summary, #results .stat)::before {
    box-shadow: 20px 115px 0 10px rgb(255 255 255 / .14);
  }
  .dashboard-home .tile--fill { min-height: 170px; }
  .dashboard-home .tile__label { order: 0; margin: 0 0 16px; font-size: 17px; }
  .dashboard-home .tile__value { order: 2; margin-block-start: auto; font-size: 36px; }
  .dashboard-home .tile__trend { order: 1; margin-block-end: 8px; }
  .dashboard-home .tile__meta { order: 3; }
  .att-stat__dot { display: none; }
  .att-stat__label { order: 0; font-size: 15px; }
  .att-stat__value { order: 1; margin-block-start: auto; font-size: 32px; }
  @media (max-width: 600px) {
    .dashboard-home .tile--fill { min-height: 150px; }
    .dashboard-home .tile__value { font-size: 30px; }
  }
}

/* 2026-10-05: the circles again, softer. The same two shapes as above - a
   filled circle with a second one under it, and an outlined ring - at about
   two thirds of their old strength, so the cards keep their character
   without the decoration taking over. The dashboard tiles (.dt) get them
   too, so every summary card in the app matches. */
@media screen {
  :root body .dt { position: relative; isolation: isolate; overflow: hidden; }
  :root body :is(.tile, .att-stat, .fin-card, .platform-summary, #results .stat, .dt)::before,
  :root body :is(.tile, .att-stat, .fin-card, .platform-summary, #results .stat, .dt)::after {
    content: '';
    display: block;
    position: absolute;
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
    width: 190px;
    height: 190px;
    inset-inline-start: auto;
    inset-inline-end: -70px;
    inset-block-start: -65px;
    inset-block-end: auto;
    background: rgb(255 255 255 / .15);
    border: 0;
    box-shadow: -20px 115px 0 10px rgb(255 255 255 / .09);
  }
  :root body :is(.tile, .att-stat, .fin-card, .platform-summary, #results .stat, .dt)::after {
    inset-inline-end: 28px;
    inset-block-start: -96px;
    background: transparent;
    border: 1.5px solid rgb(255 255 255 / .22);
    box-shadow: none;
  }
  :root[dir='rtl'] body :is(.tile, .att-stat, .fin-card, .platform-summary, #results .stat, .dt)::before {
    box-shadow: 20px 115px 0 10px rgb(255 255 255 / .09);
  }
  /* On the navy cards white reads stronger, so the shapes step down again. */
  :root body :is(.dt--navy, .att-stat--sick_leave)::before { background: rgb(255 255 255 / .08); box-shadow: -20px 115px 0 10px rgb(255 255 255 / .05); }
  :root body :is(.dt--navy, .att-stat--sick_leave)::after { border-color: rgb(255 255 255 / .14); }
  :root body :is(.tile, .att-stat, .fin-card, .platform-summary, #results .stat) { border-radius: 18px; }
  /* Content stays above the shapes. */
  :root body .dt > * { position: relative; }
}