/* Delprosa client portal — shared styles (extracted from config.php render_header) */
/* Version 1 — bump this when changing anything to bust browser caches. */

:root{--base:#f9f9f9;--ink:#111111;--muted:#5b6b7f;--accent:#0f9d68;--accent-dark:#0c8557;--heading:#0c2d4b;--line:#e3e9f0;--panel:#f4f7f9;}
*{box-sizing:border-box}
body{margin:0;background:var(--base);color:var(--ink);font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}
.wrap{max-width:760px;margin:0 auto;padding:48px 20px}
.brand{display:flex;align-items:center;gap:24px;margin-bottom:6px}
.brand .logo{width:120px;height:auto}
.brand h1{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:600;margin:0;font-size:clamp(0.875rem,0.875rem + ((1vw - 0.2rem) * 0.542),1.2rem);letter-spacing:.02em}
.tagline{color:var(--muted);font-size:.85rem;margin:2px 0 28px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:0 1px 2px rgba(12,45,75,.04)}
h2{font-family:inherit;font-weight:700;color:var(--heading);letter-spacing:-.01em;margin:0 0 18px}
label{display:block;font-size:.85rem;font-weight:600;margin:14px 0 6px}
input{width:100%;padding:10px 12px;border:1px solid #ccc;border-radius:6px;font-size:1rem}
input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
select,textarea{width:100%;padding:10px 12px;border:1px solid #ccc;border-radius:6px;font-size:1rem}
select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
/* ---- Buttons: ONE shared pill design for the whole portal (2026-11-11) -----
   The dashboard top row is the template. Every action is the same glass pill
   with a coloured icon tile; a button's TYPE only changes its tone class and
   its text, so "Delete run" and "Delete user" are the same red pill:
     (default)   ordinary action - Replay, Rename, Close, Make default ...
     .primary    the commit action of a form - Queue Run, Log In, Save ...
     .alt        copy-type action - Copy set; the dark one
     .danger     destructive - Delete, Remove, Log Out, Abort
   An icon tile goes inside the button:
     <span class="rt-ico ico-sky"><svg .../></span><span>Replay</span>
   Layout classes (.actions, .dlg-actions, .member-side) only position them. */
.btn,.head-tool{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:40px;padding:0 16px;border:1px solid rgba(255,255,255,.95);border-radius:13px;background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(240,244,248,.92));backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(15,23,42,.05),0 2px 0 rgba(15,23,42,.10),0 6px 12px -4px rgba(15,23,42,.22),0 14px 24px -14px rgba(15,23,42,.45);color:var(--heading);cursor:pointer;text-decoration:none;font-family:inherit;font-weight:700;font-size:.8rem;line-height:1;white-space:nowrap;transition:transform .15s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
.btn{margin-top:20px}
.head-tool{margin:0;padding:0 15px 0 8px}
.btn svg,.head-tool svg{flex:none}
.btn:hover,.head-tool:hover,.btn:focus-visible,.head-tool:focus-visible{transform:translateY(-2px);background:linear-gradient(180deg,#fff,#f7fafc);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(15,23,42,.04),0 3px 0 rgba(15,23,42,.09),0 12px 20px -6px rgba(15,23,42,.26),0 22px 34px -18px rgba(15,23,42,.5);color:var(--heading);outline:none}
.btn:active,.head-tool:active{transform:translateY(2px);box-shadow:inset 0 2px 4px rgba(15,23,42,.16),0 1px 0 rgba(15,23,42,.10),0 3px 6px -3px rgba(15,23,42,.2);color:var(--heading)}
.btn:disabled,.btn[disabled],.btn.is-disabled{opacity:.55;cursor:not-allowed;filter:grayscale(40%);transform:none;box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(15,23,42,.08),0 4px 8px -4px rgba(15,23,42,.18)}
.btn.loading{position:relative;color:transparent!important}
.btn.loading::after{content:"";position:absolute;inset:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border:2px solid #0c2d4b;border-radius:50%;border-top-color:transparent;animation:spin .8s linear infinite}
.btn.primary.loading::after,.btn.alt.loading::after{border-color:#fff;border-top-color:transparent}
/* One size down: the in-card pill used on run cards, set rows and dialogs. */
.btn.small{height:32px;padding:0 13px;gap:7px;margin:0;border-radius:11px;font-size:.78rem}
/* Room for the icon tile on the left, matching the top row. */
.btn.small.rt{padding:0 13px 0 6px}
/* Icon-only square pill (your-sets copy/delete) - the tile IS the button. */
.btn.small.set-icon-btn{width:32px;min-width:0;padding:0;gap:0}
.btn.small.set-icon-btn svg{display:block}
/* Icon tile: shared by the top row and every small pill. */
.head-tool-ico,.rt-ico{display:inline-flex;align-items:center;justify-content:center;border-radius:9px;flex:none;color:#fff;box-shadow:0 2px 6px -2px rgba(15,23,42,.45),inset 0 1px 0 rgba(255,255,255,.55);transition:filter .18s ease}
.head-tool-ico{width:26px;height:26px}
.head-tool-ico svg{display:block;width:15px;height:15px}
.rt-ico{width:22px;height:22px;border-radius:7px}
.rt-ico svg{width:12px;height:12px;display:block}
.btn:hover :is(.head-tool-ico,.rt-ico),.btn:focus-visible :is(.head-tool-ico,.rt-ico),.head-tool:hover .head-tool-ico,.head-tool:focus-visible .head-tool-ico{filter:brightness(1.08) saturate(1.15)}
:is(.head-tool-ico,.rt-ico).ico-violet{background:linear-gradient(140deg,#a78bfa,#6366f1)}
:is(.head-tool-ico,.rt-ico).ico-emerald{background:linear-gradient(140deg,#34d399,#0ea5e9)}
:is(.head-tool-ico,.rt-ico).ico-amber{background:linear-gradient(140deg,#fcd34d,#f97316)}
:is(.head-tool-ico,.rt-ico).ico-sky{background:linear-gradient(140deg,#38bdf8,#2563eb)}
:is(.head-tool-ico,.rt-ico).ico-slate{background:linear-gradient(140deg,#94a3b8,#475569)}
:is(.head-tool-ico,.rt-ico).ico-rose{background:linear-gradient(140deg,#fb7185,#dc2626)}
:is(.head-tool-ico,.rt-ico).ico-green{background:linear-gradient(140deg,#4ade80,#0f9d68)}
/* Tone: danger. Glass pill with red text, exactly like Log out on the top row,
   so every destructive button reads the same wherever it sits. */
.btn.danger,.head-tool-red{color:#b91c1c;border-color:rgba(254,202,202,.9)}
.btn.danger:hover,.btn.danger:focus-visible,.head-tool-red:hover,.head-tool-red:focus-visible{background:linear-gradient(180deg,#fff,#fef2f2);color:#7f1d1d}
/* Tone: alt. Dark fill, so a copy action never competes with a submit. */
.btn.alt,.btn.run-black,.head-tool-dark{background:linear-gradient(180deg,#1f2937,#111827);border-color:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -2px 0 rgba(0,0,0,.35),0 2px 0 rgba(0,0,0,.35),0 6px 12px -4px rgba(15,23,42,.45),0 14px 24px -14px rgba(15,23,42,.6)}
.btn.alt:hover,.btn.alt:focus-visible,.btn.run-black:hover,.btn.run-black:focus-visible,.head-tool-dark:hover,.head-tool-dark:focus-visible{background:#000;border-color:rgba(255,255,255,.18);color:#fff}
/* Tone: primary. Filled green for the one commit button of a form. */
.btn.primary{background:linear-gradient(180deg,#12b077,#0c8557);border-color:rgba(255,255,255,.4);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.22),0 2px 0 rgba(6,78,52,.55),0 6px 12px -4px rgba(12,133,87,.5),0 14px 24px -14px rgba(12,133,87,.7)}
.btn.primary:hover,.btn.primary:focus-visible{background:linear-gradient(180deg,#0f9d68,#0a6d47);border-color:rgba(255,255,255,.45);color:#fff}
/* Demo attention star (2026-11-12): a guest account gets a small yellow star
   in the button's top right corner, twinkling, on the buttons worth trying -
   How this works, each run's Replay and Results, and each set's Edit pill.
   A signed-in client never carries the class, and reduced-motion holds it
   still and fully bright. */
@keyframes demoStarTwinkle{
  0%,100%{opacity:.45;transform:scale(.78)}
  45%{opacity:1;transform:scale(1.15)}
}
.demo-star::after{content:"";position:absolute;top:3px;right:4px;width:11px;height:11px;pointer-events:none;animation:demoStarTwinkle 1.9s ease-in-out infinite;background:radial-gradient(circle at 50% 50%,#fff 0 14%,rgba(219,234,254,.98) 26%,rgba(147,197,253,.85) 42%,rgba(96,165,250,.35) 62%,rgba(59,130,246,0) 78%),linear-gradient(to bottom,rgba(147,197,253,0) 40%,rgba(191,219,254,.9) 46%,#fff 50%,rgba(191,219,254,.9) 54%,rgba(147,197,253,0) 60%),linear-gradient(to right,rgba(147,197,253,0) 40%,rgba(191,219,254,.9) 46%,#fff 50%,rgba(191,219,254,.9) 54%,rgba(147,197,253,0) 60%);filter:drop-shadow(0 0 3px rgba(147,197,253,.95)) drop-shadow(0 0 7px rgba(59,130,246,.6))}
.demo-star:nth-child(2)::after{animation-delay:.3s}
.demo-star:nth-child(3)::after{animation-delay:.6s}
.demo-star:nth-child(4)::after{animation-delay:.9s}
/* Room for the star so it never sits on the label. */
.btn.demo-star{padding-right:22px}
.btn.demo-star.small.rt{padding-right:19px}
.head-tool.demo-star{padding-right:21px}
@media (prefers-reduced-motion: reduce){.demo-star::after{animation:none;opacity:1;transform:none}}
a{color:var(--ink)}
.error{background:#fdecea;color:#a1261f;border:1px solid #f5c6c2;border-radius:6px;padding:10px 14px;font-size:.9rem;margin-bottom:16px}
.msg{background:#e9f5ec;color:#1d6a35;border:1px solid #bfe3c9;border-radius:6px;padding:10px 14px;font-size:.9rem;margin-bottom:16px}
.field-msg{color:#a1261f;font-size:.8rem;margin:4px 0 10px}
.file{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:8px;margin-bottom:10px;background:#fff;text-decoration:none;transition:border-color .15s}
.file:hover{border-color:var(--accent)}
.file .name{font-weight:600;font-size:.95rem}
.file .meta{color:var(--muted);font-size:.78rem;margin-top:2px}
.file .open{color:var(--accent);font-weight:600;font-size:.85rem;white-space:nowrap}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:14px 20px;background:transparent}
.topbar .who{font-size:.85rem;color:var(--muted)}
.topbar a{font-size:.85rem;text-decoration:none;font-weight:600}
/* Public demo banner (2026-11-12): shown when the visitor is not signed in. */
.demo-banner{max-width:1000px;margin:0 auto 16px;padding:10px 14px;border:1px solid #fde68a;background:#fefce8;color:#713f12;border-radius:10px;font-size:.85rem}
.demo-banner a{color:#713f12;font-weight:600;text-decoration:underline}
/* Guest dashboard: the only remaining notice, a small yellow tag under the client name. */
.demo-flag{display:inline-block;padding:1px 7px;border:1px solid #fde68a;background:#fefce8;color:#713f12;border-radius:6px;font-size:.72rem;font-weight:600;letter-spacing:.01em}
/* Guest dashboard splash (2026-11-12): what this read-only demo is, shown above
   the sample run when nobody is signed in. Dark band, same palette as the site. */
.demo-splash{position:relative;overflow:hidden;max-width:1000px;margin:0 auto 18px;padding:26px 28px;border-radius:18px;color:#e8f0f6;background:linear-gradient(135deg,#0a1f30 0%,#0c2d4b 100%);box-shadow:0 14px 34px -22px rgba(10,31,48,.75)}
.demo-splash::after{content:"";position:absolute;right:-70px;top:-90px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(15,157,104,.38),transparent 70%);pointer-events:none}
.demo-splash-kicker{display:flex;align-items:center;gap:8px;margin:0 0 9px;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6ee7b7}
.demo-splash-kicker span.dot{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.18)}
.demo-splash h2{color:#fff;font-size:1.3rem;margin:0 0 10px;letter-spacing:-.01em}
.demo-splash p{margin:0;max-width:820px;color:#c3d3df;font-size:.92rem;line-height:1.62}
.demo-splash-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.demo-splash-actions .btn{margin-top:0}
.empty{color:var(--muted);font-style:italic;padding:10px 0}
.note{font-size:.82rem;color:var(--muted);margin-top:18px}
.note code{background:#f1f1f1;padding:1px 5px;border-radius:4px}
.menu{display:flex;gap:16px;align-items:center;margin-bottom:24px;font-size:.85rem}
.menu a{text-decoration:none;font-weight:600}
.menu .sep{color:var(--muted)}
/* Sign-in card: the read-only portal link sits level with the page heading. */
.login-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.login-head h2{margin:0}
.login-head .btn{margin:0}
table{width:100%;border-collapse:collapse;font-size:.9rem;margin:12px 0}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:600}
tr:hover td{background:var(--panel)}
h3{font-family:inherit;font-weight:600;color:var(--heading);margin:28px 0 10px;font-size:1.15rem}
.inline-form{display:inline}
.inline-form input[type=password],.inline-form input[type=text]{width:180px;padding:6px 8px;font-size:.85rem;display:inline-block}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.field-grid label{grid-column:1/-1}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px}
.grid-3 label{grid-column:1/-1}
.file-list{margin:6px 0 0;padding:0;list-style:none}
.file-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 10px;border-bottom:1px solid var(--line);font-size:.88rem}
.file-list .meta{color:var(--muted);font-size:.78rem}
/* Header mirrors https://delprosa.com/ (2026-11-11): white bar, logo mark plus
   wordmark and strap line on row one, page links on row two. */
/* Header mirrors https://delprosa.com/ (2026-11-12): ONE row - logo mark,
   wordmark and strap line on the left, page links on the right, level with the
   logo. Same container width, padding, gaps and text sizes as the WordPress
   theme so the two headers share a layout. This block is the single header for
   the whole portal (render_site_nav() in config.php) - change it here only. */
.site-head{background:transparent;border:0;padding:min(2.5rem,3vw);color:#111;position:relative;z-index:50}
.site-head-inner{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:min(1.5rem,2vw)}
.site-brand{display:flex;align-items:center;gap:1.5rem;text-decoration:none;color:#111;min-width:0}
.site-brand-logo{width:120px;height:auto;display:block;flex:none}
.site-brand-text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.site-brand-name{font-family:"Inter",sans-serif;font-size:clamp(.875rem,.7666rem + .542vw,1.2rem);font-weight:600;line-height:1.15;color:#111}
.site-brand-tag{font-size:.9rem;font-weight:400;line-height:1.5;color:#636363}
.site-nav{display:flex;align-items:center;flex-wrap:wrap;gap:20px;font-size:.9rem;font-weight:500}
.site-nav>a{display:inline-block;text-decoration:none;color:#111;background:none;border:0;padding:0;font-family:inherit;font-size:.9rem;font-weight:500;line-height:1.2}
.site-nav>a.current{color:#111}
.site-nav>a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
/* Client identity at the top of the portal: a logo space beside the client name. */
.client-id{display:flex;align-items:center;gap:14px;min-width:0}
.client-id-logo{width:64px;height:64px;border-radius:10px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.client-id-logo img{max-width:100%;max-height:100%;display:block}
.client-id-logo.is-empty{border-style:dashed;color:#9aa8b6;font-size:.62rem;text-align:center;line-height:1.15;background:var(--panel);padding:4px}
.client-id-text{min-width:0}
.client-id-kicker{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.client-id-name{font-size:1.05rem;font-weight:700;color:var(--heading);line-height:1.2}
.client-id-sub{font-size:.8rem;color:var(--muted);margin-top:2px}

/* Narrow screens: the header row simply wraps, exactly as the WordPress header
   does, so the page links drop below the brand and read from the left edge. */
@media (max-width:640px){
  .wrap{padding:24px 16px}
}

@keyframes spin{to{transform:rotate(360deg)}}