/* Shared Microsoft-era system type and AIM contact window. */
:root {
 --joyradio-header-height: 48px;
 --joyradio-ui-font: Tahoma, "MS Sans Serif", "Microsoft Sans Serif", Geneva, sans-serif;
}
#joyradio-header {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 10000;
 height: calc(var(--joyradio-header-height) + env(safe-area-inset-top, 0px));
 padding: env(safe-area-inset-top, 0px) max(22px, env(safe-area-inset-right, 0px)) 0 max(22px, env(safe-area-inset-left, 0px));
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 18px;
 border: 0;
 border-bottom: 1px solid #2d3039;
 background: #111217;
 color: #d5d8df;
 font: 12px/1.2 var(--joyradio-ui-font);
 isolation: isolate;
}
#joyradio-header nav { display: flex; align-items: center; gap: clamp(14px, 3vw, 34px); }
#joyradio-header a, #joyradio-header summary {
 position: static;
 inset: auto;
 transform: none;
 display: inline-flex;
 align-items: center;
 min-height: 40px;
 margin: 0;
 padding: 0;
 border: 0;
 border-radius: 0;
 background: transparent;
 color: inherit;
 opacity: 1;
 font: inherit;
 letter-spacing: 0;
 text-decoration: none;
 text-shadow: none;
 white-space: nowrap;
 cursor: pointer;
}
#joyradio-header .joyradio-home { color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0; }
#joyradio-header a:hover, #joyradio-header summary:hover, #joyradio-contact[open] summary { text-decoration: underline; text-underline-offset: 3px; }
#joyradio-header a:focus-visible, #joyradio-header summary:focus-visible { outline: 1px dotted #e3d19f; outline-offset: 4px; }
#joyradio-contact { position: relative; }
#joyradio-header summary { list-style: none; gap: 7px; }
#joyradio-header summary::-webkit-details-marker { display: none; }
#joyradio-header .contact-caret { width: 5px; height: 5px; border-right: 1px solid; border-bottom: 1px solid; transform: rotate(45deg) translateY(-2px); }
#joyradio-contact[open] .contact-caret { transform: rotate(225deg) translate(-1px, -1px); }
#joyradio-contact-panel {
 position: absolute;
 right: 0;
 top: calc(100% + 5px);
 box-sizing: border-box;
 width: min(370px, calc(100vw - 28px));
 max-height: calc(100svh - var(--joyradio-header-height) - env(safe-area-inset-top, 0px) - 18px);
 overflow: auto;
 padding: 3px;
 border: 1px solid #00309a;
 border-radius: 6px 6px 0 0;
 background: #ece9d8;
 color: #000;
 box-shadow: inset 1px 1px #9bbdff, inset -1px -1px #4c66a4, 3px 4px 0 #0006;
 font: 11px/1.3 var(--joyradio-ui-font);
}
#joyradio-contact-panel .aim-titlebar {
 display: flex;
 align-items: center;
 gap: 5px;
 min-height: 27px;
 padding: 2px 3px 3px;
 margin: -2px -2px 0;
 border-radius: 4px 4px 0 0;
 background: linear-gradient(#4b91f2 0%, #0c66d8 14%, #0052c8 65%, #0045ae 95%, #053c8f);
 color: #fff;
 box-shadow: inset 0 1px #9dc5ff;
 font: bold 11px/1.2 var(--joyradio-ui-font);
 text-shadow: 1px 1px #00337f;
}
#joyradio-contact-panel .aim-title { flex: 1; white-space: nowrap; }
#joyradio-contact-panel .aim-mascot { display: inline-flex; flex: none; width: 18px; height: 20px; }
#joyradio-contact-panel .aim-mascot svg { width: 100%; height: 100%; fill: #ffe500; stroke: #4d4100; stroke-width: 1.1; }
#joyradio-contact-panel #joyradio-contact-close {
 display: grid;
 place-items: center;
 flex: none;
 width: 21px;
 height: 21px;
 padding: 0;
 margin: 0;
 border: 1px solid #fff;
 border-radius: 3px;
 background: linear-gradient(135deg,#e8a193,#cd5d48 45%,#a63020);
 box-shadow: inset 1px 1px #ffe6d8, inset -1px -1px #7c2117;
 color: #fff;
 opacity: 1;
 font: bold 21px/16px var(--joyradio-ui-font);
 cursor: pointer;
}
#joyradio-contact-close span { transform: translateY(-1px); }
#joyradio-contact-panel .aim-window-body { padding: 7px 6px 5px; }
#joyradio-contact-panel .aim-recipient { margin: 0 0 6px; color: #222; font: 11px/1.3 var(--joyradio-ui-font); }
#joyradio-contact-panel .aim-transcript {
 min-height: 54px;
 padding: 8px;
 margin: 0 0 10px;
 border: 2px solid;
 border-color: #808080 #fff #fff #808080;
 background: #fff;
 color: #111;
 font: 12px/1.5 var(--joyradio-ui-font);
}
#joyradio-contact-panel .aim-transcript strong { color: #0000b5; }
#joyradio-contact-form { margin: 0; padding: 0; text-align: left; }
#joyradio-contact-form label { display: block; margin: 0 0 4px; font: 11px/1.3 var(--joyradio-ui-font); }
#joyradio-contact-form input:not([type=hidden]), #joyradio-contact-form textarea {
 box-sizing: border-box;
 display: block;
 width: 100%;
 margin: 0 0 9px;
 padding: 5px 6px;
 border: 2px solid;
 border-color: #808080 #fff #fff #808080;
 border-radius: 0;
 background: #fff;
 color: #111;
 font: 12px/1.4 var(--joyradio-ui-font);
 letter-spacing: 0;
}
#joyradio-contact-form .aim-compose-box { border: 2px solid; border-color: #808080 #fff #fff #808080; background: #fff; }
#joyradio-contact-form .aim-format-strip { display: flex; align-items: center; gap: 14px; height: 24px; padding: 0 5px; border-bottom: 1px solid #a0a0a0; background: #ece9d8; color: #111; pointer-events: none; }
#joyradio-contact-form .aim-letter { color: #0000c8; font-weight: 700; border-bottom: 2px solid #0000c8; line-height: 12px; }
#joyradio-contact-form .aim-bold { font-weight: 700; }
#joyradio-contact-form .aim-italic { font-style: italic; }
#joyradio-contact-form .aim-underline { text-decoration: underline; }
#joyradio-contact-form .aim-smile { margin-left: auto; font-size: 16px; color: #7f7100; }
#joyradio-contact-form textarea { min-height: 78px; max-height: 190px; margin: 0; border: 0; resize: vertical; }
#joyradio-contact-form input:focus, #joyradio-contact-form textarea:focus { outline: 1px solid #3669bd; outline-offset: -2px; }
#joyradio-contact-form .aim-send-row { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; padding-top: 6px; border-top: 1px solid #b3b1a5; box-shadow: inset 0 1px #fff; }
#joyradio-contact-form .aim-send-row .aim-mascot { width: 26px; height: 29px; margin-left: 6px; }
#joyradio-contact-form button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 75px;
 min-height: 30px;
 margin: 0;
 padding: 4px 14px;
 border: 2px solid;
 border-color: #fff #7b7b75 #7b7b75 #fff;
 border-radius: 0;
 background: #ece9d8;
 box-shadow: inset 0 0 0 1px #d5d2c1;
 color: #111;
 font: 12px/1.3 var(--joyradio-ui-font);
 opacity: 1;
 cursor: pointer;
}
#joyradio-contact-form button:active { border-color: #7b7b75 #fff #fff #7b7b75; }
#joyradio-contact-form button:disabled { color: #888; cursor: wait; }
#joyradio-contact-form button:focus-visible, #joyradio-contact-close:focus-visible { outline: 1px dotted #111; outline-offset: -5px; }
#joyradio-header #joyradio-contact-status { position: static; inset: auto; transform: none; margin: 7px 0 0; color: #333; font: 11px/1.4 var(--joyradio-ui-font); letter-spacing: 0; white-space: normal; pointer-events: auto; }
#joyradio-contact-status:empty { display: none; }
#joyradio-header #joyradio-email-fallback { margin-top: 5px; min-height: 25px; font-size: 11px; color: #0000b5; text-decoration: underline; }
#joyradio-header [hidden] { display: none !important; }
@media (max-width: 420px) {
 #joyradio-header { padding-left: 14px; padding-right: 14px; gap: 12px; font-size: 11px; }
 #joyradio-header .joyradio-home { font-size: 12px; }
 #joyradio-header nav { gap: 14px; }
}

/* A second row leaves room for the radio tab on small screens. */
#joyradio-header a[aria-current="page"] { color: #ebd6a0; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 520px) {
 :root { --joyradio-header-height: 76px; }
 #joyradio-header { flex-wrap: wrap; justify-content: center; gap: 0; padding-top: env(safe-area-inset-top, 0px); padding-bottom: 4px; }
 #joyradio-header .joyradio-home { min-height: 30px; }
 #joyradio-header nav { width: 100%; justify-content: space-between; gap: 10px; }
 #joyradio-header nav a, #joyradio-header summary { min-height: 32px; }
}