/* Designs B and C, "Blue Sky" (Nov 2026 preview): what the two share. The colors are the old look's own
   (11 Nov 2026, Will: "reuse the color scheme from the original UI"), taken from its theme:
     the page behind everything  #daf2f5 with the theme's small pattern (ui/bg_pattern.png, the same 7 x 7 tile)
     the header                  the theme's sky blue #4fbbec, here from a lighter blue on the left to a darker blue on the
                                 right, with white clouds (ui/cloud.svg)
     the menu                    yellow #ffe28c, text #515655, orange #ff8d37 with white text for the chosen link, lines #ff7924
     the page                    plain white, black text, titles #ff5400, links #ff8e3c
     buttons                     the grey of the browser's own buttons, as before
     the footer                  #4ebbec with white text, links #ffe8a8
   Where the menu is: design_b.css (a bar across the top) and design_c.css (on the left). The shared rules: ui_base.css.
   To change a color, change it here (the --names). */
@font-face { font-family: "Fraunces Sunshine"; src: url(fonts/fraunces-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans Sunshine"; src: url(fonts/source-sans-3-latin-wght-normal.woff2) format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }

:root {
	--hd-h: 104px; --logo-h: 80px;
	--body-font: "Source Sans Sunshine", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
	--head-font: "Fraunces Sunshine", Georgia, "Times New Roman", serif;
	--brand-weight: 700; --brand-spacing: 0; --brand-size: .375; --brand-ink: #d42a0a; --title-weight: 600; --title-spacing: 0;
	--bg: #daf2f5;
	--surface: #ffffff;
	--ink: #000000; --heading: #ff5400; --line: #d7e6ea; --table-line: #333333;
	--hd-bg: #4fbbec; --hd-ink: #ffffff; --hd-soft: #ffffff;
	--signout-bg: rgba(255,255,255,.22); --signout-line: rgba(255,255,255,.8); --signout-ink: #ffffff; --signout-hover: rgba(255,255,255,.38);
	--nav-ink: #515655; --nav-ink-strong: #3f4443; --nav-soft: #7d6f45; --nav-hover: #ff8d37; --nav-hover-ink: #ffffff; --nav-count-bg: #ffd25e;
	--nav-active-bg: #ff8d37; --nav-active-ink: #ffffff; --group-ico: #ff7924; --drawer-bg: #ffe28c;
	--nav-bg: #ffe28c; --nav-line: #ff7924;
	--link: #ff8e3c; --link-hover: #ff8e3c;
	--field-line: #8a8a8a; --field-off: #f2f2f2; --focus: #2a8fd0; --focus-ring: rgba(42,143,208,.25);
	--btn-bg: #efefef; --btn-line: #767676; --btn-ink: #000000; --btn-hover: #e2e2e2; --btn-weight: 400;
	--go-bg: #efefef; --go-ink: #000000; --go-hover: #e2e2e2; --go-line: #767676; --check: auto;
	--th-bg: transparent;
	--foot-bg: #4ebbec; --foot-ink: #ffffff; --foot-accent: #ffe8a8;
	--radius: 8px; --radius-s: 4px; --radius-btn: 4px;
	--shadow: 0 1px 3px rgba(40,90,110,.18);
}
/* the old look's page background: its color and its pattern */
html { background-image: url(bg_pattern.png) !important; background-repeat: repeat !important; }

/* the sky: lighter blue on the left, darker on the right, with white clouds */
#hd.ui-hd { position: relative; background: linear-gradient(98deg, #a5def8 0%, #6fc8f1 30%, #4fbbec 55%, #2f9bdb 100%); }
/* clouds: two that peek in at the bottom edge of the header, and two in the free room between the motto and the Sign Out
   block (.ui-hd-in:after takes exactly that room, so no cloud is ever behind the text, whatever the window's width) */
#hd.ui-hd:before { content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image: url(cloud.svg), url(cloud.svg);
	background-repeat: no-repeat;
	background-position: right 36px bottom -38px, left 44% bottom -22px;
	background-size: 120px auto, 84px auto;
	opacity: .92; }
.ui-hd-in:after { content: ""; order: 2; flex: 1 1 0; min-width: 0; align-self: stretch; pointer-events: none; }
@media screen and (min-width: 1200px) {   /* a narrower window has too little free room there for a cloud */
	.ui-hd-in:after { background-image: url(cloud.svg), url(cloud.svg); background-repeat: no-repeat; background-position: 62% 30%, 20% 12%;
		background-size: min(150px, 62%) auto, min(58px, 26%) auto; opacity: .92; }
}
.ui-user { order: 3; margin-left: 0; }
#hd.ui-hd:after { content: none; }
.ui-hd-in { position: relative; z-index: 1; }
.ui-logo { border-radius: 10px; box-shadow: 0 3px 12px rgba(10,60,100,.28); }   /* the Sunshine logo, as a card on the sky (as in the old look) */
.ui-brand-tag { font-style: italic; color: #0d4f7c; }
.ui-user { text-shadow: 0 1px 2px rgba(0,60,110,.45); }
#body a.ui-signout { text-shadow: none; }

/* the page: links as before (underlined, the line goes away under the mouse) */
#body #bd a:hover, #body #bd a:focus { text-decoration: none; }
#bd table[border]:not([border="0"]) > tbody > tr > th, #bd table[border]:not([border="0"]) > thead > tr > th, #bd table[border]:not([border="0"]) > tr > th { color: inherit; }

/* the menu: the old look's yellow and orange */
#body #navigation.ui-nav #mainNav li.active > a, #body #navigation.ui-nav #mainNav li.active > a:link, #body #navigation.ui-nav #mainNav li.active > a:visited { font-weight: 600; }
.ui-group.has-active > .ui-group-btn { color: #c44a00; }
.ui-group-btn:hover .ui-ico, .ui-group-btn:hover .ui-group-count { color: inherit; }
.ui-group-btn:hover .ui-group-count { background: rgba(255,255,255,.3); }
.ui-nav-find { border-color: #d5bf75; }

/* the footer: the old look's blue, white text */
#ft { font-size: 14px; font-weight: 600; text-shadow: 0 1px 1px rgba(0,70,120,.35); }
.ui-quote p { font-weight: 500; font-size: 18px; }

@media screen and (max-width: 900px) {
	:root { --hd-h: 60px; --logo-h: 46px; --brand-size: .36; }
	.ui-logo { border-radius: 6px; }
	#hd.ui-hd:before { background-position: right 64px bottom -22px, left 30% bottom -16px; background-size: 64px auto, 46px auto; }
	.ui-group { border-top: 1px solid var(--nav-line); }
	.ui-group-items { padding: 2px 0 8px 30px; }
}