/* 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("../../modals/v1/modal-close.css?v=1.005");

/* ══════════════════════════════════════════════════════════════════════════
   tracker-modal.css — the Form Tracker modals. SST.
   Extracted 2026-08-23 14:44 MDT from
   Spartan_www/TurnerLee/Content/Snippets/Control-Tracker-Styles.html
   (lines 1202-1290 and 1349-1480), VERBATIM apart from the scope note below.

   WHY THIS FILE EXISTS. The style guide documents these two modals (Web CSS 10a
   and 10b) and the guide's template is STATIC HTML fetched cross-origin — it
   cannot {% include %} a Treepl snippet. Without a published stylesheet the
   guide would have to carry a copy of these rules, and a copy is what starts
   drifting. One file, two consumers.

   Consumers:
     - turnerlee.com/ops/tracker-contacts, -appointments, -referrals
       (still via the snippet — see the cross-reference in it)
     - turnerlee.com/ops/style-guide  Web CSS 10a / 10b

   THE ONE CHANGE ON EXTRACTION: `.ct-dashboard .ct-modal…` became
   `:is(.ct-dashboard, .sg-modal-stage) .ct-modal…`. Specificity is identical —
   :is() takes the highest of its arguments and both are single classes — so the
   cascade on a tracker page is unchanged. It only lets the guide stand the same
   card up outside the dashboard, without inheriting the dashboard's page chrome.

   TOKENS. The modal reads --ct-* which the tracker declares on .ct-dashboard.
   They are re-declared on .sg-modal-stage below with the same values so the
   component is portable; on a tracker page nothing resolves differently.
   ══════════════════════════════════════════════════════════════════════════ */

/* DECLARED ON BOTH SCOPES, NOT JUST ONE — measured 2026-09-03 and it is a real
   portability gap. Every RULE in this file is scoped
   `:is(.ct-dashboard, .sg-modal-stage)`, but this token block was on
   `.sg-modal-stage` alone, and `--ct-*` on `.ct-dashboard` came from the tracker
   PAGE's own <style>. So a consumer that carries `.ct-dashboard` anywhere else got
   every rule and none of the values: `color: var(--ct-text)` went invalid at
   computed-value time and the card inherited its page's ink instead — off by
   rgb(25,25,25) against rgb(34,34,34) on /ops/edit-brand-styles. On a tracker page
   nothing changes: the page's own copy has identical values and still lands later. */
:is(.ct-dashboard, .sg-modal-stage) {
  --ct-bg:         #fafafa;
  --ct-card:       #ffffff;
  --ct-card-hover: #fbfcfe;
  --ct-border:     var(--gray1, #e6e6e6);
  --ct-border-2:   var(--gray2, #d4d4d4);
  --ct-text:       var(--gray9, #1f2937);
  --ct-subtle:     var(--gray6, #6b7280);
  --ct-muted:      var(--gray5, #9ca3af);
  --ct-accent:     var(--color1,  #1f4e79);
  --ct-accent-dk:  var(--color1d, #163957);
  --ct-accent-soft: var(--color1f1, #eef4fa);
  --ct-accent2:    var(--color2,  #5b87a8);
  --ct-danger:     #b91c1c;
  --ct-danger-bg:  #fef2f2;
}
/* THE STAGE'S LAYOUT IS THE STAGE'S, NOT EVERY .ct-dashboard's — measured 2026-09-03.
   These five declarations rode along when the token block moved onto
   `:is(.ct-dashboard, .sg-modal-stage)` earlier the same day, and `display:flex` on a
   bare `.ct-dashboard` is not cosmetic: it is (0,1,0), the same weight as `.wmodal-bg
   { display:none }`, and this sheet lands later. Any modal that carries `ct-dashboard`
   for the --ct-* tokens could no longer be hidden. Measured on
   mudcup.live/fantasy/cfb/settings: #evalBg computed `display:flex` with no `.open`
   class, so the Scoring Evaluation window stood open over the page from first paint.
   The tokens above are portable and stay on both scopes; the box the guide stands its
   card in belongs to .sg-modal-stage alone. */
.sg-modal-stage {
  display: flex;
  justify-content: center;
  padding: 24px;
  background: var(--flexwhite03, rgba(0,0,0,.03));
  border-radius: var(--RadiusBrand, 6px);
}
/* In the guide the card stands on a plain stage, not a fixed full-viewport
   backdrop — a position:fixed overlay inside a three-column grid would cover the
   page it is being documented on. */
.sg-modal-stage .ct-confirm-card,
.sg-modal-stage .ct-modal { position: relative; margin: 0; }

/* ── CONFIRM (Control-Tracker-Styles.html 1202-1290) ────────────────────── */
.ct-confirm-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 20, 28, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 100000020;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    padding: 16px;
}
.ct-confirm-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}
.ct-confirm-card {
    position: relative;
    background: #fff;
    /* 20px — one radius for every modal, taken from the primaries (Modals 4/5).
       Craig, 2026-08-24: "rounded corners should match". */
    border-radius: var(--RadiusBrand, 15px);
    padding: 36px 40px 28px;
    min-width: 360px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    text-align: center;
    font-family: var(--font1, var(--fontPrimary), sans-serif);
}
/* .ct-confirm-close and .ct-modal-close are the shared .tlc-modal-close now —
   shared/modals/v1/modal-close.css. Both sit on a WHITE surface, so they take
   that file's default ink and neither declares anything here. The class names
   are kept as aliases so existing markup and JS keep working. */

.ct-confirm-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #fef2f2;
    color: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
.ct-confirm-title {
    /* CENTRED EXPLICITLY. .ct-confirm-card is text-align:center and the title
       should simply inherit it — but the site sheet sets text-align on bare h2,
       and a direct declaration always beats an inherited value however specific
       the ancestor is. Craig, 2026-08-23: "header should be centered tho." */
    text-align: center;
    margin: 0 0 10px;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #dc2626;
}
/* ══ THE GO VARIANT ══════════════════════════════════════════════════════
   Craig, 2026-08-24: "Confirm, delete in danger red and confirm approve in
   color1." One card, two intents — this is now the estate's entire vocabulary
   for a simple confirmation, so it has to say YES as clearly as it says NO.

   `.ct-confirm--go` on the card, and nothing else changes: same 56px disc, same
   centered uppercase title, same one full-width button. The button swaps
   .btn-danger for .btn-primary in the MARKUP, because the button is a real
   style-guide component and not something this sheet should repaint.

   The disc tint is color-mix, not a second hard-coded hex. #fef2f2 above is the
   red card's tint and it predates the token pipeline; deriving the go tint from
   --color1 means a brand change moves it, which is the point of the pipeline. */
.ct-confirm--go .ct-confirm-icon {
    background: color-mix(in srgb, var(--color1, #0079c1) 8%, #ffffff);
    color: var(--color1, #0079c1);
}
.ct-confirm--go .ct-confirm-title { color: var(--color1, #0079c1); }

.ct-confirm-msg {
    font-size: 0.95rem;
    font-weight: 400;
    color: #4b5563;
    letter-spacing: 0.2px;
    line-height: 1.5;
    margin-bottom: 22px;
}
.ct-confirm-actions {
    display: block;
}
/* While the POST is in flight: lock the button + dim it slightly */
.ct-confirm-card.is-busy .ct-confirm-close,
.ct-confirm-card.is-busy #ctConfirmDeleteBtn {
    opacity: 0.6;
    pointer-events: none;
}
.ct-dashboard .ct-submission-wrap a,
.ct-dashboard .ct-submission-wrap a:hover { text-decoration: none !important; }

/* ── MODAL + SHORT FORM (Control-Tracker-Styles.html 1349-1480) ─────────── */
:is(.ct-dashboard, .sg-modal-stage) .ct-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(17, 24, 39, 0.45);
    backdrop-filter: blur(2px);
    z-index: 100000010;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
}
:is(.ct-dashboard, .sg-modal-stage) .ct-modal-backdrop.open { display: flex; }
:is(.ct-dashboard, .sg-modal-stage) .ct-modal {
    background: #ffffff;
    /* NO BORDER. Craig, 2026-08-24: "remove blue border from 3 - MODAL: SHORT
       FORM". It was `1px solid var(--color1)` — measured rgb(0,121,193) — and it
       made this the only modal in the estate wearing a brand-colored outline.
       Modals 2, 4 and 5 are edgeless and sit on their shadow; this one now does
       too. Do not put an edge back: on a white card over a dim backdrop the
       shadow IS the edge, and a colored stroke reads as a state (selected,
       error) that this modal is not in. */
    /* var(--RadiusBrand) — 15px on this site, from ID Styles - Layout. */
    border-radius: var(--RadiusBrand, 15px);
    width: 100%;
    max-width: 640px;
    box-shadow: 0 24px 60px rgba(17, 24, 39, 0.25);
    color: var(--ct-text);
    /* VISIBLE, NOT HIDDEN — the footer button's hvr-pop has to be allowed OUT.
       Craig, 2026-08-25: "make sure hover pop of any buttons goes outside of the
       bounds/container. We don't ever want the button chopped off on hover."
       Measured on /ops/style-guide?page=modals with the keyframe pinned at its
       own 1.1 peak: the Save button grew 1.6px past the card on the left and
       6.8px on the right and both were cut. A w-100 button overhangs by 5% of
       its own width on each side, which is 30px on the 640px card against 20px
       of footer padding — the card can never pad its way out of it. The clip
       was carried here ONLY so the header band would follow the radius, and the
       band now rounds its own two corners, so nothing is lost by dropping it. */
    overflow: visible;
    position: relative;
}
/* THE 10px ACCENT STRIPE IS GONE TOO, 2026-08-24. Craig asked to "remove blue
   border from 3 - MODAL: SHORT FORM"; the 1px outline above was one blue edge
   and this `:before` was the other — and this was the one you actually saw,
   a 10px bar of --ct-accent (measured rgb(0,121,193)) across the top.

   It was also the only band in the estate carrying NO content. Modals 1, 4 and
   5 have real header bands with the title inside them; Modals 2 and 3 are white
   cards. That is the line: banded PRIMARIES and clean SECONDARIES, which is how
   Craig describes them himself — "primary modals: 5, 4" and "i love this simple
   secondary modal: 2". A decorative stripe on 3 put it in neither family.

   The title is already --ct-accent, so the modal keeps its brand note where it
   carries meaning. To put the stripe back, restore this block — nothing else
   depends on it. */
:is(.ct-dashboard, .sg-modal-stage) .ct-modal-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    /* NO VERTICAL PADDING, AND THAT IS THE POINT. The TITLE'S OWN MARGIN sizes
       this band — Craig's `margin: 20px 0px 20px -2px`, four rules down. With
       16px of header padding as well the two were stacking: 16 + 20 + 18 + 20 +
       16 = 90px measured, against the 58px his numbers describe. "still way too
       much vertical padding. i showed you exactly, match pixel for pixel."

       One owner for one dimension. If the band needs to change height, change
       the title's margin; do not add padding back here. 62px on the right is
       the close button's lane: 12 + 40 + 10. */
    padding: 0 62px 0 24px;
    align-items: center;

    /* THE BAND. Craig, 2026-08-24: "the header from 1 - MODAL should be applied
       to 3 - MODAL: SHORT FORM." The old Modals 1 demo is gone and this is the
       one thing on it the estate still needed. --color1, white ink, and NO
       border-bottom — the band is the edge. THE BAND ROUNDS ITS OWN TOP CORNERS:
       the card used to be overflow:hidden and this clipped to the radius for
       free, but that same clip chopped the footer button's hvr-pop, so the card
       is overflow:visible now and these two corners moved here. Same paint.
       Keep them in step with the card's border-radius above. */
    background: var(--color1, #0079c1);
    border-radius: var(--RadiusBrand, 15px) var(--RadiusBrand, 15px) 0 0;
    border-bottom: 0;

    /* THE CLOSE CENTRES IN THE BAND, NOT ON THE CARD. Craig, 2026-08-24: "The X
       circle also needs to be center aligned within the short header
       vertically." The shared .tlc-modal-close anchors to top:10px of the CARD,
       which is right when the band is tall (Send, Sign In) and visibly high
       when it is this short. The button is already a CHILD of this header, so
       giving the header a positioning context re-anchors it with no markup
       change and no second copy of the geometry. */
    position: relative;
}
/* Lighter ink, because this band is dark. Craig: "the X circle in the corner
   needs to recognize it's on dark bg and display as lighter color instead."
   Only these three properties — the 40x40 box, the glyph size and the hover
   behavior still come from shared/modals/v1/modal-close.css. Scoped to
   .ct-modal and NOT to .ct-* generally: .ct-confirm-card is a white card and
   its close must stay grey. */
:is(.ct-dashboard, .sg-modal-stage) .ct-modal {
    --tlc-modal-close-ink: rgba(255, 255, 255, .9);
    --tlc-modal-close-ink-hover: #ffffff;
    --tlc-modal-close-bg-hover: rgba(255, 255, 255, .2);
}
/* The centring moved into shared/modals/v1/modal-close.css and is now the rule
   for EVERY close button, not this one. It also moved off `transform`, which
   .hvr-pop's keyframe overwrites on hover. Nothing to declare here. */
/* CRAIG'S VALUES, 2026-08-24, pasted verbatim from .sg-modal-header h3 — the
   header he asked to bring over. Small, medium weight, widely tracked. That is
   what makes SHORT FORM read as a different KIND of modal from Sign In and
   Send: those two announce themselves with a large title; this one labels a
   task and gets out of the way. */
:is(.ct-dashboard, .sg-modal-stage) .ct-modal-title {
    font-family: var(--font1, sans-serif);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    /* CRAIG'S, VERBATIM, AND IT IS WHAT SIZES THE BAND. There were two `margin`
       declarations in this rule — my `margin: 0` and this one — and the second
       simply won. Consolidated to the one that is true, so the next reader is
       not told two things. The -2px pulls the cap's left sidebearing back onto
       the 24px header edge; letter-spacing adds a trailing space to every glyph
       including the last, and .15em of it is visible at this size. */
    margin: 20px 0px 20px -2px;
}

:is(.ct-dashboard, .sg-modal-stage) .ct-modal-body { padding: 40px 24px 20px; }
/* Craig's values, 2026-08-24, verbatim. The two commented lines in what he sent
   are the two declarations he took OUT: the top border and the grey fill. */
:is(.ct-dashboard, .sg-modal-stage) .ct-modal-footer {
    display: flex;
    justify-content: stretch;
    gap: 10px;
    padding: 20px 20px;
    margin-top: 0px;
    border-radius: 0px;
}
:is(.ct-dashboard, .sg-modal-stage) .ct-form-row {
    display: grid;
    grid-template-columns: 5fr 5fr;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
:is(.ct-dashboard, .sg-modal-stage) .ct-form-group { display: flex; flex-direction: column; }
:is(.ct-dashboard, .sg-modal-stage) .ct-form-group label {
    font-size: 70%;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color1);
    margin-bottom: 6px;
}
/* `:not(.tlc-cf-swatch)` — THE SST COLOUR FIELD'S OWN SWATCH IS NOT THIS FORM'S
   CONTROL. shared/core/v1/color-field.js decorates a `tlc-color` text input with a
   tool row, and the first tool is a real `<input type="color">` sized 26x26 by
   `.tlc-cf-swatch` (0,1,0). This rule is (0,2,1), so inside a .ct-form-group it won
   and stretched that swatch to `width:100%` — measured 2026-09-03 on
   /ops/edit-brand-styles, 94px, which pushed the artwork button clean outside the
   panel. Excluding it here rather than re-pinning the width at the call site: this
   is the rule that is wrong about what it is styling, and a local override would
   ship the same collision to the next page that puts a colour field in a modal.
   `:not()` takes the specificity of its argument, so this is (0,3,1) and still beats
   everything it is meant to. */
:is(.ct-dashboard, .sg-modal-stage) .ct-form-group input:not(.tlc-cf-swatch),
:is(.ct-dashboard, .sg-modal-stage) .ct-form-group select,
:is(.ct-dashboard, .sg-modal-stage) .ct-form-group textarea {
    background: #ffffff;
    border: 1px solid var(--gray2);
    color: var(--ct-text);
    border-radius: 4px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 1rem;
    width: 100%;
    min-height: 52px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
:is(.ct-dashboard, .sg-modal-stage) .ct-form-group input:not(.tlc-cf-swatch):focus,
:is(.ct-dashboard, .sg-modal-stage) .ct-form-group select:focus,
:is(.ct-dashboard, .sg-modal-stage) .ct-form-group textarea:focus {
    outline: none;
    border-color: var(--ct-accent);
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
}
:is(.ct-dashboard, .sg-modal-stage) .ct-form-group textarea { resize: vertical; min-height: 110px; }
:is(.ct-dashboard, .sg-modal-stage) .ct-form-group .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}
:is(.ct-dashboard, .sg-modal-stage) .ct-radio-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    margin-top: 2px;
}
:is(.ct-dashboard, .sg-modal-stage) .ct-form-group .form-check-input {
    width: 1rem; height: 1rem; margin: 0;
}
:is(.ct-dashboard, .sg-modal-stage) .ct-form-group .form-check-label {
    margin: 0;
    font-size: 110%;
    letter-spacing: 0.3px;
    text-transform: none;
    color: var(--ct-text);
    font-weight: 500;
    line-height: 130%;
    padding: 0 35px 0;
    font-family: var(--font1);
}

/* ── responsive ──
   Ported 2026-08-23 out of the 768px block in Control-Tracker-Styles.html when
   the duplicate was collapsed. They were the only modal rules left behind, and
   leaving them there would have meant the style guide's copy of this modal had
   no mobile behavior while the tracker pages did - a drift of exactly the kind
   publishing this file was meant to end. */
@media (max-width: 768px) {
  :is(.ct-dashboard, .sg-modal-stage) .ct-modal-footer { flex-direction: column-reverse; }
  :is(.ct-dashboard, .sg-modal-stage) .ct-modal-footer .ct-btn,
  :is(.ct-dashboard, .sg-modal-stage) .ct-modal-footer .btn { width: 100%; justify-content: center; }
}