/* Shared house style for Policy-Hub\Practice-Directives pages.
   Linked from each policy page instead of duplicating this block inline,
   so future fixes only need to happen once. See Compliance Policy Rewrite
   Project.md for history. Stored alongside DrFrankJForteCss.css so all
   stylesheets live in one central folder. */

.daily-responsibilities {
    padding: 25px;
    background-color: #f9f9f9;
    border-radius: 6px;
}

.workflow-steps {
    background-color: #f0f7ff;
    padding: 25px;
    border-radius: 8px;
    border-left: 5px solid #0056b3;
}

.section {
    margin-bottom: 30px;
}

h2 {
    color: #0056b3;
    border-bottom: 2px solid #ddd;
    padding-bottom: 8px;
}

ul, ol {
    padding-left: 25px;
}

li {
    margin-bottom: 10px;
}

/* Theme override: DrFrankJForteCss.css caps all ul/li/a at max-width: 22.50em,
   which was squeezing these policy lists into a thin, tall column. Scoped to
   .section so it doesn't touch the theme's narrow sidebar nav lists elsewhere. */
.section ul,
.section ol,
.section li {
    max-width: none;
}

/* ==========================================================================
   Practice-Directives redesign (2026-08-26)
   Ported from the card-based look built for the Practice-Milestones pages
   (Appointments-Redline-Policy.aspx / OV-Redline-Dashboard-Policy.aspx),
   moved here from their page-local <style> blocks so every rewritten
   Practice-Directives policy shares one copy instead of duplicating it.
   Pages using this system wrap their content in <div class="wrap"> and use
   the classes below instead of the old .section/.ppPnl/.ppcntnt pattern.
   The old rules above stay in place until every page has been converted.
   ========================================================================== */

:root {
    --surface: #f6f7f8;
    --card: #ffffff;
    --border: #dfe3e6;
    --text-primary: #17202a;
    --text-secondary: #5b6670;
    --text-muted: #8b959e;
    --accent: #1f5f8b;
    --accent-soft: #eaf2f7;
    --green: #1f9d55;
    --green-soft: #e6f6ec;
    --yellow: #b7791f;
    --yellow-fill: #eab308;
    --yellow-soft: #fdf3e0;
    --red: #c0392b;
    --red-soft: #fbe9e7;
    --gray-soft: #eef0f2;
}
/* Defined on :root (not scoped to .wrap) specifically so the Attest footer
   — which sits as a sibling of .wrap, not inside it — can also read these
   variables. Custom properties are otherwise inert, so declaring them here
   doesn't visually affect any page that never references var(--...). */

/* DrFrankJForteCss.css (loaded before this file on every policy page) has a
   legacy @media Screen block that sets `* { color: #3B5998; }`, forces
   `p { color:#000; font-size:10pt; width:38.2em; margin-left:0; }`, pins
   every h1-h6 to a legacy display font and color, and caps `ul, li, a` at
   max-width: 22.50em. Those are direct rules on plain elements, so they win
   over anything this file only sets on an ancestor and expects descendants
   to inherit — inheritance always loses to any directly-matching rule,
   regardless of specificity. This reset neutralizes all of that for the new
   card-based layout before the component rules below apply their own
   (more specific, so still-winning) styling on top. */
.wrap,
.wrap *,
.attest-footer,
.attest-footer * {
    color: inherit;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    text-align: left;
    width: auto;
    max-width: none;
    line-height: inherit;
}

.wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: 24px 32px 48px;
    color: var(--text-primary);
}

.wrap .crumb { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.wrap .crumb b { color: var(--text-secondary); font-weight: 600; }

.wrap h1 { font-size: 22px; margin: 0 0 4px; border-bottom: none; padding-bottom: 0; color: var(--text-primary); }
.wrap .subtitle { font-size: 13.5px; color: var(--text-secondary); margin: 0 0 16px; }

.wrap .meta-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.wrap .meta-chip { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; font-size: 12px; }
.wrap .meta-chip .k { color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; font-size: 10.5px; font-weight: 700; margin-bottom: 2px; }
.wrap .meta-chip .v { color: var(--text-primary); font-weight: 600; font-size: 13px; }

.wrap .card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 20px; overflow: hidden; }
.wrap .card-header { padding: 14px 18px; border-bottom: 1px solid var(--border); }
/* Overrides the shared h2 rule above (color/border-bottom/padding-bottom),
   which was written for the old .section-based pages and would otherwise
   leak an unwanted blue underline onto these card titles. */
.wrap .card-header h2 { font-size: 15.5px; margin: 0; border-bottom: none; padding-bottom: 0; color: var(--text-primary); }
.wrap .card-header .num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; margin-right: 9px; }
.wrap .card-body { padding: 16px 18px 18px; font-size: 13.5px; line-height: 1.6; color: var(--text-primary); }
.wrap .card-body p { margin: 0 0 10px; }
.wrap .card-body p:last-child { margin-bottom: 0; }

.wrap table.elements { width: 100%; border-collapse: collapse; font-size: 13px; }
.wrap table.elements th, .wrap table.elements td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.wrap table.elements th { background: var(--gray-soft); color: var(--text-secondary); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.wrap table.elements tr:last-child td { border-bottom: none; }
.wrap table.elements td.elname { font-weight: 700; white-space: nowrap; }

.wrap .status-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px 3px 7px; border-radius: 999px; }
.wrap .status-pill .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.wrap .status-red { background: var(--red-soft); color: var(--red); }
.wrap .status-red .dot { background: var(--red); }
.wrap .status-yellow { background: var(--yellow-soft); color: var(--yellow); }
.wrap .status-yellow .dot { background: var(--yellow-fill); }
.wrap .status-green { background: var(--green-soft); color: var(--green); }
.wrap .status-green .dot { background: var(--green); }

.wrap .role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.wrap .role-card { background: var(--gray-soft); border-radius: 8px; padding: 14px 16px; }
.wrap .role-card h3 { font-size: 13px; margin: 0 0 8px; color: var(--accent); }
.wrap .role-card ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.55; max-width: none; }
.wrap .role-card li { margin-bottom: 6px; }
.wrap .role-card li:last-child { margin-bottom: 0; }

.wrap .note-box { background: var(--accent-soft); border: 1px solid #cfe0ea; border-radius: 6px; padding: 12px 14px; font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 12px; }
.wrap .note-box b { color: var(--accent); }

/* Same shape as .note-box, red-toned, for a serious warning (e.g. willful
   misconduct language) that should visually stand apart from a routine note. */
.wrap .warn-box { background: var(--red-soft); border: 1px solid #e3b3ac; border-radius: 6px; padding: 12px 14px; font-size: 13px; color: var(--text-primary); line-height: 1.55; margin-bottom: 12px; }
.wrap .warn-box b { color: var(--red); }

.wrap .formula { background: var(--gray-soft); border-radius: 6px; padding: 10px 14px; font-family: Consolas, monospace; font-size: 12.5px; margin: 8px 0; }

.wrap ol.policy-list { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.7; max-width: none; }
.wrap ol.policy-list li { margin-bottom: 10px; }
.wrap ol.policy-list li:last-child { margin-bottom: 0; }
.wrap ol.policy-list b { color: var(--text-primary); }

.wrap footer.rev { font-size: 11.5px; color: var(--text-muted); margin-top: 28px; border-top: 1px solid var(--border); padding-top: 12px; }

/* Attestation footer: styled like a signature line at the end of a contract
   — a rule above a small formal label, centered, generous whitespace,
   sitting after the document rather than beside it. The Attest control
   keeps its own built-in max-width:650px centered styling, so this wrapper
   just supplies the "end of document" framing around it. */
.attest-footer {
    margin: 56px auto 0 auto;
    padding-top: 32px;
    border-top: 2px solid var(--border);
    max-width: 650px;
    text-align: center;
    color: var(--text-secondary);
}
.attest-footer .attest-kicker {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.attest-footer .attest-lead {
    color: var(--text-secondary);
    font-size: 0.92rem;
    margin: 0 0 18px 0;
}