/* AUDIT-CHECKLIST — Cloud Hardening Guide v1.4 (AUDIT-01)
   Skeuomorphic 4-state per-control toggle UI.
   DS-05 component library +7 classes (lock 35 → 42).
   Decision log: .planning/STATE.md entry dated 2026-05-27 (Phase 24 Plan 24-03).

   Class roster:
     .audit-toggle             — flex-row container appended to .control-box
     .audit-toggle-btn         — base beveled button (shared baseline)
     .audit-toggle-btn--pass   — green state modifier (active only)
     .audit-toggle-btn--fail   — red state modifier (active only)
     .audit-toggle-btn--na     — amber state modifier (active only)
     .audit-toggle-btn--clear  — neutral reset button (no active variant)
     .is-active                — pressed-in utility marker

   Idiom: mirrors css/components.css .btn / .copy-btn patterns —
     - linear-gradient (light-top → dark-bottom) with vendor prefixes
     - inset 0 1px 0 rgba(255,255,255,*) highlight + outer 1px shadow
     - text-shadow 0 1px 0 rgba(255,255,255,*) on light buttons
     - 1px solid border + 3px radius
   NO CSS custom properties; NO flat design; NO :focus-visible ring.
   Standalone file (no @import); loaded by per-page <link> tag (Plan 24-04).
*/

/* -------------------------------------------------------------------------
   .audit-toggle — flex-row container, subtle inset panel feel
   ------------------------------------------------------------------------- */
.audit-toggle {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    gap: 6px;
    margin: 8px 0 12px 0;
    padding: 6px 8px;
    background: #ececf0;
    border: 1px solid #c8cdd6;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.9);
       -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.9);
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.9);
}

/* -------------------------------------------------------------------------
   .audit-toggle-btn — base beveled button (light gradient, neutral baseline)
   ------------------------------------------------------------------------- */
.audit-toggle-btn {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid #999999;
    border-radius: 3px;
    background-color: #dddddd;
    background-image: -webkit-linear-gradient(top, #f4f4f4 0%, #dddddd 50%, #d4d9e0 51%, #c8cdd6 100%);
    background-image:    -moz-linear-gradient(top, #f4f4f4 0%, #dddddd 50%, #d4d9e0 51%, #c8cdd6 100%);
    background-image:         linear-gradient(to bottom, #f4f4f4 0%, #dddddd 50%, #d4d9e0 51%, #c8cdd6 100%);
    color: #333333;
    font: bold 12px/1 'Open Sans', sans-serif;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    cursor: pointer;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.15);
       -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.15);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.15);
}

.audit-toggle-btn:hover {
    background-color: #f9f9f9;
    background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f4f4f4 50%, #dddddd 51%, #d4d9e0 100%);
    background-image:    -moz-linear-gradient(top, #f9f9f9 0%, #f4f4f4 50%, #dddddd 51%, #d4d9e0 100%);
    background-image:         linear-gradient(to bottom, #f9f9f9 0%, #f4f4f4 50%, #dddddd 51%, #d4d9e0 100%);
}

/* -------------------------------------------------------------------------
   .is-active — pressed-in utility marker (DS-05 class #42)
   Baseline depressed look — modifier rules layer hue on top.
   ------------------------------------------------------------------------- */
.audit-toggle-btn.is-active {
    color: #111111;
    background-image: -webkit-linear-gradient(top, #c8cdd6 0%, #d4d9e0 100%);
    background-image:    -moz-linear-gradient(top, #c8cdd6 0%, #d4d9e0 100%);
    background-image:         linear-gradient(to bottom, #c8cdd6 0%, #d4d9e0 100%);
    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.20);
       -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.20);
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.20);
}

/* -------------------------------------------------------------------------
   State-modifier active rules — hue only when combined with .is-active so
   the unselected row stays a neutral toolbar (DS-05 +3 modifier classes).
   Palette pulled from existing components.css severity tags / btn-primary.
   ------------------------------------------------------------------------- */
.audit-toggle-btn--pass.is-active {
    color: #ffffff;
    border-color: #4cae4c;
    background-color: #5cb85c;
    background-image: -webkit-linear-gradient(top, #5cb85c 0%, #4cae4c 100%);
    background-image:    -moz-linear-gradient(top, #5cb85c 0%, #4cae4c 100%);
    background-image:         linear-gradient(to bottom, #5cb85c 0%, #4cae4c 100%);
    text-shadow: 0 -1px 0 rgba(0,0,0,0.30);
    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
       -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
}

.audit-toggle-btn--fail.is-active {
    color: #ffffff;
    border-color: #c9302c;
    background-color: #d9534f;
    background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
    background-image:    -moz-linear-gradient(top, #d9534f 0%, #c9302c 100%);
    background-image:         linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
    text-shadow: 0 -1px 0 rgba(0,0,0,0.30);
    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
       -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
}

.audit-toggle-btn--na.is-active {
    color: #ffffff;
    border-color: #ec971f;
    background-color: #f0ad4e;
    background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
    background-image:    -moz-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
    background-image:         linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
    text-shadow: 0 -1px 0 rgba(0,0,0,0.30);
    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
       -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
}

/* .audit-toggle-btn--clear — neutral reset button; no .is-active variant
   (clicking it removes all state rather than recording one). Baseline only. */
.audit-toggle-btn--clear {
    color: #666666;
    font-style: italic;
}

/* -------------------------------------------------------------------------
   .audit-controls — modifier on .audit-toggle for the page-level reset strip
   (per-page reset + global reset buttons). Right-aligned and slightly more
   bottom margin; hidden in print. DS-05 +1 additive class (lock 42 → 43).
   ------------------------------------------------------------------------- */
.audit-controls {
    margin: 12px 0 18px 0;
    -webkit-box-pack: end;
       -moz-box-pack: end;
        -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
            justify-content: flex-end;
}

/* -------------------------------------------------------------------------
   Print stylesheet — flatten to plain bracketed glyphs, drop chrome.
   Hide the Clear button entirely on paper (no meaning in static output).
   ------------------------------------------------------------------------- */
@media print {
    .audit-controls { display: none; }
    .audit-toggle {
        background: none;
        border: none;
        padding: 0;
        margin: 4px 0 8px 0;
        -webkit-box-shadow: none;
           -moz-box-shadow: none;
                box-shadow: none;
    }
    .audit-toggle-btn {
        background: none;
        background-image: none;
        border: 1px solid #666666;
        color: #333333;
        text-shadow: none;
        font-weight: normal;
        -webkit-box-shadow: none;
           -moz-box-shadow: none;
                box-shadow: none;
    }
    .audit-toggle-btn.is-active {
        background: #dddddd;
        background-image: none;
        color: #000000;
        font-weight: bold;
        -webkit-box-shadow: none;
           -moz-box-shadow: none;
                box-shadow: none;
    }
    .audit-toggle-btn--clear { display: none; }
}

/* =========================================================================
   AUDIT-SUMMARY PANEL — Phase 25 Plan 03 (PANEL-04 period-authentic skeuomorphic)
   -------------------------------------------------------------------------
   DS-05 component-library additions (ledger handoff: Plan 25-04 STATE.md entry):
     .audit-panel                       — fixed top-right floating panel root
     .audit-panel__header               — gradient title bar (drag-handle look)
     .audit-panel__title                — uppercase bold caption
     .audit-panel__toggle-btn           — 22x22 minimize/restore square
     .audit-panel__counts               — counts list (ul reset)
     .audit-panel__count                — single count row (flex)
     .audit-panel__count-label          — small uppercase grey label
     .audit-panel__count-value          — large bold numeric readout
     .audit-panel__count--pass          — green numeric modifier
     .audit-panel__count--fail          — red numeric modifier
     .audit-panel__count--na            — amber numeric modifier
     .audit-panel__count--unmarked      — neutral grey numeric modifier
     .audit-panel--minimized            — collapsed-to-badge variant
   Recipe lineage: mirrors .audit-toggle / .audit-toggle-btn skeuomorphic idiom
   (4-stop linear-gradient + beveled border + inset highlight + outer drop
   shadow + 1px palette from Plan 24-03). No CSS custom properties; no flat
   design; no :focus-visible; no transitions (early-2010s period authentic).
   ========================================================================= */

.audit-panel {
    position: fixed;
    top: 80px;
    right: 16px;
    width: 240px;
    z-index: 100;
    background: #ececf0;
    border: 1px solid #c8cdd6;
    border-radius: 4px;
    font-family: 'Open Sans', sans-serif;
    color: #333333;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 6px rgba(0,0,0,0.20);
       -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 6px rgba(0,0,0,0.20);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 6px rgba(0,0,0,0.20);
}

.audit-panel__header {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
            justify-content: space-between;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
    -webkit-align-items: center;
            align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid #999999;
    background-color: #dddddd;
    background-image: -webkit-linear-gradient(top, #f4f4f4 0%, #dddddd 50%, #d4d9e0 51%, #c8cdd6 100%);
    background-image:    -moz-linear-gradient(top, #f4f4f4 0%, #dddddd 50%, #d4d9e0 51%, #c8cdd6 100%);
    background-image:         linear-gradient(to bottom, #f4f4f4 0%, #dddddd 50%, #d4d9e0 51%, #c8cdd6 100%);
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.audit-panel__title {
    font: bold 12px/1 'Open Sans', sans-serif;
    color: #333333;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.audit-panel__toggle-btn {
    display: inline-block;
    width: 22px;
    height: 22px;
    padding: 0;
    line-height: 20px;
    text-align: center;
    border: 1px solid #999999;
    border-radius: 3px;
    background-color: #dddddd;
    background-image: -webkit-linear-gradient(top, #f4f4f4 0%, #dddddd 50%, #d4d9e0 51%, #c8cdd6 100%);
    background-image:    -moz-linear-gradient(top, #f4f4f4 0%, #dddddd 50%, #d4d9e0 51%, #c8cdd6 100%);
    background-image:         linear-gradient(to bottom, #f4f4f4 0%, #dddddd 50%, #d4d9e0 51%, #c8cdd6 100%);
    color: #333333;
    font: bold 14px/1 'Open Sans', sans-serif;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    cursor: pointer;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.15);
       -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.15);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.15);
}

.audit-panel__toggle-btn:hover {
    background-color: #f9f9f9;
    background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f4f4f4 50%, #dddddd 51%, #d4d9e0 100%);
    background-image:    -moz-linear-gradient(top, #f9f9f9 0%, #f4f4f4 50%, #dddddd 51%, #d4d9e0 100%);
    background-image:         linear-gradient(to bottom, #f9f9f9 0%, #f4f4f4 50%, #dddddd 51%, #d4d9e0 100%);
}

.audit-panel__counts {
    margin: 0;
    padding: 8px 10px;
    list-style: none;
}

.audit-panel__count {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
            justify-content: space-between;
    -webkit-box-align: baseline;
       -moz-box-align: baseline;
        -ms-flex-align: baseline;
    -webkit-align-items: baseline;
            align-items: baseline;
    padding: 2px 0;
    margin: 0 0 4px 0;
    font-size: 12px;
}

.audit-panel__count-label {
    font: bold 11px/1.4 'Open Sans', sans-serif;
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.audit-panel__count-value {
    font: bold 18px/1 'Open Sans', sans-serif;
    color: #333333;
}

.audit-panel__count--pass .audit-panel__count-value {
    color: #4cae4c;
}

.audit-panel__count--fail .audit-panel__count-value {
    color: #c9302c;
}

.audit-panel__count--na .audit-panel__count-value {
    color: #ec971f;
}

.audit-panel__count--unmarked .audit-panel__count-value {
    color: #888888;
}

.audit-panel--minimized {
    width: auto;
    min-width: 0;
}

.audit-panel--minimized .audit-panel__header {
    padding: 4px 8px;
}

.audit-panel--minimized .audit-panel__counts {
    display: none;
}

/* ---- .audit-panel__share-btn (Phase 26 SHARE-01) ----------------------
   Skeuomorphic share button — mirrors .audit-panel__toggle-btn recipe.
   4-stop linear-gradient + beveled border + inset highlight + outer shadow.
   Sits between .audit-panel__title and .audit-panel__toggle-btn in the
   panel header (DOM order set by js renderSummaryPanel). Period-authentic:
   no CSS custom properties; no flat focus rings; no transitions. */
.audit-panel__share-btn {
    display: inline-block;
    height: 22px;
    padding: 0 8px;
    margin-right: 6px;
    line-height: 20px;
    font: bold 11px/1 'Open Sans', sans-serif;
    color: #333333;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    border: 1px solid #999999;
    border-radius: 3px;
    background-color: #dddddd;
    background-image: -webkit-linear-gradient(top, #f4f4f4 0%, #dddddd 50%, #d4d9e0 51%, #c8cdd6 100%);
    background-image:    -moz-linear-gradient(top, #f4f4f4 0%, #dddddd 50%, #d4d9e0 51%, #c8cdd6 100%);
    background-image:         linear-gradient(to bottom, #f4f4f4 0%, #dddddd 50%, #d4d9e0 51%, #c8cdd6 100%);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 1px rgba(0,0,0,0.08);
       -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 1px rgba(0,0,0,0.08);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 1px rgba(0,0,0,0.08);
    cursor: pointer;
}
.audit-panel__share-btn:hover {
    background-color: #e8e8ec;
    background-image: -webkit-linear-gradient(top, #ffffff 0%, #e8e8ec 50%, #dde2e8 51%, #d4d9e0 100%);
    background-image:    -moz-linear-gradient(top, #ffffff 0%, #e8e8ec 50%, #dde2e8 51%, #d4d9e0 100%);
    background-image:         linear-gradient(to bottom, #ffffff 0%, #e8e8ec 50%, #dde2e8 51%, #d4d9e0 100%);
}
.audit-panel__share-btn:active {
    background-color: #c8cdd6;
    background-image: -webkit-linear-gradient(top, #c8cdd6 0%, #d4d9e0 50%, #dddddd 51%, #f4f4f4 100%);
    background-image:    -moz-linear-gradient(top, #c8cdd6 0%, #d4d9e0 50%, #dddddd 51%, #f4f4f4 100%);
    background-image:         linear-gradient(to bottom, #c8cdd6 0%, #d4d9e0 50%, #dddddd 51%, #f4f4f4 100%);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
       -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}
.audit-panel__share-btn--copied {
    background-color: #dff0d8;
    background-image: -webkit-linear-gradient(top, #eaf6e1 0%, #dff0d8 50%, #d0e6c2 51%, #c1dcab 100%);
    background-image:    -moz-linear-gradient(top, #eaf6e1 0%, #dff0d8 50%, #d0e6c2 51%, #c1dcab 100%);
    background-image:         linear-gradient(to bottom, #eaf6e1 0%, #dff0d8 50%, #d0e6c2 51%, #c1dcab 100%);
    color: #2d6c1c;
}

/* ---- .audit-panel__export-csv-btn (Phase 27 EXPORT-01) ----------------
   Skeuomorphic export button -- identical recipe to .audit-panel__share-btn.
   Sits between .audit-panel__share-btn and .audit-panel__toggle-btn in the
   panel header (DOM order set by js renderSummaryPanel). */
.audit-panel__export-csv-btn {
    display: inline-block;
    height: 22px;
    padding: 0 8px;
    margin-right: 6px;
    line-height: 20px;
    font: bold 11px/1 'Open Sans', sans-serif;
    color: #333333;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    border: 1px solid #999999;
    border-radius: 3px;
    background-color: #dddddd;
    background-image: -webkit-linear-gradient(top, #f4f4f4 0%, #dddddd 50%, #d4d9e0 51%, #c8cdd6 100%);
    background-image:    -moz-linear-gradient(top, #f4f4f4 0%, #dddddd 50%, #d4d9e0 51%, #c8cdd6 100%);
    background-image:         linear-gradient(to bottom, #f4f4f4 0%, #dddddd 50%, #d4d9e0 51%, #c8cdd6 100%);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 1px rgba(0,0,0,0.08);
       -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 1px rgba(0,0,0,0.08);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 1px rgba(0,0,0,0.08);
    cursor: pointer;
}
.audit-panel__export-csv-btn:hover {
    background-color: #e8e8ec;
    background-image: -webkit-linear-gradient(top, #ffffff 0%, #e8e8ec 50%, #dde2e8 51%, #d4d9e0 100%);
    background-image:    -moz-linear-gradient(top, #ffffff 0%, #e8e8ec 50%, #dde2e8 51%, #d4d9e0 100%);
    background-image:         linear-gradient(to bottom, #ffffff 0%, #e8e8ec 50%, #dde2e8 51%, #d4d9e0 100%);
}
.audit-panel__export-csv-btn:active {
    background-color: #c8cdd6;
    background-image: -webkit-linear-gradient(top, #c8cdd6 0%, #d4d9e0 50%, #dddddd 51%, #f4f4f4 100%);
    background-image:    -moz-linear-gradient(top, #c8cdd6 0%, #d4d9e0 50%, #dddddd 51%, #f4f4f4 100%);
    background-image:         linear-gradient(to bottom, #c8cdd6 0%, #d4d9e0 50%, #dddddd 51%, #f4f4f4 100%);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
       -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}

/* ---- .audit-panel__export-json-btn (Phase 27 EXPORT-02) ---------------
   Identical recipe to export-csv-btn; sits to its right in the panel header. */
.audit-panel__export-json-btn {
    display: inline-block;
    height: 22px;
    padding: 0 8px;
    margin-right: 6px;
    line-height: 20px;
    font: bold 11px/1 'Open Sans', sans-serif;
    color: #333333;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    border: 1px solid #999999;
    border-radius: 3px;
    background-color: #dddddd;
    background-image: -webkit-linear-gradient(top, #f4f4f4 0%, #dddddd 50%, #d4d9e0 51%, #c8cdd6 100%);
    background-image:    -moz-linear-gradient(top, #f4f4f4 0%, #dddddd 50%, #d4d9e0 51%, #c8cdd6 100%);
    background-image:         linear-gradient(to bottom, #f4f4f4 0%, #dddddd 50%, #d4d9e0 51%, #c8cdd6 100%);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 1px rgba(0,0,0,0.08);
       -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 1px rgba(0,0,0,0.08);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 1px rgba(0,0,0,0.08);
    cursor: pointer;
}
.audit-panel__export-json-btn:hover {
    background-color: #e8e8ec;
    background-image: -webkit-linear-gradient(top, #ffffff 0%, #e8e8ec 50%, #dde2e8 51%, #d4d9e0 100%);
    background-image:    -moz-linear-gradient(top, #ffffff 0%, #e8e8ec 50%, #dde2e8 51%, #d4d9e0 100%);
    background-image:         linear-gradient(to bottom, #ffffff 0%, #e8e8ec 50%, #dde2e8 51%, #d4d9e0 100%);
}
.audit-panel__export-json-btn:active {
    background-color: #c8cdd6;
    background-image: -webkit-linear-gradient(top, #c8cdd6 0%, #d4d9e0 50%, #dddddd 51%, #f4f4f4 100%);
    background-image:    -moz-linear-gradient(top, #c8cdd6 0%, #d4d9e0 50%, #dddddd 51%, #f4f4f4 100%);
    background-image:         linear-gradient(to bottom, #c8cdd6 0%, #d4d9e0 50%, #dddddd 51%, #f4f4f4 100%);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
       -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}

@media print {
    .audit-panel { display: none; }
}