/* TREENIVA: teema H (Orange ja kulta), hyväksytyn mockupin mukaan. Värit ovat muuttujia. */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(/assets/fonts/pjs-400.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url(/assets/fonts/pjs-500.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url(/assets/fonts/pjs-600.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url(/assets/fonts/pjs-700.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-style: normal; font-display: swap; src: url(/assets/fonts/pjs-800.woff2) format("woff2"); }

:root {
  --bg: #09080E;
  --glow: radial-gradient(700px 480px at 90% -8%, rgba(254,104,7,.4), transparent 62%), radial-gradient(640px 520px at -10% 45%, rgba(255,235,151,.12), transparent 60%), radial-gradient(600px 480px at 100% 105%, rgba(88,55,20,.7), transparent 60%);
  --ink: #FBF3DC;
  --ink2: #bdb39b;
  --ib: rgba(255,235,151,.14);
  --card: rgba(255,235,151,.06);
  --cb: rgba(255,235,151,.14);
  --ac: #FFEB97;
  --ai: #09080E;
  --at: #FFEB97;
  --as: rgba(255,235,151,.14);
  --ln: rgba(255,235,151,.12);
  --fl: rgba(255,235,151,.08);
  --bl: blur(18px);
  --sh: 0 18px 40px rgba(0,0,0,.45);
  --so: #17140f;
  --ag: linear-gradient(135deg, #ff8a2b, #FE6807);
  --ags: 0 10px 30px rgba(254,104,7,.5);
  --ok: #7BE0A0;
  --bad: #FF7A6B;
  /* vanhat nimet */
  --card-border: var(--cb);
  --accent: var(--ac);
  --accent-grad: var(--ag);
  --radius: 28px;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--glow), var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.5;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--at); }

/* ---- Runko: sivupalkki (tietokone) ja alapalkki (puhelin) ---- */
.shell { display: block; min-height: 100vh; }
.side { display: none; }
.pill { display: none; }
.topm { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 0; }
.brand img { display: block; width: auto; height: 24px; max-width: 100%; }
.topm .brand img { height: 24px; }
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background: var(--as); color: var(--at); font-weight: 800; }
.topm .avatar { width: 40px; height: 40px; font-size: 14px; }
.content { min-width: 0; }
.wrap { max-width: 640px; margin: 0 auto; padding: 24px 20px 120px; }
.wrap.wide { max-width: 1180px; }
body:not(.in) .wrap { padding-top: 48px; padding-bottom: 40px; }

.pill {
  position: fixed; left: 14px; right: 14px; bottom: 16px; z-index: 20; height: 72px; padding: 6px;
  border-radius: 999px; background: rgba(23,20,15,.82); border: 1px solid var(--cb); box-shadow: var(--sh);
  backdrop-filter: var(--bl); -webkit-backdrop-filter: var(--bl); color: var(--ink);
  max-width: 560px; margin: 0 auto;
}
.pill a { flex: 1; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; font-size: 11px; font-weight: 700; color: var(--ink2); border-radius: 999px; }
.pill a.on { color: var(--at); }
.pill { display: flex; }

.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

@media (min-width: 900px) {
  .shell { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 0; }
  .topm, .pill { display: none; }
  .side {
    display: flex; flex-direction: column; gap: 4px; position: sticky; top: 20px; align-self: start;
    height: calc(100vh - 40px); margin: 20px 0 20px 20px; padding: 24px 14px; border-radius: 32px;
    background: var(--card); border: 1px solid var(--cb); box-shadow: var(--sh);
    backdrop-filter: var(--bl); -webkit-backdrop-filter: var(--bl);
  }
  .side .brand { padding: 4px 12px 22px; }
  .side .brand img { height: 28px; }
  .side nav { display: flex; flex-direction: column; gap: 4px; }
  .side nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--ink); }
  .side nav a:hover { background: var(--fl); }
  .side nav a.on { background: var(--ac); color: var(--ai); }
  .side .grow { flex: 1; }
  .side .me { display: flex; align-items: center; gap: 12px; padding: 12px; border-top: 1px solid var(--ib); }
  .side .me .avatar { width: 40px; height: 40px; font-size: 14px; }
  .side .me div strong { display: block; font-size: 14px; }
  .side .me div span { display: block; font-size: 13px; color: var(--ink2); }
  .side form { margin: 0 0 0 auto; }
  .wrap { padding: 32px 40px 48px; max-width: 760px; margin: 0; }
  .wrap.wide { max-width: 1180px; }
}
.linkbtn { width: auto; padding: 6px 8px; font-size: 13px; font-weight: 600; color: var(--ink2); background: none; border: 0; border-radius: 8px; box-shadow: none; cursor: pointer; }
.linkbtn:hover { color: var(--ink); }

/* ---- Tekstit ---- */
.eyebrow { margin: 0 0 4px; font-size: 14px; color: var(--ink2); font-weight: 600; }
h1 { margin: 0 0 8px; font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); line-height: 1.15; }
h2 { margin: 0 0 12px; font-size: 19px; font-weight: 800; }
.lead { margin: 0 0 24px; color: var(--ink2); font-size: 16px; }
.muted { color: var(--ink2); font-size: .95rem; }
.lab { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
h2.pagehead { margin: 0 0 16px; font-size: 24px; }
.dayname { font-size: 20px; }
.foot { margin-top: 24px; font-size: 13px; color: var(--ink2); text-align: center; }
.foot a { color: var(--at); font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gap { margin-top: 16px; }
h2.gap { margin-top: 18px; }
code { background: var(--fl); padding: 1px 6px; border-radius: 6px; }

/* ---- Kortit ---- */
.card {
  background: var(--card); border: 1px solid var(--cb); border-radius: var(--radius); padding: 22px;
  backdrop-filter: var(--bl); -webkit-backdrop-filter: var(--bl); box-shadow: var(--sh); color: var(--ink);
}
.card p { margin: 0 0 12px; }
.card p:last-child { margin-bottom: 0; }
.checks, .plain { list-style: none; margin: 0; padding: 0; }
.checks li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ln); }
.checks li:last-child { border-bottom: 0; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.checks li.bad .dot { background: var(--bad); }
.label { font-weight: 600; }
.value { color: var(--ink2); font-size: 14px; text-align: right; }
.checks li.bad .value { color: var(--bad); }
.facts li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ln); }
.facts li:last-child { border-bottom: 0; }
.facts li > span:first-child { color: var(--ink); }
.facts li > span:last-child { text-align: right; overflow-wrap: anywhere; color: var(--ink2); }
.facts a { color: var(--at); text-decoration: none; font-weight: 700; }
.facts a:hover { text-decoration: underline; }
.facts .muted { font-size: 13px; }
.subact { margin-top: 22px; }
.subact button { min-height: 54px; padding-top: 14px; padding-bottom: 14px; }
.subact + .muted { margin-top: 14px; padding: 0 4px; line-height: 1.5; }
.adm td, .adm th { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--ln); vertical-align: top; }
.adm th { color: var(--ink2); font-size: 13px; font-weight: 600; }
.adm { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm select { min-height: 40px; }
.admwrap { overflow-x: auto; }
.orgcard { display: grid; gap: 6px; }
.orgcard form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.orgcard .inl { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; margin: 0; }
.orgcard input[type=number] { width: 90px; min-height: 40px; }
.orgcard input[type=text] { flex: 1; min-width: 180px; min-height: 40px; }
.orgact { margin-top: 12px; }
.orgcard select { width: auto; min-height: 40px; }
.notice { margin: 0 0 14px; padding: 12px 16px; border-radius: 16px; font-weight: 600; }
.notice.ok { background: rgba(123,224,160,.12); color: var(--ok); }
.notice.bad { background: rgba(255,122,107,.12); color: var(--bad); }

/* ---- Lomakkeet ---- */
label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--ink2); }
input, textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; margin-bottom: 14px; font: inherit; font-size: 16px; font-weight: 600;
  color: var(--ink); background: var(--fl); border: 1px solid var(--ln); border-radius: 12px;
}
textarea { resize: vertical; font-weight: 500; }
input::placeholder, textarea::placeholder { color: var(--ink2); opacity: .7; font-weight: 500; }
input[readonly] { color: var(--ink2); }
input[type="file"] { padding: 12px; }
input[type="date"] { color-scheme: dark; }
input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--ac); outline-offset: 2px; }
label.check { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: var(--ink); margin: 0 0 14px; }
label.check input { width: auto; min-height: 0; margin: 0; accent-color: #FE6807; }

/* ---- Painikkeet ---- */
button, .btnlink {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 22px;
  font: inherit; font-size: 15px; font-weight: 800; color: var(--ai); background: var(--ag); border: 0; border-radius: 999px;
  cursor: pointer; text-decoration: none; box-shadow: var(--ags);
}
.btnlink { width: auto; }
button.secondary, .btnlink.secondary { background: var(--fl); color: var(--ink); box-shadow: none; font-weight: 700; border: 1px solid var(--cb); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.mini { width: auto; min-height: 40px; padding: 0 16px; font-size: 14px; font-weight: 700; color: var(--ink); background: var(--fl); border: 1px solid var(--cb); box-shadow: none; }
button.mini.danger { color: var(--bad); }
.btnrow { display: flex; flex-wrap: wrap; gap: 10px; }
.btnrow form { margin: 0; }

/* ---- Valintapainikkeet (chips) ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips form { margin: 0; }
.chip {
  display: inline-flex; align-items: center; width: auto; min-height: 40px; padding: 0 16px; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--ink); background: var(--fl); border: 1px solid var(--cb); border-radius: 999px; text-decoration: none; cursor: pointer; box-shadow: none;
}
.chip:hover { border-color: var(--ac); }
.chip.on { color: var(--ai); background: var(--ac); border-color: transparent; }
p.chips a.chip { text-decoration: none; }

/* ---- Ohjelmanrakentaja ---- */
.dayhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.dayhead h2 { margin: 0; font-size: 20px; }
.item { padding: 16px 0; border-top: 1px solid var(--ln); }
.item:first-of-type { border-top: 0; }
.itemhead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.warn { font-size: 12px; font-weight: 700; color: var(--bad); border: 1px solid var(--bad); border-radius: 999px; padding: 2px 8px; }
.grid4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 10px; }
@media (min-width: 520px) { .grid4 { grid-template-columns: repeat(4, 1fr); } }
.grid4 label { font-size: 12px; }
.grid6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 10px; }
@media (min-width: 520px) { .grid6 { grid-template-columns: repeat(6, 1fr); } }
.grid6 label { font-size: 12px; }
.setgrid.rpe { grid-template-columns: 28px 1fr 1fr 1fr 1fr 48px; gap: 6px; }
.setgrid.rpe .prev { font-size: 12px; }
.movers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.movers form { margin: 0; }
details.more { margin-top: 12px; }
details.more summary { cursor: pointer; color: var(--ink2); font-size: 14px; font-weight: 600; padding: 6px 0; }
.picker li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ln); }
.picker li:last-child { border-bottom: 0; }
.picker form { margin: 0; }
.pname { display: flex; flex-direction: column; font-weight: 700; min-width: 0; }
.pname small { font-weight: 500; color: var(--ink2); font-size: 13px; }
.exlist li span:last-child { font-size: 14px; }
.eximg { margin: 0 0 16px; }
.eximg img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--cb); }
.video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 16px; border-radius: 18px; overflow: hidden; border: 1px solid var(--cb); background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Etusivu: yhteenvetokortit ---- */
.pagehd { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; }
.pagehd h1 { margin: 4px 0 0; }
.pagehd .btnrow a, .pagehd .btnrow button { min-height: 44px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat { padding: 18px 20px; border-radius: 28px; display: flex; flex-direction: column; gap: 12px; }
.stat .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stat .top span:first-child { color: var(--ink2); font-size: 14px; font-weight: 600; }
.stat .tile { width: 34px; height: 34px; border-radius: 10px; background: var(--as); color: var(--at); display: flex; align-items: center; justify-content: center; }
.stat .tile .ico { width: 20px; height: 20px; }
.stat strong { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin-bottom: 20px; }
.cols > .main { flex: 2 1 440px; min-width: 0; }
.cols > .aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.rowitem { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--ln); }
.rowitem:first-of-type { border-top: 0; }
.rowitem .avatar { width: 44px; height: 44px; font-size: 14px; }
.rowitem .txt { flex: 1; min-width: 0; }
.rowitem .txt strong { display: block; font-size: 15px; }
.rowitem .txt span { display: block; font-size: 14px; color: var(--ink2); }
.btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--fl); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; border: 0; box-shadow: none; }
.btn2:hover { background: var(--as); }
.cardhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 12px; }
.cardhead h2 { margin: 0; }
.cardhead a { color: var(--at); font-weight: 700; font-size: 14px; text-decoration: none; }
.bars { display: flex; align-items: flex-end; gap: 10px; height: 140px; margin-top: 20px; }
.bars div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; justify-content: flex-end; height: 100%; }
.bars i { display: block; width: 100%; border-radius: 8px; background: var(--ac); min-height: 4px; }
.bars span { font-size: 12px; font-weight: 600; color: var(--ink2); }
.quick { display: flex; flex-direction: column; gap: 8px; }
.quick .btn2 { justify-content: flex-start; width: 100%; }
.progress { height: 8px; border-radius: 4px; background: var(--fl); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--ac); border-radius: 4px; }
.nextcard { display: flex; flex-direction: column; gap: 14px; }
.nextcard h2 { font-size: 24px; margin: 0; letter-spacing: -.01em; }
.nextcard form { margin: 0; }
.nextcard button, .nextcard .btnlink { min-height: 52px; font-size: 16px; width: 100%; }
.cardstack { display: flex; flex-direction: column; gap: 14px; }

/* ---- Päiväkirja: treenin kirjaus ---- */
.wk-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.wk-head .back { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 999px; background: var(--so); border: 1px solid var(--cb); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.wk-head .ttl { flex: 1; min-width: 0; }
.wk-head h1 { font-size: 20px; margin: 0; letter-spacing: -.01em; }
.wk-head .sub { font-size: 13px; color: var(--ink2); font-weight: 600; }
.wk-head .dur { text-align: right; }
.wk-head .dur .k { font-size: 11px; font-weight: 700; color: var(--ink2); letter-spacing: .06em; }
.wk-head .dur .v { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.solid { background: var(--so); border: 1px solid var(--cb); border-radius: 28px; padding: 18px; box-shadow: var(--sh); }
.solid h2 { font-size: 22px; letter-spacing: -.01em; margin: 0 0 12px; }
.solid p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.goal { font-size: 13px; font-weight: 600; color: var(--ink2); margin-bottom: 12px; }
.setgrid { display: grid; grid-template-columns: 34px 1fr 1fr 1fr 48px; gap: 8px; align-items: center; margin-bottom: 8px; }
.setgrid.hd { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); margin-bottom: 4px; }
.setgrid.hd span:not(:first-child) { text-align: center; }
.setgrid .n { font-weight: 800; font-size: 16px; text-align: center; }
.setgrid .prev { text-align: center; font-size: 13px; font-weight: 600; color: var(--ink2); }
.setgrid input[type=text] { min-height: 48px; margin: 0; padding: 0 6px; border-radius: 12px; font-size: 18px; font-weight: 700; text-align: center; min-width: 0; }
.setgrid .chk { position: relative; width: 48px; height: 48px; margin: 0; }
.setgrid .chk input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.setgrid .chk span { position: absolute; inset: 0; border-radius: 12px; border: 2px solid var(--ac); color: var(--ac); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.setgrid .chk span .ico { opacity: 0; }
.setgrid .chk input:checked + span { background: var(--ac); color: var(--ai); }
.setgrid .chk input:checked + span .ico { opacity: 1; }
.setgrid .chk input:focus-visible + span { outline: 3px solid var(--ac); outline-offset: 2px; }
.setgrid .chk input:disabled { cursor: default; }
.restcard { margin-top: 14px; }
.rest-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rest-row .t { font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.rest-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rest-btns .btn2 { min-height: 40px; padding: 0 14px; }
.next-hint { margin-top: 14px; font-size: 13px; color: var(--ink2); font-weight: 600; }
.wk-bar { display: none; }
.js .wk-bar { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 12px 20px 22px; background: linear-gradient(to top, var(--bg) 70%, transparent); }
.wk-bar button { flex: 1; }
.wk-bar button.secondary { flex: 0 0 auto; width: 52px; padding: 0; }
.stepper .wk-step, .stepper .wk-final { display: none; }
.stepper .wk-step.cur, .stepper .wk-final.cur { display: block; }
.js .wrap.wk { padding-bottom: 130px; }
@media (min-width: 900px) { .js .wk-bar { left: 288px; right: 20px; max-width: 700px; } }

.wk-head .dur[hidden] { display: none; }
.restcard { display: none; }
.stepper .restcard { display: block; }
.stepper .restcard[hidden] { display: none; }

.sm { display: none; }
@media (max-width: 899px) {
  .pagehd { margin-bottom: 16px; gap: 14px; }
  .pagehd h1 { font-size: 24px; }
  .pagehd .btnrow { width: 100%; flex-wrap: nowrap; }
  .pagehd .btnrow > * { flex: 1; min-width: 0; padding: 0 12px; min-height: 44px; font-size: 14px; }
  .lg { display: none; }
  .sm { display: inline; }
  .stats { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
  .stat { padding: 14px 16px; border-radius: 18px; gap: 6px; }
  .stat .tile { display: none; }
  .stat .top span:first-child { font-size: 13px; }
  .stat strong { font-size: 28px; }
  .card { border-radius: 24px; padding: 18px; }
  .rowitem { padding: 10px 0; }
  .rowitem .avatar { width: 38px; height: 38px; font-size: 13px; }
}

.topm .avatar { text-decoration: none; }
.cardhead a { white-space: nowrap; }
body.wk .topm, body.wk .pill { display: none; }
@media (min-width: 900px) { body.wk .side { display: flex; } }

/* Ohjelmanrakentaja: päivät vasemmalla, tiedot ja julkaisu oikealla */
.pbuild { display: flex; flex-direction: column; gap: 20px; }
.pmain, .paside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pmain > .card, .paside > .card { margin-top: 0; }
@media (min-width: 1100px) { .pbuild { flex-direction: row; align-items: flex-start; } .pmain { flex: 2.2 1 0; } .paside { flex: 1 1 0; min-width: 300px; } }

/* Askel 11: mittaukset ja kehitys */
.mcard { padding: 14px 0; border-top: 1px solid var(--ln); }
.mcard label { color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.mcard p { margin: 0 0 8px; font-size: 14px; }
.mcard input { margin: 0; }
.mval { font-size: 24px; font-weight: 800; color: var(--ac); white-space: nowrap; }
.mval small { font-size: 13px; font-weight: 700; color: var(--ink2); }
.chart { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.chart polyline { fill: none; stroke: var(--ac); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart circle { fill: #FE6807; stroke: var(--bg); stroke-width: 1.5; }
.chart .ax { stroke: var(--ln); stroke-width: 1; }
.chart text { fill: var(--ink2); font-size: 9px; font-weight: 600; }

/* Askel 12: ravinto */
.macro { margin-top: 12px; }
.mbar { display: flex; gap: 3px; height: 10px; border-radius: 99px; overflow: hidden; background: rgba(255,235,151,.08); }
.mbar i { display: block; min-width: 4px; }
.mbar .mp { background: var(--ac); }
.mbar .mf { background: #FE6807; }
.mbar .mc { background: #FBF3DC; }
.mleg { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; font-size: 14px; font-weight: 700; }
.mleg li { display: flex; align-items: center; gap: 6px; }
.mleg b { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.mleg .dp { background: var(--ac); } .mleg .df { background: #FE6807; } .mleg .dc { background: #FBF3DC; }
.mtime { font-size: 14px; font-weight: 700; color: var(--ink2); margin-left: 6px; }
.searchrow { display: flex; gap: 10px; align-items: stretch; margin-bottom: 12px; }
.searchrow input { margin: 0; flex: 1; min-width: 0; }
.searchrow button { width: auto; padding: 0 22px; flex: 0 0 auto; }
.foodrow { padding: 12px 0; border-top: 1px solid var(--ln); }
.foodrow .fname { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.gramrow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.gramrow input { margin: 0; width: 100px; min-width: 0; text-align: center; }
.gramrow .unit { font-weight: 700; color: var(--ink2); }
.gramrow button { width: auto; }
.fineli { font-size: 12px; margin-top: 14px; }
details.more summary .muted { display: block; font-size: 13px; font-weight: 500; }

/* Askel 13: raportit */
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 8px; border-radius: 99px; background: #FE6807; color: #09080E; font-size: 11px; font-weight: 800; line-height: 1; }
.pill a { position: relative; }
.pill .badge { position: absolute; top: 2px; left: 55%; margin: 0; }
.side nav a .badge { margin-left: auto; }
.tag { display: inline-block; padding: 4px 10px; border-radius: 99px; background: var(--fl); border: 1px solid var(--cb); font-size: 13px; font-weight: 700; }
.tag.new { background: var(--ac); color: var(--ai); border-color: transparent; }
.rlist li { align-items: center; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.cmt { padding: 12px 14px; margin: 0 0 10px; border-radius: 18px; background: var(--fl); border: 1px solid var(--cb); }
.cmt.coach { border-color: rgba(255,235,151,.35); }
.cmt p { margin: 0; }
.cmt .cmeta { margin-bottom: 4px; font-size: 14px; }

/* Askel 15: takaisin-linkki ja liikekirjasto */
.back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--cb); color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none; }
.back:hover { background: rgba(255, 235, 151, .14); }
.chipgroup { margin: 14px 0 0; }
.chipgroup .lab { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--ink2); }
.libform { margin: 0; }
.librow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--cb); }
.librow:first-child { border-top: 0; }
.librow .nm { font-weight: 700; font-size: 16px; }
.librow .sub { display: block; margin-top: 2px; font-size: 13px; color: var(--ink2); }
.librow form { margin: 0; flex: none; }
.librow .done { font-weight: 700; font-size: 14px; color: var(--ac); white-space: nowrap; }

/* Kalenteri */
.calhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.calhead h2 { margin: 0; font-size: 20px; }
.calhead .btn2 { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; }
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calgrid .dow { text-align: center; font-size: 12px; font-weight: 700; color: var(--mu, #a9a39a); padding-bottom: 4px; }
.calgrid .day { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; min-height: 52px; padding: 6px 2px; border-radius: 14px; border: 1px solid var(--cb); background: var(--fl); text-decoration: none; color: inherit; }
.calgrid .day.out { opacity: .4; }
.calgrid .day.today .num { background: #FE6807; color: #09080E; border-radius: 99px; min-width: 24px; text-align: center; font-weight: 800; }
.calgrid .day.sel { border-color: #FFEB97; box-shadow: 0 0 0 1px #FFEB97 inset; }
.calgrid .num { font-size: 14px; line-height: 24px; padding: 0 4px; }
.dots { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; min-height: 8px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 99px; margin-right: 4px; vertical-align: middle; }
.dots .dot { margin: 0; }
.dot.workout { background: #FE6807; }
.dot.measure { background: #6FD3B0; }
.dot.report { background: #FFEB97; }
.dot.program { background: #8FB8FF; }
.dot.nutrition { background: #E39BFF; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 20px 0 0; font-size: 13px; color: var(--mu, #a9a39a); }
@media (max-width: 600px) { .calgrid { gap: 4px; } .calgrid .day { min-height: 46px; border-radius: 12px; } }

/* Piilota vierityspalkki puhelimessa ja tabletilla (sivu vierittyy silti normaalisti) */
@media (max-width: 900px) {
  html { scrollbar-width: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
}

/* Kalenterimerkinnät */
.dot.note { background: #FFD25E; }
.dot.note.c-orange { background: #FE6807; }
.dot.note.c-blue { background: #8FB8FF; }
.dot.note.c-green { background: #6FD3B0; }
.dot.note.c-purple { background: #E39BFF; }
.dot.note.c-grey { background: #A5A5A5; }
.colorpick { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 0; }
.colorpick label { cursor: pointer; margin: 0; }
.colorpick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.colorpick .dot { width: 28px; height: 28px; margin: 0; border: 2px solid transparent; box-sizing: border-box; }
.colorpick input:checked + .dot { border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
.colorpick input:focus-visible + .dot { outline: 2px solid #fff; outline-offset: 2px; }
.daypick { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 0; }
.daypick label { margin: 0; cursor: pointer; }
.daypick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.daypick span { display: inline-block; min-width: 44px; padding: 10px 0; text-align: center; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); }
.daypick input:checked + span { background: #FE6807; border-color: #FE6807; color: #fff; }
.daypick input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.daypick + label, .colorpick + label { display: block; margin-top: 18px; }
.card .calgrid + .legend { margin: 26px 0 4px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); gap: 10px 22px; }
.legend span { white-space: nowrap; }
@media (max-width: 600px) { .card .calgrid + .legend { display: grid; grid-template-columns: 1fr 1fr; } }

/* Ohjelmointikalenteri */
.dot.plan { background: transparent; border: 2px solid #FE6807; box-sizing: border-box; }
.dot.plan.missed { border-color: #E06A6A; }
.dot.plan.done { background: #FE6807; }
.planstat { font-size: 13px; color: var(--mu, #a9a39a); }
.planstat.missed { color: #E8908F; }
.pickday { display: block; margin: 0; cursor: pointer; }
.pickday input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pickday span { display: block; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .18); margin: 6px 0 0; }
.pickday input:checked + span { background: #FE6807; border-color: #FE6807; color: #fff; }
.pickday input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.pickday + label:not(.pickday) { display: block; margin-top: 18px; }
.pickday .cnt { font-style: normal; font-weight: 400; opacity: .75; margin-left: 6px; }

/* Kalenterin päivävalikko */
.js .daybtns { display: none; }
.daymenu { border: 1px solid rgba(255, 255, 255, .14); border-radius: 22px; background: #1a1620; color: inherit; padding: 22px; width: min(92vw, 380px); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.daymenu::backdrop { background: rgba(0, 0, 0, .6); }
.daymenu h2 { margin: 0 0 14px; }
.daymenu .menuopts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.daymenu .opt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border-radius: 16px; background: rgba(255, 255, 255, .07); color: inherit; text-decoration: none; font-weight: 700; }
.daymenu .opt:first-child { background: #FE6807; color: #fff; }
.daymenu .opt:hover, .daymenu .opt:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.daymenu .opt svg { width: 22px; height: 22px; flex: none; }
.daymenu button { width: 100%; }
code { overflow-wrap: anywhere; word-break: break-word; }

/* Asiakkaan koontinäkymä (0.28.0) */
.wrap.dash { max-width: none; }
@media (min-width: 900px) { .wrap.dash { max-width: none; padding-right: 28px; } }
.dashtop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.dashname h1 { margin: 6px 0 2px; }
.dashname .lead { margin: 0; }
.panel { background: var(--card, #17151c); border: 1px solid var(--ln); border-radius: 22px; overflow: hidden; margin-bottom: 14px; }
.panelhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ln); list-style: none; cursor: default; }
.panelhead h2 { margin: 0; font-size: 20px; }
.panelhead a { color: var(--at); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.panelpad { padding: 14px 20px 18px; }
.swform { display: flex; gap: 8px; align-items: center; margin: 0; }
.swform select { width: auto; max-width: 280px; margin: 0; padding: 8px 10px; }
.split { display: grid; }
.splitl { border-bottom: 1px solid var(--ln); }
.wohead { padding: 16px 20px 10px; }
.wohead h3 { margin: 0; font-size: 22px; }
.wohead p { margin: 4px 0 0; }
.kv { font-size: 14px; }
.kv > span, .kv span span { color: var(--at); font-weight: 700; }
.exlist { max-height: 300px; overflow: auto; }
.exrow { display: flex; flex-direction: column; gap: 3px; padding: 12px 20px; text-decoration: none; color: var(--ink); border-top: 1px solid var(--ln); font-size: 14px; }
.exrow strong { color: var(--at); font-size: 15px; }
.exrow.on { background: rgba(254, 104, 7, .12); box-shadow: inset 4px 0 0 #FE6807; }
.exnote { padding: 10px 20px; margin: 0; }
.splitr { padding: 16px 20px 20px; min-height: 220px; }
.charttitle { margin: 0 0 8px; font-size: 22px; color: var(--at); }
.splitr .chart { margin-top: 12px; }
.fourcols, .twocols { display: grid; gap: 14px; margin-bottom: 14px; }
.fourcols .panel, .twocols .panel { margin: 0; }
.col { display: flex; flex-direction: column; min-height: 220px; }
.colbody { flex: 1; overflow: auto; padding: 8px 20px 16px; max-height: 420px; }
.empty { text-align: center; color: var(--ink2); font-weight: 800; font-size: 18px; margin: 48px 8px; }
.listrow { display: flex; justify-content: space-between; gap: 8px; padding: 12px 10px; margin: 0 -10px; border-bottom: 1px solid var(--ln); text-decoration: none; color: var(--ink); border-radius: 10px; }
.listrow.on { background: rgba(254, 104, 7, .14); }
.addbox summary::-webkit-details-marker { display: none; }
.addbox summary { cursor: pointer; }
.plus { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--at); color: #17151c; font-size: 24px; font-weight: 800; line-height: 1; }
.addbox[open] .plus { transform: rotate(45deg); }
.colform { padding: 12px 20px 4px; border-bottom: 1px solid var(--ln); }
.task.done p { opacity: .6; }
.late { color: #ff8a5c; font-weight: 700; font-size: 14px; }
.item .cardhead form, .task .movers form { margin: 0; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(340px, 4fr) 6fr; }
  .splitl { border-bottom: 0; border-right: 1px solid var(--ln); }
  .exlist { max-height: 340px; }
  .fourcols { grid-template-columns: 1.3fr 1.7fr 1.2fr 1.2fr; align-items: stretch; }
  .fourcols .col { min-height: 380px; }
  .twocols { grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (min-width: 900px) and (max-width: 1250px) {
  .fourcols { grid-template-columns: 1fr 1fr; }
}
.panelhead h2 { font-size: 18px; }
.panelhead a { flex-shrink: 0; }
.task .cardhead { flex-wrap: wrap; }
.task .movers { display: flex; gap: 6px; }

.who { display: flex; align-items: center; gap: 14px; margin: 6px 0 2px; }
.who h1 { margin: 0; }
.avatar { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #17151c; border: 1px solid var(--ln); color: var(--at); font-weight: 800; font-size: 18px; flex-shrink: 0; }
.xchart { display: block; width: 100%; height: auto; max-height: 100%; overflow: visible; }
.xchart .grid { stroke: var(--ln); stroke-width: 1; }
.xchart text { fill: var(--ink2); font-size: 12px; font-weight: 600; }
.xchart .ln { fill: none; stroke: var(--at); stroke-width: 2.5; stroke-linecap: round; }
.xchart .dot { fill: var(--at); stroke: #17151c; stroke-width: 2; }
.xchart .hit { fill: transparent; }
.xchart .tipbox { display: none; pointer-events: none; }
.xchart .tipbox rect { fill: #f3eee0; }
.xchart .tipbox text { fill: #17151c; font-size: 13px; font-weight: 700; }
.xchart .tipbox .tipd { fill: #17151c; }
.xchart .pt:hover .tipbox, .xchart .pt:focus .tipbox { display: block; }
.xchart .pt:hover .dot, .xchart .pt:focus .dot { r: 8; }
.xchart .pt { outline: none; }
@media (min-width: 900px) {
  .split { height: 330px; }
  .splitl { display: flex; flex-direction: column; overflow: hidden; }
  .exlist { flex: 1; max-height: none; }
  .splitr { display: flex; flex-direction: column; min-height: 0; padding-bottom: 12px; }
  .splitr .xchart { flex: 1; min-height: 0; }
  .fourcols .col { height: 380px; min-height: 0; }
  .fourcols .colbody { max-height: none; }
}

button.plus { border: 0; cursor: pointer; padding: 0; }
.modal { border: 1px solid rgba(255, 255, 255, .14); border-radius: 22px; background: #26242b; color: inherit; padding: 26px; width: min(92vw, 600px); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.modal::backdrop { background: rgba(0, 0, 0, .65); }
.modalhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.modalhead h2 { margin: 0; font-size: 28px; }
button.plus.close { transform: rotate(45deg); width: 44px; height: 44px; font-size: 30px; }
.modal label.check { display: flex; align-items: center; gap: 10px; margin: 12px 0; font-weight: 600; }
.modal label.check input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; }

.panelhead { min-height: 68px; box-sizing: border-box; }
.panelhead .plus { flex-shrink: 0; }
.panelhead h2 { line-height: 1.2; }
.panelhead button.plus { min-height: 0; width: 34px; height: 34px; padding: 0; margin: 0; }

/* ---- Painikkeet: kolmiulotteinen viimeistely (0.29.2) ---- */
button, .btnlink {
  position: relative;
  background: linear-gradient(180deg, #ffb066 0%, #ff8a2b 38%, #fe6807 62%, #e85200 100%);
  border: 1px solid #c94600;
  color: #2a1100;
  text-shadow: 0 1px 0 rgba(255, 220, 170, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 3px rgba(120, 30, 0, .35), 0 4px 0 #a73a00, 0 8px 18px rgba(254, 104, 7, .38);
  transition: transform .09s ease, box-shadow .09s ease, filter .12s ease;
}
button:hover:not(:disabled), .btnlink:hover { filter: brightness(1.07) saturate(1.05); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -2px 3px rgba(120, 30, 0, .35), 0 5px 0 #a73a00, 0 12px 22px rgba(254, 104, 7, .45); }
button:active:not(:disabled), .btnlink:active { transform: translateY(3px); filter: brightness(.97); box-shadow: inset 0 2px 4px rgba(120, 30, 0, .45), 0 1px 0 #a73a00, 0 2px 6px rgba(254, 104, 7, .3); }

button.secondary, .btnlink.secondary, button.mini, .btn2 {
  background: linear-gradient(180deg, rgba(255, 245, 200, .2) 0%, rgba(255, 235, 151, .08) 55%, rgba(255, 235, 151, .04) 100%), #1d1a16;
  border: 1px solid rgba(255, 235, 151, .26);
  color: var(--ink);
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -2px 3px rgba(0, 0, 0, .35), 0 3px 0 #050404, 0 6px 14px rgba(0, 0, 0, .45);
}
button.secondary:hover:not(:disabled), .btnlink.secondary:hover, button.mini:hover:not(:disabled), .btn2:hover {
  filter: brightness(1.18); transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255, 245, 200, .24) 0%, rgba(255, 235, 151, .1) 55%, rgba(255, 235, 151, .05) 100%), #1d1a16;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -2px 3px rgba(0, 0, 0, .35), 0 4px 0 #050404, 0 10px 18px rgba(0, 0, 0, .5);
}
button.secondary:active:not(:disabled), .btnlink.secondary:active, button.mini:active:not(:disabled), .btn2:active {
  transform: translateY(2px); filter: brightness(.95);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55), 0 1px 0 #050404;
}
button.mini { min-height: 38px; }
button.mini.danger { color: #ff9a8d; border-color: rgba(255, 122, 107, .4); background: linear-gradient(180deg, rgba(255, 140, 120, .2) 0%, rgba(255, 122, 107, .07) 100%), #1d1514; }

button.plus, .plus {
  background: linear-gradient(180deg, #fff6c6 0%, #ffe98f 45%, #f2c94c 100%);
  border: 1px solid #b8932a;
  color: #2a1f00;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -2px 3px rgba(140, 100, 0, .35), 0 3px 0 #8a6d14, 0 6px 12px rgba(0, 0, 0, .45);
}
button.plus:hover:not(:disabled) { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 3px rgba(140, 100, 0, .35), 0 4px 0 #8a6d14, 0 9px 16px rgba(0, 0, 0, .5); }
button.plus:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(140, 100, 0, .5), 0 1px 0 #8a6d14; }
button.plus.close { transform: rotate(45deg); }
button.plus.close:hover:not(:disabled) { transform: rotate(45deg) translateY(-1px); }
button.plus.close:active:not(:disabled) { transform: rotate(45deg) translateY(2px); }

.daymenu .opt { border: 1px solid rgba(255, 235, 151, .22); background: linear-gradient(180deg, rgba(255, 245, 200, .18), rgba(255, 235, 151, .05)), #1d1a16; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 3px 0 #050404; }
.daymenu .opt:first-child { background: linear-gradient(180deg, #ffb066, #fe6807 60%, #e85200); border-color: #c94600; color: #2a1100; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 3px 0 #a73a00; }
button:disabled { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 0 rgba(0, 0, 0, .5); filter: grayscale(.4); }
@media (prefers-reduced-motion: reduce) { button, .btnlink, .btn2 { transition: none; } }
.modal form > button[type=submit] { margin-top: 16px; }

/* Pyöreät +-napit: kupera, kultainen, keskitetty kuvake (0.29.3) */
button.plus, .panelhead button.plus, .modalhead button.plus {
  width: 42px; height: 42px; min-height: 0; padding: 0; margin: 0; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 0; line-height: 0;
  background: radial-gradient(circle at 35% 22%, #fffdea 0%, #ffeda0 30%, #f4cb4a 70%, #dba622 100%);
  border: 0; color: #3a2a00; text-shadow: none;
  box-shadow: 0 0 0 1px #7d6210, inset 0 0 0 2px rgba(255, 255, 255, .38), inset 0 3px 2px rgba(255, 255, 255, .85), inset 0 -4px 6px rgba(130, 90, 0, .45), 0 4px 0 #7d6210, 0 9px 14px rgba(0, 0, 0, .5);
}
button.plus svg { width: 20px; height: 20px; display: block; fill: none; stroke: #3a2a00; stroke-width: 3.4; stroke-linecap: round; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .7)); }
button.plus:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 0 0 1px #7d6210, inset 0 0 0 2px rgba(255, 255, 255, .42), inset 0 3px 2px rgba(255, 255, 255, .9), inset 0 -4px 6px rgba(130, 90, 0, .45), 0 5px 0 #7d6210, 0 12px 18px rgba(0, 0, 0, .55); }
button.plus:active:not(:disabled) { transform: translateY(3px); filter: brightness(.96); box-shadow: 0 0 0 1px #7d6210, inset 0 3px 6px rgba(130, 90, 0, .6), 0 1px 0 #7d6210; }
button.plus.close, .modalhead button.plus.close { width: 46px; height: 46px; transform: none; }
button.plus.close svg { transform: rotate(45deg); }
button.plus.close:hover:not(:disabled) { transform: translateY(-1px); }
button.plus.close:active:not(:disabled) { transform: translateY(3px); }

/* Ruutujen otsikkopalkit samaan korkeuteen, jotta jakoviivat osuvat kohdalleen (0.29.4) */
.panelhead { height: 72px; min-height: 72px; padding: 0 20px; box-sizing: border-box; }
.panelhead > * { margin-top: 0; margin-bottom: 0; }
.panelhead button.plus { margin: 0; }
.panelhead .swform { margin: 0; }

/* ---- Painikkeet 0.29.5: pehmeä lasimainen tyyli (kuten hier0mo.fi), ei kovaa pohjareunaa ---- */
button, .btnlink {
  background: linear-gradient(180deg, #ff8a3d 0%, #fb6a14 55%, #ea5600 100%);
  border: 1px solid rgba(255, 190, 140, .55);
  color: #fff;
  text-shadow: 0 1px 1px rgba(110, 30, 0, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 6px 16px rgba(0, 0, 0, .38), 0 2px 5px rgba(234, 86, 0, .35);
}
button:hover:not(:disabled), .btnlink:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 9px 20px rgba(0, 0, 0, .42), 0 3px 8px rgba(234, 86, 0, .45); }
button:active:not(:disabled), .btnlink:active { transform: translateY(1px); filter: brightness(.96); box-shadow: inset 0 2px 5px rgba(110, 30, 0, .4), 0 2px 6px rgba(0, 0, 0, .35); }

button.secondary, .btnlink.secondary, button.mini, .btn2 {
  background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .04) 100%), #1b1714;
  border: 1px solid rgba(255, 255, 255, .2);
  color: var(--ink);
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 5px 14px rgba(0, 0, 0, .4);
}
button.secondary:hover:not(:disabled), .btnlink.secondary:hover, button.mini:hover:not(:disabled), .btn2:hover {
  filter: none; transform: translateY(-1px); border-color: rgba(255, 255, 255, .32);
  background: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .06) 100%), #1b1714;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 18px rgba(0, 0, 0, .46);
}
button.secondary:active:not(:disabled), .btnlink.secondary:active, button.mini:active:not(:disabled), .btn2:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35); }
button.mini.danger { color: #ff9a8d; border-color: rgba(255, 122, 107, .45); background: linear-gradient(180deg, rgba(255, 140, 120, .16) 0%, rgba(255, 122, 107, .05) 100%), #1b1514; }

button.plus, .panelhead button.plus, .modalhead button.plus {
  background: linear-gradient(180deg, #ff8a3d 0%, #fb6a14 55%, #ea5600 100%);
  border: 1px solid rgba(255, 190, 140, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 6px 14px rgba(0, 0, 0, .4), 0 2px 5px rgba(234, 86, 0, .35);
}
button.plus svg { stroke: #fff; stroke-width: 3; filter: drop-shadow(0 1px 1px rgba(110, 30, 0, .5)); }
button.plus:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 9px 18px rgba(0, 0, 0, .45), 0 3px 8px rgba(234, 86, 0, .45); }
button.plus:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(110, 30, 0, .4), 0 2px 6px rgba(0, 0, 0, .35); }
button.plus.close:hover:not(:disabled) { transform: translateY(-1px); }
button.plus.close:active:not(:disabled) { transform: translateY(1px); }
.daymenu .opt { border: 1px solid rgba(255, 255, 255, .2); background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)), #1b1714; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 5px 14px rgba(0, 0, 0, .4); }
.daymenu .opt:first-child { background: linear-gradient(180deg, #ff8a3d, #fb6a14 55%, #ea5600); border-color: rgba(255, 190, 140, .55); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 6px 16px rgba(0, 0, 0, .38); }
button:disabled { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 6px rgba(0, 0, 0, .3); filter: grayscale(.4); }

.headtools { display: flex; align-items: center; gap: 14px; }
.exlist.full { max-height: none; height: 100%; overflow: auto; }
#mittaukset .split { height: 330px; }
@media (max-width: 899px) { #mittaukset .split { height: auto; } #mittaukset .exlist.full { max-height: 260px; } }

/* Kirjautumis- ja kutsusivujen logo (0.30.1): sopii näyttöön, ei ylitä leveyttä */
.logo-login { margin: 0 0 22px; line-height: 0; }
.logo-login img { display: block; width: min(300px, 78vw); max-width: 100%; height: auto; margin: 0 auto 0 0; }
@media (min-width: 900px) { .logo-login img { width: 340px; } }

/* Ravinto-ohjelman raaka-ainehaku ponnahdusikkunassa (0.31.0) */
.foodmodal { width: min(94vw, 680px); max-height: 88vh; flex-direction: column; }
.foodmodal[open] { display: flex; }
.foodmodal .modalhead h2 { font-size: 22px; display: flex; flex-direction: column; gap: 2px; }
.foodmodal .modalsub { font-size: 14px; font-weight: 600; }
.foodresults { overflow: auto; min-height: 120px; max-height: 58vh; margin: 0 -6px; padding: 0 6px; }
.foodmodal .foodrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; }
.foodmodal .foodrow .fname { flex: 1 1 240px; margin: 0; }
.foodmodal .foodrow .gramrow { margin: 0; }
.foodmodal .searchrow { margin-bottom: 10px; }
.foodmodal .notice { margin: 0 0 10px; }
.modal input[type=time] { min-height: 48px; }

/* Ravinto-ohjelma: väljempi ainesrivi (0.31.2) */
.item { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 20px 0; }
.item .itemhead { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; }
.item .gramrow { margin: 0; }
.item .movers { margin: 0; display: flex; gap: 10px; align-items: center; }
.item .movers form { margin: 0; }
.item > .muted { margin: 0; }
.macro { margin: 18px 0 16px; }
.day > p { margin: 18px 0 8px; }
.day details.more { margin-top: 10px; }
.item .itemhead { align-items: flex-start; text-align: left; }
/* Aikavalitsin iOS:llä: täysi leveys, ei ylivuotoa, vasen tasaus (0.31.3) */
input[type=time] { -webkit-appearance: none; appearance: none; display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; text-align: left; min-height: 52px; }
input[type=time]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input[type=time]::-webkit-datetime-edit { padding: 0; }
/* Viesti usealle (0.32.0) */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .two { grid-template-columns: 1fr; } }
/* Viestit-lista (0.32.1) */
.msgtools { margin: 22px 0 20px; }
.convcard { padding: 10px; }
.convrow { display: flex; align-items: center; gap: 16px; padding: 16px 14px; border-radius: 16px; text-decoration: none; color: inherit; }
.convrow + .convrow { border-top: 1px solid rgba(255, 255, 255, .07); border-top-left-radius: 0; border-top-right-radius: 0; }
.convrow:hover { background: rgba(255, 255, 255, .05); }
.convav { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #fff; background: linear-gradient(180deg, #ff8a3d, #ea5600); }
.convmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.convtop { display: flex; align-items: center; font-size: 17px; }
.convprev { font-size: 14px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convtime { flex: none; font-size: 12px; color: var(--ink2); text-align: right; max-width: 90px; }
@media (max-width: 480px) { .convtime { display: none; } }
/* Asiakasvalitsin (0.33.1) */
.pickbox { margin: 10px 0 0; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; padding: 12px; background: rgba(255, 255, 255, .02); }
.pickbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.pickbar input[type=search] { flex: 1 1 200px; margin: 0; min-height: 44px; }
.picklist { max-height: 300px; overflow-y: auto; padding: 2px 4px; }
.picklist .check[hidden] { display: none; }
.pickcount { margin: 8px 0 0; font-size: 13px; }
/* Koko rivi on napautettava listoissa (0.34.1) */
.facts li:has(> span:first-child > a), .librow:has(.nm > a) { position: relative; }
.facts li > span:first-child > a::after, .librow .nm > a::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.facts li form, .facts li button, .facts li input, .facts li select, .facts li label, .facts li > span:last-child a,
.librow form, .librow button { position: relative; z-index: 1; }
.facts li:has(> span:first-child > a):hover, .librow:has(.nm > a):hover { background: rgba(255, 255, 255, .04); }
.facts li:has(> span:first-child > a) { margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 12px; }
/* Organisaation logo otsikon yläpuolella (0.36.0) */
.orgbrand { margin: 0 0 8px; line-height: 0; }
.orgbrand img { display: block; max-height: 34px; max-width: min(240px, 70vw); width: auto; height: auto; object-fit: contain; object-position: left center; }
.logoprev { background: #09080E; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; padding: 14px; margin: 8px 0 12px; }
.logoprev img { display: block; max-height: 60px; max-width: 100%; width: auto; height: auto; }
/* Logo isommaksi (0.36.1) */
.orgbrand { margin: 0 0 12px; }
.orgbrand img { max-height: 72px; max-width: min(320px, 82vw); }
@media (min-width: 900px) { .orgbrand img { max-height: 96px; max-width: 420px; } }
.logoprev img { max-height: 96px; }
/* Logot suuremmiksi (0.36.2): TREENIVA +50 %, organisaation logo +25 % */
.brand img, .topm .brand img { height: 36px; }
@media (min-width: 900px) { .side .brand img { height: 42px; } }
.orgbrand img { max-height: 90px; max-width: min(400px, 85vw); }
@media (min-width: 900px) { .orgbrand img { max-height: 120px; max-width: 525px; } }
.logoprev img { max-height: 120px; }
/* TREENIVA-logo +20 % (0.37.0) */
.brand img, .topm .brand img { height: 43px; }
@media (min-width: 900px) { .side .brand img { height: 50px; } }
/* Vetovalikko lomakkeissa (0.38.1) */
.wk-final select {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-height: 52px; padding: 12px 44px 12px 14px; margin: 0 0 16px;
  font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); background-color: var(--fl); border: 1px solid var(--ln); border-radius: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9bfa8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; color-scheme: dark;
}
.wk-final label { margin-top: 4px; }

/* Lakitekstit */
.legal h2 { margin-top: 22px; font-size: 18px; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { line-height: 1.55; }
.legal ul { padding-left: 20px; }
.legal li { margin: 4px 0; }
.legalfoot { margin: 28px 0 8px; font-size: 12px; color: var(--ink2); text-align: center; }
.legalfoot a { color: var(--ink2); text-decoration: underline; }

.maxlist li { align-items: center; gap: 10px; }
.maxform { display: flex; gap: 8px; align-items: center; }
.maxform input[type="text"] { width: 90px; margin: 0; }
.maxform select {
  -webkit-appearance: none; appearance: none; display: block; flex: 1 1 100%; width: 100%; min-width: 0; min-height: 48px; padding: 12px 44px 12px 14px; margin: 0;
  font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); background-color: var(--fl); border: 1px solid var(--ln); border-radius: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9bfa8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; color-scheme: dark;
}
.maxform select:focus-visible { outline: 3px solid var(--ac); outline-offset: 2px; }
.csel { position: relative; flex: 1 1 100%; min-width: 0; }
.csel-native { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; }
.js .csel .csel-btn, .csel-btn {
  display: block; width: 100%; min-height: 48px; padding: 12px 44px 12px 14px; margin: 0; text-align: left; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 600; color: var(--ink2); background-color: var(--fl); border: 1px solid var(--ln); border-radius: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9bfa8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 20px;
}
.csel-btn.on { color: var(--ink); }
.csel-btn.bad { border-color: #ff7a59; }
.csel-btn:focus-visible, .csel-btn[aria-expanded="true"] { outline: 2px solid var(--ac); outline-offset: 1px; }
.csel-panel {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); padding: 8px; border-radius: 14px;
  background: #15121c; border: 1px solid rgba(255,235,151,.28); box-shadow: 0 18px 40px rgba(0,0,0,.65);
}
.csel-panel[hidden], .csel-empty[hidden], .csel-list li[hidden] { display: none; }
.csel-q { width: 100%; margin: 0 0 6px; min-height: 42px; padding: 8px 12px; font-size: 16px; border-radius: 10px; }
.csel-list { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; }
.csel-list li { padding: 11px 12px; border-radius: 9px; font-size: 16px; font-weight: 600; color: var(--ink); cursor: pointer; }
.csel-list li:hover, .csel-list li.hot { background: rgba(254,104,7,.22); }
.csel-list li.sel { color: var(--ac); }
.csel-list li.sel::after { content: " ✓"; }
.panel:has(.csel-panel:not([hidden])) { overflow: visible; }
.csel-empty { margin: 8px 12px; color: var(--ink2); font-size: 14px; }
.maxadd { margin-top: 14px; flex-wrap: wrap; }
.maxadd input[type="text"] { flex: 0 0 120px; }
.maxadd button { flex: 0 0 auto; width: auto; padding-left: 26px; padding-right: 26px; }
.maxform .secondary { width: auto; }

.pr { margin: 10px 0 0; font-size: 14px; font-weight: 600; }
.prbadge { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--ac); color: var(--ai); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.prlist { margin: 0; }
.prlist li { align-items: flex-start; }
.prlist .prreps { color: var(--ink2); font-size: 14px; line-height: 1.5; }

/* Asiakassivun yhteenveto ja välilehdet */
.csum { margin-bottom: 12px; }
.csum .stat { margin: 0; }
.csum strong small { font-size: 16px; font-weight: 700; color: var(--ink2); }
.flags { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.flags li { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #ffd2b0; background: rgba(254,104,7,.18); border: 1px solid rgba(254,104,7,.4); }
.cquick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.cquick .btnlink, .cquick .secondary { width: auto; min-height: 44px; padding: 10px 18px; }
.tabs { display: flex; gap: 6px; margin: 0 0 14px; padding: 5px; border-radius: 999px; background: var(--card); border: 1px solid var(--ln); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: 1 0 auto; text-align: center; white-space: nowrap; padding: 11px 18px; border-radius: 999px; font-weight: 700; font-size: 15px; color: var(--ink2); text-decoration: none; }
.tabs a.on { color: var(--ai); background: var(--ac); }
.tabs a:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.tabwrap[data-active="yleis"] > .tabpane:not([data-pane="yleis"]),
.tabwrap[data-active="treenit"] > .tabpane:not([data-pane="treenit"]),
.tabwrap[data-active="edist"] > .tabpane:not([data-pane="edist"]) { display: none; }
@media (max-width: 620px) { .csum { grid-template-columns: 1fr 1fr; } .tabs a { padding: 11px 14px; } }
div.cquick > a.btnlink, div.cquick > button.secondary { flex: 0 0 auto; width: auto; min-height: 44px; padding: 10px 18px; }
@media (max-width: 620px) { div.cquick { display: grid; grid-template-columns: 1fr 1fr; } div.cquick > a.btnlink, div.cquick > button.secondary { width: 100%; padding: 10px 8px; } .tabs a { padding: 11px 16px; } }
/* Välilehdet brändin värein: oranssi aktiivinen, tumma kisko */
.tabs { background: #14110f; border: 1px solid rgba(255,235,151,.18); box-shadow: inset 0 2px 6px rgba(0,0,0,.5); }
.tabs a { color: var(--ink); opacity: .72; transition: opacity .12s ease, background .12s ease; }
.tabs a:hover { opacity: 1; background: rgba(255,235,151,.08); }
.tabs a.on { opacity: 1; color: #fff; background: linear-gradient(180deg, #ff8a3d 0%, #fb6a14 55%, #ea5600 100%); border: 1px solid rgba(255,190,140,.55); text-shadow: 0 1px 1px rgba(110,30,0,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 14px rgba(254,104,7,.4); }

.progl li { align-items: center; gap: 12px; flex-wrap: wrap; }
.progl .check { flex: 1 1 260px; margin: 0; }
.progkg { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; }
.progkg input[type="text"] { width: 84px; margin: 0; text-align: center; }
.progl + p.muted { margin: 14px 0 16px; }

/* Ravinnon vaihtoehtoryhmät */
.grpbadge { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ac); background: rgba(254,104,7,.18); border: 1px solid rgba(254,104,7,.4); }
.grprow select { max-width: 220px; margin: 0; }
li.alt { display: block; }
li.alt .altlab { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ink2); text-transform: uppercase; letter-spacing: .04em; }
.opts { display: flex; flex-direction: column; gap: 8px; }
.optform { margin: 0; }
.opt { display: flex; width: 100%; min-height: 52px; padding: 10px 16px; align-items: center; justify-content: space-between; gap: 12px; text-align: left; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); background: var(--fl); border: 1px solid var(--ln); border-radius: 14px; box-shadow: none; text-shadow: none; text-transform: none; cursor: pointer; }
.opt span:last-child { color: var(--ink2); white-space: nowrap; font-weight: 600; font-size: 14px; }
.opt.on { background: rgba(254,104,7,.2); border-color: #fe6807; box-shadow: inset 0 0 0 1px #fe6807; }
.opt.on span:last-child { color: var(--ac); }
.opt.static { cursor: default; font-weight: 600; }
.opt.static em { color: var(--ink2); font-style: normal; font-weight: 700; margin-right: 6px; }

/* Vaihtoehtoryhmän valinta chip-painikkeina */
.grpbox { margin: 12px 0 4px; padding: 12px 14px; border-radius: 14px; background: rgba(255,235,151,.05); border: 1px solid var(--ln); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.grpbox form { margin: 0; }
.glab { font-size: 13px; font-weight: 700; color: var(--ink2); text-transform: uppercase; letter-spacing: .04em; }
.gchips { display: flex; flex-wrap: wrap; gap: 6px; }
.gchip { width: auto; min-width: 44px; min-height: 40px; padding: 0 14px; font-size: 15px; font-weight: 800; color: var(--ink2); background: var(--fl); border: 1px solid var(--ln); border-radius: 999px; box-shadow: none; text-shadow: none; }
.gchip.on { color: var(--ac); background: rgba(254,104,7,.25); border-color: #fe6807; box-shadow: inset 0 0 0 1px #fe6807; }
.ghint { margin: 0; font-size: 14px; color: var(--ink2); }

/* Aineksen alarivi: ryhmävalinta avattavana, siirto- ja poistopainikkeet samalla rivillä */
.item .itemfoot { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.item .itemfoot .movers { margin: 0 0 0 auto; }
details.grpd { flex: 0 1 auto; }
details.grpd[open] { flex: 1 1 100%; }
details.grpd > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink2); background: var(--fl); border: 1px solid var(--ln); border-radius: 999px; }
details.grpd > summary::-webkit-details-marker { display: none; }
details.grpd > summary b { color: var(--ac); }
details.grpd[open] > summary { color: var(--ink); border-color: rgba(254,104,7,.5); }
details.grpd .grpbox { margin: 10px 0 0; }
.item:has(.itemfoot) { padding: 14px 0; gap: 10px 18px; }

#pushbox [hidden] { display: none !important; }
#pushbox button { align-self: flex-start; }

/* Sivupalkki: ei leikkaannu matalalla ikkunalla. Valikko vierittyy, käyttäjärivi pysyy näkyvissä. */
@media (min-width: 900px) {
  .side nav { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
  .side .me { flex: none; }
}
@media (min-width: 900px) and (max-height: 1150px) {
  .side { padding: 18px 12px; }
  .side .brand { padding: 2px 10px 12px; }
  .side nav { gap: 2px; }
  .side nav a { min-height: 38px; font-size: 14px; gap: 10px; }
  .side .me { padding: 10px 12px 2px; }
}

/* Ilmoitukset-sivu */
#pushbox { padding: 24px; gap: 18px; max-width: 640px; }
#pushbox #pushstat { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.4; }
#pushbox .btnrow { gap: 12px; }
#pushbox .btnrow button { width: auto; flex: 0 0 auto; min-height: 48px; padding: 0 24px; }
#pushbox ~ p.muted { max-width: 640px; margin-top: 16px; line-height: 1.5; }
#pushbox #pushstat { margin-bottom: 6px; }

/* Viestit: lukukuittaus, uuden viestin erotin, hyppää alas -nappi */
.rcpt { margin: 4px 0 0; font-size: 12px; text-align: right; }
.rcpt[hidden] { display: none; }
.newdiv { display: flex; align-items: center; gap: 12px; margin: 8px 0; scroll-margin-top: 84px; color: var(--ac); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.newdiv::before, .newdiv::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .5; }
.chatdown { position: fixed; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 30; display: none; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 190, 140, .5); background: linear-gradient(180deg, #ff8a3d, #fb6a14 55%, #ea5600); color: #fff; font: inherit; font-weight: 800; box-shadow: 0 8px 22px rgba(0, 0, 0, .5); cursor: pointer; }
.chatdown.on { display: inline-flex; }
@media (min-width: 900px) { .chatdown { bottom: 28px; right: 32px; } }
form.prefs { display: flex; flex-direction: column; gap: 16px; }
form.prefs .check { display: flex; align-items: flex-start; gap: 12px; }
form.prefs .check small { display: block; margin-top: 4px; color: var(--ink2); font-weight: 400; line-height: 1.45; }
form.prefs button { align-self: flex-start; min-height: 48px; padding: 0 24px; width: auto; }

.chatdown { width: auto; left: auto; max-width: none; }
.chatdown .cnt:empty { display: none; }

/* Viestin kirjoitus: väljempi ja selkeämpi */
.compose { padding: 22px 20px 20px; }
.compose form { display: flex; flex-direction: column; gap: 14px; }
.compose label { font-size: 17px; font-weight: 800; color: var(--ink); margin: 0; }
.compose textarea { min-height: 104px; padding: 14px 16px; border-radius: 18px; font-size: 16px; line-height: 1.45; }
.compose button[type="submit"] { min-height: 52px; margin: 0; }
.compose .check { font-size: 15px; }
.compose > .muted { margin: 4px 2px 0 !important; line-height: 1.45; }
.compose textarea { height: 112px; }

/* Tehtävälistan valinnat */
form.taskprefs { display: flex; flex-direction: column; gap: 16px; }
form.taskprefs .check { display: flex; align-items: flex-start; gap: 12px; }
form.taskprefs .check small { display: block; margin-top: 4px; color: var(--ink2); font-weight: 400; line-height: 1.45; }
form.taskprefs button[type="submit"] { align-self: flex-start; min-height: 48px; padding: 0 24px; width: auto; }
fieldset.chipset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
fieldset.chipset legend { width: 100%; padding: 0; margin-bottom: 8px; font-weight: 700; font-size: 15px; }
.chipr { display: inline-flex; margin: 0; cursor: pointer; }
.chipr input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chipr span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; font-size: 15px; font-weight: 800; color: var(--ink2); background: var(--fl); border: 1px solid var(--ln); border-radius: 999px; }
.chipr input:checked + span { color: var(--ac); background: rgba(254,104,7,.25); border-color: #fe6807; box-shadow: inset 0 0 0 1px #fe6807; }
.chipr input:focus-visible + span { outline: 3px solid var(--ac); outline-offset: 2px; }

/* ---- Vaalea teema (Golden Luxe) 0.55.0: oletus tumma, vaalea vain valinnasta (eväste tv_theme) ---- */
html[data-theme="light"] { color-scheme: light;
  --bg: #FBEFC9;
  --glow: linear-gradient(160deg, #FFF8E4 0%, #FBEDC0 55%, #F3DE9C 100%);
  --ink: #2A2211; --ink2: #5F5334; --mu: #6B5E3F;
  --ib: #E3CD85; --card: rgba(255,255,255,.78); --cb: rgba(227,205,133,.6);
  --ac: #DDB033; --ai: #2B2005; --at: #8A5F00; --as: rgba(221,176,51,.24);
  --ln: #EADFBF; --fl: rgba(221,176,51,.13);
  --sh: 0 10px 30px rgba(150,110,20,.14); --so: #FFFFFF;
  --ag: linear-gradient(180deg, #F6D875, #DDB033); --ags: 0 8px 20px rgba(200,150,20,.28);
  --ok: #1F7A42; --bad: #B3261E;
}
html[data-theme="light"] input[type="date"], html[data-theme="light"] .csel-btn, html[data-theme="light"] select { color-scheme: light; }
html[data-theme="light"] .pill { background: rgba(255,255,255,.88); }
html[data-theme="light"] .notice.ok { background: rgba(31,122,66,.12); }
html[data-theme="light"] .notice.bad { background: rgba(179,38,30,.1); }
html[data-theme="light"] button, html[data-theme="light"] .btnlink { background: linear-gradient(180deg, #F6D875, #DDB033); border: 1px solid #C99A1F; color: #2B2005; text-shadow: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px rgba(200,150,20,.28); }
html[data-theme="light"] button:hover:not(:disabled), html[data-theme="light"] .btnlink:hover { filter: brightness(1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 9px 20px rgba(200,150,20,.34); }
html[data-theme="light"] button:active:not(:disabled), html[data-theme="light"] .btnlink:active { box-shadow: inset 0 2px 5px rgba(120,80,0,.3), 0 2px 6px rgba(200,150,20,.25); }
html[data-theme="light"] button.secondary, html[data-theme="light"] .btnlink.secondary, html[data-theme="light"] button.mini, html[data-theme="light"] .btn2 { background: #fff; border: 1px solid #E3CD85; color: var(--ink); box-shadow: 0 4px 12px rgba(150,110,20,.1); }
html[data-theme="light"] button.secondary:hover:not(:disabled), html[data-theme="light"] .btnlink.secondary:hover, html[data-theme="light"] button.mini:hover:not(:disabled), html[data-theme="light"] .btn2:hover { background: #FFF8E1; border-color: #C99A1F; box-shadow: 0 6px 16px rgba(150,110,20,.16); }
html[data-theme="light"] button.mini.danger { color: #B3261E; border-color: rgba(179,38,30,.4); background: #fff; }
html[data-theme="light"] button.plus, html[data-theme="light"] .panelhead button.plus, html[data-theme="light"] .modalhead button.plus { background: linear-gradient(180deg, #F6D875, #DDB033); border: 1px solid #C99A1F; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 14px rgba(200,150,20,.3); }
html[data-theme="light"] button.plus svg { stroke: #2B2005; filter: none; }
html[data-theme="light"] button:disabled { box-shadow: none; }
html[data-theme="light"] .daymenu, html[data-theme="light"] .modal { background: #FFFDF5; border-color: #E3CD85; box-shadow: 0 24px 60px rgba(90,60,0,.28); }
html[data-theme="light"] .daymenu::backdrop, html[data-theme="light"] .modal::backdrop { background: rgba(60,40,0,.4); }
html[data-theme="light"] .daymenu .opt { background: #fff; border: 1px solid #E3CD85; box-shadow: none; }
html[data-theme="light"] .daymenu .opt:first-child { background: linear-gradient(180deg, #F6D875, #DDB033); border-color: #C99A1F; color: #2B2005; box-shadow: none; }
html[data-theme="light"] .tabs { background: rgba(255,255,255,.7); border: 1px solid #E3CD85; box-shadow: none; }
html[data-theme="light"] .tabs a:hover { background: rgba(221,176,51,.15); }
html[data-theme="light"] .tabs a.on { color: #2B2005; background: linear-gradient(180deg, #F6D875, #DDB033); border: 1px solid #C99A1F; text-shadow: none; box-shadow: 0 4px 12px rgba(200,150,20,.3); }
html[data-theme="light"] .csel-list { background: #FFFDF5; border-color: #E3CD85; box-shadow: 0 18px 40px rgba(90,60,0,.25); }
html[data-theme="light"] .csel-list li:hover, html[data-theme="light"] .csel-list li.hot { background: rgba(221,176,51,.25); }
html[data-theme="light"] .csel-list li.sel, html[data-theme="light"] .newdiv, html[data-theme="light"] .grpbadge, html[data-theme="light"] .gchip.on, html[data-theme="light"] .chipr input:checked + span, html[data-theme="light"] .opt.on span:last-child, html[data-theme="light"] details.grpd > summary b, html[data-theme="light"] .mval, html[data-theme="light"] .librow .done, html[data-theme="light"] .setgrid .chk span { color: var(--at); }
html[data-theme="light"] .chipr input:checked + span, html[data-theme="light"] .gchip.on, html[data-theme="light"] .opt.on { background: rgba(221,176,51,.3); border-color: #C99A1F; box-shadow: inset 0 0 0 1px #C99A1F; }
html[data-theme="light"] .grpbadge { background: rgba(221,176,51,.25); border-color: #C99A1F; }
html[data-theme="light"] .flags li { color: #7A3A00; background: rgba(254,104,7,.12); }
html[data-theme="light"] .chip:hover { border-color: #C99A1F; }
html[data-theme="light"] .panel { background: rgba(255,255,255,.8); }
html[data-theme="light"] .avatar { background: #F7E7B0; border-color: #E3CD85; }
html[data-theme="light"] .plus { color: #2B2005; }
html[data-theme="light"] .xchart .dot { stroke: #FFFDF5; }
html[data-theme="light"] .xchart .tipbox rect { fill: #2A2211; }
html[data-theme="light"] .xchart .tipbox text, html[data-theme="light"] .xchart .tipbox .tipd { fill: #FBF3DC; }
html[data-theme="light"] .mbar { background: rgba(120,90,10,.12); }
html[data-theme="light"] .mbar .mc, html[data-theme="light"] .mleg .dc { background: #6B5E3F; }
html[data-theme="light"] .convrow + .convrow { border-top-color: #EADFBF; }
html[data-theme="light"] .convrow:hover, html[data-theme="light"] .facts li:has(> span:first-child > a):hover, html[data-theme="light"] .librow:has(.nm > a):hover { background: rgba(221,176,51,.12); }
html[data-theme="light"] .pickbox, html[data-theme="light"] .grpbox { background: rgba(255,255,255,.55); border-color: #EADFBF; }
html[data-theme="light"] .daypick span, html[data-theme="light"] .pickday span { border-color: #E3CD85; }
html[data-theme="light"] .card .calgrid + .legend { border-top-color: #EADFBF; }
html[data-theme="light"] .colorpick input:checked + .dot { border-color: #2A2211; box-shadow: 0 0 0 2px rgba(42,34,17,.2); }
html[data-theme="light"] .chatdown { background: linear-gradient(180deg, #F6D875, #DDB033); border-color: #C99A1F; color: #2B2005; box-shadow: 0 8px 22px rgba(150,110,20,.35); }
html[data-theme="light"] .logoprev { background: #17140f; }
html[data-theme="light"] .exrow.on, html[data-theme="light"] .listrow.on { background: rgba(221,176,51,.2); }
html[data-theme="light"] .calgrid .day.today .num { color: #2B2005; background: #DDB033; }
html[data-theme="light"] .calgrid .day.sel { border-color: #C99A1F; box-shadow: 0 0 0 1px #C99A1F inset; }
html[data-theme="light"] .side nav { scrollbar-color: rgba(120,90,10,.3) transparent; }


#themeset { margin-bottom: 14px; }
img.lg-l { display: none !important; }
html[data-theme="light"] img.lg-d { display: none !important; }
html[data-theme="light"] img.lg-l { display: block !important; }

/* Päivämääräkenttä iPhonessa: ei ylitä kortin reunaa (0.55.3) */
input[type=date] { -webkit-appearance: none; appearance: none; display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; text-align: left; min-height: 52px; }
input[type=date]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input[type=date]::-webkit-datetime-edit { padding: 0; }

/* Sivun otsikkorivi: otsikko vasemmalla, napit oikealla (0.56.0) */
.pagebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin: 0 0 6px; }
.pagebar h1 { margin: 0; }
.pagebtns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pagebtns > * { width: auto; min-height: 46px; padding: 0 20px; margin: 0; }
@media (max-width: 520px) { .pagebtns { width: 100%; } .pagebtns > * { flex: 1 1 auto; } }

/* Tiedotteet (0.57.0) */
.ann .annmeta { font-size: 13px; color: var(--ink2); font-weight: 600; }
.ann h3 { margin: 0; font-size: 20px; }
.ann.unread { border-color: var(--ac); }
.ann p { margin: 0; line-height: 1.6; max-width: 70ch; }
.annimg { display: block; width: 100%; max-width: 640px; height: auto; border-radius: 16px; border: 1px solid var(--ln); }
form.annform textarea { min-height: 150px; }
form.annform fieldset.chipset { margin: 10px 0 4px; }
.annlist li { align-items: flex-start; gap: 12px; }
.annlist form.inl { margin: 0; flex: none; }
.annlist form.inl button { width: auto; }

/* 0.57.1: kirjautumis- ja lomakesivut keskelle isolla näytöllä (ei lakisivuja) */
@media (min-width: 900px) {
  body:not(.in):has(.wrap .logo-login):has(.wrap form) { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
  body:not(.in) .wrap:has(.logo-login):has(form) { width: 100%; max-width: 480px; margin: 0 auto; padding: 40px 20px; text-align: center; }
  body:not(.in) .wrap:has(.logo-login):has(form) .logo-login img { margin: 0 auto; }
  body:not(.in) .wrap:has(.logo-login):has(form) .card { text-align: left; }
}

/* 0.62.0: selkeämpi päiväkirja */
.startprog + .startprog { margin-top: 18px; }
.progname { margin: 0 0 10px; color: var(--ink2); font-size: 14px; font-weight: 600; }
.startbtns { display: grid; gap: 10px; }
.startbtns form { margin: 0; }
.startbtn { width: 100%; min-height: 56px; border-radius: 16px; font-size: 17px; font-weight: 800; text-align: left; padding: 0 20px; }
@media (min-width: 700px) { .startbtns { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
.dlist li { display: flex; flex-direction: column; gap: 3px; padding: 13px 0; border-bottom: 1px solid var(--ln); }
.dlist li:last-child { border-bottom: 0; padding-bottom: 0; }
.dlist .dmain { font-weight: 800; font-size: 17px; }
.dlist .dsub { font-size: 14px; color: var(--ink2); }

/* 0.64.0: tiimin taulu */
.sectionhd { margin: 22px 0 10px; font-size: 18px; }
.teamimg { display: block; max-width: 100%; height: auto; border-radius: 14px; margin: 0 0 14px; }
.partnerlogo { display: block; max-width: 160px; max-height: 80px; width: auto; height: auto; object-fit: contain; border-radius: 10px; margin: 0 0 12px; background: #fff; padding: 6px; }
.partner .code { padding: 3px 10px; border-radius: 8px; background: var(--fl); border: 1px dashed var(--cb); letter-spacing: .04em; }

/* 0.65.0 Ohjeet */
.helplist{display:grid;gap:10px;margin-top:14px}
.helptopic summary{cursor:pointer;font-weight:600;list-style:none;padding:2px 0}
.helptopic summary::-webkit-details-marker{display:none}
.helptopic summary::after{content:"+";float:right;opacity:.6}
.helptopic[open] summary::after{content:"–"}
.helpsteps{margin:10px 0 2px;padding-left:22px;display:grid;gap:8px;line-height:1.5}
[data-helpfilter]{width:100%;margin-top:8px}
.helptopic[hidden]{display:none}

/* 0.66.0 Ryhmitelty sivuvalikko */
.side nav .navgrp summary { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 12px; font-weight: 600; font-size: 15px; color: var(--ink); cursor: pointer; list-style: none; }
.side nav .navgrp summary::-webkit-details-marker { display: none; }
.side nav .navgrp summary:hover { background: var(--fl); }
.side nav .navgrp summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .6; transition: transform .15s; }
.side nav .navgrp[open] summary::after { transform: rotate(-135deg); }
.side nav .navsub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 18px; padding-left: 8px; border-left: 1px solid var(--ib); }
.side nav .navsub a { min-height: 38px; font-size: 14px; }

.lisgrp { padding: 0; }
.lisgrp summary { padding: 18px 20px; font-weight: 700; font-size: 17px; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.lisgrp summary::-webkit-details-marker { display: none; }
.lisgrp summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .6; transition: transform .15s; }
.lisgrp[open] summary::after { transform: rotate(-135deg); }
.lisgrp ul { margin: 0; }
.lisgrp ul { padding: 0 20px 6px; }