/* SYRNOS Me - the young person's website: bright, friendly, big buttons, the SYRNOS colours */
:root { --ink: #074F69; --ink2: #285A6E; --act: #0F9ED5; --act-dk: #0B7FAD; --line: #B4DCEC; --warn: #B3541E; --good: #2E7D32; color-scheme: light;
  --font: Calibri, Carlito, "Source Sans 3", "Segoe UI", Arial, sans-serif }
* { box-sizing: border-box }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 18px/1.45 var(--font);
  background: radial-gradient(ellipse at 0% 0%, #94C6F9, rgba(148,198,249,0) 60%), radial-gradient(ellipse at 100% 100%, #9BE7D7, rgba(155,231,215,0) 60%) #C2E0FC; background-attachment: fixed }
button, input, select { font: inherit; color: inherit }
h1, h2 { margin: 0 0 10px; line-height: 1.2 }
h1 { font-size: 28px } h2 { font-size: 21px }
.testbar { background: #FFF4D6; color: #6B4A00; text-align: center; font-size: 14px; padding: 6px 16px }
header.band { display: flex; align-items: center; gap: 8px; padding: 10px max(16px, env(safe-area-inset-left, 0px)); background: rgba(255,255,255,.65);
  border-bottom: 2px solid rgba(255,255,255,.9); position: sticky; top: 0; z-index: 5 }
header .logo { height: 28px; width: auto }
header .me { font-weight: 700; font-size: 21px; letter-spacing: .5px }
header .who { margin-left: auto; font-size: 16px; color: var(--ink2) }
header .out { white-space: nowrap; margin-left: 8px; border: 0; border-radius: 999px; padding: 9px 16px; background: var(--ink); color: #fff; font-weight: 700; font-size: 16px; cursor: pointer }
main { max-width: 560px; margin: 0 auto; padding: 18px 16px 24px }
.panel { background: rgba(255,255,255,.93); border-radius: 18px; padding: 20px; box-shadow: 0 4px 14px rgba(31,133,200,.15); margin-bottom: 16px }
.status { margin: 0; color: var(--ink2) }
label.f { display: block; font-weight: 700; margin: 14px 0 0 }
label.f span.hint { display: block; font-weight: 400; color: var(--ink2); font-size: 15px }
input[type=text], input[type=password] { display: block; width: 100%; margin-top: 4px; padding: 13px 14px; font-size: 19px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid #7CC7EA; outline-offset: 2px }
input.code { letter-spacing: 4px; text-align: center; font-size: 26px; text-transform: uppercase }
label.tick { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; font-weight: 400 }
label.tick input { width: 24px; height: 24px; margin-top: 1px; flex: none }
.btn { display: block; width: 100%; margin-top: 18px; padding: 15px 16px; border: 0; border-radius: 14px; background: var(--act); color: #fff; font-weight: 700;
  font-size: 19px; cursor: pointer } .btn:hover { background: var(--act-dk) }
.btn:disabled { opacity: .6; cursor: default }
.btn.light { background: #EAF4FA; color: var(--ink) } .btn.light:hover { background: #D6E9F4 }
.btn.warn { background: #FCEBDD; color: var(--warn) }
.linkbtn { background: none; border: 0; padding: 0; margin-top: 16px; color: var(--act-dk); text-decoration: underline; cursor: pointer; font-size: 17px }
.err { color: #9C0006; background: #FDECEC; border-radius: 12px; padding: 11px 13px; margin: 14px 0 0 }
.ok { color: #1F5E25; background: #E6F4E6; border-radius: 12px; padding: 11px 13px; margin: 14px 0 0 }
.muted { color: var(--ink2); font-size: 16px }
.loginname { font-size: 26px; font-weight: 700; letter-spacing: 1px; background: #EAF4FA; border-radius: 12px; padding: 10px 14px; text-align: center; margin: 10px 0 }
.hello { display: flex; align-items: center; gap: 14px }
.hello .av { width: 60px; height: 60px; border-radius: 50%; background: #DDF0FB; display: flex; align-items: center; justify-content: center; font-size: 32px; flex: none }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 108px; padding: 16px; border: 0; border-radius: 18px; text-align: left;
  background: rgba(255,255,255,.93); box-shadow: 0 4px 14px rgba(31,133,200,.15); cursor: pointer; font-weight: 700; font-size: 19px }
.tile .em { font-size: 30px; line-height: 1 }
.tile .sub { font-weight: 400; font-size: 15px; color: var(--ink2) }
.tile:hover { background: #fff }
.tile[disabled] { cursor: default; opacity: .75 }
.pk { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #E3F0F7 }
.pk:first-of-type { border-top: 0 }
.pk button { flex: none; width: auto; margin: 0; padding: 8px 14px; font-size: 16px }
footer.help { max-width: 560px; margin: 0 auto; padding: 0 16px 36px; font-size: 15px; color: var(--ink2) }
footer.help a { color: var(--ink); font-weight: 700 }
/* the page is blurred when the tab or app is in the background, so someone passing can't read it on a shared device */
body.hidden main { filter: blur(14px) }
#toastRoot { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 10; width: min(520px, calc(100% - 32px)) }
.toast { background: #074F69; color: #fff; border-radius: 12px; padding: 13px 16px; box-shadow: 0 6px 18px rgba(0,0,0,.2) }
@media (max-width: 380px) { .tiles { grid-template-columns: 1fr } }
@media (prefers-reduced-motion: no-preference) { .tile { transition: transform .12s } .tile:not([disabled]):active { transform: scale(.98) } }
/* the parts */
.small { font-size: 15px } .muted.small { display: block }
.stage { margin: 6px 0 4px } .stage .dots { display: flex; gap: 6px; margin-bottom: 8px }
.stage .dots span { flex: 1; height: 10px; border-radius: 99px; background: #DDF0FB } .stage .dots span.on { background: var(--act) }
.sec summary { cursor: pointer; display: flex; justify-content: space-between; gap: 10px; font-size: 19px; list-style: none }
.sec summary::-webkit-details-marker { display: none } .sec summary::after { content: '▾'; color: var(--act-dk) } .sec[open] summary::after { content: '▴' }
.skill { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #E3F0F7 }
.skill > div:first-child { display: flex; flex-direction: column } .skill .right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none }
.nextup { background: rgba(255,248,224,.95) } .nextup .skill:first-of-type { border-top: 0 }
.meter { display: inline-flex; gap: 3px } .meter i { width: 14px; height: 14px; border-radius: 50%; background: #DDF0FB; display: block } .meter i.on { background: var(--good) }
.mini { border: 0; border-radius: 99px; padding: 6px 12px; background: var(--act); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap }
.asked { color: var(--good); font-weight: 700 }
.tag { font-size: 12px; background: #EAF4FA; border-radius: 99px; padding: 1px 8px; font-weight: 700 }
.news { display: flex; gap: 10px; align-items: baseline; padding: 6px 0 } .news > span:nth-child(2) { flex: 1 }
.sec summary .muted { margin-left: auto } .news .small { white-space: nowrap }
/* stage 72: money, goal, stars, picture */
button.panel { display: block; width: 100%; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer }
button.panel.bank, .bank { background: linear-gradient(135deg, #0F9ED5, #074F69); color: #fff }
.bankhead { display: flex; flex-direction: column } .bankhead > span:first-child { font-weight: 700; font-size: 19px } .bankhead .bal { font-size: 34px; font-weight: 700; line-height: 1.2 }
.bankhead .small { opacity: .9 }
.stmt { display: grid; grid-template-columns: 52px 1fr auto; grid-template-areas: "dt wh amt" "dt wh rb"; gap: 0 10px; padding: 9px 0; border-top: 1px solid #E3F0F7 }
.stmt .dt { grid-area: dt; color: var(--ink2) } .stmt .wh { grid-area: wh } .stmt .amt { grid-area: amt; text-align: right; font-weight: 700 } .stmt .rb { grid-area: rb; text-align: right }
.amt.in { color: var(--good) }
.bar { display: grid; grid-template-columns: 110px 1fr auto; gap: 8px; align-items: center; margin: 6px 0; font-size: 16px }
.track { background: #EAF4FA; border-radius: 99px; height: 12px; overflow: hidden } .track i { display: block; height: 100%; background: var(--act); border-radius: 99px }
.months { display: flex; gap: 10px; align-items: flex-end; justify-content: space-around } .mo { text-align: center }
.mo .cols { display: flex; gap: 3px; align-items: flex-end; height: 84px; justify-content: center } .mo .cols i { width: 14px; border-radius: 4px 4px 0 0; display: block; min-height: 2px }
i.in, .key.in { background: var(--good) } i.out, .key.out { background: var(--act) } .key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-left: 6px }
.ask { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid #E3F0F7 } .ask > span { display: flex; flex-direction: column }
.mini.light { background: #EAF4FA; color: var(--ink) }
.tip { background: rgba(255,248,224,.95) } .tip p { margin: 4px 0 0 }
.goalname { font-size: 24px; font-weight: 700; margin: 0 0 8px }
.pot { height: 22px; background: #EAF4FA; border-radius: 99px; overflow: hidden } .pot i { display: block; height: 100%; background: linear-gradient(90deg, #2E7D32, #66BB6A); border-radius: 99px }
input[type=range] { width: 100%; margin-top: 12px; accent-color: var(--act) } .goalout { font-weight: 700; font-size: 19px }
svg.goalchart { width: 100%; height: auto; display: block; max-width: 520px; margin: 8px 0 4px } .goodtxt { color: #2E7D32; font-weight: 700 }
.bigstar { font-size: 44px; font-weight: 700; margin: 0 }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px } .cd { background: #EAF4FA; border-radius: 10px; text-align: center; padding: 4px 0; display: flex; flex-direction: column }
.cd.all { background: #FFF1B8 }
.hello .av { border: 0; padding: 0; cursor: pointer; overflow: hidden } .hello .av svg, .avbig svg { width: 100%; height: 100% } .hello .av .em { font-size: 32px }
.seg { display: flex; background: #EAF4FA; border-radius: 12px; padding: 4px; margin: 6px 0 12px } .seg button { flex: 1; border: 0; background: none; padding: 9px; border-radius: 9px; font-weight: 700; cursor: pointer }
.seg button.on { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.1) }
.emojis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px } .emo { font-size: 30px; border: 2px solid transparent; background: #F4FAFD; border-radius: 12px; padding: 6px 0; cursor: pointer }
.emo.on, .avo.on { border-color: var(--act) }
.avbig { width: 140px; height: 140px; margin: 0 auto 10px }
.avrow { margin: 8px 0 } .avopts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px }
.avo { border: 2px solid #E3F0F7; background: #fff; border-radius: 10px; padding: 5px 9px; font-size: 14px; cursor: pointer; min-width: 38px; min-height: 36px }
.sw { display: block; width: 22px; height: 22px; border-radius: 50% }
/* stage 73: Have your say */
textarea { display: block; width: 100%; margin-top: 4px; padding: 12px 14px; font: inherit; font-size: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; resize: vertical }
select { display: block; width: 100%; margin-top: 4px; padding: 12px; font-size: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff }
.said { padding: 10px 0; border-top: 1px solid #E3F0F7 } .said:first-of-type { border-top: 0 } .said p { margin: 4px 0 }
.reply { background: #EAF4FA; border-radius: 12px; padding: 8px 12px; margin-top: 6px } .reply p { margin: 2px 0 0 }
.tiles + .panel, .tiles + .btn { margin-top: 16px }
/* stage 74: appointments */
.appt { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 10px 0; border-top: 1px solid #E3F0F7 } .appt:first-of-type { border-top: 0 }
.appt .when { display: flex; justify-content: space-between; gap: 8px; color: var(--act-dk) } .appt > div:last-child { display: flex; flex-direction: column }
.appt.done { opacity: .7 }
.remind { font-weight: 700 }
input[type=date], input[type=time] { display: block; width: 100%; margin-top: 4px; padding: 12px 14px; font-size: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff }