@charset "utf-8";
/* ===========================================================================
   DSA PAGE HEADER - the one header card for the whole site (Oct 2026).

   A card under the banner image carrying the round Back button on the LEFT,
   a small kicker, the page title, an optional meta line and badge row.
   Most visitors are on a phone, so the Back button sits where phones put it
   (top left) and is a full 44px tap target on small screens.

   Built by:
     page_header()  /_includes/page_header.php   - public and member pages
     cp_hero()      /_includes/cp_hero.php       - Control Panel
     tm_hero()      cp/admin_team/_team_common.php - Admin Team
   cp.css @imports this file, so the CP and member pages cannot drift apart.
   page_header() links it itself, so a page needs no extra <link>.

   DSA Blue #354089, DSA Red #E11F30, card border #d5d8e8, 8px corners.
=========================================================================== */

.tm-hero,.cp-hero{display:flex;align-items:flex-start;gap:14px;margin:12px 0 4px;padding:16px 18px;border:1px solid #d5d8e8;border-left:5px solid #354089;border-radius:8px;background:#fff;clear:both;box-sizing:border-box;}
/* page_header() adds .ph - member and public pages have no group heading
   below the card to space it, so the card carries its own bottom margin. */
.cp-hero.ph{margin:10px 0 16px;}
a.tm-back,a.tm-back:link,a.tm-back:visited,a.cp-back,a.cp-back:link,a.cp-back:visited{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid #d5d8e8;background:#fff;color:#354089 !important;text-decoration:none;}
a.tm-back:hover,a.tm-back:focus,a.cp-back:hover,a.cp-back:focus{border-color:#354089;color:#E11F30 !important;outline:none;text-decoration:none;}
a.tm-back:focus-visible,a.cp-back:focus-visible{box-shadow:0 0 0 3px rgba(53,64,137,0.25);}
.tm-back svg,.cp-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.tm-hero-text,.cp-hero-text{flex:1 1 auto;min-width:0;}
.tm-kicker,.cp-kicker{font-size:small;color:#666;letter-spacing:0.04em;}
.tm-title,.cp-hero-title{margin:2px 0;padding:0;font-size:1.5em;line-height:1.2;color:#222;text-align:left;text-shadow:none;overflow-wrap:anywhere;}
.tm-meta,.cp-hero-meta{font-size:small;color:#666;line-height:1.5;}
.cp-hero-meta a{color:#354089;}

/* Badges */
.tm-badges,.cp-badges{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;}
.tm-badge,.cp-badge{display:inline-block;padding:1px 10px;border-radius:999px;font-size:small;font-weight:bold;line-height:1.6;white-space:nowrap;}
.tm-badge.wait,.cp-badge.wait{background:#fdecee;color:#b00;}
.tm-badge.ok,.cp-badge.ok{background:#e6f4ea;color:#060;}
.tm-badge.fwd,.cp-badge.fwd{background:#e8eaf6;color:#354089;}
.tm-badge.draft,.cp-badge.draft{background:#fff3e0;color:#a60;}
.tm-badge.grey,.cp-badge.grey{background:#eee;color:#555;}
.tm-badge.due,.cp-badge.due{background:#fff0d6;color:#8a5200;}
.tm-badge.flat,.cp-badge.flat{background:#eef1fa;color:#4a5488;}

/* Phone - same breakpoint as phone.css. 44px is the minimum comfortable
   thumb target. */
@media only screen and (max-width:1000px){
a.tm-back,a.tm-back:link,a.tm-back:visited,a.cp-back,a.cp-back:link,a.cp-back:visited{width:44px;height:44px;}
.tm-back svg,.cp-back svg{width:22px;height:22px;}
.cp-hero.ph{margin:8px 0 14px;}
}
@media only screen and (max-width:420px){
.tm-hero,.cp-hero{padding:12px 14px;gap:12px;}
.tm-title,.cp-hero-title{font-size:1.25em;}
}