/*
 * odeCommon.css - new shared styles for ODE (10/7/2026).
 * Intended to grow into the replacement for StyleRefresh.css. Load it AFTER StyleRefresh.css so these rules win.
 */

:root {
    --ode-font-ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --ode-text: #1f1f1f;
    --ode-text-secondary: #5f5f5f;
    --ode-border: #c8c8c8;
    --ode-border-strong: #8a8a8a;
    --ode-accent: #2f6fd6;
    --ode-accent-dark: #1f56b0;
    --ode-link: #3a44a8;           /* new-tab links: a little darker than StyleRefresh #4f5bcb */
    --ode-link-icon: #1f5fd6;      /* saturated blue so the icon doesn't read as gray */
    --ode-radius: 8px;
}

/* visually hidden text for screen readers (e.g. "opens in new tab") */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* links that open a new tab (Description, CRISM Product Primer): no underline until hover/focus, darker icon */
a.odeNewTabLink, a.odeNewTabLink:visited { text-decoration: none; color: var(--ode-link); }
a.odeNewTabLink:hover, a.odeNewTabLink:focus { text-decoration: underline; }
/* the icon is inline-block (never underlined); the gap is a margin, not a space, so no underline shows between text and icon */
/* new-tab icon drawn as a 12x12 pixel-grid SVG (crisp edges; the icon font blurred at this size).
   The <i class="fal fa-external-link"> stays in the markup; its font glyph is hidden and the SVG is used as a mask,
   so the color still comes from --ode-link-icon. Lines sit on half-pixel coordinates = exactly one pixel wide. */
a.odeNewTabLink .fa-external-link {
    display: inline-block; width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px;
    background-color: var(--ode-link-icon);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M5 1.5H1.5v9h9V7'/%3E%3Cpath d='M7 .5h4.5V5'/%3E%3Cpath d='M11.5 .5l-6 6' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat 0 0 / 12px 12px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M5 1.5H1.5v9h9V7'/%3E%3Cpath d='M7 .5h4.5V5'/%3E%3Cpath d='M11.5 .5l-6 6' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat 0 0 / 12px 12px;
}
a.odeNewTabLink .fa-external-link::before { content: none; }