/* =============================================================================
   GLOBAL DEFAULTS

   Root element settings that cascade to the entire page: font stack, base
   font size, line height, touch behavior, overscroll handling, and scrollbar
   appearance.
   ============================================================================= */

html {
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/*@media (max-width: 640px) {
    html {
        font-size: 15px;
    }
}*/

body {
    /*font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, 'Helvetica Neue', sans-serif;*/
    font-family: system-ui, sans-serif;
    line-height: 1.61803398875;
    color: var(--text-color);
    background-color: var(--surface-0);
}

/* AdSense responsive ad units (data-ad-format="auto", with
   data-full-width-responsive defaulting to true) size themselves to the
   viewport width on mobile rather than to the slot container they sit
   in — by design, so ads can render edge-to-edge regardless of any
   surrounding padding. Inside a padded container (.contentbox,
   .profile-grid, etc.) that produces a small horizontal overflow
   whenever the slot is narrower than the viewport, which is essentially
   always. overflow-x: hidden on body absorbs it cleanly; the ad iframe
   itself is untouched and renders normally. Mobile-only because the
   viewport-width sizing behaviour only kicks in at narrow widths. */
@media (max-width: 640px) {
    html, body {
        overflow-x: hidden;
    }
}

input, textarea, select, button {
    font-family: inherit;
    font-size: inherit;
}

    /* Normalize <button> padding to Chrome's UA default (1px 6px).

   Why this exists:
     The major browsers do NOT agree on default <button> padding. As of writing:
       - Chrome / Edge / Chromium: 1px 6px
       - Firefox:                  0 8px (plus a ::-moz-focus-inner of its own)
       - Safari / WebKit:          2px 6px 3px (asymmetric top/bottom)

     Development for this site happens in Chrome, so every raw <button> in
     the codebase has been visually validated against Chrome's defaults.
     Without this rule, Firefox users see wider buttons, Safari users see
     asymmetric vertical padding, and we'd never notice unless someone
     complained or we cross-browser-tested every page.

     Pinning all browsers to Chrome's exact UA padding means "what looks
     right in dev looks the same everywhere," with zero visual change on
     Chrome itself.

     Buttons with their own padding via a CSS class (.bttnf, etc.) are
     unaffected — class selectors beat the element selector below.

     Lives in site.css (not normalize.css) so normalize.css stays
     upstream-clean and upgradable. */
    button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"] {
        padding: 1px 6px;
    }

        /* Reset Firefox's ::-moz-focus-inner pseudo-element on buttons.

   Why this exists:
     Firefox renders a ::-moz-focus-inner pseudo INSIDE every <button> and
     button-type <input>, with its own `padding: 0 2px` and `border: 1px dotted`.
     That inner padding contributes to the button's content-box even when
     the button is NOT focused, making Firefox buttons render ~4px wider
     than Chrome/Safari buttons (2px on each side) — independent of, and on
     top of, the outer-padding normalization above.

     For text-only buttons this is invisible. For icon-only buttons (e.g.,
     the Accept/Reject buttons in the call-notification popup) the gap is
     visually obvious and causes subtle cross-browser layout shifts at the
     pixel-perfect level.

   PAIRED RULE — DO NOT DELETE WITHOUT THE :focus-visible RULE BELOW:
     ::-moz-focus-inner is also Firefox's built-in keyboard-focus indicator.
     Resetting it eliminates Firefox's only native focus ring for buttons,
     which is an accessibility regression UNLESS we provide a replacement.
     The :focus-visible rule immediately below is that replacement and MUST
     stay in sync with this one. If you remove one, remove both. */
        button::-moz-focus-inner,
        input[type="button"]::-moz-focus-inner,
        input[type="reset"]::-moz-focus-inner,
        input[type="submit"]::-moz-focus-inner {
            border: 0;
            padding: 0;
        }

        /* Uniform cross-browser keyboard-focus indicator for buttons.

   Why this exists:
     The two rules above (outer padding + ::-moz-focus-inner reset) bring
     button DIMENSIONS into agreement across Chrome / Firefox / Safari, but
     the focus-inner reset also removes Firefox's native keyboard-focus
     visibility. This rule provides a single uniform replacement for ALL
     browsers so keyboard users see consistent focus feedback everywhere.

   Why :focus-visible and not :focus:
     :focus-visible only matches when the browser believes the user is
     navigating with the keyboard — NOT when they click with a mouse.
     This matches modern UA defaults: clicking a button shouldn't leave a
     visible ring behind. Using :focus would re-introduce the unwanted
     "ring after a click" effect.

   Why outline (not border / box-shadow):
     outline doesn't affect layout — it paints on top of surrounding pixels
     without nudging adjacent content. Borders shift element dimensions;
     box-shadow can be clipped by overflow:hidden ancestors. outline is
     the only choice that's purely visual.

   Why outline-offset: 2px:
     Pushes the ring slightly outside the button edge, which keeps rounded
     corners (border-radius) looking clean and prevents the ring from
     overlapping any border the button has. Also creates a small breathing
     gap so the ring reads as "around" the element rather than "on" it.

   Color (--focus-color) — see variables.css:
     Inherits from --blue, so it adapts per theme: deeper blue in light
     mode, brighter sky blue in dark mode, each tuned for contrast against
     the active surface (both > 3:1 per WCAG 2.4.11). */
        button:focus-visible,
        input[type="button"]:focus-visible,
        input[type="reset"]:focus-visible,
        input[type="submit"]:focus-visible {
            outline: 2px solid var(--focus-color);
            outline-offset: 2px;
        }

/* Prevent the "rubber-band" bounce / pull-to-refresh on iOS Safari.
   Scoped to WebKit only because applying overscroll-behavior: none universally
   causes scroll-freeze on Android Chrome. The @supports test uses
   -webkit-touch-callout, a property only Safari recognizes. */
@supports (-webkit-touch-callout: none) {
    * {
        overscroll-behavior: none;
    }
}

/* Custom thin scrollbars on desktop. On mobile (<=768px) browsers use native
   overlay scrollbars which look fine and shouldn't be overridden. */
@media (min-width: 769px) {
    /* WebKit / Blink (Chrome, Safari, Edge) */
    ::-webkit-scrollbar {
        background-color: #f1f3f4; /* track: surface-1 */
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-button {
        width: 0;
        height: 0;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #C1C2C3; /* thumb: surface-1 - 20% */
        min-height: 48px;
        min-width: 48px;
    }

        ::-webkit-scrollbar-thumb:hover {
            background-color: #A9AAAB; /* thumb hover: surface-1 - 30% */
        }

    /* Standard scrollbar properties (Chrome 121+, Firefox 64+, Safari 26.2+).
       Applied via * because scrollbar-width/scrollbar-color are NOT inherited —
       html/body alone would not affect scrollable child elements. */
    * {
        scrollbar-width: thin !important;
        scrollbar-color: #C1C2C3 #f1f3f4; /* thumb track */
    }
}

/* =============================================================================
   TYPOGRAPHY

   Base styles for links, headings, paragraphs, lists, and horizontal rules.
   Heading weight order matters: h1-h3 get font-weight: 300 first, then h3
   overrides to 600 via the cascade.
   ============================================================================= */

a {
    color: var(--text-color);
    text-decoration: none;
}

    a:visited {
        color: var(--text-color);
    }

    a:hover {
        text-decoration: none;
    }

h1,
h2,
h3,
p {
    line-height: 1.61803398875;
    overflow-wrap: break-word;
}

/* Light weight for large headings */
h1,
h2,
h3 {
    font-weight: 300;
}

/* .ash1 = "as h1" — lets non-heading elements mimic h1 sizing */
h1,
.ash1 {
    font-size: 2em;
    margin: 0;
}

h2 {
    margin: 2em 0 0 0;
    font-size: 1.5em;
}

/* Overrides the font-weight: 300 set above */
h3 {
    margin: 1em 0 0 0;
    font-size: 1.2em;
    font-weight: 600;
}

h4 {
    margin: 2em 0 0 0;
    font-size: 1em;
    font-weight: 600;
    text-transform: uppercase;
}

ul {
    list-style-type: square;
}

ol {
    margin: 0;
}

li {
    margin-bottom: 0.5em;
}

hr {
    height: 0;
    border: 0;
    border-top: 1px solid var(--border-color-faint);
    margin: 2em 0;
}

.hr-strong {
    border-top-color: var(--border-color);
}

/* =============================================================================
   IMAGES
   ============================================================================= */

img {
    vertical-align: top;
    border: 0;
}

/* =============================================================================
   FORMS

   Base styling for text inputs, selects, textareas, and file inputs.
   Focus states must come after base styles for the border override to work.
   ============================================================================= */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
    box-sizing: border-box;
    max-width: 100%;
    padding: 12px;
    border: solid 1px var(--border-color);
    background-color: var(--surface-1);
    color: var(--text-color);
    border-radius: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}

select {
    background-color: var(--surface-0);
}

    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="email"]:focus,
    input[type="number"]:focus,
    input[type="search"]:focus,
    input[type="tel"]:focus,
    input[type="url"]:focus,
    select:focus,
    textarea:focus {
        border: solid 1px var(--blue-bg);
        box-shadow: var(--shadow-blur-medium);
    }

textarea {
    resize: none;
}

    textarea::placeholder {
        color: var(--text-muted);
    }

/* Default width for text-like inputs */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"] {
    width: 200px;
}

/* And selects - adjust to the width of content by default */
select {
    width: auto;
}

/* Styles for the character counter on textareas with maxlength.
   The HTML elements are created by cnutil.js InitAutoResizeTextAreas() —
   it wraps the textarea in .textareawrapper and appends a .charactersleft
   badge that shows "123 / 4000" near the bottom-right when approaching
   the character limit. */
.textareawrapper {
    position: relative;
    padding: 0;
    margin: 0;
}

    .textareawrapper .charactersleft {
        position: absolute;
        z-index: 1;
        right: 0;
        bottom: -12px;
        font-size: 9px;
        line-height: 9px;
        padding: 1px 3px;
        background-color: var(--red-bg);
        color: #fff;
        border-radius: 4px;
        font-weight: normal;
    }

/* =============================================================================
   GRID

   Float-based row/column grid. Columns collapse to 100% width on mobile
   (<=640px) unless the -no-collapse suffix is used.

   .row / .row-compact — clearfixed row containers (compact = tighter spacing)
   .col-N-of-M         — fractional width columns
   .col-40percent/60percent — percentage-based columns

   Mobile overscan helpers let elements break out of the .contentbox padding
   to go edge-to-edge on small screens.
   ============================================================================= */

.container .row:last-child {
    margin-bottom: 0;
}

.row {
    margin-bottom: 2em;
}

.row-compact {
    margin-bottom: 10px;
}

    .row > div, .row-compact > div {
        float: left;
        padding-right: 30px;
        box-sizing: border-box;
    }

@media (max-width: 959px) {
    .row > div, .row-compact > div {
        padding-right: 10px;
    }
}

.row-compact > div {
    padding-right: 10px;
    line-height: 0;
}

    .row > div:last-child, .row-compact > div:last-child {
        padding-right: 0;
    }

/* Clearfix for float-based rows */
.row:before, .row:after, .row-compact:before, .row-compact:after {
    content: "";
    display: table;
}

.row:after, .row-compact:after {
    clear: both;
}

.row, .row-compact {
    zoom: 1;
}

/* --- Column widths --- */

.col-1-of-1 {
    width: 100%;
}

.col-1-of-2, .col-1-of-2-no-collapse {
    width: 50%;
}

.col-2-of-2 {
    width: 100%;
}

.col-1-of-3, .col-1-of-3-no-collapse {
    width: 33.3333333333%;
}

.col-2-of-3 {
    width: 66.6666666667%;
}

.col-3-of-3 {
    width: 100%;
}

.col-1-of-4 {
    width: 25%;
}

.col-2-of-4 {
    width: 50%;
}

.col-3-of-4 {
    width: 75%;
}

.col-4-of-4 {
    width: 100%;
}

.col-40percent {
    width: 40%;
}

.col-60percent {
    width: 60%;
}

/* --- Mobile collapse + overscan (<=640px) --- */

@media (max-width: 640px) {
    .row > div {
        padding-right: 0;
    }

    .col-1-of-1 {
        width: 100%;
    }

    .col-1-of-2 {
        width: 100%;
    }

    .col-2-of-2 {
        width: 100%;
    }

    .col-1-of-3 {
        width: 100%;
    }

    .col-2-of-3 {
        width: 100%;
    }

    .col-3-of-3 {
        width: 100%;
    }

    .col-1-of-4 {
        width: 100%;
    }

    .col-2-of-4 {
        width: 100%;
    }

    .col-3-of-4 {
        width: 100%;
    }

    .col-4-of-4 {
        width: 100%;
    }

    .col-40percent {
        width: 100%;
    }

    .col-60percent {
        width: 100%;
    }

    /* Overscan helpers — let elements break out of .contentbox's 10px padding
       to go edge-to-edge on mobile */
    .mobile-fulloverscan {
        width: calc(100% + 20px) !important;
        margin-left: -10px !important;
        border-radius: 0 !important;
    }

    .mobile-halfoverscan {
        width: calc(100% + 10px) !important;
        margin-left: -5px !important;
    }

    .mobile-fulloverscan-top {
        margin-top: -10px !important;
    }
}

/* =============================================================================
   RESPONSIVE VISIBILITY

   Show/hide elements based on viewport width. "Mobile" = <=640px.
   ============================================================================= */

.only-mobile {
    display: none;
}

.only-mobile-inline {
    display: none;
}

.only-mobile-table-row {
    display: none !important;
}

.only-desktop {
    display: block;
}

.only-desktop-inline {
    display: inline;
}

@media (max-width: 640px) {
    .only-mobile {
        display: block;
    }

    .only-mobile-inline {
        display: inline;
    }

    .only-mobile-table-row {
        display: table-row !important;
    }

    .only-desktop {
        display: none;
    }

    .only-desktop-inline {
        display: none;
    }
}

/* =============================================================================
   UTILITY: DISPLAY & INTERACTION
   ============================================================================= */

.hidden {
    display: none;
}

.pointer {
    cursor: pointer;
}

.pointer-help {
    cursor: help;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/*
 * Disable text selection.
 *
 * Both prefixed and unprefixed versions are required:
 *   -webkit-user-select: none  — iOS Safari ignores the unprefixed form for
 *                                long-press text selection suppression (verified
 *                                April 2026). Without it, Safari shows the native
 *                                text selection magnifying glass on long press.
 *   user-select: none          — Standard property for all other browsers.
 *
 * -webkit-touch-callout is intentionally NOT included here. It suppresses
 * Safari's long-press callout popup (Copy / Look Up / Share), which is only
 * appropriate on elements that replace the native long-press with a custom
 * menu (e.g., chat bubbles in CodeNova.Chat.css). For general-purpose use,
 * the native callout should remain available.
 */
.text-noselect {
    -webkit-user-select: none;
    user-select: none;
}

.blinking {
    animation: blinker 1.8s step-start infinite;
}

@keyframes blinker {
    50% {
        visibility: hidden;
    }
}

.emoji {
    vertical-align: middle;
}

/* =============================================================================
   UTILITY: TEXT

   Text alignment, decoration, spacing, wrapping, colors, sizes, weight,
   font families, and transforms.
   ============================================================================= */

/* --- Alignment --- */

.text-left {
    text-align: left !important;
}

.text-left-block {
    text-align: left !important;
    display: inline-block !important;
}

.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

.text-justify {
    text-align: justify !important;
}

.text-top {
    vertical-align: top !important;
}

.text-middle {
    vertical-align: middle !important;
}

/* --- Decoration --- */

.text-underline {
    text-decoration: underline !important;
}

.text-underline-on-hover:hover {
    text-decoration: underline !important;
}

.text-no-underline-on-hover:hover {
    text-decoration: none !important;
}

/* --- Spacing (inline right-side gaps between elements) --- */

.text-space {
    padding-right: 0.25em;
}

.text-space-2x {
    padding-right: 0.5em;
}

.text-space-3x {
    padding-right: 0.75em;
}

.text-space-4x {
    padding-right: 1em;
}

.text-nowrap {
    white-space: nowrap;
}

/* --- Colors --- */

.text-red, .text-important, .text-warning, .text-error {
    color: var(--red) !important;
}

.bg-red {
    background-color: var(--red-bg) !important;
    color: #fff;
}

.icon-red {
    color: var(--icon-red) !important;
}

.text-green, .text-calm, .text-ok, .text-hashtag {
    color: var(--green) !important;
}

.bg-green {
    background-color: var(--green-bg) !important;
    color: #fff;
}

.icon-green {
    color: var(--icon-green) !important;
}

.text-blue {
    color: var(--blue) !important;
}

.bg-blue {
    background-color: var(--blue-bg) !important;
    color: #fff;
}

.icon-blue {
    color: var(--icon-blue) !important;
}

.text-yellow {
    color: yellow !important;
}

.text-gold {
    color: gold !important;
}

.text-orange {
    color: #ec6905 !important;
}

.text-sandybrown {
    color: sandybrown !important;
}

.text-brown {
    color: brown !important;
}

.text-white {
    color: #fff !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-faint {
    color: var(--text-faint) !important;
}

.text-color-youtube {
    color: #e62117 !important;
}

.text-android {
    color: #78C257;
}

.text-windows {
    color: #00A4EF;
}

.text-linux {
    color: #FF9015;
}

/* --- Size --- */

.text-small {
    font-size: 0.8em !important;
}

.text-lg {
    font-size: 1.3333333333em;
}

.text-2x {
    font-size: 2em;
}

.text-3x {
    font-size: 3em;
}

.text-after-badgesize::after {
    font-size: 1.5em;
}

/* --- Weight, shadow, stroke, font families --- */

.text-bold {
    font-weight: bold !important;
}

.text-shadow {
    text-shadow: 1px 1px #000;
}

.text-stroke {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000;
}

.text-handwrite {
    font-family: serif;
    font-style: italic;
}

.text-mono {
    font-family: monospace !important;
}

.text-marker {
    background-color: yellow;
    color: var(--text-color-dark) !important;
    padding: 0.15em 0.5em;
    display: inline-block;
    border-radius: 4px;
}

/* --- Transform --- */

.text-rotate-90, .fa-thumb-tack.unset {
    transform: rotate(90deg);
}

/* =============================================================================
   UTILITY: SPACING

   Shorthand margin (m) and padding (p) classes.
   Suffixes: r=right, l=left, t=top, b=bottom, s=small (5px), 2x=double (20px).
   Base unit = 10px.
   ============================================================================= */

/* --- Margin --- */

.m {
    margin: 10px !important;
}

.m2x {
    margin: 20px !important;
}

.ms {
    margin: 5px !important;
}

.mr0 {
    margin-right: 0 !important;
}

.mr {
    margin-right: 10px !important;
}

.mr2x {
    margin-right: 20px !important;
}

.mrs {
    margin-right: 5px !important;
}

.ml {
    margin-left: 10px !important;
}

.ml2x {
    margin-left: 20px !important;
}

.mls {
    margin-left: 5px !important;
}

.mt {
    margin-top: 10px !important;
}

.mt2x {
    margin-top: 20px !important;
}

.mts {
    margin-top: 5px !important;
}

.mb {
    margin-bottom: 10px !important;
}

.mb2x {
    margin-bottom: 20px !important;
}

.mbs {
    margin-bottom: 5px !important;
}

/* --- Padding --- */

.p {
    padding: 10px !important;
}

.p2x {
    padding: 20px !important;
}

.ps {
    padding: 5px !important;
}

.pr {
    padding-right: 10px !important;
}

.pr2x {
    padding-right: 20px !important;
}

.prs {
    padding-right: 5px !important;
}

.pl {
    padding-left: 10px !important;
}

.pl2x {
    padding-left: 20px !important;
}

.pls {
    padding-left: 5px !important;
}

.pt {
    padding-top: 10px !important;
}

.pt2x {
    padding-top: 20px !important;
}

.pts {
    padding-top: 5px !important;
}

.pb {
    padding-bottom: 10px !important;
}

.pb2x {
    padding-bottom: 20px !important;
}

.pbs {
    padding-bottom: 5px !important;
}

/* =============================================================================
   UTILITY: FLOAT, BORDERS & BACKGROUNDS
   ============================================================================= */

.left {
    float: left !important;
}

.right {
    float: right !important;
}

.border {
    border: 1px dotted black;
}

.surface-0 {
    background-color: var(--surface-0);
}

.surface-1 {
    background-color: var(--surface-1);
}

.surface-2 {
    background-color: var(--surface-2);
}

.fill-chrome {
    background-color: var(--fill-chrome);
}

/* =============================================================================
   DARK THEME OVERRIDES

   Activated by data-theme="dark" on the <html> element. Must be last in the
   file so these rules win when specificity is equal.
   ============================================================================= */



/* Dark scrollbar: surface-1 +20% thumb on surface-1 track, +30% on hover.
   Dual selectors needed because data-theme="dark" lives on <html> — the page
   scrollbar belongs to <html> itself, so [data-theme="dark"] ::-webkit-scrollbar
   (descendant combinator) won't match it.  html[data-theme="dark"] targets
   <html>'s own scrollbar; the second selector covers inner scrollable elements. */
@media (min-width: 769px) {
    html[data-theme="dark"]::-webkit-scrollbar,
    [data-theme="dark"] ::-webkit-scrollbar {
        background-color: #1C1C1E; /* track: surface-1 */
    }

    html[data-theme="dark"]::-webkit-scrollbar-thumb,
    [data-theme="dark"] ::-webkit-scrollbar-thumb {
        background-color: #49494B; /* thumb: surface-1 + 20% white */
    }

        html[data-theme="dark"]::-webkit-scrollbar-thumb:hover,
        [data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
            background-color: #606062; /* thumb hover: surface-1 + 30% white */
        }

    html[data-theme="dark"],
    [data-theme="dark"] * {
        scrollbar-color: #49494B #1C1C1E; /* thumb track */
    }
}

[data-theme="dark"] .text-marker {
    color: #000;
}