/* Shared controls for every part of kanguinn.com (الإقلو, المدونة, الورشة, استوديو الأغاني, القهوة).
   Loaded after each section's own stylesheet; the `html` prefix keeps these rules ahead of them.
   One header height, one icon button, one account chip and one switch, so a fix lands everywhere. */
:root{--ctl:40px;--ctl-r:10px;--ctl-gap:8px;--switch-w:44px;--switch-h:26px}

/* header controls share one height and line up on one axis */
html .top-actions,html .acts{display:flex;align-items:center;gap:var(--ctl-gap)}
html .icon-btn{width:var(--ctl);height:var(--ctl);min-height:0;border-radius:var(--ctl-r)}
html .icon-btn svg{width:19px;height:19px}

/* Account chip (design-spec §6), one rule for the hub (.acc-chip), the Journal (.acct summary) and the studio (.account-btn).
   36px pill, 1px border. The 26px round avatar sits 4px from the chip's inner edge on top, bottom and start
   (36 − 2 border − 26 = 8 → 4 + 4); padding-inline 4px 12px; 8px to the name; name 14/700, at most 12ch.
   Below 620px only the avatar shows: a 36px circle with the same 26px avatar centred. Signed out: the same
   36px circle with an 18px person icon. */
html .acc-chip,html .acct summary,html .account-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;width:auto;height:36px;min-height:0;min-width:0;max-width:none;margin:0;padding:0;padding-inline:4px 12px;border:1px solid var(--line-2,var(--line));border-radius:999px;background:transparent;color:var(--ink,var(--fg));font:700 14px/1 var(--ar);white-space:nowrap;list-style:none;cursor:pointer;transition:background-color .16s ease,border-color .16s ease}
html .acc-chip:hover,html .acct summary:hover,html .account-btn:hover{background:var(--tile,var(--card));border-color:var(--line-2,var(--line))}
html .acc-chip:focus-visible,html .acct summary:focus-visible,html .account-btn:focus-visible{outline:2px solid var(--olive,var(--fg));outline-offset:2px}
html .acc-chip:active,html .account-btn:active{transform:none}
html .acc-chip i,html .acct-pic,html .account-btn .avatar{box-sizing:border-box;flex:none;width:26px;height:26px;margin:0;padding:0;display:grid;place-items:center;border-radius:50%;background:var(--sage,var(--gold)) center/cover no-repeat;color:var(--ink,#13202E);font:700 13px/1 var(--ar);font-style:normal;overflow:hidden}
html .acc-chip i img,html .acct-pic img,html .account-btn .avatar img{display:block;width:100%;height:100%;object-fit:cover}
html .acc-chip span,html .acct-name,html .account-label{display:block;max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 14px/1.2 var(--ar);color:var(--ink,var(--fg))}
@media (max-width:620px){
  html .acc-chip,html .acct summary,html .account-btn{width:36px;padding:0;justify-content:center;gap:0}
  html .acc-chip span,html .acct-name,html .account-label{display:none}
}
/* signed out: hub (#account > button), Journal (.acct-slot > button), studio (account button without a picture) */
html #account>.icon-btn,html .acct-slot>.icon-btn,html .account-btn:has(.avatar:not(.has-img)){box-sizing:border-box;width:36px;height:36px;min-height:0;padding:0;gap:0;display:inline-grid;place-items:center;justify-content:center;border:1px solid var(--line-2,var(--line));border-radius:999px;background:transparent;color:var(--ink-2,var(--muted))}
html #account>.icon-btn:hover,html .acct-slot>.icon-btn:hover{background:var(--tile,var(--card));color:var(--ink,var(--fg));border-color:var(--line-2,var(--line))}
html #account>.icon-btn svg,html .acct-slot>.icon-btn svg{display:none}
html #account>.icon-btn::before,html .acct-slot>.icon-btn::before,html .account-btn .avatar:not(.has-img)::before{content:'';display:block;width:18px;height:18px;background:currentColor;-webkit-mask:var(--kg-person) center/contain no-repeat;mask:var(--kg-person) center/contain no-repeat}
html .account-btn:has(.avatar:not(.has-img)) .account-label{display:none}
html .account-btn .avatar:not(.has-img){width:18px;height:18px;background:none;color:inherit}
:root{--kg-person:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M4.8 19.5c1.3-3.3 4-5 7.2-5s5.9 1.7 7.2 5'/%3E%3C/svg%3E")}
html .acc-menu,html .acct-menu{top:calc(100% + 6px);border-radius:12px;padding:6px;min-width:200px}
html .acc-menu a,html .acc-menu button,html .acct-menu a,html .acct-menu button{border-radius:8px;min-height:40px;display:flex;align-items:center}

/* the theme switch: same height family as the other controls */
html #themeBtn,html #themeToggle{width:52px;height:30px}
html #themeBtn::before,html #themeToggle::before{width:23px;height:23px}
html #themeBtn svg,html #themeToggle svg{top:6.8px;left:6.8px}
:root[data-theme="dark"] #themeBtn::before,:root[data-theme="dark"] #themeBtn svg,:root[data-theme="dark"] #themeToggle::before,:root[data-theme="dark"] #themeToggle svg{transform:translateX(22px)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #themeBtn::before,:root:not([data-theme="light"]) #themeBtn svg,:root:not([data-theme="light"]) #themeToggle::before,:root:not([data-theme="light"]) #themeToggle svg{transform:translateX(22px)!important}}

/* Kanguinn switch (design-spec §8): .spell-btn .dot, .cr-switch i, and any [role=switch] that carries an <i class="kg-sw">.
   Track 40×24. Off: sand + 1px inset line, cream knob at inline-start with a dash. On: olive (classic: ink), knob
   16px toward inline-end with a tick. The mark (dash/tick) and the .lbl-state text carry the state without colour. */
html .spell-btn .dot,html .cr-switch i,html [role="switch"] .kg-sw{--sw-on:var(--olive,var(--fg));--sw-dx:16px;position:relative;flex:none;box-sizing:border-box;display:inline-block;width:40px;height:24px;margin:0;border-radius:999px;background:var(--sand,color-mix(in srgb,var(--muted) 20%,var(--card)));box-shadow:inset 0 0 0 1px var(--line-2,var(--line));transition:background-color .2s var(--ease,ease),box-shadow .2s var(--ease,ease);animation:none!important}
html[dir="rtl"] .spell-btn .dot,html[dir="rtl"] .cr-switch i,html[dir="rtl"] [role="switch"] .kg-sw{--sw-dx:-16px}
html .spell-btn .dot:dir(rtl),html .cr-switch i:dir(rtl),html [role="switch"] .kg-sw:dir(rtl){--sw-dx:-16px}
html .spell-btn .dot:dir(ltr),html .cr-switch i:dir(ltr),html [role="switch"] .kg-sw:dir(ltr){--sw-dx:16px}
/* knob */
html .spell-btn .dot::after,html .cr-switch i::after,html [role="switch"] .kg-sw::after{content:'';position:absolute;top:3px;inset-inline-start:3px;left:auto;width:18px;height:18px;border-radius:50%;background:#FFFDF8;box-shadow:0 1px 2px rgba(40,30,15,.25);transition:transform .2s var(--ease,ease)}
/* mark on the knob: an 8px dash (off) or a 10px tick (on), drawn in currentColor through a mask */
html .spell-btn .dot::before,html .cr-switch i::before,html [role="switch"] .kg-sw::before{content:'';position:absolute;z-index:1;top:7px;inset-inline-start:7px;width:10px;height:10px;background:var(--ink-3,var(--muted));-webkit-mask:var(--sw-dash) center/10px no-repeat;mask:var(--sw-dash) center/10px no-repeat;transition:transform .2s var(--ease,ease)}
html .spell-btn[aria-checked="true"] .dot,html .spell-btn[aria-pressed="true"] .dot,html .cr-switch[aria-checked="true"] i,html [role="switch"][aria-checked="true"] .kg-sw{background:var(--sw-on);box-shadow:none}
html .spell-btn[aria-checked="true"] .dot::after,html .spell-btn[aria-pressed="true"] .dot::after,html .cr-switch[aria-checked="true"] i::after,html [role="switch"][aria-checked="true"] .kg-sw::after,
html .spell-btn[aria-checked="true"] .dot::before,html .spell-btn[aria-pressed="true"] .dot::before,html .cr-switch[aria-checked="true"] i::before,html [role="switch"][aria-checked="true"] .kg-sw::before{transform:translateX(var(--sw-dx))}
html .spell-btn[aria-checked="true"] .dot::before,html .spell-btn[aria-pressed="true"] .dot::before,html .cr-switch[aria-checked="true"] i::before,html [role="switch"][aria-checked="true"] .kg-sw::before{background:var(--sw-on);-webkit-mask-image:var(--sw-tick);mask-image:var(--sw-tick)}
:root{--sw-dash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 5h8' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");--sw-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M1.6 5.3l2.3 2.3L8.4 2.8' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* the spell checker's working states keep the switch on; the label says what it is doing */
html .spell-btn[data-state="checking"] .dot::after{animation:kgKnob 1.1s ease-in-out infinite}
html .spell-btn[data-state="rate"] .dot,html .spell-btn[data-state="error"] .dot{background:color-mix(in srgb,var(--clay,var(--danger,#B3402E)) 80%,var(--sw-on))}
@keyframes kgKnob{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--sw-on,#111315) 30%,transparent)}}
/* the label row is the control: 44px hit area, focus ring on the track */
html .cr-switch{min-height:44px;gap:12px}
html .spell-btn{position:relative}
html .spell-btn::before{content:'';position:absolute;inset:-4px 0}
html .spell-btn:focus-visible,html .cr-switch:focus-visible{outline:none}
html .spell-btn:focus-visible .dot,html .cr-switch:focus-visible i,html [role="switch"]:focus-visible .kg-sw{outline:2px solid var(--olive,var(--fg));outline-offset:2px}
html .spell-btn:disabled,html .cr-switch:disabled{opacity:.45;cursor:not-allowed}
html .spell-btn .lbl-state{font-size:12px;font-weight:600;color:var(--ink-3,var(--muted))}
@media (prefers-reduced-motion:reduce){html .spell-btn .dot,html .spell-btn .dot::after,html .spell-btn .dot::before,html .cr-switch i,html .cr-switch i::after,html .cr-switch i::before,html [role="switch"] .kg-sw,html [role="switch"] .kg-sw::after,html [role="switch"] .kg-sw::before{transition:none}html .spell-btn[data-state="checking"] .dot::after{animation:none}}
/* the narrowest phones: four sections, a switch and an account all fit on one line */
@media (max-width:380px){
  html .nav a,html .site-nav a{padding:6px 5px!important;font-size:12.5px!important}
  html .top .wrap{gap:4px}
  html #themeBtn,html #themeToggle{width:46px}
  :root[data-theme="dark"] #themeBtn::before,:root[data-theme="dark"] #themeBtn svg,:root[data-theme="dark"] #themeToggle::before,:root[data-theme="dark"] #themeToggle svg{transform:translateX(16px)!important}
}
@media (max-width:380px) and (prefers-color-scheme:dark){:root:not([data-theme="light"]) #themeBtn::before,:root:not([data-theme="light"]) #themeBtn svg,:root:not([data-theme="light"]) #themeToggle::before,:root:not([data-theme="light"]) #themeToggle svg{transform:translateX(16px)!important}}