/* The Soft and Bold looks for the pages anyone can open before signing in (welcome.html, try.html), which have their
   own styles (welcome.css) rather than hub.css. The look is chosen with the look button and saved as jbr-look; the
   signed-in pages get it from look.css. */

/* Soft: warm off-white page, white cards with no outlines, round buttons */
html:not([data-look="bold"]) { --bg: #F7F6F3; --frame: #FFFFFF; --soft: #EFEDE8; --line: rgba(0,0,0,.07); }
:root:not([data-look="bold"])[data-theme="dark"] { --bg: #141414; --frame: #1E1E1E; --soft: #262626; --line: rgba(255,255,255,.08); }
@media (prefers-color-scheme: dark) {
  :root:not([data-look="bold"]):not([data-theme="light"]) { --bg: #141414; --frame: #1E1E1E; --soft: #262626; --line: rgba(255,255,255,.08); }
}
html:not([data-look="bold"]) .b, html:not([data-look="bold"]) .nav-r a, html:not([data-look="bold"]) .mk { border-radius: 999px; }
html:not([data-look="bold"]) .b.line, html:not([data-look="bold"]) .mk { border: 0; background: var(--frame); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
html:not([data-look="bold"]) .mk[aria-pressed="true"] { background: var(--btn); }
html:not([data-look="bold"]) .shot { border: 0; border-radius: 24px; padding: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
html:not([data-look="bold"]) .shot img { border-radius: 14px; border: 0; }
html:not([data-look="bold"]) .sheet { border: 0; border-radius: 20px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
html:not([data-look="bold"]) .recap { border-top: 0; background: var(--frame); border-radius: 20px; padding: 4px 18px; }
html:not([data-look="bold"]) .recap li:last-child { border-bottom: 0; }

/* Bold: chunky buttons and boxes with a darker bottom edge that press down */
html[data-look="bold"] { --bg: #FFFFFF; --line: #E5E5E5; --frame: #FFFFFF; --soft: #F7F7F7; --edge: #000; }
:root[data-look="bold"][data-theme="dark"] { --bg: #131F24; --line: #37464F; --frame: #131F24; --soft: #1C2B32; --edge: #000; }
@media (prefers-color-scheme: dark) {
  :root[data-look="bold"]:not([data-theme="light"]) { --bg: #131F24; --line: #37464F; --frame: #131F24; --soft: #1C2B32; }
}
html[data-look="bold"] h1 { font-weight: 800; letter-spacing: -.02em; }
html[data-look="bold"] .b, html[data-look="bold"] .nav-r a.solid, html[data-look="bold"] .mk { border-radius: 14px; font-weight: 700; transition: transform .06s, box-shadow .06s; }
html[data-look="bold"] .b.solid, html[data-look="bold"] .nav-r a.solid { box-shadow: 0 4px 0 color-mix(in srgb, var(--btn) 60%, var(--edge)); }
html[data-look="bold"] .b.line, html[data-look="bold"] .mk { border: 2px solid var(--line); background: var(--frame); box-shadow: 0 3px 0 var(--line); }
html[data-look="bold"] .mk[aria-pressed="true"] { border-color: var(--btn); box-shadow: 0 3px 0 color-mix(in srgb, var(--btn) 60%, var(--edge)); }
html[data-look="bold"] .b:active, html[data-look="bold"] .nav-r a.solid:active, html[data-look="bold"] .mk:active { transform: translateY(3px); box-shadow: none; }
html[data-look="bold"] .shot { border: 2px solid var(--line); border-radius: 20px; box-shadow: 0 5px 0 var(--line); }
html[data-look="bold"] .sheet { border: 2px solid var(--line); border-radius: 16px; box-shadow: 0 4px 0 var(--line); }
html[data-look="bold"] .dots i { width: 10px; height: 10px; }

/* the look button (look.js puts it in the top bar here, beside Sign in) */
.look-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.look-btn svg { width: 17px; height: 17px; }
.look-btn:hover { color: var(--ink); background: var(--soft); }