/*
 * Reading and accessibility (Plugmind Calm for WHMCS): the same choices as Calm on SupportPal and the Operator and Help
 * Desk apps. Each is a class on <html>, set from this browser's saved choices before the page is drawn (the early script
 * in includes/head.tpl), so nothing flashes; js/reading.js has the panel.
 *
 *   calm-r-scaled + --calm-r-scale   text size
 *   calm-r-font-atkinson / -opendyslexic
 *   calm-r-spacing                   more space between lines
 *   calm-r-contrast                  darker text and borders
 *   calm-r-motion                    no animations or transitions
 *   calm-r-calm                      calmer ticket view (only the newest reply open)
 *
 * The fonts are under the SIL Open Font Licence (fonts/*-OFL.txt).
 */

@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/AtkinsonHyperlegible-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/AtkinsonHyperlegible-Bold.ttf") format("truetype"); font-weight: 600 800; font-style: normal; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("../fonts/OpenDyslexic-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("../fonts/OpenDyslexic-Bold.otf") format("opentype"); font-weight: 600 800; font-style: normal; font-display: swap; }

/* Text size: almost everything is sized in rem, so scaling the root (calm.css, --calm-root) scales the page. */
html.calm-r-scaled:root { font-size: calc(var(--calm-root, 15px) * var(--calm-r-scale, 1)); }

/* Font: everything except icons (Font Awesome; Glyphicons and Pe-icon-7 in WHMCS's staff area) and code. */
html.calm-r-font-atkinson { --calm-r-font: "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif; }
html.calm-r-font-opendyslexic { --calm-r-font: "OpenDyslexic", ui-sans-serif, system-ui, sans-serif; }
html[class*="calm-r-font-"] body,
html[class*="calm-r-font-"] body :where(*):not(i, svg, svg *, code, pre, kbd, samp, .fa, .fas, .far, .fal, .fab, .fad, [class^="fa-"], [class*=" fa-"], .glyphicon, [class*="pe-7s"]) {
    font-family: var(--calm-r-font) !important;
}
html.calm-r-font-opendyslexic body { letter-spacing: .01em; }

/* More space between lines (and a little between letters and words), in running text. */
html.calm-r-spacing body :is(p, li, dd, dt, td, th, blockquote, figcaption, label, .message, .message *, article, article *) {
    line-height: 1.7 !important;
    letter-spacing: .02em;
    word-spacing: .06em;
}
html.calm-r-spacing body :is(h1, h2, h3, h4) { line-height: 1.4 !important; }

/* High contrast: the theme's colours and Bootstrap's greys, darker. */
html.calm-r-contrast {
    --calm-text: #000;
    --calm-muted: #1f2328;
    --calm-border: #6b7280;
    --calm-bg: #ffffff;
}
html.calm-r-contrast body, html.calm-r-contrast .text-muted, html.calm-r-contrast small,
html.calm-r-contrast .posted-by, html.calm-r-contrast .card-sidebar .list-group-item { color: #000 !important; }
html.calm-r-contrast .form-control, html.calm-r-contrast .custom-select, html.calm-r-contrast .card, html.calm-r-contrast .list-group-item { border-color: #6b7280; }
html.calm-r-contrast body :is(p, li, td, article, .message) a { text-decoration: underline; }
html.calm-r-contrast body :focus-visible { outline: 3px solid currentColor !important; outline-offset: 2px; }

/* Reduce motion. */
html.calm-r-motion, html.calm-r-motion *, html.calm-r-motion *::before, html.calm-r-motion *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
}

/* The button that opens the panel, in the header's toolbar beside the basket. */
.calm-reading-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 .5rem;
    border: 1px solid var(--calm-border);
    border-radius: 999px;
    background: var(--calm-surface);
    color: var(--calm-text);
    cursor: pointer;
}
.calm-reading-button:hover { border-color: var(--calm-accent); color: var(--calm-accent-ink); }
.calm-reading-glyph { white-space: nowrap; font-size: 1rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; }

/* The panel. */
.calm-reading {
    position: fixed;
    inset: 0;
    width: min(26rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 1px solid var(--calm-border);
    border-radius: var(--calm-radius);
    background: var(--calm-surface);
    color: var(--calm-text);
    box-shadow: 0 20px 50px rgb(16 24 40 / .25);
}
.calm-reading::backdrop { background: rgb(10 14 20 / .4); }
.calm-reading-inner { display: grid; gap: 1.1rem; padding: 1.25rem 1.35rem 1.35rem; }
.calm-reading-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.calm-reading h2 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.calm-reading-note { margin: .2rem 0 0; color: var(--calm-muted); font-size: .9rem; }
.calm-reading-close { flex: none; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 999px; background: transparent; color: var(--calm-muted); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.calm-reading-close:hover { background: var(--calm-bg); color: var(--calm-text); }
.calm-reading-row { display: grid; gap: .35rem; }
.calm-reading-row > label { display: flex; justify-content: space-between; gap: 1rem; margin: 0; font-weight: 600; }
.calm-reading-row output { color: var(--calm-muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.calm-reading input[type=range] { width: 100%; accent-color: var(--calm-accent); }
.calm-reading-hint { margin: 0; color: var(--calm-muted); font-size: .875rem; line-height: 1.45; }
.calm-reading-switch { display: flex; align-items: flex-start; gap: .75rem; margin: 0; padding: .7rem 0; border-top: 1px solid var(--calm-border); font-weight: normal; cursor: pointer; }
.calm-reading-switch input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--calm-accent); }
.calm-reading-switch strong { display: block; }
.calm-reading-switch small { display: block; margin-top: .1rem; color: var(--calm-muted); font-size: .875rem; line-height: 1.45; }
.calm-reading-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: .75rem; border-top: 1px solid var(--calm-border); }
.calm-reading button:focus-visible, .calm-reading select:focus-visible, .calm-reading input:focus-visible { outline: 2px solid var(--calm-accent-ink); outline-offset: 2px; }

/* Calmer ticket view: earlier replies close to their first lines, with a button to open each one. */
html.calm-r-calm .calm-r-closed .message { max-height: 6.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
html.calm-r-calm .calm-r-closed .attachments { display: none; }
.calm-r-open { margin: .25rem 1rem .75rem; padding: 0; border: 0; background: none; color: var(--calm-accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
html:not(.calm-r-calm) .calm-r-open, .ticket-reply:not(.calm-r-closed) .calm-r-open { display: none; }