/* The shared palette comes from the four family logos. */
:root {
  color: #163039;
  background: #ffffff;
  --ink: #163039;
  --muted: #5b6e74;
  --line: #e2e9ec;
  --green: #08674c;
  --brand-gradient: linear-gradient(100deg, #087e4e, #b6d81d 22%, #ffbf29 40%, #ee7c28 53%, #d82471 68%, #15b8d0 82%, #1664e7);
}
body { background: #ffffff; }
.brand-logo,
.topbar-logo,
.footer-brand img {
  display: block;
  flex: none;
  object-fit: contain;
  background: #ffffff;
  border-radius: 10px;
}
.brand-logo { width: 42px; height: 42px; }
.brand-dot,
.mobile-brand .brand-dot,
.footer-brand .brand-dot { color: #16866b; }
.mobile-brand .brand-word,
.footer-brand .brand-word { color: var(--ink); }
.sidebar,
.topbar { background: #fffffff2; }
.sidebar::before,
.topbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand-gradient);
  pointer-events: none;
}
.topbar { position: relative; }
.topbar-logo { width: 32px; height: 32px; }
.breadcrumb { gap: 11px; color: #64737b; }
.breadcrumb strong { color: #345460; }
.brand-caption { color: #617579; }
.nav-button { color: #60727a; }
.nav-button:hover { background: #f0f7f7; }
.nav-button.active {
  color: #075c48;
  background: linear-gradient(110deg, #eaf5ee, #eef7fa);
}
.nav-button.active .nav-count { background: #dceee4; color: #12644e; }
.sidebar-pace {
  background: linear-gradient(130deg, #f7f4e8, #edf7f1 56%, #eaf5fc);
  border: 1px solid #e8ede5;
}
.sidebar-pace .icon { color: #16816b; }
.sidebar-pace p { color: #48695b; }
.live-pill { color: #24725c; }
.live-pill > span:first-child { background: #179b70; }
.hero { border-bottom-color: #e3eaed; }
.hero::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 5px;
  width: min(330px, 70%);
  height: 3px;
  border-radius: 3px;
  background: var(--brand-gradient);
}
.eyebrow { color: #22735d; }
.eyebrow-line { background: linear-gradient(90deg, #087451, #36a7b9); }
.hero h1 span {
  color: #176d67;
  background: linear-gradient(105deg, #09664e, #146d96 82%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-copy > p { color: #5b6e74; }
.hero-bottom { color: #617277; }
.collection-count strong { color: #0a694f; background: #eaf5ed; }
.art-orbit {
  border-color: #d7e9e5;
  background:
    radial-gradient(ellipse at 20% 25%, #edf7d5, transparent 62%),
    radial-gradient(ellipse at 85% 75%, #e7f4fe, #fcfbf680);
}
.art-icon {
  padding: 0;
  overflow: hidden;
  background: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 7px 18px #173b4614;
}
.art-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.art-center { inset: 36px 40px 48px; gap: 1px; }
.art-center > .platform-logo { display: block; width: 114px; height: 114px; object-fit: contain; border-radius: 18px; }
.art-center > span { font-size: 20px; letter-spacing: -.8px; }
.art-label { color: #5d7480; }
.catalog-heading p { color: #63757d; }
.search-box { border-color: #dbe5e9; }
.search-box:focus-within { outline-color: #388aab; }
.filter-chip { color: #536a74; border-color: #dde7eb; }
.filter-chip:hover { background: #f1f7f8; }
.filter-chip.active { background: #09694f; border-color: #09694f; }
.chip-count { color: #5b7378; background: #f1f5f6; }
.section-heading h3 { color: #46616b; }
.section-heading > span { color: #6b7d83; }
.app-card {
  background: linear-gradient(150deg, #ffffff 66%, var(--wash, #ffffff));
  border-color: #e0e8eb;
  box-shadow: 0 3px 10px #173a4405;
}
.app-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12px;
  right: 12px;
  height: 3px;
  background: var(--brand-gradient);
  border-radius: 0 0 4px 4px;
  pointer-events: none;
}
.app-card:hover {
  border-color: #c6dde0;
  box-shadow: 0 10px 24px #173a440e;
}
.app-card.featured { background: linear-gradient(145deg, #ffffff 42%, var(--wash)); }
.app-icon.with-logo {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e9edf0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 3px 8px #173a440a;
}
.app-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
.app-card h4 { color: #18333b; }
.app-description { color: #53676e; }
.app-link { color: #2b5d65; }
.app-card.featured .app-link { color: var(--accent); }
.app-footer { border-top-color: #e8eef0; }
.favorite-button { color: #84979e; }
.note-button { background: #f1f6f8; color: #577b8b; }
.note-button:hover { background: #e5f1f6; color: #236580; }
.note-button.has-note { color: #86619f; background: #f2edf8; }
.primary-button { background: #08674c; border-color: #08674c; }
.primary-button:hover { background: #07573f; }
.secondary-button { color: #326776; border-color: #d6e5ea; }
.secondary-button:hover { background: #f0f7fa; }
.footer-brand { display: flex; align-items: center; gap: 8px; }
.footer-brand img { width: 30px; height: 30px; }
.footer p,
.text-button { color: #5f747c; }
dialog { background: #ffffff; border-color: #dfe9ed; }
dialog label { color: #476874; }
dialog select,
dialog textarea { color: #254b59; border-color: #d2e2e8; }
.dialog-status,
.dialog-explainer,
.notes-intro .notes-local,
.saved-note-meta { color: #617881; }
.saved-note p,
.notes-intro > p { color: #526b76; }
.toast { background: #164b40; }
#fallback-links a { display: flex; gap: 8px; align-items: center; }
#fallback-links img { object-fit: contain; border-radius: 8px; }
@media (max-width: 780px) {
  .topbar { position: sticky; }
  .mobile-brand { display: flex; align-items: center; gap: 8px; font-size: 23px; }
  .mobile-brand .brand-logo { width: 36px; height: 36px; }
  .language-label select { width: 160px; max-width: 160px; }
  .mobile-nav { border-top-color: #dbe6ec; }
  .mobile-nav button { color: #657c86; }
  .mobile-nav button.active { color: #08674c; background: linear-gradient(115deg, #eaf6ef, #edf6fb); }
  .saved-note .app-icon.with-logo { width: 38px; height: 38px; min-width: 38px; }
}
@media (max-width: 350px) {
  .mobile-brand { font-size: 21px; gap: 6px; }
  .mobile-brand .brand-logo { width: 32px; height: 32px; }
  .language-label select { width: 142px; max-width: 142px; font-size: 12px; }
}
@media (forced-colors: active) {
  .hero h1 span { background: none; -webkit-text-fill-color: currentColor; }
  .app-card::before,
  .hero::after,
  .sidebar::before,
  .topbar::before { background: Highlight; }
}
.membership-strip { display:flex;justify-content:space-between;align-items:center;gap:24px;padding:23px 24px;margin:0 0 20px;border:1px solid #dce9e2;border-radius:18px;background:linear-gradient(115deg,#f1f8f2,#fbfcf7);scroll-margin-top:90px; }
.membership-strip h2 { font-size:22px;letter-spacing:-.7px;margin:8px 0; }
.membership-strip p { margin:0;color:#526b64;font-size:13px;line-height:1.65; }
.membership-price { display:grid;gap:8px;max-width:245px; }
.membership-price strong { color:#176c53;font-size:26px;white-space:nowrap; }
.membership-price small { font-size:14px;font-weight:500; }
.membership-price>span { font-size:12px;line-height:1.6;color:#61776e; }
.membership-badge { color:#346956;background:#edf6f0;border-radius:7px;padding:7px 8px;margin:0 0 13px;font-size:11px;line-height:1.45;text-decoration:none;align-self:flex-start; }
.membership-badge:hover { text-decoration:underline; }
.app-card { scroll-margin-top:95px; }
.membership-strip { background:#ffffff; }
@media(max-width:780px) { .membership-strip { align-items:flex-start;gap:15px;padding:19px; }.membership-strip h2 { font-size:20px; }.membership-price strong { font-size:24px; }.membership-price { max-width:165px; } }
@media(max-width:470px) { .membership-strip { flex-direction:column; }.membership-price { max-width:none; }.membership-badge { font-size:11px; }.app-grid,.category-section[data-category="whole"] .app-grid { grid-template-columns:1fr; }.app-card,.app-card.featured { min-height:0; }.app-card h4,.app-card.featured h4 { font-size:23px; }.app-description { font-size:15px; }.app-link { font-size:14px; }.app-footer { gap:10px; }.note-button { min-width:44px; }.section-heading h3 { font-size:14px; } }

/* The bars belong to the app shell; only the content between them scrolls. */
.mind-entry{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;margin:0 0 20px;border:1px solid #dce9e2;border-radius:18px;background:linear-gradient(110deg,#eef7ef,#fcf7fb);text-decoration:none;color:#175c47}
.mind-entry>span:first-child{display:grid;gap:7px}.mind-entry strong{font-size:22px;letter-spacing:-.5px}.mind-entry>span:first-child>span{font-size:14px;line-height:1.6;color:#526b64}.mind-entry-action{font-size:14px;font-weight:600;line-height:1.6}.mind-entry:hover{border-color:#88b69d}.mind-entry[hidden]{display:none}
@media(max-width:600px){.mind-entry{flex-direction:column;align-items:flex-start;gap:13px;padding:20px}}
html,
body { height:100%;overflow:hidden;overscroll-behavior:none;background:#ffffff; }
.page {
  display:flex;flex-direction:column;
  height:100vh;height:100dvh;min-height:0;
  overflow:hidden;background:#ffffff;
}
.topbar {
  position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:40;
  flex:0 0 auto;height:auto;min-height:80px;
  background:#ffffff;backdrop-filter:none;
}
.page > main {
  flex:1 1 0;min-height:0;width:100%;
  overflow-x:hidden;overflow-y:auto;
  overscroll-behavior-y:contain;
  scroll-padding-top:16px;scroll-padding-bottom:16px;
}
.app-card,
.membership-strip { scroll-margin-top:0; }
@media(max-width:780px) {
  :root {
    --mobile-bottom-height:calc(76px + env(safe-area-inset-bottom,0px));
  }
  .page { padding-top:0; }
  .topbar {
    min-height:calc(67px + env(safe-area-inset-top,0px));
    padding-top:env(safe-area-inset-top,0px);
    padding-right:max(20px,env(safe-area-inset-right,0px));
    padding-left:max(20px,env(safe-area-inset-left,0px));
  }
  .topbar::before { top:env(safe-area-inset-top,0px); }
  .page > main {
    padding-bottom:24px;
    padding-right:max(20px,env(safe-area-inset-right,0px));
    padding-left:max(20px,env(safe-area-inset-left,0px));
  }
  .mobile-nav {
    position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:40;
    flex:0 0 auto;
    padding-top:8px;
    padding-right:max(12px,env(safe-area-inset-right,0px));
    padding-left:max(12px,env(safe-area-inset-left,0px));
    padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
    background:#ffffff;
  }
  .mobile-nav button { flex:1;min-width:0;max-width:170px;padding-left:5px;padding-right:5px; }
  .toast { bottom:calc(var(--mobile-bottom-height) + 12px); }
}

/* The 22nd app: Uusi identiteetti 2.0. */
.app-card[data-app="identiteetti"]{background:linear-gradient(145deg,#fff 40%,#f1f7ff);border-color:#cddcf4}.app-card[data-app="identiteetti"] .app-link{color:#2459cf}.app-card[data-app="identiteetti"] .app-edition{font-size:11px;font-weight:650;color:#43628d;margin:0 0 9px}.app-card[data-app="identiteetti"] .app-description{color:#586a83}