/* ============================================================
   FontHabibi: the look shared by every page.
   White paper, espresso ink, and six bright colors. One of them is
   the "field" (hero block, page headers, pressed chips); all six
   run as a strip across the top of every page. The frame itself
   stays plain so the kits carry their own color.
   ============================================================ */
:root{
  /* The palette: strip, home page tiles and small accents */
  --c-yellow:#FFC72C; --c-coral:#FF7A59; --c-pink:#F0457B; --c-violet:#8B6CFF; --c-blue:#3B9BFF; --c-green:#2FBF71;
  /* The field: hero block, page headers, pressed chips, "Our pick" */
  --field:#FFC72C; --wash:#FFF4CF; --wash-2:#FFE8A1;

  --shell-bg:#FFFFFF; --shell-panel:#FFFFFF; --shell-panel-2:var(--wash); --shell-panel-3:var(--wash-2);
  --shell-neutral:#F4F0EA;
  --shell-ink:#231710; --shell-muted:#5E5249; --shell-faint:#786C62;
  --shell-line:#E9E1D6; --shell-line-2:#D3C7B8;
  --shell-accent:#231710; --shell-accent-ink:#FFFFFF; --shell-accent-soft:var(--wash);
  --shell-link:#1D4ED8;
  --shell-ok:#1F7A4D;

  --font-ui:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-title:var(--font-ui); --title-weight:800; --title-track:-.035em;
  --wrap:1500px;
}
/* "Change the look" (assets/look.js) lets a visitor swap the field color and
   the font. Saffron and Plus Jakarta Sans above are the defaults. */
:root[data-look="coral"]{--field:#FF8674;--wash:#FFE6E0;--wash-2:#FFCFC5}
:root[data-look="rose"]{--field:#FF9DB8;--wash:#FFE6EE;--wash-2:#FFCCDB}
:root[data-look="sky"]{--field:#8CC8FF;--wash:#E4F2FF;--wash-2:#C6E2FF}
:root[data-look="mint"]{--field:#86DDA8;--wash:#E3F7EA;--wash-2:#C4EED3}
:root[data-look="lilac"]{--field:#C7B2FF;--wash:#F0EAFF;--wash-2:#DDD0FF}
:root[data-type="rubik"]{--font-ui:'Rubik',system-ui,sans-serif;--title-weight:700;--title-track:-.02em}
:root[data-type="bricolage"]{--font-ui:'Figtree',system-ui,sans-serif;--font-title:'Bricolage Grotesque',system-ui,sans-serif;--title-weight:700;--title-track:-.025em}

*{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:light}
body{background:var(--shell-bg);color:var(--shell-ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.45}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit}
input,select{font:inherit}
h1,h2,h3{font-family:var(--font-title);font-weight:var(--title-weight);letter-spacing:var(--title-track)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,3vw,44px)}

.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--shell-ink);color:#fff;padding:10px 14px;border-radius:8px;font-weight:600}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Top bar: the color strip, the name, and the five places to go */
.topbar{position:sticky;top:0;z-index:40;background:var(--shell-bg);border-bottom:1px solid var(--shell-line)}
.topbar::before{content:"";display:block;height:6px;background:linear-gradient(90deg,var(--c-yellow) 0 16.667%,var(--c-coral) 16.667% 33.333%,var(--c-pink) 33.333% 50%,var(--c-violet) 50% 66.667%,var(--c-blue) 66.667% 83.333%,var(--c-green) 83.333% 100%)}
.topbar-in{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,3vw,44px);min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:6px 20px;flex-wrap:wrap}
.brand{font-family:var(--font-title);font-weight:var(--title-weight);font-size:23px;letter-spacing:var(--title-track);text-decoration:none;color:var(--shell-ink);line-height:1.2}
/* "habibi" gets a stroke of the field color, like a highlighter */
.brand b{font-weight:inherit;padding:0 4px 0 1px;background:linear-gradient(transparent 54%,var(--field) 54% 92%,transparent 92%)}
.topnav{display:flex;gap:2px;margin-left:auto}
.topnav a{text-decoration:none;color:var(--shell-muted);font-weight:600;font-size:15px;padding:8px 13px;border-radius:99px;white-space:nowrap}
.topnav a:hover{color:var(--shell-ink);background:var(--wash)}
.topnav a[aria-current="page"]{color:var(--shell-ink);background:var(--field)}
/* "Support": a quiet link after the five places. It opens the tip page.
   Hidden until assets/support.js switches it on (see that file). */
.support-link{display:none;align-items:center;gap:6px;font-weight:600;font-size:14.5px;line-height:1.2;padding:6px 13px 6px 10px;border:1px solid var(--shell-line-2);border-radius:99px;color:var(--shell-ink);text-decoration:none;white-space:nowrap}
:root[data-support] .support-link{display:inline-flex}
.support-link:hover{border-color:var(--shell-ink);background:var(--wash)}
.support-link svg{width:15px;height:15px;flex:none;fill:var(--c-pink);stroke:var(--shell-ink);stroke-width:2;stroke-linejoin:round}

/* Page header band on the tool pages */
.page-head{background:var(--wash);border-bottom:1px solid var(--shell-line)}
.page-head h1{font-size:clamp(30px,3.6vw,46px);line-height:1.05}
.lede{margin-top:10px;max-width:66ch;font-size:17px;line-height:1.55;color:var(--shell-muted)}

:focus-visible{outline:2.5px solid var(--shell-ink);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--shell-ink);color:#fff;font-weight:500;font-size:14px;padding:11px 16px;border-radius:12px;box-shadow:0 14px 34px rgba(35,23,16,.22);transition:opacity .18s,transform .18s;z-index:90;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* "Change the look": a small button in the corner that opens the color
   and font choices. Built by assets/look.js. */
.look{position:fixed;left:14px;bottom:14px;z-index:80;font-family:var(--font-ui)}
.look-btn{display:flex;align-items:center;gap:8px;padding:9px 15px 9px 10px;background:#fff;border:1.5px solid var(--shell-ink);border-radius:99px;box-shadow:3px 3px 0 var(--shell-ink);font-weight:700;font-size:14px;line-height:1.2;color:var(--shell-ink)}
.look-btn:hover,.look-btn[aria-expanded="true"]{background:var(--field)}
.look-btn i{width:19px;height:19px;flex:none;border-radius:99px;border:1.5px solid var(--shell-ink);background:conic-gradient(var(--c-yellow),var(--c-coral),var(--c-pink),var(--c-violet),var(--c-blue),var(--c-green),var(--c-yellow))}
.look-panel{position:absolute;left:0;bottom:calc(100% + 10px);width:max-content;max-width:calc(100vw - 28px);display:flex;flex-direction:column;gap:12px;padding:14px 16px;background:#fff;border:1.5px solid var(--shell-ink);border-radius:16px;box-shadow:5px 5px 0 var(--shell-ink)}
.look-panel[hidden]{display:none}
.look-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.look-row>span{width:42px;font-size:13.5px;font-weight:600;color:var(--shell-muted)}
.look-dot{width:28px;height:28px;border-radius:99px;background:var(--dot);border:1.5px solid var(--shell-ink)}
.look-dot[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--shell-ink)}
.look-font{font-size:14.5px;font-weight:700;line-height:1.2;padding:7px 12px;border:1.5px solid var(--shell-line-2);border-radius:99px;color:var(--shell-ink);background:#fff}
.look-font:hover{border-color:var(--shell-ink)}
.look-font[aria-pressed="true"]{background:var(--field);border-color:var(--shell-ink)}

/* A kit drawn as a small website, in the kit's own fonts and colors.
   Used by the library and by the home page. */
.site{display:flex;flex-direction:column;min-height:262px}
.site-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid}
.site-logo{font-size:16px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-links{display:flex;gap:12px;font-size:11.5px;white-space:nowrap}
.site-hero{padding:18px 18px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.site-h{font-size:25px;line-height:1.08;overflow-wrap:anywhere}
.site-p{font-size:13.5px;line-height:1.55}
.site-btns{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.site-btn{font-size:12px;font-weight:700;padding:8px 13px;border:1px solid transparent}
.site-strip{margin:0 18px 16px;padding:9px 12px;border:1px solid;display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12.5px;line-height:1.35}
.site-a{font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* Phones: the bar is two rows (name and Support, then places) and scrolls
   away with the page */
@media(max-width:700px){
  .topbar{position:static}
  .topbar-in{padding-top:8px;padding-bottom:8px}
  .support-link{order:2}
  .topnav{order:3;width:calc(100% + 16px);margin:0 -8px;overflow-x:auto;scrollbar-width:none}
  .topnav::-webkit-scrollbar{display:none}
  .topnav a{padding:7px 10px;font-size:14.5px}
  .lede{font-size:16px}
}