/* Shared page styles: the catalogues, course pages, About, Privacy and the tool viewer, in the welcome page's style
   (2026-09-13): a kicker above a big heading with a gradient rule, cards that rise and lift, pill buttons, icon tiles. */
.lead{ font-size:1.25rem; font-weight:700; margin:.2rem 0 .6rem; }
a.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; text-decoration:none; color:var(--accent); background:var(--panel);
  border:2px solid color-mix(in srgb,var(--accent) 45%,var(--line)); border-radius:999px; padding:.55rem 1.2rem; min-height:44px; font-weight:900; margin:.2rem;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
a.btn.primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 28%,transparent); }
a.btn:hover,a.btn:focus-visible{ border-color:var(--accent); transform:translateY(-1px); }

/* document pages: About, Privacy, the catalogues and course pages */
.docpage .stage{ padding:2.2rem 1rem 2.6rem; justify-content:flex-start; display:block; }   /* a long document flows from the top; never centred and clipped */
.doc{ max-width:780px; margin:0 auto; line-height:1.6; padding:2rem 2.3rem 2.2rem; animation:rise .5s cubic-bezier(.2,.8,.2,1) both; }
@media (max-width:560px){ .doc{ padding:1.3rem 1.1rem; } .docpage .stage{ padding:1.2rem .7rem 1.6rem; } }
.doc > h1:first-child{ font-size:.82rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 0 .55rem; }
.doc > h1:first-child + .lead{ font-size:clamp(1.9rem,4.6vw,2.8rem); font-weight:900; letter-spacing:-.03em; line-height:1.08; margin:0 0 1rem; color:var(--ink); }
.doc > h1:first-child + .lead::after{ content:""; display:block; width:4.5rem; height:.35rem; border-radius:99px; margin-top:.8rem; background:linear-gradient(90deg,var(--accent),var(--cloud-d) 60%,var(--cloud-c)); }
:root[data-theme="hc"] .doc > h1:first-child + .lead::after, :root[data-calm="on"] .doc > h1:first-child + .lead::after{ background:var(--accent); }
.doc h2{ font-size:1.2rem; margin:1.7rem 0 .45rem; font-weight:900; }
.doc li{ margin:.35rem 0; }
.doc .small{ font-size:.85rem; }
.doc a:not(.btn){ color:var(--accent); font-weight:700; }

/* the catalogues (2026-09-13, the author: "this page still looks very bland"): no single narrow card any more — a header on the
   page's glow, a Start-here banner, and a grid of big cards grouped by what a student is trying to do */
.docpage .catalogue{ max-width:1120px; background:transparent; border:0; box-shadow:none; padding:1rem .2rem 2rem; animation:none; }
.catalogue > h1:first-child + .lead{ font-size:clamp(2.2rem,5.4vw,3.4rem); }
.catalogue > h1:first-child + .lead em{ font-style:normal; color:var(--accent); }
.catalogue > #catNote{ font-size:1.12rem; max-width:44rem; }
#catSearch{ border-radius:999px; padding-inline:1.2rem; max-width:32rem; }
.cat-kicker{ font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:900; margin:0 0 .3rem; }
.cat-empty{ padding:2rem 0; }
/* Start here: one wide banner card */
.cat-start{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; margin:1.6rem 0 .6rem; padding:1.6rem 1.8rem;
  background:linear-gradient(120deg, var(--panel) 0%, var(--accent-soft) 100%); border:1px solid var(--hairline); border-radius:var(--radius);
  box-shadow:var(--shadow); animation:rise .5s cubic-bezier(.2,.8,.2,1) both; }
.cat-start .tile{ width:72px; height:72px; border-radius:20px; }
.cat-start .tile svg{ width:36px; height:36px; }
.cat-start .cat-body{ flex:1 1 22rem; min-width:0; }
.cat-start h2{ margin:0 0 .35rem; font-size:clamp(1.4rem,3vw,1.9rem); font-weight:900; letter-spacing:-.02em; }
.cat-start p{ margin:0; }
.cat-start .btn{ flex:0 0 auto; padding-inline:2rem; }
/* the groups and their card grid */
.cat-group h2{ font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:2.2rem 0 .9rem; font-weight:900; }
.cat-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem; }
.cat-card{ display:flex; flex-direction:column; align-items:flex-start; gap:.8rem; padding:1.3rem 1.3rem 1.2rem; background:var(--panel); border:1px solid var(--hairline);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); position:relative; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease;
  animation:rise .45s cubic-bezier(.2,.8,.2,1) both; }
.cat-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:currentColor; opacity:.9; }
.cat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.cat-card.c0{ color:var(--accent); } .cat-card.c1{ color:var(--cloud-d); } .cat-card.c2{ color:var(--cloud-c); }
.cat-card.c3{ color:var(--cloud-b); } .cat-card.c4{ color:var(--cloud-f); } .cat-card.c5{ color:var(--cloud-e); }
.cat-card .tile{ width:56px; height:56px; border-radius:16px; }
.cat-card .tile svg{ width:28px; height:28px; }
.cat-card .cat-body{ color:var(--ink); flex:1 1 auto; }
.cat-card h3{ margin:0 0 .3rem; font-size:1.15rem; font-weight:900; letter-spacing:-.01em; }
.cat-card p{ margin:0; }
.cat-card .btn{ margin:0; }
.cat-grid li:nth-child(2){ animation-delay:.05s } .cat-grid li:nth-child(3){ animation-delay:.1s } .cat-grid li:nth-child(n+4){ animation-delay:.15s }
:root[data-theme="hc"] .cat-card::before, :root[data-calm="on"] .cat-card::before{ display:none; }
:root[data-theme="hc"] .cat-start{ background:var(--panel); }
@media (max-width:560px){ .cat-start{ padding:1.2rem; } .cat-start .btn{ width:100%; } .cat-grid{ grid-template-columns:1fr; } }
/* the course page keeps its list of materials */
.cat-list{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.cat-list li{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.9rem 1rem; background:var(--panel); border:1px solid var(--hairline);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease; animation:rise .45s cubic-bezier(.2,.8,.2,1) both; }
.cat-list li:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.cat-list li > div{ flex:1 1 auto; min-width:0; }
.cat-list li p{ margin:.15rem 0 0; } .cat-list .small{ font-size:.85rem; }
.cat-list a.btn{ flex:0 0 auto; }
@media (max-width:520px){ .cat-list li{ flex-wrap:wrap; } .cat-list li > div{ flex-basis:calc(100% - 64px); } .cat-list a.btn{ width:100%; margin:0; } }

/* The tool viewer: a tool runs inside Klasp's frame with a bar that leads back to the catalogue. Before this, a tool
   opened in a bare tab of its own and there was no way back to the list except finding the old tab (the author, 8 Sep). */
body.toolview{ margin:0; display:flex; flex-direction:column; height:100dvh; }
body.toolview::after{ display:none; }   /* no sparkles over someone else's tool */
.tvbar{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; padding:.55rem .9rem; background:var(--panel); border-bottom:1px solid var(--hairline); box-shadow:var(--shadow-sm); position:relative; z-index:1; }
.tvbar .tvtitle{ font-weight:900; margin:0 auto 0 0; padding-right:.5rem; }
.tvbar a.btn{ margin:0; padding:.45rem 1rem; }
.tvframe{ flex:1 1 auto; min-height:0; border:0; width:100%; background:#fff; position:relative; z-index:1; }
.tvmsg{ padding:1.2rem; max-width:40rem; position:relative; z-index:1; }
/* shown only when the browser blocks a tool's own styles inside the viewer (the style check in tools/view.js) */
.tvwarn{ display:flex; align-items:center; gap:.8rem 1rem; flex-wrap:wrap; padding:.7rem 1rem; background:var(--warn-bg); color:var(--ink);
  border-left:5px solid var(--warn); border-bottom:1px solid var(--hairline); position:relative; z-index:1; }
.tvwarn p{ margin:0; flex:1 1 22rem; }
.tvwarn a.btn{ margin:0; }
.tvprobe{ position:absolute; left:-9999px; top:0; width:1px; height:1px; border:0; opacity:0; pointer-events:none; }