/* ================================================================
   pvi-master-frame.css
   Shared chrome styles used by every PortraitVision page.
   Loaded after Bootstrap and FontAwesome, before the per-page
   stylesheet (the <<stylesheet>> slot in the master frame).
   ================================================================ */


/* ----------------------------------------------------------------
   1. Design tokens — :root color variables
   Used as var(--name) throughout master frame and every page CSS.
   ---------------------------------------------------------------- */
:root {
    --light-grey:  #D1D1D1;
    --dark-grey:   #2E2E2E;
    --mid-grey:    #7D7D7D;
    --dull-blue:   #5bc0de;
    --dull-red:    #D9534F;
    --green:       #5cb85c;
    --orange:      #f0ad4e;
    --yellow:      #dbca69;
    --lavender:    #E2D1F9;

    /* Neutral surfaces cluster — chrome backgrounds and dividers used
       across card-based pages. --white is the primary card backdrop
       (e.g. .su-section); --surface is a soft inset fill for panels
       INSIDE a card (e.g. .email-display on pvi-thank-you); --rule is
       the divider line between in-card sections. One place to tune
       neutral chrome across every page. */
    --white:   #ffffff;  /* primary card backdrop */
    --surface: #f4f4f4;  /* inset panel fill inside a card */
    --rule:    #eeeeee;  /* in-card section divider */

    /* Amber warning cluster — used for inline cautionary callouts
       (e.g. the "no account is active yet" notice on pvi-thank-you).
       Three related shades grouped under one semantic role. */
    --amber-warn:      #ffc107;  /* accent / border */
    --amber-warn-bg:   #fff8e1;  /* soft background fill */
    --amber-warn-text: #7a5500;  /* readable text on the soft bg */

    /* Danger fill — pairs with --dull-red (declared above in the
       primary palette). --dull-red is the accent / border / readable
       text color; --dull-red-bg is the soft pink fill used by error
       callouts (e.g. .error-block on pvi-thank-you). Parallel role to
       --amber-warn-bg in the amber cluster above. */
    --dull-red-bg: #fdecea;  /* soft fill behind --dull-red text/border */

    /* Interaction state tokens — focus rings and button hover-darken shades.
       One place to tune visual feedback across every page. */
    --focus-ring-blue: rgba(91, 192, 222, .25);  /* --dull-blue at 25% alpha */
    --green-hover:     #4ca84c;                  /* darker green for primary-button hover */
    --dull-red-hover:  #c9302c;                  /* darker red for the .pv-btn-adjust hover (§7) */
    --mid-grey-hover:  #6a6a6a;                  /* darker mid-grey — RESERVED, no
                                                    consumer. Was the secondary-button
                                                    hover before buttons went all-green
                                                    (§7). Kept for a future neutral
                                                    treatment; check the page
                                                    stylesheets before deleting. */
}


/* ----------------------------------------------------------------
   2. Base body + page layout
   Sticky-footer flex column: header at top, content fills,
   footer pinned to the bottom of the viewport when content is short.
   ---------------------------------------------------------------- */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--light-grey);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: var(--dark-grey);
}


/* ----------------------------------------------------------------
   3. Header chrome
   ---------------------------------------------------------------- */
.header {
    background-color: var(--dark-grey);
    color: var(--light-grey);
    padding: 2rem 0;
}
.logo {
    max-height: 80px;
    width: auto;
}
.platform-name {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--light-grey);
    margin: 0;
}
.tagline {
    font-size: 1.2rem;
    color: var(--light-grey);
    font-weight: 400;
}


/* ----------------------------------------------------------------
   4. Content area — fills available vertical space
   ---------------------------------------------------------------- */
.content-area {
    flex: 1;
}


/* ----------------------------------------------------------------
   5. Footer chrome
   Sticky to bottom of viewport via flex-shrink:0 + margin-top:auto
   in conjunction with body flex layout above.
   ---------------------------------------------------------------- */
.footer {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1020;
    background-color: var(--mid-grey);
    border-top: 1px solid var(--dark-grey);
    box-shadow: 0 -2px 4px rgba(0, 0, 0, .1);
    margin-top: auto;
    flex-shrink: 0;
}
.footer .text-muted {
    font-size: .875rem;
    color: var(--light-grey) !important;
}
.footer a.text-muted {
    color: var(--light-grey) !important;
}
.footer a.text-muted:hover {
    color: var(--dull-blue) !important;
    text-decoration: underline !important;
}


/* ----------------------------------------------------------------
   6. Option lists — checkbox and radio option groups
   Canonical system-wide pattern. Any page that needs a list of
   selectable options should use this markup:

       <div class="radio-grid">
         <label class="radio-opt">
           <input type="checkbox|radio" name="..." value="...">
           <span>Visible label text</span>
         </label>
         ...repeat per option...
       </div>

   .radio-grid stacks one option per line; .radio-opt aligns the
   input and its <span> on a single flex row with consistent gap.
   Pages must NOT set their own grid-template-columns or display
   rules on the container — use this class so every page matches.
   ---------------------------------------------------------------- */
.radio-grid {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin-bottom: 1rem;
}
.radio-opt {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .92rem;
    color: var(--dark-grey);
    cursor: pointer;
}
.radio-opt input[type="checkbox"],
.radio-opt input[type="radio"] {
    flex-shrink: 0;
    margin: 0;
}


/* ----------------------------------------------------------------
   7. Bottom-of-page action buttons — shared chrome
   Canonical system-wide pattern for the action row at the foot of a
   page. Works unchanged for one button or two:

       Scenario 1 — single centered button (return, logout, etc.):
       <div class="save-section">
         <a href="pvi-admin.pl?action=dashboard"
            class="save-btn save-btn-secondary">Return to Menu</a>
       </div>

       Scenario 2 — primary action beside a return, side by side:
       <div class="save-section">
         <button type="submit" class="save-btn">Primary Action</button>
         <a href="pvi-admin.pl?action=dashboard"
            class="save-btn save-btn-secondary">Return to Menu</a>
       </div>

   .save-section is a centered flex row with a gap, so one child and
   two lay out identically — no separate class per scenario. DOM order
   controls left/right. Both <button> and <a> take .save-btn and render
   the same size. .save-btn-secondary is a SEMANTIC hook, not a
   different look: every action button in the system is green by
   decision, and the secondary class deliberately resolves to the same
   fill. It stays in the vocabulary so markup can mark the
   return/cancel role without a visual change, and so a future neutral
   treatment is a one-rule change rather than a markup sweep. It is not
   a bug and must not be "restored" to grey.
   This file loads BEFORE the per-page <<stylesheet>>, so a page may
   still override these rules; pages should not need to.
   ---------------------------------------------------------------- */
.save-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 1.5rem 0 .5rem;
}
.save-btn {
    display: inline-block;
    padding: .6rem 1.5rem;
    border: none;
    border-radius: 6px;
    background-color: var(--green);
    color: var(--white);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s;
}
.save-btn:hover,
.save-btn:focus {
    background-color: var(--green-hover);
    color: var(--white);
    text-decoration: none;
}
.save-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .2rem var(--focus-ring-blue);
}
.save-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}
/* Opt-in wide treatment: preserves the legacy full-width/400px-max look
   used by the single-button report pages. Do NOT use on a two-button row. */
.save-btn-wide {
    width: 100%;
    max-width: 400px;
}
/* Same fill as .save-btn by decision — see §7 above. Role marker only. */
.save-btn-secondary {
    background-color: var(--green);
}

/* ---- .pv-btn-adjust — the one deliberate non-green button ----------
   Emitted by forms/pvi-grade-adjust-button.html, which is injected into
   a page through a section marker (e.g. <<grade_adjust_section>> on
   pvi-review-summary.html) rather than written into any one fragment.
   The rule therefore lives here, in the shared chrome, not in a page
   stylesheet: the partial has no page of its own, and a per-page copy
   would go missing the first time the partial is injected somewhere new
   — which is exactly how it shipped unstyled.

   Red is intentional and is the documented exception to the all-green
   action-button decision in §7. This link does not save, cancel, or
   return; it routes the manager off the confirmation screen into a
   different form of record. It is the only button on the page that
   is not part of the flow the page is about, and it must not be
   mistaken for one.

   Declared AFTER .save-btn so the fill wins on equal specificity.
   Works with either base class: paired with .save-btn it inherits the
   system padding, radius, and focus ring; paired with Bootstrap's .btn
   it picks up Bootstrap's metrics instead. The .save-btn pairing is
   preferred — see the note in the partial.
   -------------------------------------------------------------------- */
.pv-btn-adjust {
    background-color: var(--dull-red);
    border: none;
    color: var(--white);
    text-decoration: none;
}
.pv-btn-adjust:hover,
.pv-btn-adjust:focus {
    background-color: var(--dull-red-hover);
    color: var(--white);
    text-decoration: none;
}
.pv-btn-adjust:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .2rem var(--focus-ring-blue);
}
.save-btn-secondary:hover,
.save-btn-secondary:focus {
    background-color: var(--green-hover);
}


/* ----------------------------------------------------------------
   8. Global visibility utility — the [hidden] guarantee
   The bare HTML `hidden` attribute is honored only by the UA
   stylesheet, so ANY author-level `display` rule on the element
   outranks it and the element renders anyway — silently, with no
   error. Two things in this system depend on `hidden` actually
   hiding:

     - Engine state-visibility tokens. Every `state_*_hidden` marker
       resolves to the bare attribute (`state_creds_hidden`,
       `state_history_hidden`, `pair_steps_hidden`, and the rest).
       Page Token Registry §4.2 and §4.6 each record this as a hard
       page-contract dependency and note it should be promoted to a
       frame-level rule rather than rediscovered per page. This is
       that promotion.

     - pv_closeWindow() in pvi-body-scripts.js, which reveals a
       .pv-close-fallback element that ships `hidden`.

   !important is load-bearing: this file loads BEFORE the per-page
   <<stylesheet>>, so without it a later page rule wins. Pages must
   NOT re-declare `[hidden]` — and a page that needs an element
   hidden by CSS rather than by engine state should use its own
   class, not fight this rule.
   ---------------------------------------------------------------- */
[hidden] {
    display: none !important;
}


/* ----------------------------------------------------------------
   9. Responsive — tablet and below
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .platform-name {
        font-size: 2rem;
    }
    .footer .text-muted {
        font-size: .8rem;
    }
    /* Stack footer entries vertically, hide pipe separators */
    .footer-line {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .35rem;
    }
    .footer-sep {
        display: none;
    }
    /* Stack the action row full-width so a pair of buttons is tappable */
    .save-section {
        flex-direction: column;
    }
    .save-section > .save-btn {
        width: 100%;
    }
}