/* The site's dock and everything that opens from it, shared by the Next pages
   (app/Dock.tsx, linked in app/layout.tsx) and the static guide pages
   (public/dock.js). Uses the page's theme tokens: --bg --paper --paper2 --ink
   --muted --line --stamp --green --mono, which both kinds of page define. */
:root{--display:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --dock-space:calc(64px + env(safe-area-inset-top,0px))} /* room the dock takes at the top of a page */

/* ---------- dock ---------- */
/* always the dark printer body, in both themes; --gl is the light it throws */
.dock{--dk:#171611;--dk2:#26241E;--lt:#F1ECE0;
  position:relative;display:flex;align-items:center;gap:2px;
  padding:calc(9px + env(safe-area-inset-top,0px)) 9px 9px;border-radius:0 0 24px 24px;
  background:linear-gradient(180deg,var(--dk) 45%,var(--dk2));
  box-shadow:inset 0 -1px 0 rgba(241,236,224,.18),0 16px 34px -16px rgba(0,0,0,.5)}
/* concave shoulders: the dock hangs from the page's top edge */
.dock::before,.dock::after{content:"";position:absolute;top:0;width:24px;height:24px;pointer-events:none}
.dock::before{right:calc(100% - .5px);background:radial-gradient(circle at 0 100%,transparent 23.5px,var(--dk) 24px)}
.dock::after{left:calc(100% - .5px);background:radial-gradient(circle at 100% 100%,transparent 23.5px,var(--dk) 24px)}
/* width:max-content: centred with left:50%, it would otherwise only get half the screen to fit in and squeeze the lit label on tablets */
.dock-wrap{position:fixed;left:50%;top:0;z-index:50;transform:translateX(-50%);width:max-content;max-width:100vw}
/* the light it throws down onto the page, with film grain */
.dock-light{--gl:#FF8A5E;position:fixed;left:50%;top:0;z-index:29;width:min(1000px,130vw);height:min(340px,45vh);transform:translateX(-50%);pointer-events:none;opacity:.75;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 50% 100% at 50% 0,color-mix(in srgb,var(--gl) 42%,transparent),transparent 75%);
  -webkit-mask:radial-gradient(ellipse 46% 100% at 50% 0,#000,rgba(0,0,0,.35) 45%,transparent 78%);mask:radial-gradient(ellipse 46% 100% at 50% 0,#000,rgba(0,0,0,.35) 45%,transparent 78%)}
:root[data-theme="dark"] .dock-light{--gl:#F1ECE0;opacity:.8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dock-light{--gl:#F1ECE0;opacity:.8}}
.dock-space{height:var(--dock-space)}
/* items: icons whose name slides out on hover; the current page stays lit with its name */
.dock-it{position:relative;display:flex;align-items:center;height:44px;min-width:44px;justify-content:center;padding:0 11.5px;border:0;border-radius:15px;background:transparent;cursor:pointer;
  color:rgba(241,236,224,.6);text-decoration:none;font-family:var(--display);font-weight:700;font-size:.9rem;letter-spacing:-.01em;
  transition:color .2s,background .2s,padding .3s cubic-bezier(.2,.9,.3,1)}
.dock-it svg{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dock-lbl{display:grid;grid-template-columns:0fr;opacity:0;transition:grid-template-columns .3s cubic-bezier(.2,.9,.3,1),opacity .2s,margin .3s}
.dock-lbl>span{overflow:hidden;white-space:nowrap;display:flex;align-items:center;gap:7px;padding-right:3px}
.dock-lbl small{font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:2px 5px;border-radius:5px;border:1px solid currentColor;opacity:.75}
.dock-it.on .dock-lbl{grid-template-columns:1fr;opacity:1;margin-left:9px}
.dock-it.on{color:#1C1B18;padding:0 16px 0 13px;background:linear-gradient(180deg,#FFFBF2,#E6DECC);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(28,27,24,.12),0 0 22px -4px rgba(241,236,224,.5)}
.dock-it.soon{color:rgba(241,236,224,.32);cursor:default}
@media (hover:hover){
  .dock-it:hover .dock-lbl,.dock-it:focus-visible .dock-lbl{grid-template-columns:1fr;opacity:1;margin-left:9px}
  .dock-it:not(.on):hover,.dock-it:not(.on):focus-visible{color:var(--lt);background:rgba(241,236,224,.08);padding-right:15px}
  .dock-it.soon:hover{color:rgba(241,236,224,.55)}
}
.dock-sep{width:1px;height:26px;margin:0 6px;background:rgba(241,236,224,.13)}
/* the account: our avatar inside a ring of today's allowance (--p left, --c its colour) */
.dock-me{padding:0 6px}
.dock-me:not(.on):hover,.dock-me:not(.on):focus-visible{padding-right:14px}
span.dock-me:empty{width:44px}
.dock-av{position:relative;width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,#FFFBF2,#E6DECC);color:#1C1B18;font-family:var(--display);font-weight:800;font-size:.95rem;letter-spacing:-.03em;line-height:1}
.dock-av::after{content:"";position:absolute;inset:2.5px;border-radius:50%;border:1.2px dashed rgba(28,27,24,.35)}
.dock-av::before{content:"";position:absolute;inset:-5px;border-radius:50%;padding:2.5px;pointer-events:none;
  background:conic-gradient(var(--c) calc(var(--p,100) * 1%),rgba(241,236,224,.12) 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  filter:drop-shadow(0 0 calc(2px + var(--p,100) * .05px) var(--c));transition:filter .4s}
.dock-me.low .dock-av::before{animation:dock-pulse 1.6s ease-in-out infinite}
/* a running Study Café timer, on its item: a dot in the sitting's colour and the time left */
.dock-timer{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 10px;border-radius:999px;background:rgba(241,236,224,.1);color:#F1ECE0;
  font-family:var(--mono);font-size:.76rem;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;line-height:1}
.dock-timer[hidden]{display:none}
.dock-timer i{width:7px;height:7px;border-radius:50%;background:var(--tc,#FF6A5E);box-shadow:0 0 0 3px color-mix(in srgb,var(--tc,#FF6A5E) 30%,transparent),0 0 10px var(--tc,#FF6A5E)}
.dock-timer.t-focus{--tc:#FF6A5E}.dock-timer.t-deep{--tc:#7AA5FF}.dock-timer.t-break{--tc:#5ED08C}
.dock-timer.paused{color:rgba(241,236,224,.55)}
.dock-timer.paused i{box-shadow:none;opacity:.6}
.dock-timer.done{background:var(--tc);color:#1C1B18}
.dock-timer.done i{background:#1C1B18;box-shadow:none}
.dock-it.on .dock-timer{margin-left:10px;border-radius:10px;background:#1C1B18;color:#F1ECE0}
/* while it ticks, the capsule takes the icon's place (phones keep the icon, the capsule is hidden there) */
@media (min-width:601px){.dock-it:has(.dock-timer:not([hidden]))>svg{display:none}
  .dock-it:has(.dock-timer:not([hidden])):not(.on){padding:0}
  .dock-it:not(.on) .dock-timer{height:44px;box-sizing:border-box;border-radius:15px;padding:0 16px 0 14px;gap:9px;font-size:.86rem}}
.dock-it.on .dock-timer.paused{color:rgba(241,236,224,.6)}
@keyframes dock-pulse{50%{filter:drop-shadow(0 0 7px var(--c))}}
.dock-it:focus-visible,.dock-login:focus-visible{outline:2px solid var(--lt);outline-offset:3px}
.dock-login{display:flex;align-items:center;height:40px;margin-left:2px;padding:0 16px;border-radius:13px;text-decoration:none;color:#1C1B18;background:linear-gradient(180deg,#FFFBF2,#E6DECC);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(28,27,24,.12);font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.dock-login:hover{filter:brightness(1.04)}
@media (max-width:600px){
  .dock{gap:0;padding:calc(7px + env(safe-area-inset-top,0px)) 6px 7px;border-radius:0 0 20px 20px}
  .dock-it{min-width:38px;height:42px;padding:0 8.5px}
  .dock-it.on{padding:0 8.5px}
  .dock-it.on .dock-lbl{grid-template-columns:0fr;opacity:0;margin-left:0}
  .dock-it.soon{display:none} /* not built yet: no room to spare on a phone */
  .dock-timer{display:none}
  .dock-wide{display:none} /* Theme and Usage: in the account menu instead (.acc-phone); signed out, the phone's own theme applies */
  .dock-me{padding:0 5px}
  .dock-sep{margin:0 3px}
  .dock-login{padding:0 12px}
}
@media (max-width:370px){.dock-it,.dock-it.on{min-width:34px;padding:0 6.5px}}
/* account menu (app/AccountMenu.tsx): drops from the dock, printed like a receipt head */
.acc{position:absolute;top:calc(100% + 12px);right:0;width:min(340px,calc(100vw - 24px));background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:18px;
  padding:18px 18px 12px;box-shadow:0 28px 60px -28px rgba(0,0,0,.6);font-family:var(--display);animation:use-rise .18s cubic-bezier(.2,.9,.3,1.1)}
.acc::before{content:"";position:absolute;top:-6px;right:28px;width:12px;height:12px;background:var(--paper);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.acc-who{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:2px dashed var(--line)}
.acc-who>div{min-width:0}
.acc-who b{display:block;font-size:1.12rem;font-weight:800;letter-spacing:-.02em}
.acc-who small{display:block;margin-top:3px;font-family:var(--mono);font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-av{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;position:relative;background:var(--ink);color:var(--paper);font-weight:800;font-size:1.25rem;letter-spacing:-.03em}
.acc-av::after{content:"";position:absolute;inset:3px;border-radius:50%;border:1.3px dashed color-mix(in srgb,var(--paper) 45%,transparent)}
.acc-actions{display:grid;gap:6px;padding:12px 0 8px}
.acc-actions button,.acc-actions a{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);
  font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;text-align:left;transition:border-color .15s,background .15s}
.acc-actions button:hover,.acc-actions a:hover{border-color:var(--ink)}
.acc-actions a{text-decoration:none}
.acc-actions svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.acc-actions .acc-out{color:var(--stamp)}
.acc-actions .acc-out:hover{border-color:var(--stamp);background:color-mix(in srgb,var(--stamp) 8%,var(--bg))}
.acc-actions .acc-phone{display:none} /* only on phones, where the dock has no room for them */
@media (max-width:600px){.acc-actions .acc-phone{display:flex}}
.acc-foot{display:block;text-align:center;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;color:var(--muted);padding-top:4px}
.dock-me.open .dock-av{box-shadow:0 0 0 2px var(--dk),0 0 0 3.5px var(--lt)}
/* question bank menu: every guide, Placement and Resume side by side like two
   columns of a bill; the guide you're on is lit */
.gm{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);width:min(780px,calc(100vw - 24px));background:var(--paper);color:var(--ink);
  border:1px solid var(--line);border-radius:18px;padding:16px 16px 10px;box-shadow:0 28px 60px -28px rgba(0,0,0,.6);font-family:var(--display);animation:gm-in .18s cubic-bezier(.2,.9,.3,1.1)}
@keyframes gm-in{from{opacity:0;transform:translate(-50%,-6px)}}
.gm-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 18px}
@media (max-width:760px){.gm-cols{grid-template-columns:1fr 1fr}}
.gm-col h4{margin:0 0 6px;padding:0 10px 8px;border-bottom:2px dashed var(--line);font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between}
.gm-col ul{list-style:none;margin:0;padding:0}
.gm-col a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;text-decoration:none;color:inherit;font-weight:700;font-size:.92rem;letter-spacing:-.01em;transition:background .12s}
.gm-col a:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.gm-col a[aria-current]{background:var(--ink);color:var(--paper)}
.gm-ic{display:inline-flex;flex:none}
/* guide icons (app/GuideIcon.tsx, gicon() in dock.js): full-colour logos as they
   are; line icons painted with their own gradient through a mask */
.gi{display:inline-grid;place-items:center;width:26px;height:26px;flex:none;vertical-align:middle}
.gi img{display:block;width:24px;height:24px;object-fit:contain}
.gi .dk{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .gi.has-dk img{display:none}:root:not([data-theme="light"]) .gi.has-dk .dk{display:block}}
:root[data-theme="dark"] .gi.has-dk img{display:none}
:root[data-theme="dark"] .gi.has-dk .dk{display:block}
.gi.line::after{content:"";width:24px;height:24px;background:linear-gradient(135deg,var(--g1,#655D4E),var(--g2,#1C1B18));
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.gi[data-g="restapi"]{--g1:#EA580C;--g2:#F59E0B}
.gi.emoji{font-size:1.15rem;line-height:1}
.item .ic .gi{width:30px;height:30px}
.item .ic .gi img,.item .ic .gi.line::after{width:28px;height:28px}

/* "Learn something new" search: under the Question bank menu and the Skills bill
   (app/SkillSearch.tsx; public/dock.js builds the same markup on guide pages) */
.ss{margin:10px 0 0;min-width:0;max-width:100%}
.ss-box{display:flex;align-items:center;gap:10px;padding:0 14px;border:1.5px dashed color-mix(in srgb,var(--ink) 28%,transparent);border-radius:14px;
  background:color-mix(in srgb,var(--ink) 3%,transparent);transition:border-color .15s,background .15s,box-shadow .15s}
.ss-box:focus-within{border-style:solid;border-color:var(--ink);background:var(--paper);box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 8%,transparent)}
.ss-box svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round}
.ss-box input{flex:1;min-width:0;height:44px;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;font-weight:600}
.ss-box input::placeholder{color:var(--muted);font-weight:500}
.ss-box input::-webkit-search-cancel-button{display:none}
.ss-res{list-style:none;margin:6px 0 0;padding:4px;max-width:100%;overflow:hidden;border-radius:12px;background:color-mix(in srgb,var(--ink) 4%,var(--paper))}
.ss-res a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;text-decoration:none;color:inherit}
.ss-res a:hover,.ss-res li:first-child a{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.ss-ic{display:inline-flex;flex:none}
.ss-t{flex:1;min-width:0}
.ss-t b{display:block;font-weight:800;font-size:.92rem;letter-spacing:-.01em}
.ss-t small{display:block;color:var(--muted);font-size:.76rem;line-height:1.35;overflow-wrap:anywhere}   /* wraps: a no-wrap line here widened the whole page on phones */
.ss-g{flex:none;font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  padding:3px 6px;border:1px solid var(--line);border-radius:6px}
.ss-none{padding:10px 12px;color:var(--muted);font-size:.86rem}
/* "Write a … guide with AI": the way forward when nothing matches */
.ss-ai a{border:1.5px dashed color-mix(in srgb,var(--ink) 25%,transparent);margin-top:2px}
.ss-ai .ss-t b{background:linear-gradient(90deg,#7C3AED,#DB2777);-webkit-background-clip:text;background-clip:text;color:transparent}
.ss-ai .ss-g{color:#7C3AED;border-color:color-mix(in srgb,#7C3AED 40%,transparent)}
.ss.compact .ss-box input{height:40px}   /* keep 16px text: smaller makes phones zoom in on focus */
.gm .ss{margin-top:12px;padding-top:12px;border-top:2px dashed var(--line)}
.gm-empty{padding:8px 10px;color:var(--muted);font-size:.84rem;line-height:1.45}
.gm-empty a{display:inline;padding:0;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.gm-foot{margin-top:8px;padding-top:8px;border-top:2px dashed var(--line);text-align:center;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;color:var(--muted)}
@media (max-width:520px){.gm-cols{grid-template-columns:1fr}.gm{max-height:calc(100dvh - 90px);overflow:auto}}

/* Clerk's avatars (account settings) repainted as ours: ink coin, dashed edge, the
   initial from --pmb-initial (set by Dock.tsx). Never the Google photo, no uploads. */
.cl-userPreviewAvatarBox,.cl-avatarBox{position:relative;container-type:size;border-radius:50%!important;background:var(--ink)!important;box-shadow:none!important;overflow:hidden}
.cl-userPreviewAvatarImage,.cl-avatarImage{opacity:0!important}
.cl-userPreviewAvatarBox::before,.cl-avatarBox::before{content:"";position:absolute;inset:7%;z-index:1;border-radius:50%;border:1.3px dashed color-mix(in srgb,var(--paper) 45%,transparent)}
.cl-userPreviewAvatarBox::after,.cl-avatarBox::after{content:var(--pmb-initial,"");position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  color:var(--paper);font-family:var(--display);font-weight:800;font-size:46cqw;letter-spacing:-.03em;line-height:1}
.cl-avatarImageActions{display:none!important}
/* usage sheet: one bar per allowance, printed like a receipt */
.use-back{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;background:rgba(12,11,8,.55);backdrop-filter:blur(3px);animation:use-fade .15s ease-out}
.use-sheet{position:relative;width:min(640px,100%);background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:22px 24px 10px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);font-family:var(--display);animation:use-rise .2s cubic-bezier(.2,.9,.3,1.1)}
.use-head{display:flex;align-items:center;gap:10px}
.use-head h2{margin:0;font-size:1rem;font-weight:700;letter-spacing:-.01em}
.use-plan{font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);
  border:1.5px solid currentColor;border-radius:6px;padding:2px 7px;transform:rotate(-3deg)}
.use-x{margin-left:auto;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.use-x:hover{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink)}
.use-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.use-verdict{margin:18px 0 0;padding-bottom:18px;border-bottom:2px dashed var(--line);font-size:1.45rem;font-weight:800;letter-spacing:-.035em;line-height:1.15;text-wrap:balance}
.use-rows{list-style:none;margin:0;padding:0}
.use-rows li{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr) 140px;align-items:center;gap:22px;padding:16px 0}
.use-rows li+li{border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.use-name b,.use-num b{display:block;font-size:.95rem;font-weight:600}
.use-name small,.use-num small{display:block;white-space:nowrap;margin-top:3px;font-family:var(--mono);font-size:.68rem;color:var(--muted)}
.use-num{text-align:right}
.use-num b{font-family:var(--mono);font-size:.8rem;font-weight:700}
.use-bar{height:10px;border-radius:99px;overflow:hidden;background:color-mix(in srgb,var(--ink) 9%,transparent);box-shadow:inset 0 1px 2px color-mix(in srgb,#000 12%,transparent)}
.use-bar span{display:block;height:100%;width:calc(var(--u) * 1%);min-width:10px;border-radius:99px;background:var(--c);
  box-shadow:0 0 8px color-mix(in srgb,var(--c) 55%,transparent);transition:width .6s cubic-bezier(.2,.9,.3,1)}
@keyframes use-fade{from{opacity:0}}
@keyframes use-rise{from{opacity:0;transform:translateY(10px) scale(.98)}}
@media (max-width:560px){
  .use-sheet{padding:18px 18px 6px}
  .use-verdict{font-size:1.2rem}
  .use-rows li{grid-template-columns:minmax(0,1fr) auto;gap:8px 14px}
  .use-bar{grid-column:1/-1;grid-row:2}
}
@media (prefers-reduced-motion:reduce){.dock-me.low .dock-av::before,.use-back,.use-sheet,.acc,.gm{animation:none}}

/* ---------- Clerk sign-in, in the paymybills style ---------- */
.pmb-auth-card{box-shadow:0 30px 70px -30px rgba(0,0,0,.6)!important;border:1px solid var(--line)!important}
.pmb-auth-title{font-weight:800!important;letter-spacing:-.035em!important;font-size:1.45rem!important}
.pmb-auth-sub{font-family:var(--mono)!important;font-size:.74rem!important;letter-spacing:.04em!important}
.pmb-auth-social{border:1px solid var(--line)!important;font-weight:600!important}
.pmb-auth-social:hover{border-color:var(--ink)!important}
.pmb-auth-primary{font-weight:700!important;letter-spacing:.02em!important}
.pmb-auth-footer{font-family:var(--mono)!important;font-size:.72rem!important}
.pmb-auth-backdrop{z-index:1000!important}