/* 
* --lightaccent 
    * YES: light, dark, dark(mobile)
    * NO: red, parchment
* --darkaccent
    * YES: dark(mobile)
    * NO: light, dark(desktop), parchment, red
* --text 
    * YES: light, dark, parchment(mobile), red(mobile)
    * NO: parchment(desktop), red(desktop)
* --darktext
    * YES: light, dark
    * NO: parchment, red
* --button-color
    * YES: light, dark
    * NO: parchment, red
* --sidebar
    * YES: light, dark, red(mobile)
    * NO: parchment, red(desktop)
* --sidebaraccent
    * YES: root(mobile), light, light(mobile), dark, dark(mobile), red(mobile)
    * NO: parchment, red(desktop)
* --chat-input-bg
    * YES: light, parchment, parchment(mobile), dark, red
    * NO:
* --chat-input-text
    * YES: light, parchment
    * NO: dark, red
* --minicalendarbackground
    * YES: parchment(mobile)
    * NO: light, dark, parchment(desktop), red
* --searchbackground, —loginButton, —loginBackground
    * YES: dark
    * NO: light, parchment, red
*/

:root {
    --bone: #fff2e7;
    --cream: #ffe6d0;
    --parchment: #FEBA7D;
    --tan: #D2B48C;
    --gold: #FEBA7D;
    --darkgreen: #0857265c;
    --orange: #F28C28;
    --darkred: #6b2c1d;
    --quillred: #DE3F3F;
    --brown: #812A18;
    --darkbrown: #3f0808;
    --red: #DE3F3F;
    --green: rgb(163 255 202);
    --yellow: #92400e;
    --blue: #1d4ed8;
    --notification-badge-color: var(--quillred);
    --chat-input-focus-border: color-mix(in srgb, var(--gold) 60%, var(--divider));
    --chat-input-focus-ring: color-mix(in srgb, var(--gold) 35%, transparent);

    /* The look of a link inside user-authored text. Custom properties rather
       than a single rule because the announcements/files/widget cards are Lit
       components with shadow roots, which a shared.css selector cannot cross —
       properties inherit through the boundary, so this stays the one source of
       truth for both worlds (#111). */
    --linked-text-color: inherit;
    --linked-text-decoration: underline;
    --linked-text-hover-opacity: 0.8;
}

/* Holding the mouse button means the member is selecting text, not pressing a
   link, so the hover dim has to stand down for the length of the drag —
   otherwise dragging a selection across a link snaps it 0.8/1 at every boundary
   crossing, which reads as a flicker (#132 review). Gating the *variable*
   rather than the rule is what makes this reach the per-app copies of the link
   style and AnnouncementCard's shadow DOM, where :root is not selectable but
   custom properties still inherit through the boundary. */
:root:active {
    --linked-text-hover-opacity: 1;
}

@media (max-width: 768px) {
:root {
    --sidebottombars: rgb(221, 39, 39);
    --sidebaraccent: rgb(181, 31, 31);
}
}

:root:not([theme]), :root[theme=light] {
    --main: #ffe6d0;
    --app: var(--parchment);
    --lightaccent: rgb(37, 37, 37);
    --button-accent: #ffc88db1;
    --accent: #490f0f;
    --text: #000000;
    --darktext: #62473E;
    --headertext: #000000;
    --accent2: rgb(57, 26, 0);
    --divider: rgb(223, 201, 169);
    --lightDivider: rgb(236, 215, 183);
    --chat-input-focus-border: var(--chat-sent-bg);
    --chat-input-focus-ring: color-mix(in srgb, var(--chat-sent-bg) 35%, transparent);

    --window: var(--sidebottombars);
    --window-border: white;
    --window-border-2: rgb(0 0 0 / 22%);
    --apppopup: rgb(221, 39, 39);
    --sidebottombars: #ffe2c8;
    --button-color: var(--quillred);
    --menu-border: var(--accent);

    --desktop-item-text: var(--accent);
    --desktop-item-border: var(--window-border);
    --desktop-item-background: #fff0e030;

    --red: #DE3F3F;
    --green: rgb(20 118 62);
    --yellow: #92400e;
    --blue: #1d4ed8;

    --sidebar: rgb(221, 39, 39);
    --sidebaraccent: rgb(181, 31, 31);

    --announcement-selected-color: var(--chat-sent-bg);
    --announcement-selected-text: var(--main);

    --calendar-text: var(--bone);
    --calendar-button-color: var(--main);
    --event-pill-outline-color: var(--quillred);
    --event-pill-hover-outline-width: 2px;
    --event-pill-selected-outline-width: 5px;

    --chat-received-bg: var(--divider);
    --chat-sent-bg: #B83838;
    --chat-sent-text: var(--cream);
    --chat-input-highlight: var(--divider);
    --chat-input-bg: #ffe2c8;
    --chat-input-text: #000000;

    --house-src: /_/icons/house.svg;
    --nodes-src: /_/icons/nodes.svg;
    --forum-src: /_/icons/forum.svg;
    --people-src: /_/icons/people.svg;
    --settings-src: /_/icons/settings.svg;
}

@media (max-width: 768px) {
:root[theme=light] {
    --sidebottombars: rgb(221, 39, 39);
    --sidebaraccent: rgb(181, 31, 31);
}
}

:root[theme=parchment] {
    --main: var(--parchment);
    --app: #da995f;
    --accent: rgb(57, 26, 0);
    --accent2: rgb(57, 26, 0);
    --button-accent: var(--desktop-item-background);
    --window: #ffc28b;
    --headertext: var(--accent);
    --divider: rgb(205 152 76);
    --lightDivider: red;
    --chat-input-focus-border: var(--chat-sent-bg);
    --chat-input-focus-ring: color-mix(in srgb, var(--chat-sent-bg) 35%, transparent);
    --apppopup: rgb(221, 39, 39);

    --desktop-item-text: #ffc8a1;
    --desktop-item-border: rgb(255 134 134);
    --desktop-item-background: rgb(192 17 17 / 67%);
    --red: #DE3F3F;
    --green: rgb(18 104 54);
    --yellow: #92400e;
    --blue: #1d4ed8;

    --sidebottombars: #fdc28b;
    --menu-border: var(--accent);
    --window-border: rgb(248 212 195);
    --window-border-2: rgb(0 0 0 / 22%);

    --announcement-selected-color: var(--desktop-item-background);
    --announcement-selected-text: var(--accent);

    --calendar-text: #ffdfc5;
    --calendar-button-color: var(--main);
    --event-pill-outline-color: var(--quillred);
    --event-pill-hover-outline-width: 2px;
    --event-pill-selected-outline-width: 5px;

    --chat-received-bg: rgb(244, 177, 119);
    --chat-sent-bg: #B83838;
    --chat-sent-text: var(--cream);
    --chat-input-bg: var(--main);
    --chat-input-text: var(--accent);
    --chat-input-highlight: var(--divider);

    --house-src: /_/icons/house.svg;
    --nodes-src: /_/icons/nodes.svg;
    --forum-src: /_/icons/forum.svg;
    --people-src: /_/icons/people.svg;
    --settings-src: /_/icons/settings.svg;
}

@media (max-width: 768px) {
:root[theme=parchment] {
    --minicalendarbackground: #ffd8ba;
    
    --text: var(--accent);
    --chat-received-bg: #ebab73;
    --chat-input-bg: var(--window);
}
}

:root[theme=dark] {
    --main: #2f0f0f;
    --app: #491010;
    --lightaccent: #a37362;
    --accent: #ca8e79;
    --button-accent: var(--desktop-item-background);
    --text: var(--accent);
    --darktext: #62473E;
    --headertext: var(--accent);
    --accent2: var(--gold);
    --divider: #523636;
    --lightDivider: #412322;
    
    --window: rgb(37, 3, 3);
    --apppopup: rgb(255, 213, 163);
    --sidebottombars: #250303;
    --menu-border: #74584e;
    --window-border: #74584e;
    --window-border-2: rgba(0, 0, 0, 0.38);
    --button-color: #6b2d1d6d;

    --desktop-item-text: var(--accent);
    --desktop-item-border: var(--window-border);
    --desktop-item-background: #7438334a;
    --red: #DE3F3F;
    --green: rgb(163 255 202);
    --yellow: #f59e0b;
    --blue: rgb(195 218 255);

    --sidebar: var(--sidebottombars);
    --sidebaraccent: #2f1414;
    --searchbackground: #260F0C;
    --loginButton: var(--darkaccent);
    --loginBackground: var(--accent);

    --announcement-selected-color: var(--desktop-item-background);
    --announcement-selected-text: var(--accent);

    --calendar-text: var(--apppopup);
    --calendar-button-color: var(--main);
    --event-pill-outline-color: var(--calendar-text);
    --event-pill-hover-outline-width: .5px;
    --event-pill-selected-outline-width: 3px;

    --chat-received-bg: #3f1413;
    --chat-sent-bg: #B83838;
    --chat-sent-text: var(--apppopup);
    --chat-input-bg: #250303;
    --chat-input-highlight: var(--divider);

    --house-src: /_/icons/housedark.svg;
    --nodes-src: /_/icons/nodesdark.svg;
    --forum-src: /_/icons/forumdark.svg;
    --people-src: /_/icons/peopledark.svg;
    --settings-src: /_/icons/settingsdark.svg;
}

@media (max-width: 768px) {
:root[theme=dark]{
    --lightaccent: #eba58b;
    --darkaccent: #250303;
    --headertext: #ffd8bb;
    --sidebaraccent: #2f1414;
    --chat-received-bg: var(--darkaccent);
}
}

:root[theme=red] {
    --main: #850000;
    --accent: #fea17d;
    --button-accent: #353535;
    --sidebottombars: rgba(254, 232, 200, 0.06);
    --menu-border: rgba(254, 232, 200, 0.2);

    --window: rgb(143, 19, 19);
    --window-border: var(--menu-border);
    --window-border-2: rgba(0, 0, 0, 0.38);

    --desktop-item-text: var(--accent);
    --desktop-item-border: var(--window-border);
    --desktop-item-background: #0000002e;

    --headertext: var(--accent);
    --app: #301110;
    --accent2: var(--darkgreen);
    --darkaccent: rgba(254, 232, 200, 0.06);
    --divider: rgba(254, 232, 200, 0.2);
    --red: #DE3F3F;
    --green: rgb(163 255 202);
    --yellow: #f59e0b;
    --blue: rgb(195 218 255);
    --lightDivider: rgb(187 66 50);
    --apppopup: black;
    --notification-badge-color: black;

    --announcement-selected-color: var(--desktop-item-background);
    --announcement-selected-text: var(--accent);

    --calendar-text: var(--accent);
    --calendar-button-color: color-mix(in srgb, black 18%, #850000);
    --event-pill-outline-color: var(--calendar-text);
    --event-pill-hover-outline-width: .5px;
    --event-pill-selected-outline-width: 3px;

    --chat-received-bg: #9f2121;
    --chat-sent-bg: var(--button-accent);
    --chat-sent-text: var(--accent);
    --chat-input-bg: var(--chat-received-bg);
    --chat-input-highlight: color-mix(in srgb, black 18%, var(--main));;

    --house-src: /_/icons/house.svg;
    --nodes-src: /_/icons/nodes.svg;
    --forum-src: /_/icons/forum.svg;
    --people-src: /_/icons/people.svg;

    --quill-src: /_/icons/people.svg;
}

:root[theme=red] body {
    background-color: var(--main);
}

@media (max-width: 768px) {
:root[theme=red] {
    --divider: rgba(254, 232, 200, 0.2);
    --text: var(--accent);
    --sidebar: var(--main);
    --sidebaraccent: rgb(181, 31, 31);
    --appmenu: rgb(141, 21, 14);
}
}

:root.public {
    --main: black;
    --accent: var(--parchment);
}

@font-face {
    font-family: 'Canterbury';
    src: url('/_/fonts/Canterbury/Canterbury.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Didot';
    font-style: normal;
    font-weight: normal;
    src: local('Didot'), url('/_/fonts/Didot/Didot.ttf') format('truetype');
}

@font-face {
    font-family: 'Didot';
    src: url('/_/fonts/Didot/Didot-Bold.otf') format('opentype');
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: 'Diphylleia';
    src: url('/_/fonts/Diphylleia/Diphylleia-Regular.woff2') format('woff2');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'Germanika';
    font-style: normal;
    font-weight: normal;
    src: local('Germanika'), url('/_/fonts/Germanika/Germanika.ttf') format('truetype');
}

@font-face {
    font-family: 'Crimson Text';
    src: url('/_/fonts/CrimsonText/CrimsonText-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'Crimson Text';
    src: url('/_/fonts/CrimsonText/CrimsonText-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: 'Nanum';
    src: url('/_/fonts/Nanum/NanumGothicCoding-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'Laandbrau';
    src: url('/_/fonts/Laandbrau/Laandbrau.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

* {
    -webkit-tap-highlight-color: transparent;
}

iframe {
    border: none;
}

body {
    margin: 0px;
    font-family: 'Bona Nova', sans-serif;
    font-size: 16px;
    background-color: var(--main);
    color: var(--accent);
    overflow-x: hidden;
}

:root.dark body {
    background-color: #000000;
}

:root app-window {
    border-bottom: 2px solid var(--window);
}

@media (max-width: 480px) {
    body, html{
        overflow-x: hidden;
    }
}

#title {
    padding: 5px 10px; 
    font-size: 1.7rem;
    position: fixed; top: 4.5vh; left: 6vw;
    cursor: pointer; z-index: 1;
}

a {
    cursor: default;
    text-decoration: none;
    text-underline-offset: 5px;
    transition: background .02s, color .2s;
    user-select: none;
    color: var(--accent);
    display: inline-block;   /* makes background and padding behave */
    padding: 0.2em 0.5em;    /* adds breathing room */
}

a:hover {
    text-decoration: none;
    background: var(--darkgreen);
    color: var(--tan);
}

a:active {
    background: red;
}

/* Links inside user-authored text (util.linkified) are prose, not navigation
   chrome, so they opt out of the padded inline-block treatment above and take
   the surrounding text's colour — which is theme-driven at every call site, so
   this holds in every theme without per-app CSS. A Lit component adopting the
   helper repeats this selector in its own static styles; the --linked-text-*
   properties are what keep the two in step (#111). */
/* A URL is one unbreakable token, so a surface that does not already set this
   overflows its container rather than wrapping. word-break is the load-bearing
   one: overflow-wrap alone breaks the word but does not shrink min-content, so
   a flex parent still stretches to the full URL (#111). */
[data-linkified] {
    overflow-wrap: break-word;
    word-break: break-word;
}

[data-linkified] a {
    cursor: pointer;
    display: inline;
    text-decoration: var(--linked-text-decoration, underline);
    padding: 0;
    background: none;
    color: var(--linked-text-color, inherit);
    /* The `a` rule above turns selection off for navigation chrome, where a
       drag across a link-as-button should not highlight it. Prose links are
       text: a member has to be able to select a URL to copy it out (#132).
       Both spellings, because the mobile shell root disables the -webkit- one
       and WebKit honours it independently of the unprefixed property. */
    -webkit-user-select: text;
    user-select: text;
}

[data-linkified] a:hover,
[data-linkified] a:active {
    background: none;
    opacity: var(--linked-text-hover-opacity, 0.8);
}

/* Selection highlight. --accent is redefined in every theme block above and is
   contrast-paired with --main by construction, so one rule tracks all themes
   (#132). ::selection only honours a handful of properties — background-color
   is the one that matters; the text keeps its own colour. */
::selection {
    background-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

button {
    font-family: inherit;
    background-color: transparent;
    color: var(--accent);
    padding: 0.5em;
    box-shadow: none;
    border: 1px solid var(--accent);
    border-radius: 0.3em;
}

input {
    background-color: transparent;
    border: 1px solid var(--accent2);
    padding-left: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border-radius: 0.3em;
}

input::placeholder {
    color: var(--accent)
}

.auth-glass input::placeholder {
    color: rgba(254, 212, 163, 0.55);
}

input:focus {
    outline: 1px solid red;
}