/* =============================================================================
   BIGPLUS30 - THE BIG + STANDARD (30 Sep 2026)

   Owner: "check the Add Family Member big + button - when you're doing a mouse hover on it it's
   rotating and it's very great - apply this style to all big + buttons across the database, same
   model same styles ... it must be same interface style and design and match our interface
   standards."

   THE MODEL IS `.add-fam` (mh-household.css 326-331), measured on 5257:
     the circle   46px, the field well at rest (--f-rest-bg = the theme's --tg-well), pine glyph
                  (--brand-600 #375A50), a 1px inset hairline ring; glyph 22px, stroke 2
     on hover     the circle fills PINE (--brand #2E4A43), the glyph turns WHITE, the ring goes,
                  and the circle ROTATES 90deg - background/colour/ring .2s, the turn .25s
     the tile     on hover the border turns pine and the fill steps to the hover well
                  (--f-hover-bg = --tg-well-h). No lift - the model does not move.
     the label    14px / 700 / --brand-600

   EVERY BIG + TILE GETS THAT, and only that. Each tile keeps its own SHAPE at rest (a Mint card's
   + tile stays a dashed row - the standard's "empty slot" - the Program page's stays a tall card),
   because the shape is its host's design; what the owner pointed at is the + and how it answers
   the pointer, and that is now one thing everywhere:
     Add Family Member (the model)       #hhDetail .add-fam
     every Mint + tile                   .mint-addem - emergency contact, school, housing subsidy,
                                         gift card, case note (client + family records, Settings)
     Add Document                        #mhDetail .cl-docadd
     New program / Enroll a student      .mh-app .pg-add
     Add a child                         .kid-add - Enroll Student wizard, Student record
     Add family member (New Client)      #clWiz/#clMbr .madd - given its circle in the markup
   NOT here, on purpose: buttons that merely carry a + icon (Enroll Student, Add Term, Write a note,
   Turn On Child Care ...) - those are the footer-button standard, not add tiles.

   LOADED LAST (App.razor, after mh-themeglass.css), every selector prefixed `:root:root:root body`
   and the tile class DOUBLED (`.mint-addem.mint-addem`), so it outranks every older host rule,
   light AND dark, without editing those rules one by one. MEASURED WHY: `html body` alone lost to
   `#mhDetail .pd-card.mint .cl-docadd .plus` (1,4,0) - Add Document kept its old pale circle. Colours are tokens, so every theme and dark mode follow.
   ============================================================================= */

/* ---- the standard's own tokens: the model's values, light and dark ---- */
body:not(.dark){
  --bp-well: var(--tg-well, #DFE4EA);        /* the circle at rest   = the model's --f-rest-bg  */
  --bp-well-h: var(--tg-well-h, #E4E8ED);    /* the tile on hover    = the model's --f-hover-bg */
  --bp-ring: rgba(40,60,80,.10);             /* the circle's hairline = the model's --f-rest-bd */
  --bp-glyph: #375A50;                       /* --brand-600 */
  --bp-pine: #2E4A43;                        /* --brand */
}
body.dark{
  --bp-well: #121A20;
  --bp-well-h: #16202A;
  --bp-ring: rgba(180,210,235,.10);
  --bp-glyph: #8FBBA5;
  --bp-pine: #3A5D51;
}

/* ---- THE CIRCLE, AT REST ---- */
:root:root:root body #hhDetail .add-fam.add-fam .plus,
:root:root:root body :is(#mhDetail,#hhDetail,#view-settings) .pd-card.mint .mint-addem.mint-addem:not(.off) .plus,
:root:root:root body #mhDetail .cl-docadd.cl-docadd .plus,
:root:root:root body .mh-app .pg-add.pg-add .plus,
:root:root:root body :is(#mhDetail,#enrollWiz,#cnWiz) .kid-add.kid-add .kid-plus,
:root:root:root body :is(#clWiz,#clMbr) .madd.madd .plus{
  width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--bp-well);color:var(--bp-glyph);box-shadow:inset 0 0 0 1px var(--bp-ring);
  transform:none;
  transition:background .2s,color .2s,transform .25s,box-shadow .2s;
}
:root:root:root body #hhDetail .add-fam.add-fam .plus svg,
:root:root:root body :is(#mhDetail,#hhDetail,#view-settings) .pd-card.mint .mint-addem.mint-addem:not(.off) .plus svg,
:root:root:root body #mhDetail .cl-docadd.cl-docadd .plus svg,
:root:root:root body .mh-app .pg-add.pg-add .plus svg,
:root:root:root body :is(#mhDetail,#enrollWiz,#cnWiz) .kid-add.kid-add .kid-plus svg,
:root:root:root body :is(#clWiz,#clMbr) .madd.madd .plus svg{
  width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;
}

/* ---- THE TILE, ON HOVER: pine edge, the hover well, no lift ---- */
:root:root:root body #hhDetail .add-fam.add-fam,
:root:root:root body :is(#mhDetail,#hhDetail,#view-settings) .pd-card.mint .mint-addem.mint-addem:not(.off),
:root:root:root body #mhDetail .cl-docadd.cl-docadd,
:root:root:root body .mh-app .pg-add.pg-add,
:root:root:root body :is(#mhDetail,#enrollWiz,#cnWiz) .kid-add.kid-add,
:root:root:root body :is(#clWiz,#clMbr) .madd.madd{
  transition:border-color .2s,background .2s,color .2s;
}
:root:root:root body #hhDetail .add-fam.add-fam:hover,
:root:root:root body :is(#mhDetail,#hhDetail,#view-settings) .pd-card.mint .mint-addem.mint-addem:not(.off):hover:not(:disabled),
:root:root:root body #mhDetail .cl-docadd.cl-docadd:hover,
:root:root:root body .mh-app .pg-add.pg-add:hover,
:root:root:root body :is(#mhDetail,#enrollWiz,#cnWiz) .kid-add.kid-add:hover,
:root:root:root body :is(#clWiz,#clMbr) .madd.madd:hover{
  background:var(--bp-well-h);border-color:var(--bp-pine);border-style:solid;
  transform:none;
}

/* ---- THE CIRCLE, ON HOVER: pine, white, a quarter turn ---- */
:root:root:root body #hhDetail .add-fam.add-fam:hover .plus,
:root:root:root body :is(#mhDetail,#hhDetail,#view-settings) .pd-card.mint .mint-addem.mint-addem:not(.off):hover:not(:disabled) .plus,
:root:root:root body #mhDetail .cl-docadd.cl-docadd:hover .plus,
:root:root:root body .mh-app .pg-add.pg-add:hover .plus,
:root:root:root body :is(#mhDetail,#enrollWiz,#cnWiz) .kid-add.kid-add:hover .kid-plus,
:root:root:root body :is(#clWiz,#clMbr) .madd.madd:hover .plus{
  background:var(--bp-pine);color:#fff;box-shadow:none;transform:rotate(90deg);
}

/* ---- THE LABEL: the model's 14 / 700 / brand-600 ---- */
:root:root:root body #hhDetail .add-fam.add-fam .lbl,
:root:root:root body :is(#mhDetail,#hhDetail,#view-settings) .pd-card.mint .mint-addem.mint-addem:not(.off) .lb,
:root:root:root body :is(#mhDetail,#enrollWiz,#cnWiz) .kid-add.kid-add .kid-add-l,
:root:root:root body :is(#clWiz,#clMbr) .madd.madd .lbl,
:root:root:root body .mh-app .pg-add.pg-add > span:not(.plus){
  font-size:14px;font-weight:700;color:var(--bp-glyph);
}

/* ---- the keyboard gets the same answer as the pointer ---- */
:root:root:root body :is(#mhDetail,#hhDetail,#view-settings) .pd-card.mint .mint-addem.mint-addem:not(.off):focus-visible .plus,
:root:root:root body #mhDetail .cl-docadd.cl-docadd:focus-visible .plus,
:root:root:root body :is(#mhDetail,#enrollWiz,#cnWiz) .kid-add.kid-add:focus-visible .kid-plus{
  background:var(--bp-pine);color:#fff;box-shadow:none;transform:rotate(90deg);
}

/* ---- a record that is being edited: the model's own rule - no movement on a greyed roster ---- */
:root:root:root body #hhDetail .members.hh-mem.noedit .add-fam.add-fam:hover .plus{transform:none}

/* ---- respect the setting ---- */
@media (prefers-reduced-motion: reduce){
  :root:root:root body #hhDetail .add-fam.add-fam:hover .plus,
  :root:root:root body :is(#mhDetail,#hhDetail,#view-settings) .pd-card.mint .mint-addem.mint-addem:not(.off):hover:not(:disabled) .plus,
  :root:root:root body #mhDetail .cl-docadd.cl-docadd:hover .plus,
  :root:root:root body .mh-app .pg-add.pg-add:hover .plus,
  :root:root:root body :is(#mhDetail,#enrollWiz,#cnWiz) .kid-add.kid-add:hover .kid-plus,
  :root:root:root body :is(#clWiz,#clMbr) .madd.madd:hover .plus{transform:none}
}