/* Lähtövalmis – rauhallinen ja selkeä ulkoasu */

:root {
  --bg: #F5F3EE;
  --card: #FFFFFF;
  --sunk: #F1EFEA;
  --sunk-2: #FAF9F6;
  --ink: #1E2A38;
  --ink-2: #4E5967;
  --muted: #7D8794;
  --line: #E6E1D8;
  --accent: #2F6FB2;
  --accent-dark: #245a93;
  --accent-soft: #E6EEF8;

  --lvl-calm: #5B8FC9;
  --lvl-green: #3FA977;
  --lvl-yellow: #E9A825;
  --lvl-red: #D9534F;
  --lvl-late: #C0392B;
  --lvl-done: #3FA977;

  --green-dark: #2C8059;
  --green-soft: #E3F4EB;
  --yellow-soft: #FCF1D9;
  --yellow-ink: #8A5A00;
  --red-soft: #FBE6E4;
  --red-ink: #A3322D;
  --calm-soft: #E8F0FA;

  --radius: 28px;
  --shadow: 0 1px 2px rgba(30, 42, 56, .04), 0 10px 28px rgba(30, 42, 56, .07);
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body.has-modal { overflow: hidden; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
p { margin: 0; }
small { font-size: .8em; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.lead { font-size: 19px; color: var(--ink-2); }
.loading { padding: 40vh 0; text-align: center; color: var(--muted); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.ui-ic { width: 22px; height: 22px; flex: none; }
.ill { display: block; width: 100%; height: auto; }
.ill.photo { border-radius: 50%; object-fit: cover; aspect-ratio: 1; }

/* ---------- Painikkeet ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px;
  border: 0; border-radius: 14px; cursor: pointer;
  font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap;
  transition: transform .08s ease, background-color .15s ease, box-shadow .15s ease;
  user-select: none; -webkit-user-select: none;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .4; cursor: default; transform: none; }
.btn .ui-ic { width: 20px; height: 20px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: #ECE9E2; }
.btn-soft { background: #EDEAE3; }
.btn-soft:hover { background: #E5E1D8; }
.btn-danger { background: var(--lvl-red); color: #fff; }
.btn-danger-soft { background: var(--red-soft); color: var(--red-ink); }
.btn-lg { min-height: 56px; font-size: 18px; padding: 0 24px; }
.btn-xl { min-height: 74px; font-size: 24px; border-radius: 22px; width: 100%; }
.btn-xl .ui-ic { width: 30px; height: 30px; }
.btn.small { min-height: 36px; font-size: 14px; padding: 0 12px; }
.btn-done { background: var(--lvl-green); color: #fff; box-shadow: 0 5px 0 var(--green-dark); }
.btn-done:active { box-shadow: 0 2px 0 var(--green-dark); transform: translateY(3px); }
.btn-primary.btn-xl { box-shadow: 0 5px 0 #1f4f82; }
.btn-primary.btn-xl:active { box-shadow: 0 2px 0 #1f4f82; transform: translateY(3px); }
.link-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 10px 0; cursor: pointer;
  color: var(--accent); font-weight: 700; font-size: 15px; text-align: left;
}
.link-btn .mood { width: 26px; height: 26px; }
.link-btn.center { align-self: center; justify-content: center; width: 100%; }
.icon-btn {
  width: 44px; height: 44px; flex: none; display: inline-grid; place-items: center;
  border: 0; border-radius: 12px; background: var(--sunk); cursor: pointer;
}
.icon-btn:disabled { opacity: .3; cursor: default; }
.file-btn { cursor: pointer; }

/* ---------- Pohja ---------- */
.screen {
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.screen.child { max-width: 1280px; user-select: none; -webkit-user-select: none; }
.card { background: var(--card); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }

/* ---------- Yläpalkki ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 4px 16px; }
.brand { display: flex; align-items: center; gap: 12px; }
.logo { width: 44px; height: 44px; flex: none; }
.greet { font-size: 21px; font-weight: 800; }
.today { font-size: 15px; color: var(--muted); }
.top-right { display: flex; align-items: center; gap: 14px; }
.clock { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.awake-ind { color: var(--lvl-green); display: inline-flex; }
.awake-ind[hidden] { display: none; }
.gear {
  position: relative; width: 52px; height: 52px; border-radius: 50%;
  border: 0; background: var(--card); box-shadow: var(--shadow);
  display: grid; place-items: center; cursor: pointer; color: var(--ink-2);
  touch-action: none;
}
.hold-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.hold-ring circle { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-dasharray: 132; stroke-dashoffset: 132; stroke-linecap: round; }
.gear.holding .hold-ring circle { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s linear; }

/* ---------- Lapsen näkymä ---------- */
.child-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
.task-col { display: grid; gap: 20px; align-content: start; }
@media (min-width: 700px) {
  .child-grid { grid-template-columns: minmax(300px, 5fr) 7fr; align-items: start; }
  .time-card { position: sticky; top: 16px; }
}

.time-card { display: flex; flex-direction: column; gap: 6px; }
.dep-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.dep-label { font-size: 16px; font-weight: 700; color: var(--ink-2); }
.dep-time { font-size: 60px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.event { text-align: right; }
.event-time { font-size: 30px; font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.disc-wrap { position: relative; width: min(100%, 380px); aspect-ratio: 1; margin: 14px auto 10px; }
.disc, .disc svg { width: 100%; height: 100%; display: block; }
.disc svg .face { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
.disc svg .tk { stroke: #CBD0D7; stroke-width: 1.2; }
.disc svg .tk.big { stroke: #8D96A2; stroke-width: 2.6; stroke-linecap: round; }
.disc svg .track { fill: var(--sunk); }
.disc svg .sector { fill: currentColor; }
.disc svg .work-arc { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; opacity: .5; }
.disc svg .hub { fill: #fff; filter: drop-shadow(0 2px 6px rgba(30, 42, 56, .12)); }
.lvl-calm { color: var(--lvl-calm); }
.lvl-green, .lvl-done { color: var(--lvl-green); }
.lvl-yellow { color: var(--lvl-yellow); }
.lvl-red { color: var(--lvl-red); }
.lvl-late { color: var(--lvl-late); }
.disc-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.disc-num { font-size: clamp(56px, 8.5vw, 86px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: var(--ink); }
.disc-num small { font-size: .45em; color: var(--muted); }
.disc-unit { font-size: 15px; font-weight: 700; color: var(--muted); margin-top: 2px; }

.status { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 20px; color: var(--ink); }
.status-dot { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; }
.status-dot .ui-ic { width: 26px; height: 26px; }
.status-title { font-size: 23px; font-weight: 800; }
.status-sub { font-size: 15px; color: var(--ink-2); }
.status.lvl-calm { background: var(--calm-soft); }
.status.lvl-calm .status-dot { background: var(--lvl-calm); }
.status.lvl-green, .status.lvl-done { background: var(--green-soft); }
.status.lvl-green .status-dot, .status.lvl-done .status-dot { background: var(--lvl-green); }
.status.lvl-yellow { background: var(--yellow-soft); }
.status.lvl-yellow .status-dot { background: var(--lvl-yellow); }
.status.lvl-red, .status.lvl-late { background: var(--red-soft); }
.status.lvl-red .status-dot, .status.lvl-late .status-dot { background: var(--lvl-red); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }

.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; font-size: 13px; color: var(--muted); padding-top: 4px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend b { color: var(--ink-2); }
.sw { display: inline-block; flex: none; }
.sw-time { width: 14px; height: 14px; border-radius: 4px; background: currentColor; }
.sw-work { width: 16px; height: 5px; border-radius: 3px; background: var(--ink); opacity: .5; }

/* Aloitus */
.start-card { display: flex; flex-direction: column; gap: 10px; }
.start-card h2 { font-size: 30px; font-weight: 800; }
.start-card.slim { padding: 10px 20px; }
.latest { font-size: 19px; color: var(--ink-2); margin: 4px 0 8px; }
.latest b { font-size: 26px; color: var(--ink); }
.latest.urgent, .latest.urgent b { color: var(--red-ink); }

.later-card { align-items: center; text-align: center; gap: 8px; }
.later-card .ill.mid { width: 110px; height: 110px; }
.later-date { font-size: 28px; font-weight: 800; }
.later-times { display: flex; gap: 32px; justify-content: center; margin: 6px 0; }

.center-wrap { display: grid; place-items: center; min-height: 70vh; }
.welcome { max-width: 560px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.welcome .ill.big { width: 140px; height: 140px; }
.welcome h2 { font-size: 28px; }

/* Nykyinen tehtävä */
.task-card { display: grid; grid-template-columns: auto 1fr; gap: 18px 24px; align-items: start; }
.task-media .ill.big { width: 156px; height: 156px; }
.task-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.task-title { font-size: 36px; font-weight: 800; letter-spacing: -.01em; }
.task-info { font-size: 19px; color: var(--ink-2); line-height: 1.45; }
.task-actions { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; }
.task-secondary { display: flex; gap: 10px; flex-wrap: wrap; }
.task-secondary .btn { flex: 1 1 180px; }
.task-time { margin-top: 4px; }
.bar { height: 10px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 99px; transition: width .9s linear; }
.bar span.over { background: var(--lvl-yellow); }
.task-time-txt { font-size: 15px; color: var(--ink-2); margin-top: 6px; font-variant-numeric: tabular-nums; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px; border-radius: 99px;
  border: 2px solid var(--line); background: #fff; cursor: pointer;
  font-size: 16px; font-weight: 700; color: var(--ink-2);
}
.chip-box { width: 24px; height: 24px; border-radius: 7px; border: 2px solid #C9CED6; display: grid; place-items: center; color: transparent; }
.chip-box .ui-ic { width: 16px; height: 16px; }
.chip.on { border-color: var(--lvl-green); background: var(--green-soft); color: var(--ink); }
.chip.on .chip-box { background: var(--lvl-green); border-color: var(--lvl-green); color: #fff; }

/* Tehtävälista */
.list-card { padding: 20px; }
.list-card h3 { font-size: 18px; font-weight: 800; margin: 0 0 10px 6px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.step-row {
  width: 100%; display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 14px;
  padding: 7px 10px; border-radius: 16px; border: 0; background: transparent; text-align: left; cursor: pointer;
}
div.step-row { cursor: default; }
.step-row:disabled { cursor: default; }
.step-ill { width: 50px; height: 50px; display: block; }
.step-title { font-size: 18px; font-weight: 700; }
.step-title small { font-weight: 600; color: var(--muted); font-size: 13px; }
.step-meta { font-size: 15px; font-weight: 700; color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.step-meta .ok { color: var(--lvl-green); display: inline-flex; }
.step-meta .ok .ui-ic { width: 18px; height: 18px; }
.step.todo button.step-row:hover { background: var(--sunk-2); }
.step.current .step-row { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.step.current .step-meta { color: var(--accent); }
.step.done .step-ill, .step.skipped .step-ill { opacity: .5; }
.step.done .step-title, .step.skipped .step-title { color: var(--muted); }
.hint { font-size: 13px; color: var(--muted); margin: 10px 6px 0; }

/* Valmis */
.done-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.done-card .ill.big { width: 130px; height: 130px; }
.done-card h2 { font-size: 34px; font-weight: 800; }
.pop { animation: pop .7s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes pop { from { transform: scale(.3) rotate(-20deg); opacity: 0; } }
.mood-q { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 6px 0; }
.moods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mood-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 4px; border-radius: 16px; border: 2px solid var(--line); background: #fff; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--ink-2);
}
.mood-btn .mood { width: 46px; height: 46px; }
.mood-btn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }

/* ---------- Ponnahdusikkunat ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(20, 28, 38, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; animation: fade .15s ease;
}
@keyframes fade { from { opacity: 0; } }
.modal-wrap { width: 100%; max-width: 600px; max-height: calc(100dvh - 32px); overflow: auto; border-radius: var(--radius); }
.modal-wrap.m-task, .modal-wrap.m-wkEdit, .modal-wrap.m-wearRules { max-width: 900px; }
.modal-wrap.m-confirm { max-width: 460px; }
.modal-card { background: #fff; border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 14px; animation: rise .2s ease; }
@keyframes rise { from { transform: translateY(12px); opacity: 0; } }
.modal-card h2 { font-size: 26px; font-weight: 800; }
.modal-card h3 { font-size: 17px; font-weight: 800; margin-top: 4px; }
.modal-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.spacer { flex: 1; }
.flip { display: inline-flex; transform: scaleX(-1); }

.checkin-head { display: flex; align-items: center; gap: 16px; }
.checkin-head .ill.mid { width: 88px; height: 88px; flex: none; }
.checkin-head .eyebrow { margin-bottom: 6px; }
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt {
  display: flex; align-items: center; gap: 12px; padding: 14px; min-height: 68px;
  border-radius: 18px; border: 2px solid var(--line); background: #fff; cursor: pointer;
  font-size: 17px; font-weight: 700; text-align: left;
}
.opt:hover, .opt:active { background: var(--accent-soft); border-color: var(--accent); }
.pglyph { width: 34px; height: 34px; flex: none; color: var(--accent); }

.summary .sum-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.summary .sum-head p { margin-top: 6px; }
.sum-mood { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.mood.lg { width: 56px; height: 56px; }
.sum-legend { display: flex; gap: 16px; font-size: 13px; color: var(--muted); }
.sum-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw-bar { display: inline-block; width: 16px; height: 8px; border-radius: 3px; background: var(--accent); }
.sw-plan { display: inline-block; width: 3px; height: 14px; border-radius: 2px; background: var(--ink); }
.sum-rows { display: flex; flex-direction: column; }
.sum-row { display: grid; grid-template-columns: 46px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: center; }
.sum-row .step-ill { width: 46px; height: 46px; }
.sum-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cmp { position: relative; height: 10px; border-radius: 5px; background: var(--sunk); margin: 7px 0 4px; }
.cmp-bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 5px; }
.cmp-plan { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); }
.talk-box { display: flex; gap: 12px; align-items: flex-start; background: var(--accent-soft); border-radius: 16px; padding: 14px 16px; font-size: 15px; }
.talk-box .ui-ic { color: var(--accent); margin-top: 2px; }

.pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; background: #EFEDE8; font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.pill .ui-ic { width: 14px; height: 14px; }
.pill.ok { background: var(--green-soft); color: var(--green-dark); }
.pill.warn { background: var(--yellow-soft); color: var(--yellow-ink); }
.pill.over { background: var(--red-soft); color: var(--red-ink); }

/* ---------- Ilmoitus ---------- */
.toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 60;
  transform: translate(-50%, 30px); opacity: 0; pointer-events: none;
  background: var(--ink); color: #fff; padding: 14px 22px; border-radius: 99px;
  font-size: 17px; font-weight: 700; max-width: calc(100vw - 32px); text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.t-green { background: var(--green-dark); }
.toast.t-yellow { background: #A86F00; }
.toast.t-red, .toast.t-late { background: var(--red-ink); }

/* ---------- Aikuisten näkymä ---------- */
.screen.parent { max-width: 1000px; }
.p-top { display: flex; align-items: center; gap: 12px; padding: 4px 0 8px; }
.p-top h1 { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; }
.p-top .logo { width: 34px; height: 34px; }
.tabs {
  position: sticky; top: 0; z-index: 5; display: flex; gap: 6px;
  background: var(--bg); padding: 8px 0 12px; overflow-x: auto; scrollbar-width: none;
}
.tab {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 10px 16px; border-radius: 14px; border: 0; background: transparent; cursor: pointer;
  font-size: 16px; font-weight: 700; color: var(--ink-2);
}
.tab.on { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.tab .ui-ic { width: 20px; height: 20px; }
.p-main { display: flex; flex-direction: column; gap: 16px; }
.p-card { background: #fff; border-radius: 22px; padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }
.p-card h2 { font-size: 20px; font-weight: 800; }
.p-card.highlight { box-shadow: inset 0 0 0 2px var(--accent), var(--shadow); }
.p-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.field.inline { max-width: 320px; }
.field.narrow { max-width: 160px; }
.field.grow { flex: 1 1 200px; }
input, select, textarea {
  font: inherit; font-size: 17px; color: var(--ink);
  padding: 10px 12px; min-height: 46px;
  border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
  width: 100%;
}
textarea { resize: vertical; line-height: 1.4; }
input[type="range"] { padding: 0; border: 0; accent-color: var(--accent); }
input:disabled { background: var(--sunk); color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.row { display: flex; align-items: center; }
.gap { gap: 12px; }
.wrap { flex-wrap: wrap; }
.end { align-items: flex-end; }
.danger-row { padding-top: 8px; border-top: 1px solid var(--line); }
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; }
.check input { width: 22px; height: 22px; min-height: 0; accent-color: var(--accent); flex: none; }
.check small { display: block; font-weight: 500; color: var(--muted); }

.week-grid { display: grid; gap: 6px; }
.wg-row { display: grid; grid-template-columns: minmax(130px, 1.3fr) 1fr 1fr; gap: 10px; align-items: center; }
.wg-head { font-size: 13px; font-weight: 800; color: var(--muted); }
.wg-row.off .check span { color: var(--muted); }
.wg-row input[type="time"] { min-height: 42px; padding: 6px 10px; }

.dep-day { padding-top: 6px; }
.dep-date { font-size: 15px; font-weight: 800; margin-bottom: 6px; display: flex; gap: 8px; align-items: center; text-transform: capitalize; }
.dep-row { display: grid; grid-template-columns: 1fr 130px 130px 44px; gap: 10px; align-items: end; padding: 10px 12px; background: var(--sunk-2); border-radius: 14px; margin-bottom: 6px; }
.dep-tpl { font-weight: 700; align-self: center; }
.mini { display: flex; flex-direction: column; gap: 2px; }
.mini span { font-size: 12px; font-weight: 700; color: var(--muted); }
.mini input { font-size: 16px; padding: 6px 8px; min-height: 40px; }

.tpl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tchip {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 99px;
  border: 1.5px solid var(--line); background: #fff; cursor: pointer; font-size: 15px; font-weight: 700;
}
.tchip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tchip.add { border-style: dashed; color: var(--accent); }
.tchip .ui-ic { width: 18px; height: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }

.task-rows { list-style: none; padding: 0; margin: 0; }
.task-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.tr-ill { width: 56px; height: 56px; }
.tr-main { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: none; border: 0; padding: 4px 0; text-align: left; cursor: pointer; font-size: 17px; min-width: 0; }
.tr-actions { display: flex; gap: 6px; }

.ed-grid { display: grid; grid-template-columns: 210px 1fr; gap: 22px; }
.ed-media { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ed-preview .ill.big { width: 170px; height: 170px; }
.ed-fields { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.row2 { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: end; }
.row2 .check { padding-bottom: 8px; }
.opts-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opt-field { display: flex; align-items: center; gap: 8px; }
.opt-field .pglyph { width: 28px; height: 28px; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; }
.icon-pick {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px;
  border-radius: 14px; border: 2px solid transparent; background: var(--sunk-2); cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--ink-2);
}
.icon-pick .ill { width: 54px; height: 54px; }
.icon-pick.on { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }

/* Tilastot */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tile { background: var(--sunk-2); border-radius: 18px; padding: 14px 16px; }
.tile-label { font-size: 13px; font-weight: 800; color: var(--muted); }
.tile-value { font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.tile-sub { font-size: 13px; color: var(--muted); }
.fb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.fb { border-radius: 18px; padding: 14px 16px; }
.fb h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; }
.fb h3 .ui-ic { width: 20px; height: 20px; }
.fb ul { margin: 8px 0 0; padding-left: 20px; }
.fb li { font-size: 15px; line-height: 1.45; margin: 4px 0; }
.fb-good { background: var(--green-soft); }
.fb-good h3 { color: var(--green-dark); }
.fb-watch { background: var(--yellow-soft); }
.fb-watch h3 { color: var(--yellow-ink); }
.fb-talk { background: var(--accent-soft); }
.fb-talk h3 { color: var(--accent-dark); }
.legend.small { justify-content: flex-end; }
.lg-med { display: inline-block; width: 14px; height: 10px; border-radius: 3px; background: var(--accent); }
.lg-range { display: inline-block; width: 16px; height: 4px; border-radius: 2px; background: #AEBBCC; }
.lg-plan { display: inline-block; width: 3px; height: 14px; border-radius: 2px; background: var(--ink); }
.st-rows { display: flex; flex-direction: column; }
.st-row { display: grid; grid-template-columns: 48px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.st-row .step-ill { width: 48px; height: 48px; }
.st-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.st-viz { display: flex; gap: 16px; align-items: center; margin-top: 8px; }
.bullet { position: relative; flex: 1; height: 18px; background: var(--sunk); border-radius: 6px; }
.b-range { position: absolute; top: 7px; height: 4px; background: #AEBBCC; border-radius: 2px; }
.b-med { position: absolute; left: 0; top: 3px; height: 12px; background: var(--accent); border-radius: 0 4px 4px 0; }
.b-plan { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; background: var(--ink); border-radius: 2px; }
.spark { width: 120px; height: 34px; flex: none; overflow: visible; }
.sp-plan { stroke: var(--ink); stroke-opacity: .35; stroke-dasharray: 3 3; stroke-width: 1.5; }
.sp-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.sp-dot { fill: var(--accent); stroke: #fff; stroke-width: 1.5; }
.suggest { display: flex; gap: 12px; align-items: center; justify-content: space-between; background: var(--accent-soft); border-radius: 14px; padding: 10px 12px; margin-top: 10px; font-size: 14px; }
.hist { display: flex; flex-direction: column; gap: 6px; }
.hist-row { display: flex; gap: 8px; align-items: center; }
.hist-main {
  flex: 1; display: grid; grid-template-columns: 70px 1fr auto 28px; gap: 10px; align-items: center;
  padding: 8px 12px; border-radius: 12px; background: var(--sunk-2); border: 0; text-align: left; cursor: pointer; font-size: 15px; min-height: 44px;
}
.hist-date { font-weight: 800; text-transform: capitalize; }
.hist-info { color: var(--ink-2); font-size: 14px; }
.hist-main .mood { width: 26px; height: 26px; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 20px; color: var(--ink-2); }
.empty .ill.mid { width: 90px; height: 90px; }

.toggle { display: flex; gap: 14px; align-items: flex-start; padding: 6px 0; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tg { position: relative; flex: none; width: 52px; height: 30px; border-radius: 99px; background: #CDD2D9; transition: background .15s; margin-top: 2px; }
.tg::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .15s; }
.toggle input:checked + .tg { background: var(--lvl-green); }
.toggle input:checked + .tg::after { transform: translateX(22px); }
.toggle input:focus-visible + .tg { outline: 3px solid var(--accent); outline-offset: 2px; }
.tg-text b { display: block; font-size: 17px; }
.tg-text small { display: block; font-size: 14px; color: var(--muted); }
.howto { margin: 0; padding-left: 20px; }
.howto li { margin: 6px 0; }

/* ---------- Pienet näytöt ---------- */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .card { padding: 18px; border-radius: 24px; }
  .clock { font-size: 26px; }
  .greet { font-size: 18px; }
  .logo { width: 38px; height: 38px; }
  .gear { width: 46px; height: 46px; }
  /* Tiivis aikakortti: kiekko ja ajat rinnakkain, jotta tehtävä mahtuu näkyviin */
  .time-card:not(.later-card) {
    display: grid; grid-template-columns: 132px 1fr; grid-template-areas: "disc head" "status status";
    gap: 12px 16px; align-items: center; padding: 16px;
  }
  .time-card .dep-head { grid-area: head; flex-direction: column; align-items: flex-start; gap: 6px; }
  .time-card .event { text-align: left; display: flex; align-items: baseline; gap: 6px; }
  .time-card .event .dep-label { font-size: 14px; }
  .dep-time { font-size: 44px; }
  .event-time { font-size: 20px; }
  .time-card .disc-wrap { grid-area: disc; width: 132px; margin: 0; }
  .disc-num { font-size: 42px; }
  .disc-unit { font-size: 13px; margin-top: 0; }
  .du-long { display: none; }
  .time-card .status { grid-area: status; padding: 10px 12px; gap: 10px; }
  .status-dot { width: 36px; height: 36px; }
  .status-dot .ui-ic { width: 20px; height: 20px; }
  .status-title { font-size: 19px; }
  .status-sub { font-size: 14px; }
  .time-card .legend { display: none; }
  .child-grid, .task-col { gap: 14px; }
  .task-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .task-body { align-items: center; width: 100%; }
  .task-card { gap: 10px; }
  .task-media .ill.big { width: 96px; height: 96px; }
  .task-title { font-size: 28px; }
  .task-info { font-size: 17px; }
  .chips { justify-content: center; }
  .task-time { width: 100%; }
  .task-actions { width: 100%; }
  .step-title { font-size: 17px; }
  .opt-grid { grid-template-columns: 1fr; }
  .opt { min-height: 58px; }
  .checkin-head .ill.mid { width: 64px; height: 64px; }
  .modal-card { padding: 18px; }
  .modal-card h2 { font-size: 22px; }
  .ed-grid { grid-template-columns: 1fr; }
  .row2 { grid-template-columns: 1fr; }
  .opts-edit { grid-template-columns: 1fr; }
  .wg-row { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .wg-row .check span { font-size: 15px; }
  .dep-row { grid-template-columns: 1fr 1fr 44px; }
  .dep-tpl { grid-column: 1 / -1; }
  .hist-main { grid-template-columns: 60px 1fr auto; }
  .hist-main .mood { display: none; }
  .st-viz { flex-wrap: wrap; }
  .tab span { display: none; }
  .tab { padding: 10px 14px; }
  .tab.on span { display: inline; }
  .p-top .btn span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Tabletti pystyssä: tehtäväkortin kuva yläpuolelle, jotta teksti mahtuu */
@media (min-width: 700px) and (max-width: 1000px) {
  .task-card { grid-template-columns: 1fr; }
  .task-media .ill.big { width: 120px; height: 120px; }
  .task-title { font-size: 30px; }
  .dep-time { font-size: 50px; }
  .dep-head { flex-wrap: wrap; }
}

/* ======================================================================
   Versio 2: aikajana, painikerivi, näytön korkeuteen mitoitettu päänäkymä
   ====================================================================== */

.latest.warn, .latest.warn b { color: var(--yellow-ink); }
.time-in { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Tehtäväkortin painikkeet samalle riville */
.task-actions { flex-direction: row; align-items: stretch; gap: 10px; }
.task-actions .btn-done { flex: 1 1 auto; width: auto; }
.btn-side {
  flex: none; flex-direction: column; gap: 4px; min-height: 74px; min-width: 92px;
  padding: 6px 12px; border-radius: 22px; font-size: 13px; line-height: 1.1;
  white-space: normal; text-align: center;
}
.btn-side .ui-ic { width: 24px; height: 24px; }

/* Aikajana */
.timeline-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 24px; margin-top: 20px; }
.timeline-card:empty { display: none; }
.tl-done { display: flex; flex: none; padding-left: 2px; }
.tl-dot { position: relative; width: 40px; height: 40px; flex: none; border: 0; padding: 0; margin-left: -12px; background: none; border-radius: 50%; cursor: pointer; }
.tl-dot:first-child { margin-left: 0; }
.tl-dot .ill { width: 40px; height: 40px; border-radius: 50%; opacity: .55; box-shadow: 0 0 0 2px #fff; }
.tl-check { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: var(--lvl-green); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
.tl-check .ui-ic { width: 12px; height: 12px; }
.tl-track { position: relative; flex: 1; min-width: 0; display: flex; gap: 4px; height: 64px; }
.tl-seg {
  flex: 1 1 0; min-width: 46px; display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border: 0; border-radius: 14px; background: var(--sunk);
  text-align: left; overflow: hidden; cursor: pointer;
  container-type: inline-size; transition: flex-grow .9s linear;
}
.tl-seg[tabindex="-1"] { cursor: default; }
.tl-seg.current { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.tl-seg.todo:hover { background: #E9E6DF; }
.tl-ill, .tl-ill .ill { width: 36px; height: 36px; flex: none; }
.tl-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.tl-txt b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-txt small { font-size: 12px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.tl-seg.current .tl-txt small { color: var(--accent); }
@container (max-width: 104px) {
  .tl-txt { display: none; }
  .tl-seg { justify-content: center; padding: 6px 4px; }
}
.tl-slack {
  flex: 1 1 0; min-width: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; transition: flex-grow .9s linear;
}
.tl-slack.ok { background: repeating-linear-gradient(135deg, var(--green-soft) 0 8px, #D4ECDF 8px 16px); color: var(--green-dark); }
.tl-slack.tight { background: repeating-linear-gradient(135deg, var(--yellow-soft) 0 8px, #F5E2B3 8px 16px); color: var(--yellow-ink); }
.tl-deadline {
  position: absolute; top: -5px; bottom: -5px; right: 0; z-index: 2; pointer-events: none;
  border-left: 3px solid var(--lvl-red); background: rgba(217, 83, 79, .14); border-radius: 0 14px 14px 0;
  transition: left .9s linear;
}
.tl-deadline span { position: absolute; top: 3px; left: 4px; background: var(--lvl-red); color: #fff; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 99px; }
.tl-end { flex: none; display: flex; flex-direction: column; align-items: center; font-size: 15px; line-height: 1.1; }
.tl-end .ill { width: 40px; height: 40px; }

/* Tabletti ja iso näyttö: koko päänäkymä mahtuu ruudulle ilman vieritystä */
@media (min-width: 700px) and (min-height: 500px) {
  .screen.child.fit { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .fit .topbar { flex: none; padding-bottom: 10px; }
  .fit .child-grid { flex: 1 1 0; min-height: 0; grid-template-rows: minmax(0, 1fr); gap: 16px; align-items: stretch; }
  .fit .time-card { position: static; min-height: 0; padding: 18px 20px; }
  .fit .disc-wrap { flex: 1 1 0; min-height: 110px; width: 100%; aspect-ratio: auto; margin: 4px 0; }
  .fit .disc-num { font-size: clamp(40px, 9vh, 86px); }
  .fit .task-col { min-height: 0; display: flex; flex-direction: column; }
  .fit .task-col > .card { flex: 1 1 auto; min-height: 0; overflow: auto; }
  .fit .task-card { grid-template-rows: 1fr auto; }
  .fit .task-media .ill.big { width: clamp(84px, 17vh, 156px); height: auto; }
  .fit .start-card { justify-content: center; }
  .fit .timeline-card { flex: none; margin-top: 14px; }
}
@media (min-width: 700px) and (max-height: 780px) {
  .fit .legend { display: none; }
  .fit .dep-time { font-size: 46px; }
  .fit .event-time { font-size: 24px; }
  .fit .status { padding: 10px 14px; }
  .fit .status-dot { width: 38px; height: 38px; }
  .fit .status-title { font-size: 20px; }
  .fit .task-title { font-size: 30px; }
  .fit .task-info { font-size: 17px; }
  .fit .done-card .ill.big { width: 90px; height: 90px; }
  .fit .done-card h2 { font-size: 28px; }
}

/* Puhelin */
@media (max-width: 600px) {
  .timeline-card { padding: 10px; gap: 8px; margin-top: 14px; border-radius: 20px; }
  .tl-track { height: 56px; gap: 3px; }
  .tl-seg { min-width: 40px; padding: 4px; }
  .tl-ill, .tl-ill .ill { width: 30px; height: 30px; }
  .tl-dot, .tl-dot .ill { width: 30px; height: 30px; }
  .tl-dot { margin-left: -16px; }
  .tl-end .ill { width: 32px; height: 32px; }
  .tl-end { font-size: 13px; }
  .btn-side { min-width: 72px; font-size: 12px; padding: 6px 8px; }
  .task-actions .btn-done { font-size: 22px; }
}

/* Ilmoitus yläreunaan, ettei se peitä aikajanaa tai Valmis-painiketta */
.toast { top: max(14px, env(safe-area-inset-top)); bottom: auto; transform: translate(-50%, -30px); border-radius: 20px; }
.toast.show { transform: translate(-50%, 0); }

/* Puhelin: aikajana mahtuu leveyteen */
@media (max-width: 600px) {
  .timeline-card { padding: 8px; gap: 6px; }
  .tl-track { gap: 2px; overflow: hidden; border-radius: 12px; }
  .tl-seg { min-width: 30px; padding: 3px; border-radius: 10px; }
  .tl-ill, .tl-ill .ill { width: 24px; height: 24px; }
  .tl-slack { min-width: 34px; font-size: 11px; border-radius: 10px; }
  .tl-dot, .tl-dot .ill { width: 26px; height: 26px; }
  .tl-dot { margin-left: -18px; }
  .tl-check { width: 14px; height: 14px; }
  .tl-end .ill { width: 28px; height: 28px; }
  .tl-end { font-size: 12px; }
}

/* ======================================================================
   Versio 5: TimeTimer-kiekko, tiivis puhelinnäkymä, puhekupla, tiivis yhteenveto
   ====================================================================== */

.disc svg .num { font-family: var(--font); font-size: 11px; font-weight: 800; fill: #7D8794; text-anchor: middle; dominant-baseline: central; }

/* Aikajana: rivi + "Seuraavaksi"-teksti */
.timeline-card { display: block; }
.tl-row { display: flex; align-items: center; gap: 12px; }
.tl-next { display: none; font-size: 15px; color: var(--ink-2); margin: 8px 4px 0; }
.tl-next b { color: var(--ink); }
.tl-deadline { top: 0; bottom: 0; }
.tl-deadline span { top: 2px; }

/* Puhekupla-ilmoitus (lapsen näkymä) */
.toast.bubble {
  top: 50%; bottom: auto; left: 50%;
  transform: translate(-50%, -50%) scale(.85);
  width: min(520px, calc(100vw - 40px)); max-width: none;
  padding: 24px 24px 18px; border-radius: 28px;
  background: #fff; color: var(--ink); border: 4px solid var(--accent);
  box-shadow: 0 24px 70px rgba(30, 42, 56, .28);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: 26px; line-height: 1.25; font-weight: 800; text-align: center;
  transition: opacity .25s ease, transform .25s cubic-bezier(.2, 1.4, .4, 1);
}
.toast.bubble.show { transform: translate(-50%, -50%) scale(1); pointer-events: auto; cursor: pointer; }
.toast.bubble.t-green, .toast.bubble.t-info, .toast.bubble.t-yellow, .toast.bubble.t-red, .toast.bubble.t-late { background: #fff; color: var(--ink); }
.toast.bubble.t-green { border-color: var(--lvl-green); }
.toast.bubble.t-yellow { border-color: var(--lvl-yellow); }
.toast.bubble.t-red, .toast.bubble.t-late { border-color: var(--lvl-red); }
.tb-ill .ill { width: 76px; height: 76px; }
.tb-bar { width: 50%; height: 6px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.tb-bar span { display: block; height: 100%; width: 100%; background: var(--accent); border-radius: 99px; animation: tb-shrink linear forwards; }
.t-green .tb-bar span { background: var(--lvl-green); }
.t-yellow .tb-bar span { background: var(--lvl-yellow); }
.t-red .tb-bar span, .t-late .tb-bar span { background: var(--lvl-red); }
@keyframes tb-shrink { from { width: 100%; } to { width: 0; } }

/* Tiivis "Miten meni?" */
.modal-card.summary { gap: 10px; }
.summary .sum-head h2 { font-size: 24px; }
.summary .sum-head p { margin-top: 4px; }
.summary .mood.lg { width: 44px; height: 44px; }
.sum-line {
  display: grid; grid-template-columns: 34px minmax(0, 1.2fr) minmax(60px, 1fr) 46px 24px;
  gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 15px;
}
.sum-line .step-ill { width: 34px; height: 34px; }
.sl-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sum-line .cmp { margin: 0; }
.sl-dur { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 14px; }
.vd { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 14px; font-weight: 900; color: #fff; line-height: 1; flex: none; }
.vd .ui-ic { width: 14px; height: 14px; }
.vd.ok { background: var(--lvl-green); }
.vd.warn { background: var(--lvl-yellow); }
.vd.over { background: var(--lvl-red); }
.vd.skip { background: #C9CED6; }
.sum-legend { flex-wrap: wrap; gap: 6px 14px; font-size: 12px; }
.sum-legend .vd { width: 16px; height: 16px; font-size: 11px; }
.sum-legend .vd .ui-ic { width: 11px; height: 11px; }
.summary .talk-box { padding: 10px 12px; font-size: 14px; }

/* Puhelin: tiivis yläpalkki, tiivis aloitus- ja tehtäväkortti, "Seuraavaksi" näkyviin */
@media (max-width: 600px) {
  .topbar { padding: 0 2px 8px; }
  .topbar .logo { width: 30px; height: 30px; }
  .brand { gap: 8px; }
  .brand > div { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .greet { font-size: 16px; }
  .today { font-size: 13px; }
  .top-right { gap: 8px; }
  .clock { font-size: 22px; }
  .gear { width: 40px; height: 40px; }
  .gear .ui-ic { width: 20px; height: 20px; }

  .start-card { padding: 14px 16px; gap: 8px; }
  .start-card .eyebrow, .start-card h2, .start-card > .muted { display: none; }
  .latest { margin: 0; font-size: 17px; }
  .latest b { font-size: 22px; }

  .task-card { grid-template-columns: 56px minmax(0, 1fr); justify-items: stretch; text-align: left; gap: 8px 12px; padding: 14px 16px; }
  .task-media .ill.big { width: 56px; height: 56px; }
  .task-body { align-items: stretch; gap: 6px; }
  .task-title { font-size: 24px; }
  .task-info { font-size: 15px; }
  .chips { justify-content: flex-start; }
  .chip { font-size: 14px; padding: 6px 10px 6px 8px; }
  .chip-box { width: 20px; height: 20px; }
  .task-actions { grid-column: 1 / -1; }
  .task-actions .btn-xl { min-height: 64px; }
  .btn-side { min-height: 64px; }

  .tl-row { gap: 6px; }
  .tl-track { overflow: visible; }
  .tl-next { display: block; font-size: 14px; margin-top: 6px; }

  .toast.bubble { font-size: 22px; padding: 20px 18px 14px; }
  .tb-ill .ill { width: 60px; height: 60px; }

  .sum-line { grid-template-columns: 28px minmax(0, 1.3fr) minmax(40px, 1fr) 40px 22px; gap: 8px; font-size: 14px; }
  .sum-line .step-ill { width: 28px; height: 28px; }
}
@media (max-width: 600px) {
  .summary .modal-actions { flex-wrap: nowrap; gap: 6px; }
  .summary .modal-actions .btn-ghost > span:not(.flip) { display: none; }
  .summary .modal-actions .btn-ghost { padding: 0 12px; }
}

/* ======================================================================
   Versio 6
   ====================================================================== */

/* Puhekuplan suoja: kosketus missä tahansa sulkee kuplan */
.toast-shield { position: fixed; inset: 0; z-index: 59; background: rgba(20, 28, 38, .18); }
.tb-eyebrow { font-size: 17px; font-weight: 800; color: var(--green-dark); margin-bottom: -6px; }
.t-info .tb-eyebrow { color: var(--accent); }
.toast.bubble .tb-ill .ill { border-radius: 50%; }

/* Aikajana: tehdyt pinona + lukumäärä, valmis-tila yhtenä palkkina */
.tl-done { align-items: center; }
.tl-dot { margin-left: -18px; }
.tl-dot:first-child { margin-left: 0; }
.tl-dot .ill { opacity: .5; }
.tl-count {
  display: inline-flex; align-items: center; gap: 2px; margin-left: -8px; z-index: 1;
  padding: 3px 8px 3px 5px; border-radius: 99px; background: var(--lvl-green); color: #fff;
  font-size: 13px; font-weight: 800; box-shadow: 0 0 0 2px #fff;
}
.tl-count .ui-ic { width: 14px; height: 14px; }
.tl-slack.all-done { font-size: 15px; white-space: normal; text-align: center; padding: 0 8px; }

/* Miten meni: kesto / varattu */
.sum-line { grid-template-columns: 34px minmax(0, 1.2fr) minmax(50px, 1fr) auto 24px; }
.sl-dur { white-space: nowrap; }
.sl-dur b { color: var(--ink); font-weight: 800; }
.sl-dur small { color: var(--muted); font-size: 12px; }

@media (max-width: 600px) {
  .tl-dot { margin-left: -20px; }
  .tl-count { font-size: 11px; padding: 2px 6px 2px 4px; margin-left: -10px; }
  .tl-count .ui-ic { width: 11px; height: 11px; }
  .tl-slack.all-done { font-size: 13px; }
  .tb-eyebrow { font-size: 15px; }

  .sum-line { grid-template-columns: 28px minmax(0, 1.3fr) minmax(34px, 1fr) auto 22px; gap: 7px; }

  /* Kaikki valmista! tiiviimmin */
  .done-card { display: grid; grid-template-columns: 64px 1fr; gap: 6px 14px; text-align: left; align-items: center; padding: 14px 16px; }
  .done-card .pop { grid-row: span 2; }
  .done-card .ill.big { width: 64px; height: 64px; }
  .done-card h2 { font-size: 24px; }
  .done-card .lead { font-size: 15px; }
  .done-card .mood-q { grid-column: 1 / -1; margin: 4px 0 0; gap: 6px; text-align: center; }
  .done-card .moods { gap: 6px; }
  .mood-btn { padding: 6px 2px; font-size: 12px; gap: 3px; }
  .mood-btn .mood { width: 34px; height: 34px; }
  .done-card > .btn { grid-column: 1 / -1; min-height: 40px; }
}

/* Lähdöt: haitari, tiiviit rivit, päivänapit */
.p-card.compact { gap: 8px; padding: 16px 18px; }
.p-card.compact .p-head { align-items: baseline; }
.acc { padding: 0; gap: 0; }
.acc > summary {
  list-style: none; display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; cursor: pointer; user-select: none; -webkit-user-select: none;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary h2 { flex: 0 1 auto; }
.acc-chev { margin-left: auto; display: inline-flex; color: var(--ink-2); transition: transform .2s ease; }
.acc[open] .acc-chev { transform: rotate(180deg); }
.acc-body { display: flex; flex-direction: column; gap: 10px; padding: 0 20px 18px; }

.dep-line { display: grid; grid-template-columns: minmax(0, 1fr) 78px 78px 44px; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); }
.dep-line:last-of-type { border-bottom: 0; }
.dep-line .time-in { min-height: 40px; padding: 6px 8px; font-size: 16px; text-align: center; }
.dep-line .icon-btn { width: 40px; height: 40px; }
.dl-what { font-size: 15px; min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: center; }
.dl-what b { text-transform: capitalize; }
.dl-head { border-bottom: 0; padding: 0; font-size: 12px; font-weight: 800; color: var(--muted); text-align: center; }

.add-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }

.day-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.day-chip {
  min-width: 46px; min-height: 42px; padding: 0 12px; border-radius: 99px;
  border: 1.5px solid var(--line); background: #fff; cursor: pointer;
  font-size: 16px; font-weight: 800; color: var(--ink-2);
}
.day-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.wk-line { display: grid; grid-template-columns: 36px 90px 16px 90px; gap: 8px; align-items: center; }
.wk-line .time-in { min-height: 40px; padding: 6px 8px; text-align: center; }
.wk-day { font-weight: 800; }
.wk-head { font-size: 12px; font-weight: 800; color: var(--muted); text-align: center; }

@media (max-width: 600px) {
  .acc > summary { padding: 14px 16px; }
  .acc-body { padding: 0 16px 16px; }
  .dep-line { grid-template-columns: minmax(0, 1fr) 62px 62px 40px; gap: 6px; }
  .dep-line .time-in { font-size: 15px; padding: 6px 4px; }
  .dl-what { font-size: 14px; }
  .day-chip { min-width: 40px; padding: 0 8px; font-size: 15px; }
  .wk-line { grid-template-columns: 30px 80px 14px 80px; }
}

/* ======================================================================
   Versio 7: tauko, hälytykset, muistilistan varmistus
   ====================================================================== */
.tb-sub { font-size: 17px; font-weight: 700; color: var(--ink-2); margin-top: -6px; }
.btn-break { background: var(--yellow-soft); color: var(--yellow-ink); }

.break-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.break-card .ill.big { width: 110px; height: 110px; }
.break-card h2 { font-size: 30px; font-weight: 800; }
.break-left { font-size: clamp(48px, 9vh, 80px); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.02em; color: var(--yellow-ink); }
.break-next { display: flex; align-items: center; gap: 10px; background: var(--sunk-2); border-radius: 14px; padding: 8px 14px; font-size: 16px; }
.break-next .step-ill { width: 40px; height: 40px; }

.tl-seg.break { background: repeating-linear-gradient(135deg, var(--yellow-soft) 0 8px, #F5E2B3 8px 16px); box-shadow: inset 0 0 0 2px var(--lvl-yellow); }
.tl-seg.break .tl-txt small { color: var(--yellow-ink); }

.opt.center { justify-content: center; font-size: 20px; }
.opt.center .ui-ic { color: var(--yellow-ink); }

.modal-card.alarm { align-items: center; text-align: center; }
.alarm-ill { animation: ring 1.2s ease-in-out infinite; }
.alarm-ill .ill.big { width: 110px; height: 110px; }
@keyframes ring { 0%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-8deg); } 20%, 40% { transform: rotate(8deg); } 50% { transform: rotate(0); } }
.modal-card.alarm .btn { width: 100%; }

@media (max-width: 600px) {
  .btn-side { min-width: 62px; padding: 6px 6px; }
  .break-card { padding: 16px; gap: 8px; }
  .break-card .ill.big { width: 72px; height: 72px; }
  .break-card h2 { font-size: 24px; }
  .tb-sub { font-size: 15px; }
}

/* Tauon paikat tehtävälistassa */
.break-slot { list-style: none; padding: 4px 0 4px 68px; border-bottom: 1px solid var(--line); }
.break-slot button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
  border-radius: 99px; border: 1.5px dashed #CBD0D7; background: transparent; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--muted);
}
.break-slot button .ui-ic { width: 16px; height: 16px; }
.break-slot button:hover { border-color: var(--lvl-yellow); color: var(--yellow-ink); }
.break-slot.on button { border-style: solid; border-color: var(--lvl-yellow); background: var(--yellow-soft); color: var(--yellow-ink); }
@media (max-width: 600px) { .break-slot { padding-left: 0; } }
@media (max-width: 600px) {
  .task-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; }
  .tr-ill { width: 44px; height: 44px; }
  .tr-main { font-size: 16px; }
  .tr-main b { overflow-wrap: anywhere; }
  .tr-actions { gap: 4px; }
  .tr-actions .icon-btn { width: 36px; height: 36px; }
}

/* Jaa ja tuo lähtöjä */
.sub-h { font-size: 16px; font-weight: 800; margin-top: 6px; }
.import-row { display: flex; gap: 8px; flex-wrap: wrap; }
.import-row input { flex: 1 1 220px; }
.modal-card.share { gap: 12px; }
.share-list { display: flex; flex-direction: column; max-height: 38vh; overflow: auto; border: 1px solid var(--line); border-radius: 14px; padding: 4px 12px; }
.share-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; cursor: pointer; }
.share-row:last-child { border-bottom: 0; }
.share-row input { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--accent); flex: none; }
.share-row .ui-ic { width: 18px; height: 18px; color: var(--lvl-green); flex: none; margin-top: 2px; }
.share-row.off { color: var(--muted); }
.share-row b { text-transform: capitalize; }
.share-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 40px; }
.share-qr img { width: min(240px, 70vw); height: auto; image-rendering: pixelated; border-radius: 8px; }

/* Synkronointi */
.sync-status { font-size: 15px; color: var(--ink-2); }
.sync-admin { border-top: 1px solid var(--line); padding-top: 10px; }
.sync-admin summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.sync-admin[open] summary { margin-bottom: 8px; }
.sync-admin code { font-size: 13px; background: var(--sunk); padding: 1px 5px; border-radius: 4px; }
.genkey { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; }

/* Lapset (käyttäjät) */
.avatar {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-dark); font-size: 13px; font-weight: 800;
}
.profile-chips, .who { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-chips { margin: 2px 0 4px; }
.pchip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px 0 6px;
  border-radius: 99px; border: 1.5px solid var(--line); background: #fff; cursor: pointer;
  font-size: 15px; font-weight: 800; color: var(--ink-2);
}
.pchip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pchip.on .avatar { background: #fff; color: var(--accent); }
.who { margin-bottom: 2px; }
.who .pchip { min-height: 34px; font-size: 14px; }
.profile-rows { display: flex; flex-direction: column; gap: 8px; }
.profile-row { display: flex; align-items: center; gap: 10px; }
.profile-row .avatar { width: 36px; height: 36px; font-size: 16px; }
.profile-row input { flex: 1; }
@media (max-width: 600px) {
  .who .pchip { min-height: 30px; padding: 0 8px 0 4px; font-size: 13px; }
  .who .avatar { width: 22px; height: 22px; font-size: 11px; }
}

/* ======================================================================
   Versio 14: tarrat, juhlat, käyttäjävalikko, valmistumisaika
   ====================================================================== */

/* Tarrat */
svg.stk { display: block; width: 100%; height: auto; stroke-width: 2.5; overflow: visible; }
.stk .a { fill: var(--a); }
.stk .b { fill: var(--b); }
.stk .c { fill: var(--c); }
.stk .w { fill: #fff; }
.stk .w2 { fill: #CFE6F7; }
.stk .k { fill: #2B3A4F; }
.stk .s { stroke: #2B3A4F; stroke-linejoin: round; stroke-linecap: round; }
.stk .ring { fill: none; stroke: var(--b); stroke-width: 5; }
.stk .rayb { fill: none; stroke: #F0A92B; stroke-width: 5; stroke-linecap: round; }
.stk .gear { fill: none; stroke: var(--a); stroke-width: 9; }
.stk .arcA { fill: none; stroke: var(--a); stroke-width: 7; }
.stk .arcB { fill: none; stroke: var(--b); stroke-width: 7; }
.stk .arcC { fill: none; stroke: var(--c); stroke-width: 7; }
.stk .stk-edge { fill: #fff; filter: drop-shadow(0 2px 3px rgba(30, 42, 56, .25)); }
.stk .shine { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; opacity: .75; }
/* Kultainen supertarra: vaalea kultatausta, tummempi kultainen kuva */
.stk.gold { --a: #D99A1E; --b: #F2C64C; --c: #A8740C; }
.stk.gold .gold-art .k { fill: #5C3D00; }
.stk.gold .gold-art .w, .stk.gold .gold-art .w2 { fill: #FFF6D8; }
.stk.gold .gold-art .s { stroke: #5C3D00; }
.stk.gold .gold-art [stroke]:not(.s) { stroke: #9A6A0A; }
.stk.gold .gold-art [fill]:not([fill="none"]) { fill: #D99A1E; }
.stk.gold .gold-rays { fill: none; stroke: #F2C64C; stroke-width: 7; stroke-linecap: round; }
.stk.gold .stk-edge { fill: #FFF4CF; filter: drop-shadow(0 0 6px rgba(233, 178, 58, .7)); }
.stk.gold .spark { fill: #fff; }
.stk.gold .rayb { stroke: #A8740C; }

/* Valmis-kortin tarrat */
.earned { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 4px 0; }
.earned-stk { width: 104px; }
.earned-stk.super { width: 124px; }
.earned-txt { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.earned-txt b { font-size: 20px; }
.earned-txt span { font-size: 14px; color: var(--ink-2); }
.earned-miss { display: flex; gap: 8px; align-items: center; font-size: 15px; color: var(--ink-2); background: var(--sunk-2); border-radius: 14px; padding: 8px 12px; }
.earned-miss .ui-ic { color: var(--accent); }
.peel { animation: peel 0.9s cubic-bezier(.2, 1.5, .4, 1) both; }
.peel.super { animation-delay: .35s; }
@keyframes peel { 0% { transform: scale(.2) rotate(-40deg); opacity: 0; } 70% { transform: scale(1.12) rotate(6deg); opacity: 1; } 100% { transform: scale(1) rotate(-4deg); } }
.center-row { justify-content: center; }

/* Yläpalkin albuminappi */
.album-btn { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; flex: none; }
.album-btn .stk { width: 44px; }
.album-count { position: absolute; right: -4px; bottom: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); }

/* Albumi */
.modal-card.album { gap: 12px; }
.album-page { border: 1px solid var(--line); border-radius: 18px; padding: 12px; background: var(--sunk-2); }
.album-page.gold-page { background: #FFF8E1; border-color: #F5D77A; }
.album-page h3 { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; margin: 0 0 8px; }
.slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.slot { aspect-ratio: 1; display: grid; place-items: center; }
.slot .stk { width: 100%; }
.slot.empty { border: 2px dashed #CBD0D7; border-radius: 50%; color: #A8B0BB; font-weight: 800; font-size: 14px; }
.gold-page .slot.empty { border-color: #E8C766; color: #C9A23A; }

/* Lapsikohtaiset tarra-asetukset */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.theme-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 14px; border: 2px solid transparent; background: var(--sunk-2); cursor: pointer; font-size: 12px; font-weight: 700; color: var(--ink-2); text-align: center; }
.theme-pick .stk { width: 52px; }
.theme-pick.on { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }

/* Juhlanäkymä */
.celebrate {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .97), rgba(230, 238, 248, .97));
  animation: cel-in .4s ease both; overflow: hidden;
}
.celebrate.gold { background: radial-gradient(circle at 50% 38%, #FFF6D5 0%, #F7D774 45%, #B8860B 100%); }
.celebrate.out { animation: cel-out .4s ease both; }
@keyframes cel-in { from { opacity: 0; transform: scale(1.05); } }
@keyframes cel-out { to { opacity: 0; } }
.celebrate .confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.celebrate .rays {
  position: absolute; left: 50%; top: 38%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax;
  background: repeating-conic-gradient(rgba(255, 255, 255, .35) 0 8deg, transparent 8deg 22deg);
  animation: spin 24s linear infinite; pointer-events: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.cel-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; max-width: 720px; }
.cel-hero { width: min(240px, 50vw); animation: hero-in 1.4s cubic-bezier(.2, 1.4, .3, 1) both; filter: drop-shadow(0 10px 30px rgba(122, 82, 0, .45)); }
@keyframes hero-in { 0% { transform: scale(0) rotateY(0deg) rotate(-30deg); } 60% { transform: scale(1.15) rotateY(360deg) rotate(8deg); } 100% { transform: scale(1) rotateY(360deg) rotate(0); } }
.cel-hero .stk { animation: bob 2.4s ease-in-out 1.4s infinite; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(3deg); } }
.cel-title { font-size: clamp(40px, 9vw, 76px); font-weight: 900; letter-spacing: -.02em; color: var(--accent-dark); animation: pop .7s cubic-bezier(.2, 1.6, .4, 1) .1s both; }
.celebrate.gold .cel-title {
  background: linear-gradient(100deg, #7A5200 0%, #C98E1B 30%, #FFF4C2 50%, #C98E1B 70%, #7A5200 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: pop .7s cubic-bezier(.2, 1.6, .4, 1) .3s both, shimmer 2.6s linear 1s infinite;
  filter: drop-shadow(0 3px 0 rgba(255, 255, 255, .6));
}
@keyframes shimmer { to { background-position: -250% 0; } }
.cel-sub { font-size: clamp(18px, 3.4vw, 24px); font-weight: 700; color: var(--ink-2); max-width: 520px; }
.celebrate.gold .cel-sub { color: #5A3C00; }
.cel-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; width: min(560px, 90vw); }
.cel-stk { animation: peel .8s cubic-bezier(.2, 1.5, .4, 1) both; }
.cel-btn { width: auto; min-width: 220px; padding: 0 36px; background: var(--lvl-green); color: #fff; box-shadow: 0 5px 0 var(--green-dark); }
.celebrate.gold .cel-btn { background: #C98E1B; box-shadow: 0 5px 0 #7A5200; }
@media (prefers-reduced-motion: reduce) { .celebrate .rays, .cel-hero .stk { animation: none !important; } }

/* Käyttäjävalikko (nimi ▾) */
.who-wrap { position: relative; display: inline-block; }
.who-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px 0 6px;
  border-radius: 99px; border: 1.5px solid var(--line); background: #fff; cursor: pointer;
  font-size: 16px; font-weight: 800; color: var(--ink);
}
.who-btn .tri { font-size: 13px; color: var(--ink-2); margin-left: 2px; }
.who-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 200px;
  background: #fff; border-radius: 16px; box-shadow: 0 12px 34px rgba(30, 42, 56, .2); padding: 6px;
  display: flex; flex-direction: column; animation: rise .15s ease;
}
.who-item { display: flex; align-items: center; gap: 10px; padding: 10px; border: 0; background: none; border-radius: 12px; cursor: pointer; font-size: 16px; font-weight: 700; text-align: left; }
.who-item:hover { background: var(--sunk-2); }
.who-item.on { background: var(--accent-soft); }
.who-item .ui-ic { margin-left: auto; color: var(--accent); }
.profile-bar { margin: 2px 0 4px; }

/* Valmistumisaika aikakortissa ja aikajanalla */
.ready-line { font-size: 15px; color: var(--ink-2); margin-top: 2px; }
.ready-line b { color: var(--ink); }
.tl-end small { font-size: 11px; color: var(--ink-2); white-space: nowrap; }

@media (max-width: 600px) {
  .who-btn { min-height: 32px; font-size: 14px; padding: 0 8px 0 4px; }
  .album-btn, .album-btn .stk { width: 36px; height: 36px; }
  .earned-stk { width: 80px; }
  .earned-stk.super { width: 96px; }
  .slots { gap: 5px; }
  .cel-grid { gap: 6px; }
  .done-card .earned { grid-column: 1 / -1; }
  .done-card .center-row { grid-column: 1 / -1; }
}
/* Juhla mahtuu myös matalalle näytölle (tabletti vaakasuunnassa) */
.celebrate { overflow-y: auto; }
.cel-body { gap: clamp(6px, 1.6vh, 14px); }
.cel-hero { width: min(240px, 50vw, 26vh); }
.cel-title { font-size: clamp(34px, min(9vw, 9vh), 76px); }
.cel-sub { font-size: clamp(16px, min(3.4vw, 3vh), 24px); }
.cel-grid { width: min(560px, 90vw, 62vh); }
.cel-btn { min-height: clamp(52px, 8vh, 74px); }
/* Puhelin: valmis-kortti pystyyn, tarrat keskelle */
@media (max-width: 600px) {
  .done-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 14px 16px; }
  .done-card .ill.big { width: 56px; height: 56px; }
  .done-card h2 { font-size: 24px; }
  .done-card .mood-q { margin: 0; }
  .earned { gap: 10px; }
  .earned-txt { text-align: center; align-items: center; width: 100%; }
  .earned-txt b { font-size: 18px; }
}
.stk.gold .gold-art .hshoe { stroke: #D99A1E; }

/* ======================================================================
   Versio 15: pikalähdöt
   ====================================================================== */
.quick-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quick-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px;
  border-radius: 18px; border: 2px solid var(--line); background: #fff; cursor: pointer;
  font-size: 16px; font-weight: 800; color: var(--ink);
}
.quick-btn .ill { width: 58px; height: 58px; }
.quick-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.modal-wrap.m-quick { max-width: 640px; }
.modal-card.quick { gap: 12px; }
.q-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.q-kind { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; border-radius: 14px; border: 2px solid var(--line); background: #fff; cursor: pointer; font-weight: 800; font-size: 15px; }
.q-kind .ill { width: 34px; height: 34px; }
.q-kind.on { border-color: var(--accent); background: var(--accent-soft); }
.q-sec h3 { font-size: 15px; margin: 0 0 6px; }
.q-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.q-lbl, .q-or { font-size: 14px; font-weight: 700; color: var(--ink-2); margin-right: 2px; }
.q-row .time-in { width: 92px; min-height: 40px; padding: 6px 8px; text-align: center; }
.q-sub { font-size: 13px; font-weight: 800; color: var(--muted); margin: 8px 0 4px; }
.qchip { min-height: 38px; padding: 0 12px; border-radius: 99px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.qchip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.q-steps { display: flex; flex-direction: column; gap: 6px; }
.q-step { display: grid; grid-template-columns: 26px 36px 1fr auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; text-align: left; font-size: 15px; font-weight: 700; color: var(--muted); }
.q-step .ill { width: 36px; height: 36px; opacity: .45; }
.q-step small { font-weight: 600; }
.q-check { width: 24px; height: 24px; border-radius: 7px; border: 2px solid #C9CED6; display: grid; place-items: center; color: transparent; }
.q-check .ui-ic { width: 16px; height: 16px; }
.q-step.on { color: var(--ink); border-color: var(--lvl-green); background: var(--green-soft); }
.q-step.on .ill { opacity: 1; }
.q-step.on .q-check { background: var(--lvl-green); border-color: var(--lvl-green); color: #fff; }
.q-min { color: var(--ink-2); }
.q-summary { font-size: 15px; color: var(--ink-2); background: var(--sunk-2); border-radius: 12px; padding: 8px 12px; }
.q-summary b { color: var(--ink); }
@media (max-width: 600px) {
  .quick-btn { font-size: 14px; padding: 10px 4px; }
  .quick-btn .ill { width: 44px; height: 44px; }
  .q-kind { flex-direction: column; gap: 2px; font-size: 13px; padding: 6px; }
  .qchip { min-height: 34px; padding: 0 10px; font-size: 13px; }
}

/* Pikaikkunan vaiheet: valinta + kesto */
.q-step { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; cursor: default; }
.q-toggle { flex: 1; min-width: 0; display: grid; grid-template-columns: 26px 36px 1fr; align-items: center; gap: 10px; padding: 4px 6px; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; font-size: 15px; font-weight: 700; color: inherit; }
.q-toggle .ill { width: 36px; height: 36px; opacity: .45; }
.q-step.on .q-toggle .ill { opacity: 1; }
.q-dur { display: flex; align-items: center; gap: 2px; flex: none; }
.q-dur button { width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; font-size: 20px; font-weight: 800; line-height: 1; color: var(--ink); }
.q-dur b { min-width: 24px; text-align: center; font-size: 16px; font-variant-numeric: tabular-nums; }
.q-dur span { font-size: 12px; color: var(--ink-2); margin-right: 2px; }
@media (max-width: 600px) {
  .q-toggle { grid-template-columns: 22px 28px 1fr; gap: 6px; font-size: 14px; }
  .q-toggle .ill { width: 28px; height: 28px; }
  .q-dur button { width: 30px; height: 30px; font-size: 18px; }
}

/* Omat pikalähdöt ja ryhmitellyt vaatteet */
.quick-btns { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.quick-btn.add { border-style: dashed; color: var(--accent); justify-content: center; }
.quick-btn.add .ui-ic { width: 40px; height: 40px; margin: 9px 0; }
.q-kinds { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.q-grp { font-size: 14px; margin: 12px 0 2px; }
.q-save { border: 1.5px solid var(--line); border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.q-save[open] { gap: 10px; background: var(--sunk-2); }
.q-save summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 800; font-size: 15px; color: var(--accent); list-style: none; }
.q-save summary::-webkit-details-marker { display: none; }
.q-save summary .ui-ic { width: 18px; height: 18px; }
.q-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }
.q-icon { padding: 3px; border-radius: 12px; border: 2px solid transparent; background: #fff; cursor: pointer; }
.q-icon .ill { width: 40px; height: 40px; margin: 0 auto; }
.q-icon.on { border-color: var(--accent); background: var(--accent-soft); }
.q-tplcheck { align-self: end; padding-bottom: 8px; }
@media (max-width: 600px) {
  .quick-btns { grid-template-columns: repeat(3, 1fr); }
  .q-kinds { grid-template-columns: repeat(3, 1fr); }
}

/* Tarra-albumi kapealla näytöllä: ruudukko ei saa leventää ikkunaa */
.slots { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.slot { min-width: 0; }
.modal-wrap.m-album { max-width: 640px; }
.modal-card.album { min-width: 0; }
.album-page { min-width: 0; }
@media (max-width: 600px) {
  .modal-card.album { padding: 16px 14px; }
  .album-page { padding: 10px 8px; }
  .slots { gap: 4px; }
  .slot.empty { font-size: 12px; border-width: 1.5px; }
}
.q-ownname input { max-width: 320px; }
/* Pitkät tehtävänimet (esim. Hampaidenpesu) eivät mene minuuttinappien alle */
.q-step .q-toggle { min-width: 0; }
.q-step .q-toggle > span { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }

/* Puhelin: päänäkymä mahtuu kokonaan ruudulle, eikä sivua voi vierittää alas tai sivulle */
.tl-seg { cursor: default; }
.tl-seg.todo:hover { background: var(--sunk); }
.screen.child { overflow-x: clip; }
html:has(.screen.child.fit), html:has(.screen.child.fit) body { overscroll-behavior: none; }
@media (max-width: 699px) {
  /* Valmis-näkymä (tarrat ja mieliala) saa vieriä normaalisti */
  html:has(.screen.child.fit:not(:has(.done-card))), html:has(.screen.child.fit:not(:has(.done-card))) body { overflow: hidden; height: 100%; }
  .screen.child.fit:not(:has(.done-card)) {
    height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .fit .topbar { flex: none; }
  .fit .child-grid { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
  .fit .time-card { flex: none; }
  .fit .task-col { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
  .fit .task-col > .card:not(.done-card) { flex: 0 1 auto; min-height: 0; overflow: auto; }
  .fit .timeline-card { flex: none; margin-top: 12px; }
  /* Monta tehtävää: aikajanan kuvakkeet kapenevat, jotta rivi mahtuu ruudulle */
  .tl-seg { min-width: 20px; }
  .tl-ill { flex: 0 1 24px; min-width: 0; height: auto; aspect-ratio: 1; }
  .tl-ill .ill { width: 100%; height: 100%; }
  .tl-slack { min-width: 26px; }
}
@media (max-width: 699px) and (max-height: 700px) {
  .fit .time-card .disc-wrap { width: 112px; }
  .fit .time-card { padding-top: 14px; padding-bottom: 14px; }
}
.tl-slack { container-type: inline-size; }
.tl-slack span i { font-style: normal; }
@container (max-width: 50px) { .tl-slack span i { display: none; } }

/* ======================================================================
   Versio 21: tiiviimpi tehtäväkortti puhelimessa, valmistumisaika puhekuplana
   ====================================================================== */
.earned, .done-card .pop { position: relative; }
.done-bubble {
  position: absolute; z-index: 3; left: 50%; top: -8px; transform: translate(-50%, -100%);
  width: max-content; max-width: min(320px, 86vw); padding: 10px 16px; border-radius: 18px;
  background: var(--ink); color: #fff; font-size: 16px; font-weight: 700; line-height: 1.3; text-align: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18); pointer-events: none;
  animation: doneBubble 7s ease forwards;
}
.done-bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -8px;
  border: 8px solid transparent; border-bottom: 0; border-top-color: var(--ink);
}
@keyframes doneBubble {
  0% { opacity: 0; transform: translate(-50%, -80%) scale(.9); }
  6%, 88% { opacity: 1; transform: translate(-50%, -100%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -110%) scale(.96); visibility: hidden; }
}
.done-links { flex-wrap: nowrap; justify-content: center; }
.done-links .btn { flex: 0 1 auto; min-width: 0; white-space: nowrap; }

@media (max-width: 600px) {
  .task-card { gap: 6px 12px; padding: 12px 14px; }
  .task-media .ill.big { width: 52px; height: 52px; }
  .task-body { gap: 4px; }
  .task-title { font-size: 22px; line-height: 1.15; }
  .task-info { font-size: 14px; line-height: 1.35; }
  .chips { gap: 6px; }
  .chip { font-size: 13px; padding: 4px 9px 4px 6px; gap: 6px; }
  .task-time { margin-top: 2px; }
  .task-time-txt { font-size: 13px; margin-top: 3px; }
  .task-actions { gap: 8px; min-width: 0; }
  .task-actions .btn-done { flex: 1 1 0; min-width: 0; font-size: 20px; padding: 0 10px; }
  .task-actions .btn-xl { min-height: 58px; }
  .task-actions .btn-xl .ui-ic { width: 24px; height: 24px; }
  .btn-side { flex: 0 1 70px; min-width: 0; min-height: 58px; padding: 4px; font-size: 12px; border-radius: 18px; }
  .btn-side .ui-ic { width: 20px; height: 20px; }
  .fit .task-col > .card:not(.done-card) { overflow-x: hidden; }
  .done-links .btn { min-height: 44px; padding: 0 14px; font-size: 15px; }
  .done-bubble { font-size: 15px; padding: 8px 14px; }
}
@media (max-width: 600px) {
  /* Valmis: "Valmiina…"-laatikko toistaisi valmis-korttia, joten se piilotetaan puhelimessa */
  .screen.child:has(.done-card) .time-card .status { display: none; }
  .screen.child:has(.done-card) .time-card:not(.later-card) { grid-template-areas: "disc head"; }
  .done-card { gap: 6px; padding: 12px 14px; }
  .done-card h2 { font-size: 22px; }
  .earned { gap: 6px 10px; margin: 0; }
  .earned-stk { width: 68px; }
  .earned-stk.super { width: 82px; }
  .earned-txt b { font-size: 16px; }
  .earned-txt span { font-size: 13px; }
  .done-card .mood-q { gap: 4px; }
  .mood-btn { padding: 4px 2px; }
  .mood-btn .mood { width: 30px; height: 30px; }
}
.toast-shield.linger { background: transparent; }

/* Puhelin, valmis-näkymä: aikajana pysyy ruudun alareunassa kuten tehtävien aikana */
@media (max-width: 699px) {
  .screen.child.fit:has(.done-card) {
    min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .fit:has(.done-card) .topbar { flex: none; }
  .fit:has(.done-card) .child-grid { flex: 1 0 auto; min-height: auto; }
}

/* ======================================================================
   Versio 23: tarranappi (tarrat ja supertarrat kahdella rivillä), ei logoa lapsen näkymässä
   ====================================================================== */
.topbar .brand > div { min-width: 0; }
.album-btn {
  width: auto; height: auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 14px 4px 4px; border-radius: 99px; background: #fff; box-shadow: var(--shadow);
}
.album-btn .stk { width: 44px; height: 44px; flex: none; }
.album-nums { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.12; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.album-nums > span { display: inline-flex; align-items: center; gap: 5px; }
.an-reg { color: #1D4F86; }
.an-dot { width: 11px; height: 11px; border-radius: 50%; background: #3B7DC4; box-shadow: inset 0 0 0 2px #CFE1F5; }
.an-super { color: #9A6A00; }
.an-super .ui-ic { width: 13px; height: 13px; fill: #E9B730; stroke: #B8860B; }
@media (max-width: 600px) {
  .album-btn { gap: 6px; padding: 3px 10px 3px 3px; }
  .album-btn .stk { width: 32px; height: 32px; }
  .album-nums { font-size: 13px; }
  .an-dot { width: 9px; height: 9px; }
  .an-super .ui-ic { width: 11px; height: 11px; }
}
/* Tarrarivien kuvakkeet samanlevyisiin lokeroihin, jotta luvut ovat tarkasti allekkain */
.an-ic { width: 14px; display: inline-flex; justify-content: center; align-items: center; flex: none; font-style: normal; }
.an-dot { display: block; }
/* Yläpalkki: oikean reunan napit samalle tasolle nimen/tervehdyksen kanssa (ei koko lohkon keskelle) */
.topbar { align-items: flex-start; }
.top-right { min-height: 44px; }
.brand > div > :first-child { min-height: 44px; display: flex; align-items: center; }
@media (max-width: 600px) {
  .an-ic { width: 12px; }
  .top-right { min-height: 40px; }
  .brand > div { align-items: center; }
  .brand > div > :first-child { min-height: 40px; }
}

/* Pikaikkuna: ajastetut ja käynnissä olevat pikalähdöt, peruttavissa */
.q-active { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 16px; background: var(--sunk-2); border: 1px solid var(--line); }
.q-active-row { display: flex; align-items: center; gap: 10px; }
.q-active-row .ill { width: 36px; height: 36px; }
.q-active-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; font-size: 16px; }
.q-active-txt small { font-size: 13px; color: var(--ink-2); }
.q-active-row .btn { flex: none; }
.q-step .q-toggle > span { overflow-wrap: break-word; hyphens: manual; }
.exit-ask h2 { font-size: 22px; margin: 0 0 6px; }
.tip { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--accent-soft); color: var(--ink); font-size: 15px; line-height: 1.4; }
.tip .ui-ic { color: var(--accent); width: 20px; height: 20px; margin-top: 1px; }
/* Aikuisten yläpalkin Synkronoi-pikanappi */
.p-sync { margin-left: auto; }
.p-sync.busy .ui-ic { animation: spin 1s linear infinite; }
@media (max-width: 600px) {
  .p-top { gap: 6px; }
  .p-top h1 { font-size: 20px; }
  .p-top:has(.p-sync) h1 .logo { display: none; }
  .p-top .btn-ghost { padding: 0 8px; }
}
@media (max-width: 600px) {
  .p-top .p-sync span { display: inline; }
}

/* ======================================================================
   Versio 29: Kellotus
   ====================================================================== */
.tm-btn {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: #FFF6DC; color: #8A5E00; border: 2px solid #F2D27A; padding: 0;
}
.tm-btn .ui-ic { width: 24px; height: 24px; }
.tm-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tm { display: flex; flex-direction: column; gap: 14px; max-width: 900px; margin: 0 auto; }
.tm-now { display: flex; align-items: center; gap: 18px; padding: 16px 20px; }
.tm-now-ill .ill.big { width: 110px; height: 110px; }
.tm-now-txt { min-width: 0; }
.tm-now-time { font-size: 64px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin: 4px 0; }
.tm-total { font-size: 16px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tm-total b { color: var(--ink); }
.tm-pick { padding: 14px 16px; }
.tm-hint { font-size: 15px; font-weight: 700; color: var(--ink-2); margin-bottom: 10px; }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.tm-ic {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 3px solid var(--line); border-radius: 20px; background: #fff; cursor: pointer; padding: 6px; min-width: 0;
  transition: transform .08s;
}
.tm-ic:active { transform: scale(.95); }
.tm-ic .ill { width: 68%; height: auto; aspect-ratio: 1; }
.tm-ic.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
.tm-more { color: var(--accent); font-weight: 800; font-size: 14px; border-style: dashed; }
.tm-more .ui-ic { width: 28px; height: 28px; }
.tm-log { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 3px; border-radius: 99px; background: var(--sunk); font-size: 13px; font-variant-numeric: tabular-nums; }
.tm-chip .ill { width: 24px; height: 24px; }
.tm-chip.on { background: var(--accent-soft); color: var(--accent); }
.tm-actions { display: flex; gap: 10px; }
.tm-actions .btn { flex: 1; min-height: 56px; font-size: 18px; }
.modal-card.tm-icons h2 { font-size: 22px; margin-bottom: 10px; }
.tm-all { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.tm-all .tm-ic { aspect-ratio: auto; padding: 8px 4px; border-width: 2px; }
.tm-all .tm-ic .ill { width: 48px; height: 48px; }
.tm-all .tm-ic span { font-size: 11px; line-height: 1.15; text-align: center; color: var(--ink-2); }
.tm-all .tm-ic.in { border-color: var(--accent-soft); }
.tm-review { border: 2px solid var(--accent-soft); }
.tm-review h2 { font-size: 20px; margin: 2px 0 4px; }
.tm-rows { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; }
.tm-row { display: flex; align-items: center; gap: 8px; }
.tm-row .ill { width: 36px; height: 36px; flex: none; }
.tm-row input { flex: 1; min-width: 0; }
.tm-dur { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; flex: none; font-variant-numeric: tabular-nums; }
.tm-dur small { font-size: 11px; color: var(--ink-2); }
@media (max-width: 600px) {
  .tm-btn { width: 36px; height: 36px; }
  .tm-btn .ui-ic { width: 20px; height: 20px; }
  .tm { gap: 10px; }
  .tm-now { gap: 12px; padding: 12px 14px; }
  .tm-now-ill .ill.big { width: 72px; height: 72px; }
  .tm-now-time { font-size: 48px; }
  .tm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .tm-ic { border-radius: 16px; border-width: 2.5px; }
  .tm-pick { padding: 12px; }
  .tm-hint { font-size: 14px; margin-bottom: 8px; }
}
@media (max-width: 600px) {
  .top-right { gap: 6px; }
  .clock { font-size: 20px; }
  .album-btn { padding: 2px 8px 2px 2px; gap: 5px; }
  .today { white-space: nowrap; }
}
@media (max-width: 370px) {
  .topbar { gap: 6px; }
  .tm-btn, .gear { width: 34px; height: 34px; }
}
.tm-hint { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tm-more.btn { border-style: solid; flex: none; min-height: 36px; padding: 0 12px; font-size: 14px; }
.tm-more.btn .ui-ic { width: 18px; height: 18px; }
.tab { position: relative; }
.tab-dot { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--lvl-red); color: #fff; font-size: 11px; font-weight: 800; font-style: normal; display: grid; place-items: center; }
/* Kellotus: isot vaihtonapit 4 sarakkeessa myös tabletilla */
.tm { max-width: 720px; }
.tm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 700px) {
  .tm-now-ill .ill.big { width: 96px; height: 96px; }
  .tm-now-time { font-size: 56px; }
  .tm-grid { gap: 12px; }
}
.screen.child.timing { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.timing .topbar { padding-bottom: 10px; }
@media (min-width: 700px) {
  .tm { gap: 12px; }
  .tm-grid { gap: 10px; }
  .tm-now { padding: 12px 18px; }
}
/* Versio 30: kellotuksen vaihtovahvistus, kuvan vaihto, jäljellä oleva aika */
.tm-switch h2 { font-size: 22px; text-align: center; margin-bottom: 8px; }
.tm-switch-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 8px 0 14px; }
.tm-switch-row .ill { width: 96px; height: 96px; }
.tm-arrow { font-size: 40px; font-weight: 800; color: var(--accent); }
.tm-switch .modal-actions .btn-lg { min-width: 140px; }
.tm-row-ic { flex: none; padding: 0; border: 2px dashed var(--line); border-radius: 50%; background: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; }
.tm-row-ic .ill { width: 36px; height: 36px; }
.tt-over { color: var(--yellow-ink); font-weight: 700; }
/* Puhelin: pitkä muistilista vierittyy kortin sisällä, Valmis-painike pysyy aina näkyvissä */
@media (max-width: 699px) {
  .fit .task-col > .task-card { overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
  .fit .task-card .task-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-self: stretch; }
  .fit .task-card .task-media { align-self: start; }
}
@media (max-width: 699px) {
  .fit .task-card .chips { order: 3; }
}

/* Versio 31: kellotusnäkymä täyttää ruudun, pienemmät napit, määrä ruudun mukaan */
.screen.child.timing { height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.timing .topbar { flex: none; }
.tm { flex: 1 1 auto; min-height: 0; width: 100%; }
.tm-now, .tm-actions { flex: none; }
.tm-pick { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.tm-hint, .tm-log { flex: none; }
.tm-grid { flex: 1 1 0; min-height: 0; overflow-y: auto; align-content: start; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.tm-ic { border-radius: 16px; border-width: 2.5px; padding: 4px; }
.tm-ic .ill { width: 74%; }
.tm-ic[hidden] { display: none; }
@media (max-width: 600px) {
  .tm-grid { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px; }
  .tm-ic { border-radius: 14px; border-width: 2px; }
  .tm-now-ill .ill.big { width: 60px; height: 60px; }
  .tm-now-time { font-size: 42px; }
  .tm-now { padding: 10px 14px; }
}
@media (min-width: 700px) {
  .tm-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
}
@media (min-width: 900px) { .tm { max-width: 920px; } }

/* Versio 32: kaikkien kuvien valinta ilman nimiä, leveä ikkuna (tabletilla kaikki kerralla näkyviin) */
.modal-wrap.m-tmIcons, .modal-wrap.m-tmSegIcon { max-width: min(1100px, 100%); }
.tm-all { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.tm-all .tm-ic { aspect-ratio: 1; padding: 4px; }
.tm-all .tm-ic .ill { width: 82%; height: auto; }
@media (min-width: 700px) {
  .tm-all { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; }
}
@media (max-width: 600px) {
  .tm-all { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
}
@media (min-width: 700px) {
  .tm-all { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}
@media (max-width: 600px) {
  .tm-all { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
  .tm-all .tm-ic { border-radius: 12px; border-width: 2px; padding: 2px; }
}
.tm-icons-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.modal-card.tm-icons .tm-icons-head h2 { margin: 0; }
.tm-icons-head .btn { flex: none; }
@media (max-width: 600px) {
  .modal-card.tm-icons .tm-icons-head h2 { font-size: 19px; }
  .tm-icons-head .btn { padding: 0 8px; }
}

/* Versio 34: tiiviimpi kellotusnäkymä ja etenemispalkki */
.tm-now { padding: 10px 16px; gap: 14px; }
.tm-now-ill .ill.big { width: 64px; height: 64px; }
.tm-now-txt { flex: 1; }
.tm-now-time { font-size: 44px; margin: 0; }
.tm-total { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; flex: none; }
.tm-total small { font-size: 13px; color: var(--ink-2); }
.tm-total b { font-size: 22px; font-variant-numeric: tabular-nums; }
.tm-pick { padding: 10px 12px; }
.tm-hint { font-size: 14px; margin-bottom: 8px; }
.tm-more.btn { min-height: 32px; }
.tm-actions .btn { min-height: 48px; font-size: 17px; }
.tm-bar-card { flex: none; padding: 8px 10px; border-radius: 20px; }
.tm-bar { display: flex; gap: 3px; height: 48px; overflow: hidden; }
.tm-seg {
  flex: 1 1 0; min-width: 30px; display: flex; align-items: center; justify-content: center; gap: 4px;
  border-radius: 12px; background: var(--sunk); overflow: hidden; container-type: inline-size; transition: flex-grow .9s linear;
}
.tm-seg .ill { width: 28px; height: 28px; flex: none; }
.tm-seg b { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tm-seg.on { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); }
@container (max-width: 70px) { .tm-seg b { display: none; } }
.tm-bar-empty { margin: auto; font-size: 14px; color: var(--ink-2); }
@media (min-width: 700px) {
  .tm-now-ill .ill.big { width: 72px; height: 72px; }
  .tm-now-time { font-size: 48px; }
  .tm-bar { height: 56px; }
  .tm-seg .ill { width: 34px; height: 34px; }
}
@media (max-width: 600px) {
  .tm-now-ill .ill.big { width: 52px; height: 52px; }
  .tm-now-time { font-size: 38px; }
  .tm-total b { font-size: 18px; }
  .tm-bar { height: 44px; }
  .tm-seg { min-width: 26px; border-radius: 10px; }
  .tm-seg .ill { width: 24px; height: 24px; }
}
@media (min-width: 700px) {
  .tm-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}
/* Matala näyttö (esim. tabletti vaakasuunnassa): kaikki kortit tiiviimmiksi */
@media (max-height: 720px) {
  .timing .topbar { padding-top: 0; padding-bottom: 6px; }
  .timing .topbar .today { display: none; }
  .tm { gap: 8px; }
  .tm-now { padding: 6px 14px; }
  .tm-now-ill .ill.big { width: 48px; height: 48px; }
  .tm-now-time { font-size: 36px; }
  .tm-pick { padding: 8px 10px; }
  .tm-hint { margin-bottom: 6px; }
  .tm-actions .btn { min-height: 44px; }
  .tm-bar-card { padding: 6px 8px; }
  .tm-bar { height: 40px; }
  .tm-seg .ill { width: 26px; height: 26px; }
}
/* Etenemispalkki: kuva ja kesto allekkain, jokaisesta vaiheesta kesto näkyvissä */
.tm-bar { height: auto; overflow-x: auto; scrollbar-width: none; }
.tm-bar::-webkit-scrollbar { display: none; }
.tm-seg { flex-direction: column; gap: 1px; min-width: 50px; padding: 3px 2px; flex-shrink: 0; }
.tm-seg b { font-size: 12px; }
@container (max-width: 70px) { .tm-seg b { display: inline; } }
.tm-seg .ill { width: 26px; height: 26px; }
@media (min-width: 700px) { .tm-seg { min-width: 60px; } .tm-seg .ill { width: 30px; height: 30px; } .tm-seg b { font-size: 13px; } }
/* Aikajanan nykyinen tehtävä: tilaa tekstille "jäljellä 2.01 min" */
@media (min-width: 700px) {
  .tl-seg.current { min-width: 160px; flex-shrink: 0; }
  .tl-seg.current .tl-txt small { font-variant-numeric: tabular-nums; }
}

/* Versio 36: puhelimessa tilaviesti kellonajan alle (kiekon viereen), jolloin aikakortti madaltuu */
@media (max-width: 600px) {
  .time-card:not(.later-card) {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-areas: "disc head" "disc status";
    gap: 6px 12px; padding: 12px 14px; align-items: center;
  }
  .time-card .disc-wrap, .fit .time-card .disc-wrap { width: 112px; }
  .time-card .dep-head { gap: 0; align-self: end; }
  .dep-time { font-size: 38px; line-height: 1.05; }
  .time-card .status { align-self: start; padding: 6px 8px; gap: 7px; border-radius: 12px; }
  .status-dot { width: 26px; height: 26px; }
  .status-dot .ui-ic { width: 16px; height: 16px; }
  .status-title { font-size: 15px; line-height: 1.2; }
  .status-sub { font-size: 12px; line-height: 1.25; }
}

/* Versio 37: kuvavalitsin – usein käytetyt + ryhmät välilehtinä */
.ip { display: flex; flex-direction: column; gap: 8px; }
.ip-sub { font-size: 13px; font-weight: 800; color: var(--ink-2); }
.ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.ip-freq { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.ip-btn {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0;
  padding: 4px; border: 2px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer;
}
.ip-btn .ill { width: 80%; height: auto; aspect-ratio: 1; }
.ip-btn.on { border-color: var(--accent); background: var(--accent-soft); }
.ip-labels .ip-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
.ip-labels .ip-btn { aspect-ratio: auto; padding: 6px 4px; }
.ip-labels .ip-btn .ill { width: 48px; height: 48px; }
.ip-labels .ip-btn span { font-size: 11px; line-height: 1.15; text-align: center; color: var(--ink-2); }
.ip-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ip-tabs::-webkit-scrollbar { display: none; }
.ip-tab {
  flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 12px 3px 4px; min-height: 36px;
  border: 0; border-radius: 99px; background: var(--sunk); font-size: 14px; font-weight: 700; color: var(--ink-2); cursor: pointer;
}
.ip-tab .ill { width: 28px; height: 28px; }
.ip-tab:last-child { padding-left: 12px; }
.ip-tab.on { background: var(--accent); color: #fff; }
@media (min-width: 700px) { .ip-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; } }
@media (max-width: 600px) {
  .ip-grid { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); }
  .ip-btn { border-radius: 12px; padding: 3px; }
  .ip-tab { font-size: 13px; }
}
.ip-tabs { position: relative; scroll-behavior: smooth; }
@media (max-width: 600px) {
  .ip-grid { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
  .ip-labels .ip-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}
/* Kuvavalitsimen välilehdet rivittyvät (ei sivuttaisvieritystä) */
.ip-tabs { flex-wrap: wrap; overflow: visible; }
@media (max-width: 600px) {
  .ip-tabs { gap: 5px; }
  .ip-tab { padding: 3px 10px; min-height: 32px; font-size: 13px; }
  .ip-tab .ill { display: none; }
}

/* Versio 39: tiiviimpi pikaikkuna, vaatteet omaan ikkunaan */
.q-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.modal-card.quick .q-head h2 { font-size: 22px; margin: 0; }
.q-head .btn { flex: none; }
.q-clothes-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 8px;
  padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; font: inherit; font-size: 14px; color: var(--ink-2); text-align: left;
}
.q-clothes-btn b { color: var(--accent); white-space: nowrap; }
.q-kinds { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.q-kind { flex-direction: column; gap: 2px; padding: 5px 4px; font-size: 13px; border-radius: 12px; line-height: 1.15; }
.q-kind .ill { width: 30px; height: 30px; }
.q-steps { gap: 4px; }
.q-step { padding: 2px 6px 2px 2px; border-radius: 12px; }
.q-toggle { padding: 2px 4px; font-size: 14px; line-height: 1.2; }
.q-step small { font-size: 12px; color: var(--ink-2); }
@media (max-width: 600px) {
  .q-kinds { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
  .q-kind { font-size: 12px; }
  .q-kind .ill { width: 26px; height: 26px; }
  .q-toggle { grid-template-columns: 20px 24px 1fr; gap: 6px; font-size: 13px; }
  .q-toggle .ill { width: 24px; height: 24px; }
  .q-dur button { width: 28px; height: 28px; font-size: 17px; }
  .q-dur b { min-width: 20px; font-size: 15px; }
}
.modal-wrap.m-qClothes { max-width: 640px; }
/* Otsikkorivi (Peruuta / Valmis) pysyy näkyvissä ikkunaa vieritettäessä */
.modal-card.quick .q-head { position: sticky; top: -1px; z-index: 3; background: #fff; margin: -6px -4px 0; padding: 6px 4px; }
.modal-card.quick .q-head { padding-bottom: 10px; box-shadow: 0 8px 8px -8px rgba(31, 42, 55, .18); }

/* Versio 41: lapsen näkymän valikko ☰ */
.menu-btn { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 0; background: #fff; box-shadow: var(--shadow); color: var(--ink); cursor: pointer; position: relative; }
.menu-btn .ui-ic { width: 24px; height: 24px; }
.menu-btn.on::after { content: ''; position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #fff; }
.modal-wrap.m-childMenu { max-width: 440px; align-self: flex-start; margin-top: 8px; }
.modal-card.cm { gap: 8px; padding: 16px; }
.modal-card.cm .q-head h2 { font-size: 22px; margin: 0; }
.cm-item {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px;
  border: 0; border-radius: 16px; background: var(--sunk-2); cursor: pointer; text-align: left; font: inherit; color: var(--ink);
}
.cm-item:active { background: var(--sunk); }
.cm-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: #fff; color: var(--accent); }
.cm-ic .ui-ic { width: 24px; height: 24px; }
.cm-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cm-txt b { font-size: 17px; }
.cm-txt small { font-size: 13px; color: var(--ink-2); }
.cm-parent { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.cm-hold { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--accent); }
.cm-parent.holding .cm-hold { width: 100%; transition: width 1.1s linear; }
.cm-awake { display: flex; align-items: center; gap: 6px; margin: 2px 4px 0; font-size: 13px; color: var(--green-dark); }
.cm-awake i { width: 8px; height: 8px; border-radius: 50%; background: var(--lvl-green); }
.cm-awake[hidden] { display: none; }
@media (max-width: 600px) {
  .menu-btn { width: 38px; height: 38px; }
  .menu-btn .ui-ic { width: 22px; height: 22px; }
}

/* Versio 42: Uusi lähtö -rakentaja */
.modal-wrap.m-newDep { max-width: 640px; }
.nd-row {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; grid-template-areas: "ic name up del" "end end dur dur";
  align-items: center; gap: 6px 8px; padding: 8px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; margin-bottom: 6px;
}
.nd-ic { grid-area: ic; } .nd-ic .ill { width: 36px; height: 36px; }
.nd-name { grid-area: name; min-width: 0; min-height: 38px; }
.nd-row [data-action="ndUp"] { grid-area: up; } .nd-row [data-action="ndDel"] { grid-area: del; }
.nd-row .q-dur { grid-area: dur; justify-self: end; }
.icon-btn.small { width: 36px; height: 36px; border-radius: 10px; }
.icon-btn.small .ui-ic { width: 18px; height: 18px; }
.nd-end {
  grid-area: end; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px;
  border-radius: 99px; border: 1.5px solid var(--line); background: var(--sunk-2); font: inherit; font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer;
}
.nd-end .ui-ic { width: 16px; height: 16px; }
.nd-end.alarm { background: #FFF3D6; border-color: #F2D27A; color: #8A5E00; }
.nd-sub { margin-top: 8px; }
.nd .ip { margin-top: 2px; }
.auto-start { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 6px; padding: 6px 12px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: 15px; }
.auto-start .ui-ic { width: 16px; height: 16px; }
.nd-end { white-space: nowrap; }

/* Versio 43: Uusi lähtö – alakohdat ja tauko */
.nd-row { grid-template-areas: "ic name up del" "opts opts opts opts" "sub sub sub sub"; }
.nd-opts { grid-area: opts; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nd-opts .q-dur { margin-left: auto; }
.nd-chip {
  display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 10px; white-space: nowrap;
  border-radius: 99px; border: 1.5px dashed #B8C2CC; background: #fff; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer;
}
.nd-chip .ui-ic { width: 15px; height: 15px; }
.nd-chip.on { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.nd-sub-ed { grid-area: sub; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-radius: 12px; background: var(--sunk-2); }
.nd-item { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 99px; background: #fff; border: 1.5px solid var(--line); font-size: 14px; font-weight: 700; }
.nd-item button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--sunk); display: grid; place-items: center; cursor: pointer; padding: 0; }
.nd-item button .ui-ic { width: 12px; height: 12px; }
.nd-add { display: inline-flex; align-items: center; gap: 4px; flex: 1 1 160px; }
.nd-add input { flex: 1; min-width: 0; min-height: 34px; padding: 4px 10px; border-radius: 99px; }
.nd-add button { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; }
.nd-add button .ui-ic { width: 18px; height: 18px; }

/* Versio 44: minuutit käsin syötettävissä −/+ -nappien välissä */
.min-in {
  width: 44px; min-height: 32px; padding: 2px 4px; text-align: center; font: inherit; font-size: 16px; font-weight: 800;
  font-variant-numeric: tabular-nums; border: 1.5px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink);
}
.min-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
@media (max-width: 600px) { .min-in { width: 40px; min-height: 30px; font-size: 15px; } }

/* Versio 45: Aikuisille → Tehtävät samoilla riveillä kuin Uusi lähtö */
.tpl-settings { margin-top: 12px; border: 1.5px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.tpl-settings[open] { background: var(--sunk-2); }
.tpl-settings summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.tpl-settings summary::-webkit-details-marker { display: none; }
.tpl-settings summary > span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.tpl-settings summary small { color: var(--ink-2); font-size: 13px; }
.tpl-settings summary .ui-ic { color: var(--accent); flex: none; }
.tpl-settings summary::after { content: '▾'; margin-left: auto; color: var(--ink-2); }
.tpl-settings[open] summary::after { content: '▴'; }
.tpl-settings .grid3 { margin-top: 12px; }
.tr-list { display: flex; flex-direction: column; margin-top: 8px; }
.tr-ic { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.tr-ic img, .tr-ic .ill { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.tr-row { grid-template-areas: "ic name up del" "opts opts opts opts" "tags tags tags tags" "sub sub sub sub"; }
.tr-tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: 4px; }
.tr-tags span { font-size: 12px; color: var(--ink-2); background: var(--sunk); border-radius: 99px; padding: 1px 8px; }
.tr-auto { margin-left: auto; font-size: 13px; color: var(--ink-2); }
.nd-chip.static { cursor: default; }
.tr-add-h { font-size: 16px; margin: 14px 0 8px; }
.modal-wrap.m-trIcon { max-width: min(1100px, 100%); }

/* ======================================================================
   Versio 46: Päiväohjelma ja valikon näyttökytkin
   ====================================================================== */
.pg { display: flex; flex-direction: column; gap: 12px; max-width: 900px; margin: 0 auto; width: 100%; }
.pg-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.pg-head > div:first-child { flex: 1; min-width: 0; }
.pg-head h2 { font-size: 24px; margin: 2px 0 0; }
.pg-count { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 99px; background: var(--green-soft); color: var(--green-dark); font-size: 15px; flex: none; }
.pg-count .ui-ic { width: 16px; height: 16px; }
.pg-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 700px) { .pg-list { grid-template-columns: 1fr 1fr; gap: 10px; } }
.pg-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); border: 2px solid transparent; min-height: 72px; }
.pg-ill .ill { width: 48px; height: 48px; }
.pg-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pg-txt b { font-size: 18px; }
.pg-txt small { font-size: 14px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.pg-txt small .ui-ic { width: 14px; height: 14px; }
.pg-acts { display: flex; align-items: center; gap: 6px; flex: none; }
.pg-act { width: 52px; height: 52px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--sunk); color: var(--ink); padding: 0; }
.pg-act .ui-ic { width: 26px; height: 26px; }
.pg-act.small { width: 40px; height: 40px; }
.pg-act.small .ui-ic { width: 20px; height: 20px; }
.pg-act.go { background: var(--accent); color: #fff; }
.pg-act.run { background: var(--lvl-yellow); color: #fff; }
.pg-act.check { background: #fff; border: 3px solid var(--lvl-green); }
.pg-act.done { background: var(--lvl-green); color: #fff; }
.pg-act.lock { background: none; color: var(--ink-2); cursor: default; }
.pg-item.running { border-color: var(--accent); background: var(--accent-soft); }
.pg-item.done { opacity: .6; box-shadow: none; }
.pg-item.done .pg-txt b { text-decoration: line-through; }
.pg-item.locked { background: var(--sunk-2); box-shadow: none; cursor: pointer; }
.pg-item.locked .pg-ill { filter: grayscale(1); opacity: .5; }
.pg-empty { text-align: center; padding: 30px 20px; }
.screen.child.program { padding-bottom: 24px; }
@media (max-width: 600px) {
  .pg-head h2 { font-size: 20px; }
  .pg-item { gap: 10px; padding: 8px 10px; min-height: 64px; }
  .pg-ill .ill { width: 40px; height: 40px; }
  .pg-txt b { font-size: 16px; }
  .pg-txt small { font-size: 13px; }
  .pg-act { width: 46px; height: 46px; }
}
/* Aikuisten muokkausnäkymä */
.pg-modes { display: inline-flex; border: 1.5px solid var(--line); border-radius: 99px; overflow: hidden; }
.pg-modes button { border: 0; background: #fff; padding: 0 10px; min-height: 32px; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.pg-modes button + button { border-left: 1.5px solid var(--line); }
.pg-modes button.on { background: var(--accent); color: #fff; }
.pg-row .time-in { width: 76px; min-height: 32px; padding: 2px 6px; text-align: center; }
.pg-row .nd-opts .q-dur, .pg-row .nd-opts .time-in { margin-left: 0; }
.pg-req-l { font-size: 13px; font-weight: 700; color: var(--ink-2); width: 100%; }
/* Valikon kytkin */
.cm-wake { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--sunk-2); cursor: pointer; }
.cm-wake input { position: absolute; opacity: 0; pointer-events: none; }
.cm-wake-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.cm-wake-txt b { font-size: 16px; }
.cm-wake-txt small { font-size: 13px; color: var(--ink-2); }
.cm-wake .switch { width: 48px; height: 28px; border-radius: 99px; background: #C9CED6; position: relative; flex: none; transition: background .15s; }
.cm-wake .switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
.cm-wake input:checked + .cm-wake-txt + .switch { background: var(--lvl-green); }
.cm-wake input:checked + .cm-wake-txt + .switch::after { left: 23px; }
.cm-wake input:focus-visible + .cm-wake-txt + .switch { box-shadow: 0 0 0 3px var(--accent-soft); }
.modal-wrap.m-pgIcon { max-width: min(1100px, 100%); }

/* Versio 48: alaspäin-nuoli riveille, Klo ja Kesto yhtä aikaa */
.nd-row { grid-template-columns: 36px minmax(0, 1fr) auto auto auto; grid-template-areas: "ic name up down del" "opts opts opts opts opts" "sub sub sub sub sub"; }
.tr-row { grid-template-areas: "ic name up down del" "opts opts opts opts opts" "tags tags tags tags tags" "sub sub sub sub sub"; }
.nd-row .nd-down { grid-area: down; }
.nd-row [data-action="ndDel"], .nd-row [data-action="trDel"], .nd-row [data-action="pgDel"] { grid-area: del; }
.nd-row [data-action="ndUp"]:not(.nd-down), .nd-row [data-action="moveTask"]:not(.nd-down), .nd-row [data-action="pgMove"]:not(.nd-down) { grid-area: up; }
@media (max-width: 600px) { .nd-row { gap: 6px; } .icon-btn.small { width: 32px; height: 32px; } }

/* Versio 49: päiväohjelman linkitys lähtötyyppiin */
.pg-link { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); font-weight: 700; }
.pg-link .ui-ic { width: 13px; height: 13px; }
.pg-act.wide { width: auto; padding: 0 16px; border-radius: 99px; gap: 6px; display: inline-flex; font: inherit; font-weight: 800; font-size: 16px; }
.pg-act.wide .ui-ic { width: 20px; height: 20px; }
@media (max-width: 600px) { .ip-tab { padding: 3px 8px; } .ip-tabs { gap: 4px; } }

/* Versio 51: päiväohjelman tekemisrivi kiinteillä, nimetyillä riveillä */
.pg-row { grid-template-areas: "ic name up down del" "lines lines lines lines lines" "sub sub sub sub sub"; }
.pg-lines { grid-area: lines; display: flex; flex-direction: column; gap: 6px; }
.pg-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 34px; }
.pg-k { width: 82px; flex: none; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.pg-tg { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px 0 6px; border-radius: 99px; border: 1.5px solid var(--line); background: #fff; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.pg-tg.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.pg-box { width: 18px; height: 18px; border-radius: 5px; border: 2px solid #C9CED6; display: grid; place-items: center; background: #fff; }
.pg-tg.on .pg-box { background: var(--accent); border-color: var(--accent); color: #fff; }
.pg-box .ui-ic { width: 12px; height: 12px; }
.pg-line .nd-chip span { white-space: normal; text-align: left; }
.pg-line .nd-chip { max-width: 100%; }
.pg-line .tr-auto { margin-left: 0; }
@media (max-width: 600px) { .pg-k { width: 70px; font-size: 12px; } .pg-line { gap: 4px 6px; } .pg-line .nd-chip { font-size: 12px; } }
@media (max-width: 600px) {
  .pg-k { width: 58px; }
  .pg-tg { gap: 5px; padding: 0 8px 0 5px; font-size: 12px; }
  .pg-line .q-dur button { width: 28px; height: 28px; font-size: 17px; }
  .pg-line .q-dur b { min-width: 20px; font-size: 15px; }
}
.pg-ks { display: none; }
@media (max-width: 600px) { .pg-k { width: 50px; } .pg-kl { display: none; } .pg-ks { display: inline; } }
.pg-line { padding-left: 90px; } .pg-k { margin-left: -90px; }
@media (max-width: 600px) { .pg-line { padding-left: 56px; } .pg-k { margin-left: -56px; } }
/* v52: kopiointi toiselle lapselle */
.cp-modal { display: flex; flex-direction: column; gap: 14px; }
.cp-what { margin: 0; font-size: 15px; }
.cp-conf { background: #FFF7E6; border: 1.5px solid #F3D9A4; border-radius: 14px; padding: 10px 12px; }
.cp-conf-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 6px 0; }
.cp-conf-row + .cp-conf-row { border-top: 1px solid #F3D9A4; }
.cp-conf-row > span { font-size: 14px; min-width: 0; }
.cp-tool { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; }
.quick-card .row { margin-top: 8px; }
/* v53: aikuinen myöntää tarran */
.grant-head { display: flex; gap: 14px; align-items: center; }
.grant-head h2 { margin: 2px 0 0; }
.grant-stk { width: 72px; height: 72px; flex: none; }
.grant-stk svg { width: 100%; height: 100%; }
.sum-award { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border-radius: 16px; background: var(--sunk-2); font-weight: 700; }
.sum-award svg { width: 44px; height: 44px; flex: none; }
.sum-award .btn { margin-left: auto; }
.hist-res { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.hist-stk .ui-ic { width: 14px; height: 14px; }
.hist-grant { flex: none; }
@media (max-width: 600px) { .hist-grant span { display: none; } .grant-stk { width: 56px; height: 56px; } }
/* v54: Kaikki kerrat mahtuu puhelimen leveyteen */
.hist-main { min-width: 0; }
@media (max-width: 600px) {
  .hist-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
  .hist-main { grid-row: span 2; grid-template-columns: max-content minmax(0, 1fr); grid-template-areas: "date res" "info info"; gap: 2px 8px; padding: 8px 10px; }
  .hist-date { grid-area: date; white-space: nowrap; }
  .hist-res { grid-area: res; justify-content: flex-end; }
  .hist-info { grid-area: info; font-size: 13px; }
  .hist-main > :nth-child(4) { display: none; }
  .hist-row > .btn, .hist-row > .icon-btn { width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; }
}
.hist-export .btn { max-width: 100%; white-space: normal; text-align: left; }

/* ---------- Viikkokello ---------- */
.wk-ill { width: 34px; height: 34px; flex: none; }
.wk-ill-l { width: 56px; height: 56px; flex: none; }
.wk-moon { width: 18px; height: 18px; color: #5B6FB0; flex: none; }

.wk-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wk-nav-t { display: flex; flex-direction: column; min-width: 150px; text-align: center; }
.wk-nav-t b { font-size: 20px; }
.wk-nav-t small { color: var(--muted); font-size: 14px; }
.wk-nav .wk-next .ui-ic { transform: scaleX(-1); }

.wk-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.wk-week { display: flex; flex-direction: column; gap: 6px; }
.wk-day {
  display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; text-align: left;
  padding: 8px 10px; border-radius: 16px; border: 2px solid transparent; background: var(--sunk-2); cursor: pointer; min-height: 56px;
}
.wk-day:hover { border-color: var(--line); }
.wk-day.today { background: var(--accent-soft); border-color: var(--accent); }
.wk-day.past { opacity: .55; }
.wk-day.is-off { background: var(--yellow-soft); }
.wk-date { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.wk-date b { font-size: 20px; text-transform: uppercase; }
.wk-date small { color: var(--muted); font-size: 14px; }
.wk-date i { font-style: normal; font-size: 12px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.wk-items { display: flex; flex-wrap: wrap; gap: 6px 14px; min-width: 0; }
.wk-none { color: var(--muted); }
.wk-it { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.wk-it-t { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.wk-it-t b { font-size: 16px; }
.wk-it-t small { color: var(--muted); font-size: 13px; }
.wk-it.skip .wk-it-t b { text-decoration: line-through; color: var(--muted); }
.wk-it.skip .wk-ill { opacity: .45; }
.wk-it.off .wk-it-t b { color: var(--yellow-ink); }

@media (min-width: 900px) {
  /* Tabletilla ja isolla näytöllä viikko vaakasuunnassa: seitsemän saraketta. */
  .screen.child .wk-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
  .screen.child .wk-day { grid-template-columns: 1fr; align-content: start; align-items: start; min-height: 220px; padding: 10px; }
  .screen.child .wk-date { flex-direction: row; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .screen.child .wk-items { flex-direction: column; gap: 10px; }
  .screen.child .wk-it { flex-direction: column; align-items: flex-start; }
  .screen.child .wk-ill { width: 48px; height: 48px; }
}

.wk-count { display: flex; align-items: center; gap: 12px; background: #EEF0FA; border-radius: 20px; padding: 12px 16px; }
.wk-count .wk-ill { width: 48px; height: 48px; }
.wk-count-t { display: flex; flex-direction: column; gap: 4px; font-size: 19px; min-width: 0; }
.wk-moons { display: flex; flex-wrap: wrap; gap: 2px; }

.wk-tmr {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; max-width: 900px; margin: 14px auto 0;
  padding: 14px 18px; border: 0; text-align: left; cursor: pointer; font: inherit;
}
.wk-tmr-row { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.wk-tmr-evs { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.wk-bring-line { color: var(--ink-2); font-size: 16px; }
.wk-tmr-count { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }

.modal-card.wk-dm { gap: 12px; }
.wk-d-row { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.wk-d-row:first-of-type { border-top: 0; }
.wk-d-row.skip .wk-d-t > b { text-decoration: line-through; color: var(--muted); }
.wk-d-row.skip .wk-ill-l { opacity: .45; }
.wk-d-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.wk-d-t > b { font-size: 19px; }
.wk-d-t > small { color: var(--muted); font-size: 15px; }
.wk-note { color: var(--ink-2); }
.wk-bring { margin: 2px 0 0; padding-left: 20px; color: var(--ink-2); }
.wk-d-acts { gap: 8px; margin-top: 4px; }

.wk-list { display: flex; flex-direction: column; gap: 6px; }
.wk-row {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  padding: 8px 12px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; cursor: pointer;
}
.wk-row:hover { border-color: var(--accent); }
.wk-row .wk-ill-l { width: 44px; height: 44px; }
.wk-row-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wk-row-t small { color: var(--muted); font-size: 14px; }

.wk-ed-top { display: flex; align-items: flex-end; gap: 14px; }
.wk-ed-ill { width: 64px; height: 64px; flex: none; }
.wk-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wk-ed .q-row .time-in { width: 92px; min-height: 40px; padding: 6px 8px; text-align: center; }
.center { text-align: center; }
@media (max-width: 600px) {
  .wk-2 { grid-template-columns: 1fr; }
  .wk-day { grid-template-columns: 52px 1fr; }
  .wk-date b { font-size: 18px; }
}

/* ---------- Huomisvalmis ---------- */
.tmr-evs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.tmr-none { font-size: 16px; }
.tmr-ask { align-self: flex-start; max-width: 100%; white-space: normal; text-align: left; height: auto; min-height: 48px; }
.modal-card.tmr-pick { gap: 14px; }
.tmr-chips .chip.miss { border-color: var(--lvl-yellow); background: var(--yellow-soft); }
.tmr-chips .chip.extra { border-style: dashed; }
.tmr-chips .chip:disabled { cursor: default; }
.modal-card .end { padding: 14px 16px; border-radius: 16px; display: grid; gap: 4px; }
.modal-card .end.good { background: var(--green-soft); }
.modal-card .end.bad { background: var(--yellow-soft); }
.modal-card .end h4 { margin: 0; font-size: 20px; }
.tmr-sug { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; background: var(--accent-soft); }
.tmr-sug span { flex: 1 1 220px; }

/* ---------- Mitä puen tänään? ---------- */
.wx-ic { width: 44px; height: 44px; flex: none; }
.wx-ic-s { width: 22px; height: 22px; flex: none; }
.wx-strip { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 16px; background: var(--calm-soft); }
.wx-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.wx-t { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.wx-t b { font-size: 20px; }
@media (max-width: 600px) { .wx-strip .wx-ic { width: 34px; height: 34px; } .wx-t b { font-size: 18px; } }
.wx-t span:not(.eyebrow) { color: var(--ink-2); font-size: 15px; }
.wx-d { color: var(--ink-2); font-size: 15px; }
.wx-why { align-self: flex-start; font-size: 15px; }
.wx-mini { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-top: 2px; }
.wear-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wear-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.wear-list small { color: var(--muted); font-size: 14px; width: 100%; }
.wear-list li > span { line-height: 1.45; }
.wear-prev { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: var(--sunk-2); }
.wx-place .field { max-width: 320px; }
.wx-place { align-items: flex-end; }

.wr-ed h3 { margin-top: 8px; }
.wr-rule { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: var(--sunk-2); border: 1px solid var(--line); }
.wr-head { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.wr-head b { font-size: 17px; }
.wr-min { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); font-weight: 700; }
.wr-min input[type="number"] { width: 84px; min-height: 36px; padding: 4px 8px; }
.wr-min input:not([type]) { width: 160px; min-height: 36px; padding: 4px 8px; }
.wr-chip { display: inline-flex; align-items: center; gap: 2px; min-height: 38px; padding: 0 4px 0 2px; border-radius: 99px; border: 1.5px solid var(--line); background: #fff; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.wr-chip.must { background: var(--yellow-soft); border-color: var(--lvl-yellow); color: var(--yellow-ink); }
.wr-chip .wr-name { border: 0; background: transparent; padding: 6px 6px 6px 10px; font-weight: 700; color: inherit; cursor: pointer; }
.wr-chip span.wr-name { cursor: default; }
.wr-chip .wr-x { border: 0; background: transparent; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); cursor: pointer; padding: 0; }
.wr-chip .wr-x:hover { background: var(--red-soft); color: var(--red-ink); }
.wr-chip .wr-x .ui-ic { width: 16px; height: 16px; }
.wr-chip.ask { gap: 6px; padding: 2px 4px 2px 12px; border-color: var(--red-ink); background: var(--red-soft); color: var(--red-ink); }
.wr-add { display: inline-flex; gap: 6px; align-items: center; }
.wr-add input { width: 150px; min-height: 36px; padding: 4px 10px; }
.wr-repl { align-items: center; }

/* ---------- Kotiin tultua ---------- */
.pg-cl { margin-top: 8px; gap: 6px; }
.pg-cl .chip { font-size: 15px; min-height: 40px; padding: 4px 10px; }
.pg-act.arrive { background: var(--lvl-green); color: #fff; width: auto; padding: 0 16px; gap: 6px; display: inline-flex; align-items: center; border-radius: 99px; font-weight: 800; }
.pg-act.arrive span { white-space: nowrap; }
.pg-sos { flex: none; }
.pg-later { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.arr-banner { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.arr { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: #fff; box-shadow: var(--shadow); font-weight: 700; font-size: 15px; }
.arr .ui-ic { width: 18px; height: 18px; }
.arr.ok { background: var(--green-soft); color: var(--green-dark); }
.arr.late { background: var(--yellow-soft); color: var(--yellow-ink); }

.modal-card.sc-modal { gap: 14px; }
.sc-contacts { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-contact { display: flex; flex-direction: column; padding: 8px 14px; border-radius: 16px; background: var(--accent-soft); color: var(--ink); text-decoration: none; min-width: 120px; }
.sc-contact b { font-size: 14px; color: var(--ink-2); }
.sc-contact span { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.sc-contact.sos { background: var(--red-soft); }
.sc-contact.sos span { color: var(--red-ink); }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.sc-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 18px; border: 2px solid var(--line); background: #fff; cursor: pointer; font-weight: 700; text-align: center; line-height: 1.2; }
.sc-btn:hover { border-color: var(--accent); }
.sc-title { display: flex; align-items: center; gap: 14px; }
.sc-title .ill.mid { width: 72px; height: 72px; flex: none; }
.sc-lines { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 10px; font-size: 19px; line-height: 1.35; }
.sc-edit-list { display: flex; flex-direction: column; gap: 6px; }
.sc-crow { display: grid; grid-template-columns: 1fr 1fr 40px; gap: 8px; align-items: center; }
@media (max-width: 600px) { .sc-crow { grid-template-columns: 1fr 40px; } .sc-crow input[data-f="phone"] { grid-column: 1; } .sc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .pg-head:has(.pg-sos) { flex-wrap: wrap; }
  .pg-head:has(.pg-sos) > div:first-child { flex-basis: 100%; }
}

/* Päiväohjelman järjestys: numeroidut vaiheet yhdessä sarakkeessa myös tabletilla. */
.pg-list, .pg-list:not(:empty) { grid-template-columns: 1fr; }
@media (min-width: 700px) { .pg-list { grid-template-columns: 1fr; max-width: 760px; width: 100%; margin: 0 auto; } }
.pg-no { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 16px; background: var(--accent-soft); color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.pg-no .ui-ic { width: 18px; height: 18px; }
.pg-item.done .pg-no { background: var(--green-soft); color: var(--green-dark); }
.pg-item.locked .pg-no { background: var(--sunk); color: var(--muted); }
.pg-later { max-width: 760px; width: 100%; margin: 0 auto; }

/* Valikkonapin pitkä painallus: rengas täyttyy noin sekunnissa, sitten aukeaa aikuisen valikko. */
@property --hold { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.menu-btn { position: relative; -webkit-touch-callout: none; touch-action: manipulation; }
.menu-btn::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: conic-gradient(var(--accent) var(--hold), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}
.menu-btn.holding::after { opacity: 1; animation: holdRing 1.1s linear forwards; }
@keyframes holdRing { from { --hold: 0%; } to { --hold: 100%; } }
@media (prefers-reduced-motion: reduce) { .menu-btn.holding::after { animation: holdRing 1.1s linear forwards !important; } }
.cm-hint { font-size: 13px; color: var(--muted); text-align: center; margin-top: 2px; }

/* ---------- Päivän peili ja Arvaa ja mittaa ---------- */
.rf-face { width: 28px; height: 28px; flex: none; }
.rf-face-l { width: 64px; height: 64px; }
.rf-moods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rf-mood { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 18px; border: 2px solid var(--line); background: #fff; cursor: pointer; font-weight: 700; font-size: 15px; text-align: center; }
.rf-mood.on { border-color: var(--lvl-green); background: var(--green-soft); }
.modal-card.rf-modal { gap: 14px; }
.rf-own input { min-height: 44px; }
.rf-done, .rf-try { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.rf-try { background: var(--yellow-soft); color: var(--yellow-ink); padding: 8px 12px; border-radius: 14px; }
.rf-try .ui-ic { width: 18px; height: 18px; flex: none; }
.rf-hist { display: flex; flex-direction: column; gap: 6px; }
.rf-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--sunk-2); }
.rf-row > div { display: flex; flex-direction: column; min-width: 0; }
.rf-row small { color: var(--ink-2); font-size: 14px; }
.guess { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 16px; background: var(--calm-soft); }
.guess .qchip { min-height: 40px; }
.qchip.ghost { border-style: dashed; }
@media (max-width: 600px) { .rf-face-l { width: 48px; height: 48px; } .rf-mood { font-size: 13px; } }

/* ---------- Aloitusapu ---------- */
.sh-btn { margin-top: 8px; align-self: flex-start; }
.modal-card.sh-modal { gap: 14px; }
.sh-now { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 18px; background: var(--green-soft); }
.sh-now h2 { font-size: 28px; }
.sh-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.sh-list li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; color: var(--muted); }
.sh-list li .ui-ic { width: 18px; height: 18px; color: var(--green-dark); }
.sh-list li.done { text-decoration: line-through; }
.sh-list li.now { color: var(--ink); font-weight: 800; background: var(--sunk-2); }
.sh-opts { display: flex; flex-direction: column; gap: 8px; }
.sh-opt { text-align: left; padding: 14px 16px; border-radius: 16px; border: 2px solid var(--line); background: #fff; font-size: 18px; font-weight: 700; cursor: pointer; }
.sh-opt.wrong { border-color: var(--lvl-yellow); background: var(--yellow-soft); }
.sh-fb { color: var(--yellow-ink); font-weight: 700; }
.sh-mine { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 4px; }
.sh-mine li { display: flex; align-items: center; gap: 6px; }
.sh-mine li span { flex: 1; }
.sh-timer { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent-dark); }
.row .grow { flex: 1 1 auto; min-width: 0; }

/* ---------- Taitoportaat ---------- */
.sk-list { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 760px; width: 100%; margin: 0 auto; }
.sk-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.sk-top { display: flex; align-items: center; gap: 12px; }
.sk-top h3 { font-size: 20px; }
.sk-top small { color: var(--ink-2); }
.sk-ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; align-items: end; }
.sk-ladder li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding: 6px 4px; border-radius: 12px; background: var(--sunk); color: var(--muted); text-align: center; font-size: 12px; line-height: 1.15; }
.sk-ladder li:nth-child(1) { min-height: 48px; } .sk-ladder li:nth-child(2) { min-height: 60px; } .sk-ladder li:nth-child(3) { min-height: 72px; } .sk-ladder li:nth-child(4) { min-height: 84px; } .sk-ladder li:nth-child(5) { min-height: 96px; }
.sk-ladder li.on { background: var(--green-soft); color: var(--green-dark); }
.sk-ladder li.now { background: var(--lvl-green); color: #fff; font-weight: 800; }
.sk-n { font-size: 16px; font-weight: 800; }
.sk-note { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; }
.sk-note .ui-ic { width: 18px; height: 18px; flex: none; }
.sk-top-msg { font-weight: 800; color: var(--green-dark); }
.sk-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; }
.sk-row .wk-ill-l { width: 40px; height: 40px; }
.arr-banner .arr .btn { margin-left: 4px; }
@media (max-width: 600px) { .sk-ladder li { font-size: 10px; } }

/* Tarrajuhlan palkinto */
.cel-reward { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 99px; background: #fff; box-shadow: var(--shadow); font-size: clamp(18px, 3.4vw, 24px); color: var(--ink); animation: pop .7s cubic-bezier(.2, 1.6, .4, 1) .5s both; }
.cel-reward .ui-ic { width: 28px; height: 28px; color: var(--lvl-yellow); flex: none; }
.celebrate.gold .cel-reward { background: #FFF8DC; color: #5A3C00; box-shadow: 0 6px 24px rgba(122, 82, 0, .35); }
.reward-row { grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 600px) { .reward-row { grid-template-columns: 1fr; } }

/* Tyhjän näkymän ohje aikuiselle */
.card.ag { display: flex; flex-direction: column; gap: 10px; max-width: 760px; width: 100%; margin: 0 auto; padding: 20px 22px; }
.ag h3 { font-size: 22px; }
.ag-steps { margin: 0; padding-left: 0; list-style: none; counter-reset: ag; display: flex; flex-direction: column; gap: 10px; }
.ag-steps li { counter-increment: ag; display: flex; align-items: center; gap: 12px; font-size: 18px; line-height: 1.35; }
.ag-steps li::before { content: counter(ag); width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-dark); font-weight: 800; font-size: 16px; }
.ag-menu { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); vertical-align: middle; margin: 0 2px; }
.ag-menu .ui-ic { width: 18px; height: 18px; }

/* Toinen tehtävä */
.modal-card.sw-modal { gap: 12px; }
.sw-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 560px) { .sw-list { grid-template-columns: 1fr 1fr; } }
.sw-item { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 12px; border-radius: 18px; border: 2px solid var(--line); background: #fff; cursor: pointer; min-height: 72px; }
.sw-item:hover { border-color: var(--accent); }
.sw-item .ill.mid, .sw-item .ill.photo { width: 52px; height: 52px; flex: none; }
.sw-item span { display: flex; flex-direction: column; }
.sw-item b { font-size: 18px; }
.sw-item small { color: var(--muted); }

/* Kapealla näytöllä: jos sivunappeja on kolme tai enemmän (esim. Ei tänään, Toinen tehtävä ja Tauko), Valmis saa oman rivin. */
@media (max-width: 699px) {
  .task-actions:has(.btn-side:not([hidden]) ~ .btn-side:not([hidden]) ~ .btn-side:not([hidden])) { flex-wrap: wrap; }
  .task-actions:has(.btn-side:not([hidden]) ~ .btn-side:not([hidden]) ~ .btn-side:not([hidden])) .btn-done { flex: 1 1 100%; }
  .task-actions:has(.btn-side:not([hidden]) ~ .btn-side:not([hidden]) ~ .btn-side:not([hidden])) .btn-side { flex: 1 1 0; }
}

/* Hallinnan välilehdet kapealla näytöllä: kaikki kuusi mahtuvat riville,
   kuvake ylhäällä ja lyhyt nimi alla. Ei sivuttaisvieritystä. */
@media (max-width: 600px) {
  .tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; padding: 6px 0 10px; overflow: visible; }
  .tab { flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 6px 0; border-radius: 12px; font-size: 10px; font-weight: 700; letter-spacing: -.02em; }
  .tab span, .tab.on span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab .ui-ic { width: 22px; height: 22px; }
  .tab-dot { top: 0; right: 4px; }
}
@media (max-width: 359px) { .tab { font-size: 9px; letter-spacing: -.03em; } }