/* «بومودورو» (14c, standalone since 14j) — /pomodoro/. A tool of its own: no site header, nav or footer and none of
   the site's stylesheets; this file carries the fonts, the tokens, the few shared controls (g-btn, g-x, g-link, vh) and
   the page. The dial with the penguin inside (studying while you focus, ice cream on the breaks), the controls under
   it, settings and the shared room beside it (under it on phones). Colours are tokens that journal/src/pomodoro/
   themes.js sets on <html> from a background + an accent (boot.js does it before the first paint); the values below
   are «ورق», the default, for the first frame and for no-JS. */
@font-face{font-family:'Kg Font';src:url('/fonts/thmanyahsans-Regular.woff2') format('woff2');font-weight:100 449;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Kg Font';src:url('/fonts/garden/thmanyahsans-Medium.woff2') format('woff2');font-weight:450 599;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Kg Font';src:url('/fonts/thmanyahsans-Bold.woff2') format('woff2');font-weight:600 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Kg Font';src:url('/fonts/onest.woff2') format('woff2');font-weight:100 900;font-display:swap;size-adjust:94%;unicode-range:U+0000-002F,U+003A-02FF,U+1E00-1EFF,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212}
@font-face{font-family:'Kg Font';src:url('/fonts/onest.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0030-0039}
:root{
  --bg:#FDFDFD; --tile:#F6F6F7; --tile-2:#F0F1F2; --sand:#E9EAEC; --paper:#FFFFFF;
  --ink:#111315; --ink-2:#3A3D41; --ink-3:#6B6F75; --line:#ECEDEF; --line-2:#DADCDF;
  --ac:#111315; --on-ac:#FFFFFF; --ac-text:#111315; --short:#2E8B57; --long:#3F7FA8; --short-text:#2E8B57; --long-text:#3F7FA8; --mood:#9A5A36;
  --font:'Kg Font',Tahoma,system-ui,sans-serif; --ease:cubic-bezier(.2,.8,.2,1); --ease-spring:cubic-bezier(.3,1.35,.5,1);
  --d1:160ms; --d2:320ms; --gut:32px; --r:12px; --sh-lift:0 12px 24px -14px rgba(15,20,25,.30); --danger:#C2412B;
  --card:var(--tile); --pm-focus:var(--ac); --pm-short:var(--short); --pm-long:var(--long); --pm-seg-on:var(--paper);
  --pm-av0:#E3EEDB; --pm-av0i:#2F4A1E; --pm-av1:#E6E4F6; --pm-av1i:#2E2B66; --pm-av2:#F6E3D4; --pm-av2i:#6B3410;
  --pm-av3:#F1E3EC; --pm-av3i:#5A2E4A; --pm-av4:#DDEEF7; --pm-av4i:#1E4A6B; --pm-av5:#F3ECCB; --pm-av5i:#5B4A10;
  color-scheme:light;
}
html[data-dark="1"]{
  --pm-seg-on:var(--sand); --sh-lift:0 12px 24px -14px rgba(0,0,0,.6);
  --pm-av0:#1F2A1B; --pm-av0i:#BFDDAA; --pm-av1:#24223A; --pm-av1i:#CFCBF2; --pm-av2:#30241B; --pm-av2i:#F0C7A6;
  --pm-av3:#30232B; --pm-av3i:#E9C3D7; --pm-av4:#1F262B; --pm-av4i:#C2DCEC; --pm-av5:#2C2818; --pm-av5i:#E8D99A;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--font);-webkit-font-smoothing:antialiased;transition:background-color var(--d2),color var(--d2)}
h1,h2,h3{font-family:var(--font)}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.pm-skip{position:absolute;top:-60px;inset-inline-start:12px;z-index:80;padding:10px 14px;background:var(--ac);color:var(--on-ac);font:500 14px var(--font);border-radius:8px;text-decoration:none}
.pm-skip:focus{top:12px}
.g-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border:1px solid var(--line-2);border-radius:10px;background:var(--paper);color:var(--ink);font:500 15px var(--font);cursor:pointer;text-decoration:none;transition:background-color var(--d1),border-color var(--d1)}
.g-btn:hover{border-color:var(--ink)}
.g-btn.primary{background:var(--ac);border-color:var(--ac);color:var(--on-ac)}
.g-btn.primary:hover{background:color-mix(in srgb,var(--ac) 88%,var(--bg))}
.g-btn svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.g-x{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;padding:0;border:0;border-radius:50%;background:var(--tile-2);color:var(--ink);cursor:pointer}
.g-x svg{width:20px;height:20px}
.g-link{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0;border:0;background:none;color:var(--ink-2);font:500 14px var(--font);cursor:pointer;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px}
.g-link:hover{color:var(--ink);text-decoration-color:currentColor}

/* ---------- the shell: head, the tool, a small credit */
.pm-shell{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;width:100%;max-width:calc(1184px + 2 * var(--gut));margin:0 auto;padding:env(safe-area-inset-top) max(var(--gut),env(safe-area-inset-right)) 0 max(var(--gut),env(safe-area-inset-left))}
.pm{flex:1;display:flex;flex-direction:column;justify-content:center;width:100%;padding:0 0 20px}
.pm svg,.pm-shell svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:where(.pm-shell) button{font-family:var(--font);color:inherit;-webkit-tap-highlight-color:transparent}
.pm-shell :is(button,input,a,[tabindex]):focus-visible,dialog :is(button,input,a):focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pm-shell button:disabled{cursor:default}
.pm-card{border-radius:var(--r)}
:is(.pm-ico,.pm-round,.pm-av,.pm-step-b,.pm-reacts button,.pm-dots i){border-radius:50%}
:is(.pm-go,.pm-pill,.pm-conn,.pm-sw i,.pm-st,.pm-phases,.pm-phases button,.pm-ico-t){border-radius:999px}
:is(.pm-seg,.pm-seg button,.pm-link input,.pm-name-row input,.pm-leave,.pm-step-c){border-radius:8px}
.pm-step-c .pm-step-b{border-radius:8px}

.pm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px;padding:12px 0}
.pm-title{display:flex;align-items:center;gap:10px;min-width:0}
.pm-logo{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px;background:var(--ac);color:var(--on-ac)}
.pm-logo svg{width:24px;height:24px;stroke-width:1.9}
.pm-title h1{margin:0;font:700 22px/1.2 var(--font);color:var(--ink)}
.pm-sub{margin:1px 0 0;font:400 13.5px/1.4 var(--font);color:var(--ink-3)}
.pm-headacts{display:flex;align-items:center;gap:4px}
.pm-ico{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;text-decoration:none;transition:background-color var(--d1)}
.pm-ico svg{width:22px;height:22px}
.pm-ico:hover{background:var(--tile-2)}
.pm-ico-t{display:inline-flex;gap:7px;width:auto;padding:0 16px 0 14px;font:500 14.5px var(--font);box-shadow:inset 0 0 0 1px var(--line-2)}
.pm-ico-t svg{width:20px;height:20px}
.pm-foot{display:flex;justify-content:center;padding:6px 0 calc(12px + env(safe-area-inset-bottom))}
.pm-made{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;border-radius:999px;color:var(--ink-3);font:400 12.5px/1 var(--font);text-decoration:none;transition:color var(--d1)}
.pm-made{cursor:default;padding:0}
.pm-peng{width:22px;height:22px;stroke-width:4.4!important;opacity:.7}   /* 14o: the penguin alone, centred, not a link */

/* ---------- layout */
.pm-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
.pm-card{background:var(--tile);padding:22px}
.pm-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.pm-side h2{margin:0 0 12px;font:500 17px/1.35 var(--font);color:var(--ink)}

/* ---------- the timer */
.pm-timer{display:flex;flex-direction:column;align-items:center;gap:18px;padding:22px 24px 26px;min-width:0}
.pm-phases{display:inline-flex;gap:2px;padding:3px;background:var(--tile-2)}
.pm-phases button{min-height:36px;padding:0 16px;border:0;background:none;color:var(--ink-3);font:500 14px var(--font);white-space:nowrap;cursor:pointer;transition:background-color var(--d1),color var(--d1)}
.pm-phases button:hover:not(:disabled){color:var(--ink)}
.pm-phases button[aria-pressed="true"]{background:var(--pm-seg-on);color:var(--ink);box-shadow:0 1px 3px rgba(15,20,25,.12)}
.pm-phases button:disabled:not([aria-pressed="true"]){opacity:.55}

.pm-dial{position:relative;width:min(380px,100%);aspect-ratio:1;margin:4px 0 0;--pm-c:var(--pm-focus);--pm-ct:var(--ac-text)}
.pm[data-phase="short"] .pm-dial{--pm-c:var(--pm-short);--pm-ct:var(--short-text)}
.pm[data-phase="long"] .pm-dial{--pm-c:var(--pm-long);--pm-ct:var(--long-text)}
.pm-ring{position:absolute;inset:0;width:100%;height:100%}
.pm-ring circle{stroke-width:1.6}
.pm-ring .pm-prog{stroke-width:2.2}
.pm-track{stroke:var(--line-2)}
.pm-prog{stroke:var(--pm-c);stroke-linecap:round;transition:stroke-dashoffset .3s linear,stroke var(--d2)}
.pm[data-run="0"] .pm-prog{stroke:color-mix(in srgb,var(--pm-c) 55%,var(--line-2))}
.pm-mid{position:absolute;inset:14%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
.pm-moods{position:relative;width:46%;aspect-ratio:100/66;margin-bottom:4px;color:var(--ink-2)}
.pm-mood{position:absolute;inset:0;width:100%;height:100%;--mood-accent:var(--mood);transition:opacity var(--d2) var(--ease),transform var(--d2) var(--ease)}
.pm-mood.eating{opacity:0;transform:translateY(4px)}
.pm:not([data-phase="focus"]) .pm-mood.studying{opacity:0;transform:translateY(4px)}
.pm:not([data-phase="focus"]) .pm-mood.eating{opacity:1;transform:none}
.pm-mood :is(.pen,.cone){transform-box:fill-box;transform-origin:0% 100%}
.pm[data-run="1"] .pm-mood .pen{animation:pmWrite 1.6s ease-in-out infinite}
.pm[data-run="1"] .pm-mood .cone{transform-origin:50% 100%;animation:pmLick 2.4s ease-in-out infinite}
@keyframes pmWrite{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(1px,-1px) rotate(-3deg)}50%{transform:translate(2px,0) rotate(1deg)}75%{transform:translate(1px,1px) rotate(-2deg)}}
@keyframes pmLick{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg) translateY(-1px)}}
.pm-time{font:500 clamp(54px,8.4vw,80px)/1 var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--ink)}
.pm-label{font:400 15px/1.5 var(--font);color:var(--ink-3)}
.pm[data-run="1"] .pm-label{color:var(--pm-ct)}
.pm-dots{display:flex;gap:8px;justify-content:center;min-height:10px;margin-top:-6px}
.pm-dots i{width:9px;height:9px;background:var(--line-2);transition:background-color var(--d2)}
.pm-dots i.on{background:var(--ink-2)}
.pm-dots i.now{background:none;box-shadow:inset 0 0 0 1.6px var(--ink-2)}

.pm-task{width:min(360px,100%)}
.pm-task input{width:100%;height:42px;padding:0 8px;border:0!important;border-bottom:1px dashed var(--line-2)!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:var(--ink);font:400 16px/42px var(--font)!important;text-align:center;transition:border-color var(--d1)}
.pm-task input::placeholder{color:var(--ink-3);opacity:.8}
.pm-task input:hover{border-bottom-color:var(--ink-3)!important}
.pm-task input:focus{outline:none;border-bottom:1px solid var(--ink)!important}

.pm-ctrls{display:flex;align-items:center;justify-content:center;gap:16px}
.pm-round{display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;background:var(--tile-2);color:var(--ink-2);cursor:pointer;transition:background-color var(--d1),color var(--d1),opacity var(--d1)}
.pm-round svg{width:21px;height:21px}
.pm-round:hover:not(:disabled){background:var(--sand);color:var(--ink)}
.pm-round:disabled,.pm-go:disabled{opacity:.4}
.pm-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:164px;min-height:58px;padding:0 30px;border:0;background:var(--ac);color:var(--on-ac);font:600 18px var(--font);cursor:pointer;transition:background-color var(--d1),transform var(--d1)}
.pm-go:hover:not(:disabled){background:color-mix(in srgb,var(--ac) 86%,var(--bg))}
.pm-go:active:not(:disabled){transform:scale(.98)}
.pm-go-i{display:inline-grid}
.pm-go-i svg{grid-area:1/1;width:20px;height:20px;fill:currentColor;stroke-width:1.6}
.pm[data-run="1"] .pm-go-i svg:first-child,.pm[data-run="0"] .pm-go-i svg:last-child{visibility:hidden}
.pm-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin:-4px 0 0;font:400 14px/1.6 var(--font);color:var(--ink-3)}
.pm-meta b{font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pm-lock{display:flex;align-items:center;gap:6px;margin:-8px 0 0;font:400 13px/1.5 var(--font);color:var(--ink-3)}
.pm-lock svg{width:15px;height:15px}

/* ---------- room bar (on the timer card) */
.pm-roombar{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;margin:-6px 0 -4px}
.pm-avs{display:flex;align-items:center;padding-inline-start:6px;min-width:0}
.pm-avs .pm-av{margin-inline-start:-6px;box-shadow:0 0 0 2px var(--tile)}
.pm-conn{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;background:var(--tile-2);font:500 12.5px var(--font);color:var(--ink-2);white-space:nowrap}
.pm-conn i{width:7px;height:7px;border-radius:50%;background:var(--ink-3)}
.pm-conn[data-s="live"] i{background:var(--pm-short)}
.pm-conn[data-s="retrying"] i,.pm-conn[data-s="connecting"] i{background:#D9A23A;animation:pmBlink 1.2s ease-in-out infinite}
.pm-conn[data-s="offline"] i{background:var(--danger,#A4442B)}
@keyframes pmBlink{50%{opacity:.3}}
.pm-pill{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin-inline-start:auto;padding:0 14px;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);font:500 14px var(--font);cursor:pointer;white-space:nowrap;transition:border-color var(--d1)}
.pm-pill svg{width:17px;height:17px}
.pm-pill:hover{border-color:var(--ink)}

.pm-av{position:relative;display:inline-grid;place-items:center;flex:none;width:34px;height:34px;background:var(--pm-av0);color:var(--pm-av0i);font:600 14px/1 var(--font)}
.pm-av[data-c="1"]{background:var(--pm-av1);color:var(--pm-av1i)}.pm-av[data-c="2"]{background:var(--pm-av2);color:var(--pm-av2i)}
.pm-av[data-c="3"]{background:var(--pm-av3);color:var(--pm-av3i)}.pm-av[data-c="4"]{background:var(--pm-av4);color:var(--pm-av4i)}
.pm-av[data-c="5"]{background:var(--pm-av5);color:var(--pm-av5i)}
.pm-av-more{background:var(--sand);color:var(--ink-2);font-size:12px}
.pm-av[data-r]::after{content:attr(data-r);position:absolute;top:-12px;inset-inline-end:-8px;font-size:17px;line-height:1;animation:pmPop 1.8s var(--ease) both}
@keyframes pmPop{0%{opacity:0;transform:scale(.4)}15%{opacity:1;transform:scale(1.15)}30%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}

/* reactions float up over the dial */
.pm-floats{position:absolute;inset:0;pointer-events:none;overflow:visible}
.pm-float{position:absolute;left:var(--fx,86%);bottom:16%;font-size:30px;line-height:1;transform:translateX(-50%);animation:pmFloat 2.1s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes pmFloat{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}12%{opacity:1;transform:translate(calc(-50% + var(--x,0px) * .3),0) scale(1.1)}100%{opacity:0;transform:translate(calc(-50% + var(--x,0px)),-150px) scale(1)}}

/* ---------- the room panel */
.pm-panel-h{display:flex;align-items:center;justify-content:space-between}
.pm-count{font-weight:400;color:var(--ink-3);font-variant-numeric:tabular-nums}
.pm-people{display:flex;flex-direction:column;gap:2px;margin:0 0 14px;padding:0;list-style:none}
.pm-person{display:flex;align-items:center;gap:10px;min-height:46px;transition:opacity var(--d2)}
.pm-person.is-left{opacity:.5}
.pm-pn{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;min-width:0;flex:1}
.pm-pn b{font:500 15px/1.4 var(--font);color:var(--ink);overflow-wrap:anywhere}
.pm-pn small{font:400 12.5px var(--font);color:var(--ink-3)}
.pm-pn .pm-host{color:var(--ink-2)}
.pm-st{flex:none;padding:3px 10px;background:var(--tile-2);font:500 12.5px/1.5 var(--font);color:var(--ink-2);white-space:nowrap}
.pm-st[data-st="focus"]{display:inline-flex;align-items:center;gap:6px;background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.pm-st[data-st="focus"]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);animation:pmBlink 2.4s ease-in-out infinite}
.pm-st[data-st="break"]{background:color-mix(in srgb,var(--short) 16%,var(--tile));color:var(--short-text)}
.pm-st[data-st="left"],.pm-st[data-st="away"]{background:none;color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.pm-reacts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 6px}
.pm-reacts button{justify-self:center;width:52px;height:52px;padding:0;border:0;background:var(--paper);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 0 0 1px var(--line);transition:transform var(--d1) var(--ease-spring),box-shadow var(--d1)}
.pm-reacts button:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--line-2),var(--sh-lift)}
.pm-reacts button:active{transform:scale(.92)}
.pm-leave{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin-top:8px;padding:0 10px;margin-inline-start:-10px;border:0;background:none;color:var(--ink-3);font:500 14px var(--font);cursor:pointer}
.pm-leave svg{width:18px;height:18px}
.pm-leave:hover{background:var(--tile-2);color:var(--ink)}

/* ---------- share card (solo) */
.pm-share p{margin:0 0 16px;font:400 14.5px/1.75 var(--font);color:var(--ink-2)}
.pm-share-btn{width:100%;min-height:48px!important;font-weight:600!important}
.pm-share-btn svg{width:20px;height:20px}

/* ---------- settings */
.pm-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:3px;background:var(--tile-2)}
.pm-seg button{min-height:40px;padding:0 2px;border:0;background:none;font:500 14px var(--font);font-variant-numeric:tabular-nums;color:var(--ink-2);cursor:pointer;white-space:nowrap;transition:background-color var(--d1),color var(--d1)}
.pm-seg b{font-weight:inherit}
.pm-seg button:hover:not(:disabled){color:var(--ink)}
.pm-seg button[aria-checked="true"]{background:var(--pm-seg-on);color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(15,20,25,.12)}
.pm-seg button:disabled:not([aria-checked="true"]){opacity:.5}
.pm-custom{display:flex;flex-direction:column;margin-top:8px}
.pm-step{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;border-bottom:1px solid var(--line)}
.pm-settings > .pm-step{margin-top:6px}
.pm-step-l{font:500 14px/1.4 var(--font);color:var(--ink)}
.pm-step-c{display:flex;align-items:center;height:40px;background:var(--tile-2)}
.pm-step-b{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;background:none;color:var(--ink-2);cursor:pointer}
.pm-step-b svg{width:16px;height:16px}
.pm-step-b:hover:not(:disabled){background:var(--sand);color:var(--ink)}
.pm-step-b:disabled{opacity:.3}
.pm-step-v{display:flex;align-items:baseline;justify-content:center;gap:4px;min-width:74px}
.pm-step-v b{font:600 16px var(--font);font-variant-numeric:tabular-nums;color:var(--ink)}
.pm-step-v small{font:400 12px var(--font);color:var(--ink-3)}
.pm-sws{display:flex;flex-direction:column;margin-top:6px}
.pm-sw-row{margin:0 0 4px;padding-top:8px;border-top:1px solid var(--line)}
.pm-sw{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:54px;padding:6px 0;border:0;background:none;text-align:start;cursor:pointer}
.pm-sws .pm-sw + .pm-sw{border-top:1px solid var(--line)}
.pm-sw-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.pm-sw-t b{font:500 14px/1.4 var(--font);color:var(--ink)}
.pm-sw-t small{font:400 12.5px/1.5 var(--font);color:var(--ink-3)}
.pm-sw i{position:relative;flex:none;width:42px;height:25px;background:var(--sand);transition:background-color var(--d1)}
.pm-sw i::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:inset-inline-start var(--d1) var(--ease)}
.pm-sw[aria-checked="true"] i{background:var(--ac)}
.pm-sw[aria-checked="true"] i::after{inset-inline-start:20px;background:var(--on-ac)}
.pm-sw:disabled{opacity:.5}
.pm-note{margin:8px 0 0;font:400 13px/1.6 var(--font);color:var(--ink-2)}

/* ---------- join / gone */
.pm-gate{max-width:560px;margin:4vh auto 0;padding:34px 28px 30px;text-align:center}
.pm-gate-art{width:min(220px,64vw);margin:0 auto 6px;color:var(--ink)}
.pm-gate-art .pm-mood{position:static;width:100%;height:auto;display:block}
.pm-gate h2{margin:6px 0 8px;font:700 clamp(22px,3vw,28px)/1.3 var(--font);color:var(--ink)}
.pm-gate p{margin:0 auto 20px;max-width:42ch;font:400 15.5px/1.75 var(--font);color:var(--ink-2)}
.pm-name{display:flex;flex-direction:column;align-items:stretch;gap:8px;text-align:start}
.pm-name label{font:500 14px var(--font);color:var(--ink)}
.pm-name small{font:400 12.5px var(--font);color:var(--ink-3)}
.pm-name-row{display:flex;gap:8px}
.pm-name-row input{flex:1;min-width:0;height:48px;padding:0 14px;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);font:400 16px var(--font)}
.pm-name-row input:focus,.pm-link input:focus{outline:none!important;border-color:var(--ink)}
.pm-name-row .g-btn{min-height:48px;white-space:nowrap;font-weight:600}
.pm-solo-link{margin-top:10px}
.pm-gate-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}

/* ---------- dialogs */
.pm-dlg{border-radius:var(--r);width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;background:var(--paper);color:var(--ink);box-shadow:0 30px 80px -30px rgba(0,0,0,.55);overflow:auto}
.pm-dlg::backdrop{background:rgba(10,12,14,.5)}
.pm-dlg[open]{animation:pmIn .24s var(--ease)}
@keyframes pmIn{from{opacity:0;transform:translateY(8px) scale(.98)}}
.pm-dlg-in{padding:18px 22px 20px}
.pm-dlg-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.pm-dlg-h h2{margin:0;font:700 21px/1.3 var(--font)}
.pm-dlg .g-x svg{width:18px;height:18px}
.pm-dlg p{margin:0 0 16px;font:400 15px/1.7 var(--font);color:var(--ink-2)}
.pm-link{display:flex;gap:8px}
.pm-link input{flex:1;min-width:0;height:48px;padding:0 12px;border:1px solid var(--line-2);background:var(--tile);color:var(--ink);font:500 14px var(--font);text-align:left}
.pm-link .g-btn{min-height:48px;font-weight:600}
.pm-link .g-btn svg,.pm-dlg-acts .g-btn svg{width:18px;height:18px}
.pm-dlg-acts{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.pm-code{margin-inline-start:auto;font:400 13.5px var(--font);color:var(--ink-3)}
.pm-code b{margin-inline-start:4px;font:600 16px var(--font);letter-spacing:.08em;color:var(--ink)}
.pm-fine{margin:16px 0 0!important;padding-top:12px;border-top:1px solid var(--line);font-size:13px!important;color:var(--ink-3)!important}
.pm-steps{margin:0;padding-inline-start:22px;font:400 15px/1.8 var(--font);color:var(--ink-2)}
.pm-steps b{color:var(--ink)}
.pm-keys-h{margin:18px 0 8px;font:600 15px var(--font)}
.pm-keys{display:flex;flex-direction:column;gap:8px;margin:0}
.pm-keys div{display:flex;align-items:center;gap:12px}
.pm-keys dt{min-width:64px}.pm-keys dd{margin:0;font:400 14px var(--font);color:var(--ink-2)}
html .pm-keys kbd{border-radius:6px;display:inline-block;padding:1px 8px;border:1px solid var(--line-2);border-bottom-width:2px;background:var(--paper);font:500 12.5px/1.6 var(--font)!important;color:var(--ink)}

/* ---------- the colours sheet (14j): a light backdrop so the page behind shows the change as you pick */
.pm-theme-dlg{width:min(440px,calc(100vw - 32px))}
.pm-theme-dlg::backdrop{background:rgba(10,12,14,.18)}
@media (min-width:641px){.pm-theme-dlg{margin:76px auto auto max(var(--gut),calc((100vw - 1184px) / 2))}}
.pm-theme-dlg .pm-dlg-in{padding-bottom:16px}
.pm-swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:4px 0 0}
.pm-swatch{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:84px;padding:10px 4px 8px;border:0;border-radius:12px;background:var(--tile);color:var(--ink-2);font:500 13.5px/1.3 var(--font);cursor:pointer;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow var(--d1),background-color var(--d1)}
.pm-swatch:hover{box-shadow:inset 0 0 0 1px var(--ink-3)}
.pm-swatch[aria-checked="true"]{color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 2px var(--ink)}
.pm-chip{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sb);box-shadow:inset 0 0 0 1px rgba(127,127,127,.35)}
.pm-chip i{width:16px;height:16px;border-radius:50%;background:var(--sa)}
.pm-chip svg{position:absolute;inset-inline-end:-5px;bottom:-3px;width:18px;height:18px;padding:2px;border-radius:50%;background:var(--ink);color:var(--bg);stroke-width:3;opacity:0;transform:scale(.6);transition:opacity var(--d1),transform var(--d1) var(--ease-spring)}
.pm-swatch[aria-checked="true"] .pm-chip svg{opacity:1;transform:none}
.pm-swatch-n{white-space:nowrap}
.pm-mine{margin-top:16px;padding:14px;border-radius:12px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--line)}
.pm-mine.is-on{box-shadow:inset 0 0 0 2px var(--ink)}
.pm-mine h3{margin:0 0 10px;font:600 15px var(--font);color:var(--ink)}
.pm-pickers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pm-pick{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 10px 6px 6px;border-radius:10px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer}
.pm-pick:focus-within{box-shadow:inset 0 0 0 2px var(--ink)}
.pm-pick input{flex:none;width:40px;height:40px;padding:0;border:0;border-radius:8px;background:none;cursor:pointer}
.pm-pick input::-webkit-color-swatch-wrapper{padding:0}
.pm-pick input::-webkit-color-swatch{border:1px solid rgba(127,127,127,.4);border-radius:8px}
.pm-pick input::-moz-color-swatch{border:1px solid rgba(127,127,127,.4);border-radius:8px}
.pm-pick span{display:flex;flex-direction:column;min-width:0}
.pm-pick b{font:500 14px/1.3 var(--font);color:var(--ink)}
.pm-pick small{font:500 12px/1.4 var(--font);color:var(--ink-3);letter-spacing:.03em;text-align:end}
.pm-theme-fine{margin:12px 0 0!important;padding-top:0!important;border-top:0!important;font-size:12.5px!important;line-height:1.7}
.pm-theme-room{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin:0 0 12px!important;padding:8px 12px;border-radius:10px;background:var(--tile-2);font-size:14px!important}
.pm-theme-room .g-link{min-height:36px}
.pm-theme-dlg .pm-sw-row{margin:12px 0 0;padding-top:4px}

/* ---------- toasts */
.pm-toasts{position:fixed;z-index:60;inset-inline:0;bottom:calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.pm-toast{border-radius:10px;max-width:min(440px,calc(100vw - 32px));padding:10px 16px;background:var(--ink);color:var(--bg);font:500 14px/1.5 var(--font);box-shadow:0 14px 30px -14px rgba(0,0,0,.45);animation:pmIn .22s var(--ease);transition:opacity .4s,transform .4s}
.pm-toast.out{opacity:0;transform:translateY(6px)}

/* ---------- dark */
html[data-dark="1"] .pm-card{box-shadow:inset 0 0 0 1px var(--line)}
html[data-dark="1"] :is(.pm-reacts button,.pm-pill){background:var(--tile-2)}
html[data-dark="1"] .pm-toast{background:var(--sand);color:var(--ink);box-shadow:0 14px 30px -14px rgba(0,0,0,.7),inset 0 0 0 1px var(--line-2)}
html[data-dark="1"] .pm-sw:not([aria-checked="true"]) i::after{background:var(--ink-3);box-shadow:none}
html[data-dark="1"] .pm-st[data-st="focus"]{background:var(--tile-2)}

/* ---------- sizes */
@media (max-width:1100px){.pm-grid{grid-template-columns:minmax(0,1fr) 320px}}
@media (max-width:899px){
  .pm-grid{grid-template-columns:minmax(0,1fr)}
  .pm-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
  .pm[data-mode="room"] .pm-side{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:640px){
  :root{--gut:16px}
  .pm{justify-content:flex-start;padding:0 0 16px}
  .pm-head{min-height:60px;padding:8px 0}
  .pm-logo{width:36px;height:36px;border-radius:10px}
  .pm-ico-t{padding:0 12px}
  .pm-title h1{font-size:20px}
  .pm-sub{font-size:13px}
  .pm-grid,.pm-side{gap:10px}
  .pm-side{display:flex;align-items:stretch}
  .pm-card{padding:18px 16px}
  .pm-timer{gap:14px;padding:16px 14px 20px}
  .pm-phases button{padding:0 12px;font-size:13.5px}
  .pm-dial{width:min(300px,100%)}
  .pm-time{font-size:58px}
  .pm-ctrls{gap:12px}
  .pm-round{width:48px;height:48px}
  .pm-go{min-width:140px;min-height:54px;padding:0 24px;font-size:17px}
  .pm-roombar{gap:8px}
  .pm-pill span{display:none}
  .pm-pill{padding:0 11px}
  .pm-gate{margin-top:2vh;padding:26px 18px 24px}
  .pm-name-row{flex-direction:column}
  .pm-dlg{width:100%;max-width:100%;margin:auto auto 0;max-height:94dvh}
  .pm .pm-dlg{border-radius:16px 16px 0 0}
  .pm-dlg-in{padding:16px 16px 20px}
  .pm-link{flex-direction:column}
}
@media (max-width:380px){
  .pm-phases button{padding:0 9px;font-size:13px}
  .pm-time{font-size:52px}
  .pm-go{min-width:120px;padding:0 18px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}