/* task-tile ("The tasks people come here for")
   Ported verbatim from css/components.css in the static handoff. */
.jcao-tasks { background: var(--ground-alt); }
.jcao-tasks__inner { max-width: var(--max); margin-inline: auto; padding: var(--section-y) var(--gutter); }
.jcao-sectionhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; }
.jcao-tasks__panel { margin-top: clamp(20px, 2.2vw, 26px); background: var(--surface); border-radius: var(--r-xl); padding: clamp(12px, 1.4vw, 18px); box-shadow: var(--e-3); }
.jcao-tasks__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 1px 16px; }
/* See the matching comment in division-cards.css. */
.jcao-tasks__grid > .view { display: contents; }
.jcao-tile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; min-height: 76px; border-radius: var(--r-lg); text-decoration: none; color: var(--navy); transition: background .16s ease; }
.jcao-tile:hover { background: #f4f7fb; color: var(--navy); }
.jcao-tile__icon { width: 34px; height: 34px; border-radius: 7px; background: var(--steel-tint); color: var(--steel-dark); }
.jcao-tile__icon--green { background: var(--green-tint); color: var(--green); }
.jcao-tile__icon--sand { background: var(--sand-tint); color: var(--sand); }
.jcao-tile__icon--alert { background: var(--alert-tint); color: var(--alert); }
.jcao-tile__title { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 16.5px; line-height: 1.22; }
.jcao-tile__sub { display: block; font-size: 12.5px; line-height: 1.45; color: var(--ink-5); margin-top: 1px; }