/* MyApps Hub "Pop Glass" — shared by the tile launcher (/) and the admin
   console (/admin/). Same tokens as Nudjo / Pagejo / Snapjo; each page adds
   its own hue block (--a1/--a2/--a-ink) after this file. Theme: theme.js
   sets <html data-theme="light|dark"> (none = follow the OS). */

@font-face{
  font-family:"PJS Fallback";
  src:local("Arial"), local("Helvetica Neue"), local("Roboto");
  size-adjust:104%; ascent-override:97%; descent-override:25%; line-gap-override:0%;
}

:root{
  color-scheme: light;
  --a1:#4f46e5; --a2:#db2777; --a1-vivid:#818cf8; --a2-vivid:#f472b6; --a-ink:#4338ca;
  --grad:linear-gradient(135deg,var(--a1) 0%,var(--a2) 100%);
  --grad-soft:linear-gradient(135deg,color-mix(in srgb,var(--a1) 13%,transparent),color-mix(in srgb,var(--a2) 13%,transparent));
  --on-grad:#fff;

  --bg:#f6f5fb; --surface:#ffffff; --surface-2:#efedf7; --surface-3:#e5e2f1;
  --text:#15131f; --muted:#5d5a72;
  --border:rgba(30,20,70,.10); --border-strong:#8a86a0;
  --glass:rgba(255,255,255,.72); --glass-strong:rgba(255,255,255,.9); --glass-border:rgba(30,20,70,.08);
  --code-bg:#f1eff8;
  --focus:var(--a1);

  --success:#047857; --success-soft:color-mix(in srgb,#10b981 16%,transparent);
  --warn:#b45309;    --warn-soft:color-mix(in srgb,#f59e0b 20%,transparent);
  --danger:#dc2626;  --danger-soft:color-mix(in srgb,#ef4444 12%,transparent);

  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(30,20,70,.05),0 4px 12px rgba(30,20,70,.06);
  --sh-2:0 2px 4px rgba(30,20,70,.06),0 12px 28px rgba(30,20,70,.12);
  --sh-3:0 4px 8px rgba(30,20,70,.08),0 20px 44px rgba(30,20,70,.18);
  --glow:0 6px 18px color-mix(in srgb,var(--a1) 38%,transparent);
  --glow-lg:0 10px 28px color-mix(in srgb,var(--a1) 45%,transparent),0 2px 6px color-mix(in srgb,var(--a2) 30%,transparent);
  --blur:saturate(180%) blur(18px);

  --font:"Plus Jakarta Sans","PJS Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --dur-1:120ms; --dur-2:220ms; --dur-3:360ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px); --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
  --bar-h:60px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0c0b12; --surface:#16151f; --surface-2:#211f2e; --surface-3:#2c2a3c;
    --text:#f3f2fa; --muted:#a9a6bf;
    --border:rgba(255,255,255,.10); --border-strong:#77748f;
    --glass:rgba(24,23,34,.78); --glass-strong:rgba(24,23,34,.94); --glass-border:rgba(255,255,255,.10);
    --code-bg:#0f0e17;
    --success:#34d399; --warn:#fbbf24; --danger:#f87171;
    --sh-1:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.3);
    --sh-2:0 2px 4px rgba(0,0,0,.45),0 12px 28px rgba(0,0,0,.45);
    --sh-3:0 4px 8px rgba(0,0,0,.5),0 20px 44px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0c0b12; --surface:#16151f; --surface-2:#211f2e; --surface-3:#2c2a3c;
  --text:#f3f2fa; --muted:#a9a6bf;
  --border:rgba(255,255,255,.10); --border-strong:#77748f;
  --glass:rgba(24,23,34,.78); --glass-strong:rgba(24,23,34,.94); --glass-border:rgba(255,255,255,.10);
  --code-bg:#0f0e17;
  --success:#34d399; --warn:#fbbf24; --danger:#f87171;
  --sh-1:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.3);
  --sh-2:0 2px 4px rgba(0,0,0,.45),0 12px 28px rgba(0,0,0,.45);
  --sh-3:0 4px 8px rgba(0,0,0,.5),0 20px 44px rgba(0,0,0,.6);
}
:root[data-theme="light"]{ color-scheme:light; }

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:16px;line-height:1.5;font-weight:500;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font);font-weight:800;letter-spacing:-.02em;line-height:1.2}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
a{color:var(--a-ink)}
.hidden,[hidden]{display:none !important}

/* Aurora: the "wallpaper" behind everything. Pure gradients, no filters. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(55% 45% at 12% -4%,color-mix(in srgb,var(--a1-vivid) 30%,transparent),transparent 70%),
    radial-gradient(50% 42% at 92% 0%,color-mix(in srgb,var(--a2-vivid) 26%,transparent),transparent 70%),
    radial-gradient(60% 40% at 55% 105%,color-mix(in srgb,var(--a1-vivid) 14%,transparent),transparent 70%);
}
:root[data-theme="dark"] body::before{opacity:.8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::before{opacity:.8}}

:focus{outline:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
:root[data-theme="dark"] :focus-visible{outline-color:var(--a-ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :focus-visible{outline-color:var(--a-ink)}}

.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ic.sm{width:16px;height:16px}

.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
:root[data-theme="dark"] .grad-text{background:linear-gradient(135deg,var(--a1-vivid),var(--a2-vivid));-webkit-background-clip:text;background-clip:text}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .grad-text{background:linear-gradient(135deg,var(--a1-vivid),var(--a2-vivid));-webkit-background-clip:text;background-clip:text}}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass:var(--surface);--glass-strong:var(--surface)}
}

/* ---------- glass app bar ---------- */
.appbar{
  position:sticky;top:0;z-index:20;flex:none;
  display:flex;align-items:center;gap:12px;
  padding:calc(var(--safe-t) + 8px) max(16px,var(--safe-r)) 8px max(16px,var(--safe-l));
  min-height:calc(var(--bar-h) + var(--safe-t));
  background:var(--glass);border-bottom:1px solid var(--glass-border);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;color:var(--text)}
.brand img{width:34px;height:34px;border-radius:10px;flex:none;box-shadow:var(--sh-1)}
.brand .name{font-weight:800;font-size:17px;letter-spacing:-.02em;line-height:1.15}
.brand .name small{display:block;font-weight:600;font-size:12px;letter-spacing:0;color:var(--muted)}
.appbar .spacer{flex:1}

/* ---------- theme picker: Light / Dark / Auto ---------- */
.theme-seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--border);flex:none}
.theme-seg button{
  min-width:34px;height:34px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:0;border-radius:var(--r-pill);background:transparent;color:var(--muted);font-size:13px;font-weight:700;
  transition:background-color var(--dur-2),color var(--dur-2),transform var(--dur-1) var(--ease-out);
}
.theme-seg button span{display:none}
.theme-seg button:active{transform:scale(.94)}
.theme-seg button[aria-checked="true"]{background:var(--grad);color:#fff;box-shadow:var(--glow)}
.theme-seg button:not([aria-checked="true"]):hover{color:var(--text)}
@media (min-width:720px){.theme-seg button{padding:0 12px}.theme-seg button span{display:inline}}

/* ---------- buttons ---------- */
.btn,.primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 20px;border:0;border-radius:var(--r-md);
  background:var(--grad);color:var(--on-grad);font-size:15px;font-weight:700;text-decoration:none;
  box-shadow:var(--glow);
  transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2),filter var(--dur-2),opacity var(--dur-2);
}
.btn:hover,.primary:hover{filter:brightness(1.06);box-shadow:var(--glow-lg)}
.btn:active,.primary:active{transform:scale(.97)}
.btn:disabled,.primary:disabled{opacity:.5;cursor:default;box-shadow:none;filter:none;transform:none}
.btn.ghost{background:var(--surface-2);color:var(--text);box-shadow:none;border:1px solid var(--border)}
.btn.ghost:hover{background:var(--surface-3);filter:none;box-shadow:none}

/* ---------- inputs ---------- */
.field,
input[type=text],input[type=email],input[type=password],textarea,select{
  width:100%;min-height:46px;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--text);font-size:16px;font-weight:500;
  transition:border-color var(--dur-2),background-color var(--dur-2),box-shadow var(--dur-2);
}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.85}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--a1);background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--a1) 22%,transparent)}
:root[data-theme="dark"] input:focus,:root[data-theme="dark"] textarea:focus,:root[data-theme="dark"] select:focus{border-color:var(--a1-vivid)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) input:focus,:root:not([data-theme="light"]) textarea:focus,:root:not([data-theme="light"]) select:focus{border-color:var(--a1-vivid)}}

/* ---------- status pills ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--muted);font-size:12.5px;font-weight:700;line-height:1.4;
  transition:background-color var(--dur-2),color var(--dur-2);
}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--border-strong);flex:none}
.badge.on{background:var(--success-soft);color:var(--success)}
.badge.on .dot{background:var(--success);box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 22%,transparent)}

/* ---------- ask bar: the assistant's launcher on the tile page ---------- */
/* A search-field-shaped button. agent.js un-hides it (through agent-ui.js, once that has loaded) and keeps data-agent =
   on | off, plus checking while it waits for the hub (and that file) when the last visit found the assistant on. */
.ask-bar{
  display:flex;align-items:center;gap:12px;width:100%;max-width:560px;min-height:48px;margin:16px 0 0;padding:0 18px;
  border:1.5px solid var(--border);border-radius:var(--r-pill);background:var(--glass-strong);color:var(--muted);
  font-size:15px;font-weight:600;text-align:left;box-shadow:var(--sh-1);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2),border-color var(--dur-2);
}
.ask-bar .spark{flex:none;font-size:18px;line-height:1;color:var(--a-ink)}
.ask-bar .ask-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ask-bar:hover{border-color:color-mix(in srgb,var(--a1) 45%,var(--border));box-shadow:var(--sh-2)}
.ask-bar:active{transform:scale(.985)}
.ask-bar[aria-expanded="true"]{border-color:var(--a1);box-shadow:0 0 0 4px color-mix(in srgb,var(--a1) 18%,transparent)}
/* Hold the bar's place while the hub is still answering, so un-hiding it does not push the grid down. agent.js only
   says "checking" when the last visit found the assistant on, so a person without it never gets a blank band, and for
   2.5 s at most, so a slow hub does not leave one that collapses later. */
body.in .hero:has(.ask-bar[data-agent="checking"])::after{content:"";display:block;height:64px}

/* ---------- skeleton shimmer ---------- */
.skel{position:relative;overflow:hidden;background:var(--surface-2);border-radius:var(--r-sm)}
.skel::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 70%,transparent),transparent);
  animation:shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer{to{transform:translateX(100%)}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}