/* KRC2 — /html/css/site.css (v4)
   Tight middle workspace fills all space, hidden menu until identified,
   stealth π icon with metallic reveal.
*/

:root{
  --hdr-h: 64px; --ftr-h: 46px; --gap:8px;
  --bg-deep:#160e1b; --bg-panel:#221428; --ink:#e1fff7; --muted:#a6cfc4;
  --accent:#b585ff; --accent-2:#7e57c2; --line:#3a2642; --ok:#06d6a0; --warn:#ffd166; --bad:#ef476f;
  --shadow:0 8px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg-deep);color:var(--ink);font:16px/1.5 Arial, sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.hide{display:none!important}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}
.m0{margin:0}
.p0{padding:0}

/* Header / Footer */
.topbar{position:fixed;inset:0 0 auto 0;height:var(--hdr-h);background:linear-gradient(180deg,rgba(34,20,40,.98),rgba(34,20,40,.92));border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 8px;z-index:1000;box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:10px}
.logo-img{height:40px;width:auto;border-radius:8px;box-shadow:var(--shadow)}
.brand h1{font-size:1.05rem;letter-spacing:.02em;margin:0}

/* Top nav is hidden until identified */
.topnav{display:none;align-items:center;gap:6px;flex-wrap:wrap}
body[data-identified="1"] .topnav{display:flex}
.topnav details{position:relative}
.topnav summary{list-style:none;cursor:pointer;user-select:none}
.topnav summary::-webkit-details-marker{display:none}
.topnav summary{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:#2b1a33;color:var(--ink)}
.topnav details[open] summary{background:#34203d}
.menu{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;max-width:320px;background:var(--bg-panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;display:grid;gap:4px;z-index:1001}
.menu a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;color:var(--ink)}
.menu a:hover{background:#2e1b36;text-decoration:none}
.menu .tag{margin-left:auto;font-size:.75rem;color:var(--muted)}
@media (max-width:800px){.brand h1{display:none}.topnav{gap:4px}.menu{min-width:180px}}

/* Workspace — minimal gutters; output fills ALL space */
.workspace{position:fixed;inset:calc(var(--hdr-h) + 4px) 4px calc(var(--ftr-h) + 4px) 4px;display:flex;overflow:hidden}
.workspace .container{flex:1;display:flex;max-width:none;width:100%;padding:0;min-width:0;min-height:0}
.card{background:var(--bg-panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:10px;margin:0}
.output-full{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
#out{flex:1;min-height:0;white-space:pre-wrap;word-break:break-word;overflow:auto;background:#1c1121;border:1px solid var(--line);border-radius:10px;padding:10px;margin:0}

/* Footer */
.site-footer{position:fixed;inset:auto 0 0 0;height:var(--ftr-h);background:linear-gradient(0deg,rgba(34,20,40,.98),rgba(34,20,40,.92));border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 8px;z-index:1000;box-shadow:var(--shadow)}

/* jQuery UI */
.ui-widget{font-family:inherit;font-size:1rem}
.ui-widget-content{background:var(--bg-panel);border-color:var(--line);color:var(--ink)}
.ui-widget-header{background:#2b1a33;border-color:var(--line);color:var(--ink)}
.ui-button{border-radius:12px}
body.is-busy{cursor:progress}
._krc2_scrim{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:999}

/* Cookie banner */
.cookie-banner{position:fixed;left:8px;right:8px;bottom:calc(var(--ftr-h) + 8px);background:var(--bg-panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:10px;display:flex;align-items:center;gap:10px;z-index:1200}
.cookie-banner .cookie-logo{height:32px;width:auto;border-radius:6px}
.cookie-banner .cookie-text{flex:1;color:var(--ink)}
.cookie-banner .cookie-actions{display:flex;align-items:center;gap:8px}
@media (max-width:600px){.cookie-banner{flex-direction:column;align-items:flex-start;}}

/* Helpers for floating dialogs */
.float{position:absolute}
.drag-handle{cursor:move}

/* Role badges (optional) */
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.75rem;border:1px solid var(--line)}
.badge.super{background:linear-gradient(90deg,#b585ff,#7e57c2);color:#0b0610}
.badge.admin{background:#2b1a33;color:var(--ink)}
.badge.roaster{background:#163a35}
.badge.barista{background:#3a2d16}

/* Stealth π icon with metallic reveal */
.pi-icon{opacity:.12;filter:grayscale(1) contrast(.8);font-weight:700;letter-spacing:.02em;transition:opacity .2s ease, filter .2s ease, transform .2s ease;user-select:none}
.pi-icon:hover{opacity:.2}
.pi-icon.pi-hot{opacity:1;filter:none;transform:translateY(-1px);
  background:linear-gradient(90deg,#9ea7ad,#ffffff,#9ea7ad,#6f7680);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 12px rgba(181,133,255,.25);
}