:root{
    --ink:#0b1220; --muted:#5b6472; --soft:#8a94a3;
    --bg:#ffffff; --panel:#ffffff;
    --border:#E5E9F0; --shadow:0 6px 18px rgba(15,23,42,.08);

    --blue:#2563eb; --green:#16a34a; --amber:#f59e0b;
    --outline:#ffb020;
    --todoFill:#aebacf;      /* neutral for TODO tiles in ring */
    --track:#eef2f7;

    --ringSize:min(96vmin, 1080px);
    --nodeW: 340px;
    --gapY: 10px;

    --panelRaise: 88px;         /* lift border up to header */
    --panelContentOffset: 72px; /* extra inner top padding so content sits lower */

    /* Header + progress fill gradient: purple/lilac → amber → orange (no green) */
    --brandGrad: linear-gradient(90deg, #a78bfa 0%, #c084fc 16%, #f59e0b 60%, #f97316 84%, #ea580c 100%);
  }
  *{box-sizing:border-box}
  html{ scroll-padding-top: 96px; }
  body{ margin:0; color:var(--ink); font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial; background:var(--bg) }

  header{
    position:sticky; top:0; z-index:50; padding:1rem 1.2rem;
    background: var(--brandGrad);
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.2);
    display:flex; align-items:center; justify-content:space-between; gap:12px
  }
  header .brand{ display:flex; align-items:center; gap:.65rem; font-weight:800; letter-spacing:.2px; white-space:nowrap; color:#fff }
  header .brand i{ width:10px; height:10px; border-radius:50%; background:#ffffff; opacity:.9; box-shadow:0 0 0 4px rgba(255,255,255,.22) }
  header .kpis{ display:flex; gap:12px; color:#fff; font-size:13px; flex-wrap:wrap; opacity:.95 }
  header .kpis b{ color:#fff }
  header .safety{ color:#fff; font-size:12px; opacity:.95 }
  header a{ color:#fff; text-decoration:underline; text-underline-offset:3px }

  main{ max-width:1400px; margin:0 auto; padding:88px 16px 56px }
  .panel{
    width:100%; display:grid; place-items:center; gap:16px;
    background:var(--panel); border:1px solid var(--border); border-radius:16px;
    padding: calc(28px + var(--panelContentOffset)) 18px 22px;
    box-shadow: var(--shadow); margin-top: calc(-1 * var(--panelRaise));
  }
  .stage{ width:var(--ringSize); aspect-ratio:1/1; position:relative; display:grid; place-items:center; margin-top: 0 }

  .logo-wrap{ position:absolute; inset:0; display:grid; place-items:center; }
  .logo-base{ position:relative; z-index:2; width:min(60vmin,640px); max-width:90%; filter: drop-shadow(0 10px 24px rgba(10,20,40,.10)) }

  /* inner cavity fills only — behind the PNG */
  .tileFill{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:0; height:0; background: currentColor; opacity:0; transition: opacity .25s ease;
    z-index:1; clip-path: polygon(50% 50%);
  }
  .tileFill.done    { color: var(--green) }
  .tileFill.current { color: var(--blue) }
  .tileFill.paused  { color: var(--amber) }
  .tileFill.todo    { color: var(--todoFill) }

  /* arms */
  svg#arms{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3 }
  svg#arms line{ stroke:#d1d5db; stroke-width:2 }
  svg#arms circle{ fill:#eef2f7; stroke:#cbd5e1; stroke-width:2 }

  /* Cards (same as v18: done=green, current=blue, todo/paused=orange) */
  .node{
    position:absolute; left:50%; top:50%;
    width:var(--nodeW); min-width:var(--nodeW); max-width:calc(100vw - 40px);
    border:1px solid rgba(0,0,0,.14); border-radius:14px; padding:14px 16px;
    color:#0f172a;
    box-shadow: 0 6px 16px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.35);
    display:grid; grid-template-columns:auto 1fr; column-gap:12px; row-gap:6px;
    transform: translate(-50%, -50%);
    transition: box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
    z-index:4;
    background: linear-gradient(135deg, #e0eaf6, #cddcf0); /* fallback, overridden by JS */
  }
  .node:hover   { box-shadow: 0 0 0 3px var(--outline), 0 6px 16px rgba(15,23,42,.12) }

  .node.on-dark{ color:#ffffff }
  .node.on-dark .desc, .node.on-dark .meta{ color: rgba(255,255,255,.92) }
  .node.on-dark a{ color:#e8f0ff } .node.on-dark a:hover{ color:#ffffff }
  .node .idx{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
               font-weight:800; font-size:13px; border:1px solid rgba(255,255,255,.55);
               background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.72)); color:#0b1220 }
  .node.on-dark .idx{ color:#07121f }

  .node .title{ font-weight:800; font-size:15px; align-self:center }
  .node .desc{ grid-column:1 / -1; color:#334155; font-size:13px }
  .node .meta{ grid-column:1 / -1; display:flex; align-items:center; gap:10px; color:#475569; font-size:12px }
  .node .meta a{ color:#1f4fe0; text-decoration:none } .node .meta a:hover{ text-decoration:underline }
  .state{ font-weight:700 }
  .state.done{ color:#16a34a } .state.current{ color:#2563eb } .state.paused{ color:#b45309 } .state.todo{ color:#334155 }

  /* Mobile */
  @media (max-width: 980px){
    .stage{ width:100%; aspect-ratio:auto }
    .node{ position:static; transform:none; width:100%; margin-top:10px; min-width: 0 }
    svg#arms{ display:none }
  }

  .metaPanel{ width:100%; display:flex; gap:12px; align-items:center; justify-content:center; color:#64748b; font-size:13px; min-height:24px; text-align:center }
  .metaPanel b{ color:#0b1220 }

  .progress{ width:100%; height:8px; background:var(--track); border-radius:999px; border:1px solid #e7edf6 }
  .progress i{ display:block; height:100%; width:0%; background:var(--brandGrad); border-radius:inherit; transition:width .6s ease; box-shadow:0 0 10px rgba(234,88,12,.18) }

  footer{ color:#8c97a6; font-size:12px; text-align:center; margin-top:12px }

  header .actions{ display:flex; gap:.75rem; align-items:center; margin-left:auto }
  header .actions a{ text-decoration:underline; text-underline-offset:3px; font-weight:800 }
  header .actions .btnPrimary{
    text-decoration:none; font-weight:800; padding:.55rem 1rem; border-radius:999px;
    background:#ffffff; color:#0b1220; box-shadow:0 6px 18px rgba(15,23,42,.18);
    border:1px solid rgba(255,255,255,.75);
  }
  header .actions .btnPrimary:focus{ outline:3px solid rgba(255,255,255,.6); outline-offset:2px }
  @media (max-width: 560px){
    header .actions a{ font-weight:700 }
    header .actions .btnPrimary{ padding:.5rem .9rem }
  }


/* ===== Extracted from mockup v19 ===== */


  .btnRow.oneLine{display:flex;flex-wrap:nowrap;gap:.75rem;align-items:center;white-space:nowrap}
  .btnPrimary,.btnSecondary{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.1rem;
    border-radius:9999px;font-weight:700;text-decoration:none;flex:0 0 auto;white-space:nowrap}
  .btnPrimary{background:#111;color:#fff;border:1px solid #111}
  .btnSecondary{border:1px solid #222;color:#111;background:transparent}
  .btnPrimary:hover,.btnSecondary:hover{transform:translateY(-1px)}
  .btnWithIcon svg{width:18px;height:18px;display:inline-block;vertical-align:middle;flex:0 0 auto}
  @media (prefers-color-scheme: dark){
    .btnSecondary{border-color:#444;color:#fff}
    .btnPrimary{background:#fff;color:#111;border-color:#fff}
  }


/* Header grid base */
header{ display:grid !important; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; }
header .actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
header .actions .brandStatus{ order:-1; font-size:18px; line-height:1.25; color:#fff; }
@media (min-width:768px){ header .actions .brandStatus{ font-size:20px; } }
header .actions .brandStatus .line{ display:block; white-space:nowrap; }
header .actions .brandStatus .line + .line{ margin-top:2px; }

header .brand{ white-space:normal !important; display:flex; align-items:center; gap:.65rem; }
header .brand .brandText{ display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:.75rem; }
header .brand .projectName .line, header .brand .slogan .line{ display:block; white-space:nowrap; }
header .brand .projectName{ font-weight:800; font-size:16px; line-height:1.0; }
@media (min-width:768px){ header .brand .projectName{ font-size:20px; } }
header .brand .slogan{ font-weight:800; }
@media (min-width:768px){ header .brand .slogan{ font-size:18px; } }

:root{ --headerLogo: 40px; } @media (min-width:768px){ :root{ --headerLogo: 48px; } }
header .brand i{ width:var(--headerLogo) !important; height:var(--headerLogo) !important; border-radius:50% !important; background:url("../img/BTEN_Avatar_256.png") center/contain no-repeat !important; box-shadow:none !important; opacity:1 !important; }

/* Cards: bold date + clickable title */
.node .meta time{ font-weight:700; }
.node .title a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.node .title a:hover{ text-decoration:none; }

/* Mobile: thicker header, stacked layout, vertical phases */
@media (max-width:768px){
  header{
    grid-template-columns: 1fr;
    grid-template-areas: "brand" "actions";
    padding: 18px 12px !important;
    row-gap: 14px !important;
  }
  header .brand{ grid-area: brand; }
  header .actions{ grid-area: actions; justify-self: stretch; }
  header .actions .brandStatus{ flex-basis:100%; }
  header .actions .btnRow{ width:100%; display:flex; gap:10px; flex-wrap:wrap; }
  header .actions .btnRow a{ flex:1 1 auto; min-width: 44%; }
  /* Center stage: hide logo & arcs; stack nodes */
  .logo-wrap, .logo-base, #arms{ display:none !important; }
  .stage{ width:100% !important; position:static !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:12px !important; margin-top:8px !important; }
  .stage .node{ position:static !important; left:auto !important; top:auto !important; transform:none !important; margin:4px auto !important; width:min(92vw, 420px) !important; }
}
@media (max-width:380px){
  header{ padding: 16px 10px !important; }
  header .brand .projectName{ font-size:15px; }
  header .brand .slogan{ font-size:15px; }
  header .actions .btnRow a{ min-width:100%; }
}