/* brand.css — the Fish Party website's look on the phone pages (draw, upload,
   review, settings). Linked LAST in <head>, so it wins over each page's own
   <style>: same font, colours and buttons as the showcase site, and a
   comfortable width on a big screen. */
:root {
  color-scheme: dark;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif;
  --paper: #031426;
  --card: rgba(255, 255, 255, .05);
  --sunk: rgba(255, 255, 255, .03);
  --line: rgba(159, 195, 221, .22);
  --ink: #e8f6ff;
  --faint: #9fc3dd;
  --accent: #ffd166;           /* the site's yellow */
  --radius: 14px;
  --radius-lg: 18px;
}
html, body { font-family: var(--font); }
body { background: linear-gradient(180deg, #0b4a6e 0, #072a45 420px, #031426 100%) !important; background-color: #031426; }

/* one column, never wider than a phone held sideways */
.screen, .page, body > main, body > .wrap { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; }
.page { background: transparent; }

/* titles and buttons as on the site */
.topbar { background: transparent; }
.topbar h1 { font-size: 1.15rem; font-weight: 800; }
.tanknav { flex: 0 0 auto; }                         /* never squashed by a flex column */
.tanknav a { font-weight: 700; }
.tanknav a[aria-current=page] { color: #2a1d00 !important; }
button.primary:not(:disabled), #send:not(:disabled), .go:not(:disabled) { color: #2a1d00 !important; font-weight: 800; }

/* the website's header and footer (sitechrome.js), same as the showcase site */
.site-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 10px; flex: 0 0 auto; flex-wrap: wrap; }
.site-head .brand { white-space: nowrap; font-weight: 800; font-size: 1.2rem; color: var(--ink); text-decoration: none; }
.site-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.site-tabs a { color: var(--faint); text-decoration: none; font-size: .9rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.site-tabs a:hover { color: var(--ink); background: var(--card); }
.site-tabs a[aria-current=page] { color: var(--ink); background: rgba(255,255,255,.1); }
.site-foot { padding: 48px 0 28px; color: #6e93b0; font-size: .85rem; line-height: 1.6; text-align: center; flex: 0 0 auto; }
.site-foot a { color: var(--faint); }
.site-foot .fish-line { font-size: 1.4rem; letter-spacing: .4em; margin-bottom: 10px; opacity: .8; }
.site-foot .foot-links { margin-bottom: 8px; }
.site-foot p { margin: 0; }
@media (max-width: 560px) { .site-tabs { width: 100%; margin-left: -12px; } }
/* on the website the tank's own title bar repeats the header: keep it for home tanks only */
[data-mode="public"] .topbar .home, [data-mode="showcase"] .topbar .home { display: none; }
.topbar { position: static; }                         /* the transparent bar must not float over the cards */
.site-head, .site-foot { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; }
/* draw page: the pick screen is full width, its content centred */
#pick.screen { max-width: none; padding-left: max(14px, calc((100% - 720px) / 2)); padding-right: max(14px, calc((100% - 720px) / 2)); }
@media (max-width: 560px) {
  .site-tabs { flex-wrap: nowrap; gap: 0; overflow-x: auto; scrollbar-width: none; }
  .site-tabs a { font-size: .8rem; padding: 6px 6px; }
}
.site-foot a { display: inline-block; padding: 6px 0; }
.resume .nav, a.nav { display: inline-block; padding: 8px 4px; }
/* draw page on a real phone: the paint screen may scroll if the keyboard eats it */
#paint.screen { overflow-y: auto; }
#paint .tools { padding-bottom: max(10px, env(safe-area-inset-bottom)); }