/* THE CLOSE BUTTON TRAVELS WITH THE COMPONENT, NOT WITH THE SITE.
   modal-close.css was first linked from TurnerLee's sst-css-styles.html, which
   is a PER-SITE snippet — so every other site that pulls this stylesheet from
   the SST origin would have got a close button with no geometry at all. An
   @import ships it with the file that needs it, the way editor.css already
   imports this one. Bump both ?v= together. */
@import url("./modal-close.css?v=1.005");

/* ══════════════════════════════════════════════════════════════════════════
   estimate-send-modal.css — the Send Estimates modal. SST.
   Extracted 2026-08-23 17:44 MDT from
   Spartan_www/TurnerLee/Content/Snippets/admin-estimate-groups.html (lines
   436-468), VERBATIM. Nothing retyped or "cleaned up".

   WHY. Craig, 2026-08-23: "this SEND ESTIMATES modal is awesome ... it's got to
   be included in the new Modals section of the Style Guide." The guide's template
   is static HTML fetched cross-origin and cannot {% include %} a Treepl snippet,
   so the only way it can show the SHIPPING modal rather than a copy of it is to
   load a published stylesheet. One file, two consumers.

   Consumers:
     - turnerlee.com/portal/... Client Portal Group Estimates (the real modal)
     - turnerlee.com/ops/style-guide  ->  Modals 4

   The rules are unscoped (.egs-*), so the component is portable as-is; it needs
   no page shell. Edit HERE, then bump ?v= in both consumers.
   ══════════════════════════════════════════════════════════════════════════ */

.egs-overlay { position: fixed; inset: 0; z-index: 100000; display: none; background: rgba(20,18,15,.55); padding: 24px; overflow: auto; }
.egs-overlay.is-open { display: flex; align-items: flex-start; justify-content: center; }
/* RADIUS 20px. Craig, 2026-08-24: "rounded corners should match, and all be
   base on primary modals: 5 - SIGN IN, 4 - SEND". Those two disagreed — 4 was
   14px and 5 was 20px — so his own hand-specified 20px wins and moves UP here
   from signin-modal.css, which had been holding it with a note saying "say the
   word and they move up into estimate-send-modal.css in one edit." Said. */
/* 600px, NOT 520px — DECLARED, because Craig asked for the padding and not for
   this. At 520px his 20% left 312px of content and it did not fit: "Yes —
   include a temporary password" wrapped to two lines and the New/Updated/Resend
   row broke. 600px is the sign-in card's width, the render he approved himself,
   and it puts this card's interior at 360px — the same interior. The two
   primaries now agree on width as well as radius. Revert to 520 and the 20%
   ceiling has to come down with it; they are one decision, not two. */
.egs-modal { position: relative; width: 100%; max-width: 800px; margin: 30px auto; background: #fff; border-radius: var(--RadiusBrand, 15px); box-shadow: 0 30px 70px -20px rgba(0,0,0,.5); overflow: hidden; }
/* .egs-close is now the shared .tlc-modal-close — geometry lives in
   shared/modals/v1/modal-close.css and the white ink is set on .egs-modal
   there. The class name is kept as an alias so existing markup and JS that
   query it keep working; it declares nothing of its own any more. */
.egs-head { background: #ff7800; color: #fff; padding: 22px 26px 20px; }
.egs-kicker { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .92; font-weight: 600; }
.egs-head h3 { margin: 4px 0 6px; color: #fff; font-size: 1.5rem; font-weight: 600; }
/* 2026-08-23, Craig: "this modal added a sentence to the header, that should not be
   allowed." The header carries the kicker and the title and nothing else; explanatory
   copy is body content and now opens the body, above SEND TO. */
/* CRAIG'S VALUES, 2026-08-24, verbatim. The intro is the first thing in the
   body and it is what the header is no longer allowed to say, so it carries
   real size — 24px, not the 13.5px footnote it was — and 50px of air under it
   before the first field. */
.egs-intro { margin: 24px 0 50px; font-size: 24px; line-height: 1.4; color: #5f5952; }

/* THE SIDE PADDING IS A PERCENTAGE AND THAT IS THE WHOLE POINT — same reasoning
   the sign-in card already proved (signin-modal.css). Craig, 2026-08-24: "add
   horizontal padding minimum 5% (responsive xs) but allow up to 20% padding on
   the widths at full screens."

   A percentage resolves against the CARD'S OWN width, so every field inside
   stays fluid at every size without one width being declared on it. A 26px
   literal was 5% of the 520px card and 7% of a 375px phone — it got RELATIVELY
   larger exactly when space ran out.

   The ramp is 20% -> 12% -> 5%, and the floor is his: 5% at xs. */
.egs-body { padding: 22px 20% 26px; }

}

/* The hidden ATTRIBUTE loses to any author display: rule, because [hidden]
   {display:none} lives in the UA sheet and an author sheet outranks it at any
   specificity. One blanket over the whole card covers the temp-password wrap
   and every part added later — the sign-in card already carries the same line,
   and this component has been hit by that bug three times estate-wide. */
.egs-modal [hidden] { display: none !important; }
.egs-field { margin-bottom: 18px; }
.egs-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: #8a8378; margin-bottom: 8px; }
/* Recipient list + notification toggles use the Style Guide form-check/radio
   component (same markup as the single-estimate Send modal). Only layout
   helpers live here — radio/check visuals come from the site stylesheet. */
.egs-contacts { max-height: 210px; overflow: auto; padding: 2px; }
.egs-contacts .form-check { margin-bottom: 4px; }
.egs-cemail { color: #9a948a; font-size: 12.5px; margin-left: 8px; }
/* ONE COLUMN IS THE BASE. Two is EARNED by the body actually being wide enough
   to hold two, and that is measured on .egs-body at the bottom of this file —
   not on the card, and not on the viewport. Craig, 2026-08-24: "This isn't wide
   enough to have them side-by-side, and have that much padding." */
.egs-grid2 { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 18px; }
.egs-grid2 .form-floating { margin-bottom: 0; }
.egs-radios { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: center; }
.egs-radios .form-check { margin-bottom: 0; }
.egs-signin .form-check { margin-bottom: 0; }
.egs-temp { margin-top: 12px; }
.egs-temp-note { font-size: 12px; line-height: 1.5; color: #8a8378; margin: 0 0 10px; }
.egs-temp .form-floating { margin-bottom: 0; }
.egs-err { color: #c0392b; font-size: 13px; min-height: 18px; margin: 2px 0 8px; }
.egs-go { margin-top: 6px; }
.egs-go[disabled] { opacity: .55; cursor: not-allowed; }
.egs-note { margin: 10px 0 0; font-size: 11.5px; color: #9a948a; text-align: center; }

/* Was left behind inline on the first extraction pass and moved 2026-08-23 17:47 MDT.
   A responsive override belongs with the base rule it overrides; split across two
   files it still WORKED (the link loads before that block) but the next edit to
   .egs-grid2 would have found half the component. */
/* (the 560px stack rule is gone: one column IS the base now) */

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE LAST, AND THAT IS LOAD-BEARING.
   @container adds NO specificity, exactly like @media, so every rule here has
   to sit below the base declarations it overrides. Keep this block last.

   TWO CONTAINERS, BECAUSE THERE ARE TWO DIFFERENT QUESTIONS.

     egscard  = .egs-modal   how wide is the CARD?  -> how much side padding
     egsbody  = .egs-body    how wide is the INSIDE? -> one column or two

   Asking the card both questions is what produced the render Craig sent on
   2026-08-24: an 600px card at 20% padding has a 360px interior, two inputs
   land at 174px each, and "bill.saller@yahoo.com" is cut off mid-word — while
   the 120px of air beside it says there was plenty of room. The card was wide.
   The place the inputs live was not. "This isn't wide enough to have them
   side-by-side, and have that much padding."

   So the columns are decided by the box the columns are IN, after its padding
   has been taken out. It is the only number that can answer the question.

   AND THE HEADER MOVES WITH THE BODY. Craig: "it's making it look silly,
   especially next to the header." A 26px header edge beside a 120px body edge
   reads as a mistake, because it is one. They take the same percentage now, so
   the card is one column of content at every width.

   THE CARD REACHES 800. "We need to be smart and identify when we have room to
   go with a 800 pixel modal." At 800 with 20% the interior is 480px and two
   inputs sit at 234px each, which holds a real email address.
   ══════════════════════════════════════════════════════════════════════════ */
.egs-modal { container-type: inline-size; container-name: egscard; }
.egs-body  { container-type: inline-size; container-name: egsbody; }

/* ── SIDE PADDING, by how wide the CARD is ────────────────────────────────
   The floor is 26px, which is .egs-head's own literal — "just make the padding
   on the width in limited space match the padding of the header". */
.egs-head { padding: 22px 26px 20px; }
.egs-body { padding: 22px 26px 26px; }

/* 8% AND 10%, NOT 20%, AND THE ARITHMETIC IS WHY. 20% was asked for when this
   card was capped at 520px. It cannot survive the card reaching 800:

     800px card, 20% each side  ->  320px of gutter, 480px inside
     480px inside                ->  under the 530px two-input floor below
     -> the inputs STACK at the WIDEST setting, which is backwards

   Measured exactly that on the live card before this change. So the tiers are
   set from what the content needs and not from a percentage that sounded
   generous:

     800px card, 10%  ->  80px sides, 640px inside, two inputs at 314px
     720px card,  8%  ->  58px sides, 604px inside, two inputs at 296px
     600px card, 26px ->  548px inside, two inputs at 268px
     560px card, 26px ->  508px inside, one column

   Two columns now appear from roughly a 582px card and hold all the way up,
   which is the behavior "identify when we have room" is asking for. */
@container egscard (min-width: 640px) {
  .egs-head { padding-left: 8%; padding-right: 8%; }
  .egs-body { padding-left: 8%; padding-right: 8%; padding-top: 24px; padding-bottom: 28px; }
}
@container egscard (min-width: 780px) {
  .egs-head { padding-left: 10%; padding-right: 10%; }
  .egs-body { padding-left: 10%; padding-right: 10%; padding-top: 28px; padding-bottom: 32px; }
}

/* ── COLUMNS, by how wide the INSIDE is ───────────────────────────────────
   530px, AND IT IS MEASURED. Measured on the live card 2026-08-24, at the font
   the input actually renders in — 22px, because sst-styles.css forces
   font-size:1.25rem !important on every text input on this estate:

     "bill.saller@yahoo.com"   224px of text
     input padding + borders    28px
     ------------------------------------
     one input needs           253px
     two + the 12px gap        518px

   My first pass guessed 420 and it was wrong in the direction that matters: at
   a 480px interior the inputs land at 234px each and the address is still cut
   off mid-word, which is the exact render Craig sent back. 530 clears the
   measured 518 with room for a slightly longer address.

   If the input font ever changes, RE-MEASURE this number. It is a fact about
   type, not a breakpoint someone liked. */
@container egsbody (min-width: 530px) {
  .egs-grid2 { grid-template-columns: 1fr 1fr; }
}

/* Fallback for no container-query support. Coarser test, same intent. */
@supports not (container-type: inline-size) {
  @media (min-width: 900px) {
    .egs-head { padding-left: 10%; padding-right: 10%; }
    .egs-body { padding-left: 10%; padding-right: 10%; }
    .egs-grid2 { grid-template-columns: 1fr 1fr; }
  }
}