:root{
/* Silgan Dispensing — colours sampled from the brand mark */
--silgan-blue:#2A56AA; /* logo mark cobalt */
--silgan-blue-2:#1f4287; /* deeper for gradients */
--silgan-slate:#4D5F73; /* wordmark grey */
--silgan-slate-2:#7A8794; /* sub-label grey */
--silgan-ink:#1F2D3D; /* heading near-black */
--bg:#0d1c33; --bg2:#070f1d;
--panel:#ffffff; --rail:#f4f7fb; --ink:var(--silgan-ink); --mute:#6c7a8c; --line:#e3e9f1;
/* Metallic palettes — used as gradients */
--bronze:#a26735; --bronze-2:#d49862; --bronze-bg:#fbeede;
--silver:#8893a3; --silver-2:#c4ccd6; --silver-bg:#eef1f5;
--gold:#b9882a; --gold-2:#ecc66a; --gold-bg:#fbf2d6;
--platinum:#3477a7; --platinum-2:#9dc7e3; --platinum-bg:#dff0fb;
--accent:var(--silgan-blue);
--shadow-sm:0 1px 2px rgba(0,15,40,.06);
--shadow:0 1px 2px rgba(0,15,40,.06), 0 8px 24px rgba(0,15,40,.08);
--shadow-lg:0 4px 12px rgba(0,15,40,.10), 0 24px 60px rgba(0,15,40,.16);
--radius:14px;
}
*{box-sizing:border-box}
html,body{
margin:0; padding:0;
font-family:"proxima-nova","Proxima Nova","Helvetica Neue",Helvetica,Arial,sans-serif;
color:var(--ink); background:#eef2f6;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
letter-spacing:.01em;
}
h1,h2,h3,h4{font-family:inherit; letter-spacing:-.01em}
header.topbar{
background:#ffffff; color:var(--silgan-ink);
padding:18px 28px; display:flex; align-items:center; gap:22px;
border-bottom:1px solid var(--line);
box-shadow:0 1px 0 rgba(0,0,0,.02), 0 8px 20px rgba(0,15,40,.04);
position:relative;
}
header.topbar::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
background:linear-gradient(90deg,var(--silgan-blue) 0%, var(--silgan-blue-2) 40%, var(--silgan-blue) 100%);
}
.brand{display:flex; align-items:center; gap:20px}
.brand .logo{height:44px; width:auto; display:block; object-fit:contain}
.brand .logo-fallback{
font-family:"Helvetica Neue",Arial,sans-serif;
font-weight:300; font-size:26px; letter-spacing:2px; color:var(--silgan-slate);
}
.brand .logo-fallback b{font-weight:800; color:var(--silgan-slate); margin-right:8px}
.brand .divider{width:1px; height:40px; background:var(--line)}
.brand .titles h1{
font-size:18px; margin:0; font-weight:700;
color:var(--silgan-ink); letter-spacing:-.005em;
}
.brand .titles .sub{
font-size:11px; margin-top:3px; letter-spacing:.12em; text-transform:uppercase;
color:var(--silgan-slate-2); font-weight:600;
}
/* Mode toggle (practices / guide / KPIs) */
.mode-toggle{display:flex; background:var(--rail); border:1px solid var(--line); border-radius:10px; overflow:hidden; padding:3px}
.mode-toggle button{
background:transparent; color:var(--silgan-slate); border:0;
padding:8px 16px; font-size:12px; font-weight:600; font-family:inherit;
cursor:pointer; border-radius:7px; letter-spacing:.04em; text-transform:uppercase;
transition:all .15s ease;
}
.mode-toggle button:hover{color:var(--silgan-ink)}
.mode-toggle button.active{
background:var(--silgan-blue); color:#fff;
box-shadow:0 1px 2px rgba(42,86,170,.3), 0 2px 6px rgba(42,86,170,.2);
}
/* Edit mode toggle */
.edit-toggle{
display:flex; align-items:center; gap:8px;
padding:8px 14px; background:transparent; border:1px solid var(--line);
border-radius:10px; cursor:pointer; font-family:inherit; font-size:12px;
color:var(--silgan-slate); font-weight:600; letter-spacing:.04em; text-transform:uppercase;
transition:all .15s ease;
}
.edit-toggle:hover{border-color:var(--silgan-slate); color:var(--silgan-ink)}
.edit-toggle.active{background:var(--gold); color:#fff; border-color:var(--gold)}
.edit-toggle .pencil{font-size:14px}
/* Guide view */
.guide{padding:26px 30px 30px}
.guide .head{margin-bottom:20px}
.guide .head h2{margin:0; font-size:26px; font-weight:700; letter-spacing:-.015em; color:var(--silgan-ink)}
.guide .head .crumb{display:block; font-size:11px; font-weight:700; color:var(--silgan-slate-2); text-transform:uppercase; letter-spacing:.16em; margin-bottom:8px}
.guide .intro{font-size:14px; line-height:1.55; color:var(--silgan-slate); max-width:80ch; margin:14px 0 22px}
.guide-levels{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.glvl{
border-radius:12px; padding:20px 22px; background:#fff;
border:1px solid var(--line); position:relative; overflow:hidden;
}
.glvl::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px}
.glvl.bronze::before {background:linear-gradient(180deg,var(--bronze-2),var(--bronze))}
.glvl.silver::before {background:linear-gradient(180deg,var(--silver-2),var(--silver))}
.glvl.gold::before {background:linear-gradient(180deg,var(--gold-2),var(--gold))}
.glvl.platinum::before{background:linear-gradient(180deg,var(--platinum-2),var(--platinum))}
.glvl h3{
margin:0 0 4px; font-size:11px; text-transform:uppercase; letter-spacing:.18em; font-weight:800;
display:flex; align-items:center; gap:8px;
}
.glvl.bronze h3{color:var(--bronze)}
.glvl.silver h3{color:#6c7888}
.glvl.gold h3{color:var(--gold)}
.glvl.platinum h3{color:var(--platinum)}
.glvl .roadmap{
font-size:13.5px; font-weight:600; color:var(--silgan-ink);
line-height:1.4; margin:6px 0 10px;
}
.glvl .what{font-size:13px; line-height:1.5; color:var(--silgan-slate); margin:0 0 12px}
.glvl .how-label{
font-size:10px; text-transform:uppercase; letter-spacing:.14em; font-weight:700;
color:var(--silgan-slate-2); margin-bottom:6px;
}
.glvl ol{margin:0; padding-left:18px; font-size:13px; line-height:1.5; color:var(--silgan-ink)}
.glvl ol li{margin-bottom:5px}
/* Inline editable styling */
[contenteditable="true"]{
outline:none; background:#fff8dc; border-radius:4px;
box-shadow:inset 0 0 0 1px var(--gold-2);
padding:2px 6px; margin:-2px -6px;
transition:box-shadow .15s ease;
}
[contenteditable="true"]:focus{box-shadow:inset 0 0 0 2px var(--gold)}
body.editing .scoring h2, body.editing .scoring .meta{cursor:text}
.edit-banner{
position:fixed; top:14px; left:50%; transform:translateX(-50%);
background:var(--gold); color:#fff; padding:8px 18px; border-radius:99px;
font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
box-shadow:0 4px 14px rgba(185,136,42,.4); z-index:1000;
display:none;
}
body.editing .edit-banner{display:block}
/* KPI Scorecard view */
.kpi{padding:26px 30px 30px}
.kpi .head{margin-bottom:20px}
.kpi .head h2{margin:0; font-size:26px; font-weight:700; letter-spacing:-.015em; color:var(--silgan-ink)}
.kpi .head .crumb{display:block; font-size:11px; font-weight:700; color:var(--silgan-slate-2); text-transform:uppercase; letter-spacing:.16em; margin-bottom:8px}
.kpi .head .meta{font-size:13px; color:var(--silgan-slate); margin-top:6px}
.kpi-cat{margin-top:20px}
.kpi-cat h3{
font-size:11px; text-transform:uppercase; letter-spacing:.16em; font-weight:800;
color:var(--silgan-blue); margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid var(--line);
}
.kpi-table{width:100%; border-collapse:collapse; font-size:13px}
.kpi-table th, .kpi-table td{
padding:10px 12px; text-align:left; border-bottom:1px solid var(--line);
font-variant-numeric:tabular-nums;
}
.kpi-table th{font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--silgan-slate-2); font-weight:700}
.kpi-table td.kpi-name{font-weight:500; color:var(--silgan-ink)}
.kpi-table td.thr{color:var(--silgan-slate); text-align:center; font-weight:500}
.kpi-table td.thr.hit{font-weight:700; color:var(--silgan-ink); background:rgba(42,86,170,.06)}
.kpi-table td.actual{font-weight:700; color:var(--silgan-ink); text-align:right}
.kpi-table td.actual.empty{color:#bcc5d1; font-weight:400; font-style:italic}
.kpi-table th.thrh{text-align:center; width:9%}
.kpi-table td.weight{color:var(--silgan-slate-2); text-align:center}
/* Threshold + weight: text by default, input in edit mode */
.kpi-table .thr-input, .kpi-table .w-input{display:none}
.kpi-table .thr-display, .kpi-table .w-display{display:inline}
body.editing .kpi-table .thr-input, body.editing .kpi-table .w-input{
display:inline-block; width:72px; padding:4px 6px; border:1px solid var(--gold-2);
background:#fff8dc; border-radius:5px; font-family:inherit; font-size:12px; text-align:center;
}
body.editing .kpi-table .thr-display, body.editing .kpi-table .w-display{display:none}
/* Actual: always an input (factories type their values) */
/* Click-to-edit input lives INSIDE the .actual-display span and inherits its look. */
.kpi-table .actual-input{
width:64px; padding:0; border:0; background:transparent;
font-family:inherit; font-size:13px; font-weight:700;
text-align:right; color:var(--silgan-ink); outline:none;
-moz-appearance:textfield;
}
.kpi-table .actual-input::-webkit-outer-spin-button,
.kpi-table .actual-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.kpi-table .actual-input::placeholder{color:#bcc5d1; font-weight:400}
.actual-suffix{margin-left:3px; color:var(--silgan-slate-2); font-weight:600; font-size:12px}
.kpi-table td.actual .actual-display{display:inline-block; min-width:60px; padding:6px 10px; border-radius:7px; font-weight:700; color:var(--silgan-ink); text-align:right; font-variant-numeric:tabular-nums}
.kpi-table td.actual.empty .actual-display{color:#bcc5d1; font-weight:400; font-style:italic}
.kpi-table td.actual .actual-display.editable{cursor:text; transition:background .12s ease, box-shadow .12s ease}
.kpi-table td.actual .actual-display.editable:hover{background:rgba(42,86,170,.06); box-shadow:inset 0 0 0 1px rgba(42,86,170,.25)}
.kpi-table td.actual.empty .actual-display.editable{background:rgba(42,86,170,.05); box-shadow:inset 0 0 0 1px rgba(42,86,170,.18); color:var(--silgan-blue); font-weight:600; font-style:normal}
.kpi-table td.actual.empty .actual-display.editable:hover{background:rgba(42,86,170,.12); box-shadow:inset 0 0 0 1.5px var(--silgan-blue)}
/* When the input inside it is focused, the whole span glows */
.kpi-table td.actual .actual-display:focus-within{
background:#fff !important;
box-shadow:0 0 0 2px var(--silgan-blue), 0 2px 8px rgba(42,86,170,.18) !important;
color:var(--silgan-ink);
}
.actual-prompt{font-size:11.5px; font-weight:700; letter-spacing:.02em}
.kpi-table .lb{color:#bcc5d1; font-size:11px}
.kpi-table .kpi-label{font-weight:500; color:var(--silgan-ink)}
body.editing .kpi-table .kpi-label, body.editing .kpi-cat-name{
background:rgba(255,248,220,.5); border:1px dashed rgba(185,136,42,.4);
border-radius:4px; padding:2px 6px; display:inline-block; cursor:text;
}
body.editing .kpi-table .kpi-label:focus, body.editing .kpi-cat-name:focus{
outline:none; background:#fff8dc; border-color:var(--gold); border-style:solid;
}
/* Admin column (remove/add) */
.kpi-table td.adm{text-align:right}
.kpi-table .kpi-remove{
display:none; background:transparent; border:0; color:#bcc5d1;
cursor:pointer; font-size:18px; line-height:1; padding:2px 6px; border-radius:4px;
}
body.editing .kpi-table .kpi-remove{display:inline-block}
body.editing .kpi-table .kpi-remove:hover{color:#c54a2c; background:rgba(197,74,44,.1)}
.kpi-table .kpi-add-row{display:none}
body.editing .kpi-table .kpi-add-row{display:table-row}
.kpi-table .kpi-add, .kpi-add-cat{
margin:6px 0; padding:8px 14px; background:transparent;
border:1.5px dashed var(--silgan-blue); color:var(--silgan-blue);
font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; border-radius:7px;
transition:all .15s ease;
}
.kpi-table .kpi-add:hover, .kpi-add-cat:hover{background:rgba(42,86,170,.08)}
.kpi-add-cat-row{display:none; margin-top:16px}
body.editing .kpi-add-cat-row{display:block}
/* ====== Network / Global dashboard ====== */
body.network-mode .rail, body.network-mode .right{display:none}
body.network-mode main{grid-template-columns:1fr; padding:22px 28px}
.net{padding:24px 28px 30px}
.net .head{margin-bottom:20px}
.net .head h2{margin:0; font-size:28px; font-weight:700; letter-spacing:-.02em; color:var(--silgan-ink)}
.net .head .crumb{display:block; font-size:11px; font-weight:700; color:var(--silgan-slate-2); text-transform:uppercase; letter-spacing:.16em; margin-bottom:8px}
.net .head .meta{font-size:13px; color:var(--silgan-slate); margin-top:6px}
/* KPI strip across top */
.net-strip{display:grid; grid-template-columns:repeat(6, 1fr); gap:12px; margin-bottom:22px}
.stat-card{
background:#fff; border:1px solid var(--line); border-radius:12px;
padding:16px 18px; display:flex; flex-direction:column; gap:6px;
transition:all .15s ease; cursor:default; position:relative; overflow:hidden;
}
.stat-card:hover{box-shadow:var(--shadow-sm)}
.stat-card .lab{font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--silgan-slate-2); font-weight:700}
.stat-card .val{font-size:32px; font-weight:800; letter-spacing:-.02em; color:var(--silgan-ink); font-variant-numeric:tabular-nums; line-height:1}
.stat-card .val small{font-size:14px; color:var(--silgan-slate-2); font-weight:600; margin-left:3px}
.stat-card .sub{font-size:11px; color:var(--silgan-slate); font-weight:500}
/* Coloured stat cards — gradient bg + white text */
.stat-card.primary, .stat-card.lvl-platinum, .stat-card.lvl-gold,
.stat-card.lvl-silver, .stat-card.lvl-bronze{
color:#fff !important; border:0;
}
.stat-card.primary .lab, .stat-card.lvl-platinum .lab, .stat-card.lvl-gold .lab,
.stat-card.lvl-silver .lab, .stat-card.lvl-bronze .lab{color:rgba(255,255,255,.78) !important}
.stat-card.primary .val, .stat-card.lvl-platinum .val, .stat-card.lvl-gold .val,
.stat-card.lvl-silver .val, .stat-card.lvl-bronze .val,
.stat-card.primary .sub, .stat-card.lvl-platinum .sub, .stat-card.lvl-gold .sub,
.stat-card.lvl-silver .sub, .stat-card.lvl-bronze .sub{color:#fff !important}
.stat-card.primary .val small, .stat-card.lvl-platinum .val small, .stat-card.lvl-gold .val small,
.stat-card.lvl-silver .val small, .stat-card.lvl-bronze .val small{color:rgba(255,255,255,.72) !important}
.stat-card.lvl-platinum{background:linear-gradient(135deg,var(--platinum-2),var(--platinum))}
.stat-card.lvl-gold {background:linear-gradient(135deg,var(--gold-2),var(--gold))}
.stat-card.lvl-silver {background:linear-gradient(135deg,var(--silver-2),var(--silver))}
.stat-card.lvl-bronze {background:linear-gradient(135deg,var(--bronze-2),var(--bronze))}
.stat-card.primary {background:linear-gradient(135deg,var(--silgan-blue),var(--silgan-blue-2))}
/* Two-column block: regional radar + level distribution */
.net-row{display:grid; grid-template-columns:1.4fr 1fr; gap:18px; margin-bottom:22px}
.net-card{
background:#fff; border:1px solid var(--line); border-radius:12px;
padding:20px 22px; box-shadow:var(--shadow-sm);
}
.net-card h3{
margin:0 0 14px; font-size:13px; text-transform:uppercase; letter-spacing:.14em;
font-weight:800; color:var(--silgan-ink); display:flex; align-items:center; justify-content:space-between;
}
.net-card h3 .hint{font-size:10px; letter-spacing:.06em; color:var(--silgan-slate-2); font-weight:600; text-transform:none}
.regional-radar-box{position:relative; height:380px}
/* Distribution bars */
.distro{display:flex; flex-direction:column; gap:12px}
.distro-row{display:grid; grid-template-columns:90px 1fr 50px; align-items:center; gap:12px}
.distro-row .l{font-size:12px; font-weight:700; color:var(--silgan-slate); text-transform:uppercase; letter-spacing:.08em}
.distro-row .bar{height:24px; background:#f1f3f7; border-radius:6px; overflow:hidden; position:relative}
.distro-row .bar .fill{height:100%; border-radius:6px; transition:width .4s ease}
.distro-row .bar .fill.platinum{background:linear-gradient(90deg,var(--platinum-2),var(--platinum))}
.distro-row .bar .fill.gold {background:linear-gradient(90deg,var(--gold-2),var(--gold))}
.distro-row .bar .fill.silver {background:linear-gradient(90deg,var(--silver-2),var(--silver))}
.distro-row .bar .fill.bronze {background:linear-gradient(90deg,var(--bronze-2),var(--bronze))}
.distro-row .bar .fill.none {background:linear-gradient(90deg,#a4b0c0,#6c7a8c)}
.distro-row .n{font-size:14px; font-weight:800; color:var(--silgan-ink); text-align:right; font-variant-numeric:tabular-nums}
/* League table */
.league{width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums}
.league th, .league td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--line)}
.league th{
font-size:10px; text-transform:uppercase; letter-spacing:.14em;
color:var(--silgan-slate-2); font-weight:700; cursor:pointer; user-select:none;
background:var(--rail);
}
.league th:hover{color:var(--silgan-ink)}
.league th.num{text-align:right}
.league td.num{text-align:right; font-weight:700; color:var(--silgan-ink)}
.league td.rank{width:40px; color:var(--silgan-slate-2); font-weight:700; text-align:right; padding-right:18px}
.league td.plant{font-weight:600; color:var(--silgan-ink)}
.league td.plant small{display:block; color:var(--silgan-slate-2); font-size:11px; font-weight:500; margin-top:2px}
.league td .mini-bar{
width:90px; height:6px; background:#f1f3f7; border-radius:3px;
display:inline-block; vertical-align:middle; margin-left:8px; overflow:hidden;
}
.league td .mini-bar .fill{height:100%; border-radius:3px}
.league tr:hover{background:rgba(42,86,170,.03)}
.league .filter-row td{padding:12px; background:var(--rail); border-bottom:0}
.league-filter{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.league-filter button{
padding:6px 12px; background:#fff; border:1px solid var(--line);
border-radius:99px; font-family:inherit; font-size:11px; font-weight:600;
text-transform:uppercase; letter-spacing:.08em; cursor:pointer; color:var(--silgan-slate);
transition:all .12s ease;
}
.league-filter button:hover{border-color:var(--silgan-slate); color:var(--silgan-ink)}
.league-filter button.active{background:var(--silgan-blue); color:#fff; border-color:var(--silgan-blue)}
/* Topic heat map */
.heatmap{
display:grid; gap:2px; font-size:11px;
grid-template-columns:200px repeat(10, 1fr);
}
.heatmap .cell, .heatmap .cell-h, .heatmap .cell-p{
padding:10px 8px; border-radius:4px; text-align:center;
font-variant-numeric:tabular-nums; font-weight:700;
}
.heatmap .cell-h{
background:var(--rail); color:var(--silgan-slate-2); font-size:10px;
text-transform:uppercase; letter-spacing:.06em; font-weight:700;
writing-mode:vertical-rl; transform:rotate(180deg); padding:14px 4px; text-align:center;
}
.heatmap .cell-p{
background:var(--rail); color:var(--silgan-ink); font-size:12px;
text-align:left; padding:10px 12px; font-weight:600;
}
.heatmap .cell-p small{color:var(--silgan-slate-2); font-weight:500; font-size:10px; margin-left:4px}
.heatmap .cell{color:#fff}
.heatmap .cell.none {background:#cdd5e0; color:var(--silgan-slate)}
.heatmap .cell.bronze {background:linear-gradient(135deg,var(--bronze-2),var(--bronze))}
.heatmap .cell.silver {background:linear-gradient(135deg,var(--silver-2),var(--silver)); color:#374151}
.heatmap .cell.gold {background:linear-gradient(135deg,var(--gold-2),var(--gold))}
.heatmap .cell.platinum{background:linear-gradient(135deg,var(--platinum-2),var(--platinum))}
.heatmap .cell:hover{outline:2px solid var(--silgan-blue); cursor:default}
/* KPI category tiles on the Network page */
.kpi-cat-strip{display:grid; grid-template-columns:repeat(5, 1fr); gap:12px}
.kpi-cat-tile{
background:#fff; border:1px solid var(--line); border-radius:12px;
padding:18px 16px 14px; position:relative; overflow:hidden;
transition:all .15s ease;
}
.kpi-cat-tile::before{
content:""; position:absolute; left:0; right:0; top:0; height:5px;
}
.kpi-cat-tile.bronze::before {background:linear-gradient(90deg,var(--bronze-2),var(--bronze))}
.kpi-cat-tile.silver::before {background:linear-gradient(90deg,var(--silver-2),var(--silver))}
.kpi-cat-tile.gold::before {background:linear-gradient(90deg,var(--gold-2),var(--gold))}
.kpi-cat-tile.platinum::before{background:linear-gradient(90deg,var(--platinum-2),var(--platinum))}
.kpi-cat-tile.none::before {background:linear-gradient(90deg,#cdd5e0,#9aa6b8)}
.kpi-cat-tile:hover{box-shadow:var(--shadow-sm); transform:translateY(-1px)}
.kpi-cat-tile .cat-name{
font-size:12px; text-transform:uppercase; letter-spacing:.14em; font-weight:700;
color:var(--silgan-slate); margin-bottom:6px;
}
.kpi-cat-tile .cat-val{
font-size:32px; font-weight:800; color:var(--silgan-ink); letter-spacing:-.02em;
font-variant-numeric:tabular-nums; line-height:1;
}
.kpi-cat-tile .cat-val small{font-size:14px; color:var(--silgan-slate-2); font-weight:600; margin-left:2px}
.kpi-cat-tile .cat-meta{font-size:11px; color:var(--silgan-slate-2); font-weight:500; margin-top:6px}
.kpi-cat-tile .cat-badge{
display:inline-block; margin-top:10px; padding:4px 10px; border-radius:99px;
font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#fff;
}
.kpi-cat-tile.bronze .cat-badge{background:linear-gradient(135deg,var(--bronze-2),var(--bronze))}
.kpi-cat-tile.silver .cat-badge{background:linear-gradient(135deg,var(--silver-2),var(--silver)); color:#374151}
.kpi-cat-tile.gold .cat-badge{background:linear-gradient(135deg,var(--gold-2),var(--gold))}
.kpi-cat-tile.platinum .cat-badge{background:linear-gradient(135deg,var(--platinum-2),var(--platinum))}
.kpi-cat-tile.none .cat-badge{background:#9aa6b8}
@media (max-width:1200px){ .kpi-cat-strip{grid-template-columns:repeat(2, 1fr)} }
/* Leaders / laggards strip */
.leaders{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px}
.leaders .net-card.leader{border-top:3px solid var(--ok, #2c8a4b)}
.leaders .net-card.laggard{border-top:3px solid var(--warn, #c54a2c)}
.leaders ul{list-style:none; margin:0; padding:0}
.leaders ul li{
display:flex; align-items:center; justify-content:space-between;
padding:8px 0; border-bottom:1px solid var(--line); font-size:13px;
}
.leaders ul li:last-child{border-bottom:0}
.leaders ul li .name{font-weight:600; color:var(--silgan-ink)}
.leaders ul li .name small{display:block; color:var(--silgan-slate-2); font-weight:500; font-size:11px}
.leaders ul li .val{font-weight:800; color:var(--silgan-ink); font-variant-numeric:tabular-nums}
@media (max-width:1200px){
.net-strip{grid-template-columns:repeat(3,1fr)}
.net-row{grid-template-columns:1fr}
.heatmap{grid-template-columns:160px repeat(10, 1fr); font-size:10px}
}
/* ====== Roadmap Direction page ====== */
.panel.roadmap-page{padding:30px 32px}
.panel.roadmap-page .head h2{
margin:0; font-size:26px; font-weight:700; letter-spacing:-.015em; color:var(--silgan-ink);
}
.panel.roadmap-page .head h2 .crumb{
display:block; font-size:11px; font-weight:700; color:var(--silgan-slate-2);
text-transform:uppercase; letter-spacing:.16em; margin-bottom:8px;
}
.panel.roadmap-page .head .meta{
font-size:13px; color:var(--silgan-slate); margin-top:8px; line-height:1.5;
max-width:90ch;
}
.rm-grid{
display:grid;
grid-template-columns:260px repeat(4, 1fr);
gap:8px;
background:var(--line);
border:1px solid var(--line);
border-radius:14px;
overflow:hidden;
}
.rm-corner{
background:linear-gradient(135deg, var(--bg) 0%, var(--bg2) 100%);
color:#fff; padding:22px 20px; display:flex; flex-direction:column; justify-content:flex-end;
}
.rm-corner-title{font-size:20px; font-weight:800; letter-spacing:-.01em}
.rm-corner-sub{font-size:12px; opacity:.7; margin-top:4px; line-height:1.4}
.rm-lvl-head{
padding:18px 16px; color:#fff;
display:flex; flex-direction:column; gap:6px;
}
.rm-lvl-head.bronze {background:linear-gradient(155deg,var(--bronze-2),var(--bronze))}
.rm-lvl-head.silver {background:linear-gradient(155deg,var(--silver-2),var(--silver))}
.rm-lvl-head.gold {background:linear-gradient(155deg,var(--gold-2),var(--gold))}
.rm-lvl-head.platinum{background:linear-gradient(155deg,var(--platinum-2),var(--platinum))}
.rm-lvl-pill{
align-self:flex-start; display:inline-block;
background:rgba(255,255,255,.25); padding:3px 10px;
font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
border-radius:99px; color:#fff;
}
.rm-lvl-name{font-size:22px; font-weight:800; letter-spacing:-.01em; margin-top:2px}
.rm-feeling{font-size:13px; font-style:italic; opacity:.95; line-height:1.4; margin-top:4px}
.rm-symptom{font-size:11px; opacity:.85; line-height:1.4; margin-top:2px}
.rm-symptom strong{font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:10px; opacity:.7; margin-right:4px}
.rm-topic{
background:linear-gradient(90deg, var(--silgan-blue) 0%, var(--silgan-blue-2) 100%);
color:#fff;
padding:18px 20px;
display:flex; flex-direction:column; justify-content:center;
}
.rm-topic-name{font-size:15px; font-weight:700; letter-spacing:-.005em; line-height:1.3}
.rm-topic-meta{font-size:10px; opacity:.75; letter-spacing:.06em; text-transform:uppercase; font-weight:600; margin-top:6px}
.rm-cell{
background:#fff; padding:16px 14px;
font-size:13px; line-height:1.5; color:var(--silgan-ink);
transition:background .12s ease;
position:relative; min-height:80px;
}
.rm-cell.bronze {border-top:3px solid var(--bronze)}
.rm-cell.silver {border-top:3px solid var(--silver)}
.rm-cell.gold {border-top:3px solid var(--gold)}
.rm-cell.platinum{border-top:3px solid var(--platinum)}
.rm-cell:hover{background:#fafbfd}
body.editing .rm-cell{
background:rgba(255,248,220,.4); border-style:dashed; cursor:text;
}
body.editing .rm-cell:focus{outline:2px solid var(--gold); outline-offset:-2px; background:#fffaeb}
/* Header trait fields (Foundation/Control/etc., Feeling, Symptom) — yellow dashed edit treatment */
body.editing [data-edit-trait], body.editing [data-edit-rmpage]{
display:inline-block;
background:rgba(255,248,220,.55);
box-shadow:inset 0 0 0 1.5px rgba(185,136,42,.5);
border-radius:4px; padding:1px 6px; margin:-1px -6px; cursor:text;
color:inherit;
}
body.editing [data-edit-trait]:focus, body.editing [data-edit-rmpage]:focus{
outline:none; background:#fff8dc; box-shadow:inset 0 0 0 2px var(--gold);
}
body.editing .rm-lvl-head [data-edit-trait]{
background:#fff; color:var(--silgan-ink) !important;
box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);
font-style:normal;
}
body.editing .rm-lvl-head [data-edit-trait]:focus{
background:#fff8dc; color:var(--silgan-ink) !important;
box-shadow:inset 0 0 0 2px var(--gold), 0 0 0 3px rgba(255,255,255,.4);
}
/* Italic still applies to the "feeling" span itself when not editing — */
/* but when editable, force normal weight & style for readability. */
body.editing .rm-feeling [data-edit-trait]{font-weight:600}
@media (max-width:1100px){
.rm-grid{grid-template-columns:200px repeat(4, 1fr)}
.rm-corner-title{font-size:16px}
.rm-cell{font-size:12px; padding:12px 10px}
}
/* Plants & Users admin */
.add-plant-form{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.add-plant-form input, .add-plant-form select{
padding:9px 12px; border:1px solid var(--line); border-radius:8px;
font-family:inherit; font-size:13px; background:#fff;
}
.add-plant-form input:focus, .add-plant-form select:focus{outline:none; border-color:var(--silgan-blue); box-shadow:0 0 0 3px rgba(42,86,170,.15)}
.primary-btn{
background:linear-gradient(135deg,var(--silgan-blue),var(--silgan-blue-2));
color:#fff; border:0; padding:10px 18px; border-radius:8px;
font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
letter-spacing:.04em; text-transform:uppercase;
box-shadow:0 2px 6px rgba(42,86,170,.25); transition:all .12s ease;
}
.primary-btn:hover{box-shadow:0 4px 12px rgba(42,86,170,.35); transform:translateY(-1px)}
.users-list{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.user-chip{
display:inline-flex; align-items:center; gap:6px;
background:var(--rail); padding:5px 10px; border-radius:99px;
border:1px solid var(--line); font-size:12px;
}
.user-chip .u-name{font-weight:600; color:var(--silgan-ink)}
.user-chip .u-role{
background:var(--silgan-blue); color:#fff; padding:2px 8px;
border-radius:99px; font-size:10px; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
}
.user-chip .user-remove{
background:transparent; border:0; color:#bcc5d1; cursor:pointer;
font-size:14px; line-height:1; padding:0 2px; border-radius:50%;
}
.user-chip .user-remove:hover{color:#c54a2c; background:rgba(197,74,44,.1)}
.user-add{
display:inline-flex; align-items:center; padding:5px 12px;
background:transparent; border:1.5px dashed var(--silgan-blue);
color:var(--silgan-blue); font-family:inherit; font-size:11px; font-weight:600;
cursor:pointer; border-radius:99px; letter-spacing:.04em; text-transform:uppercase;
}
.user-add:hover{background:rgba(42,86,170,.08)}
.plant-remove{
background:transparent; border:1px solid var(--line); color:var(--silgan-slate);
padding:6px 12px; border-radius:7px; font-family:inherit; font-size:11px; font-weight:600;
cursor:pointer; text-transform:uppercase; letter-spacing:.04em;
}
.plant-remove:hover{background:rgba(197,74,44,.06); color:#c54a2c; border-color:#c54a2c}
/* ====== Modal ====== */
.modal-overlay{
position:fixed; inset:0; background:rgba(15,28,51,.55);
display:flex; align-items:center; justify-content:center;
z-index:2000; backdrop-filter:blur(2px); animation:fadeIn .15s ease;
}
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes slideUp { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:translateY(0) } }
.modal{
background:#fff; border-radius:14px; width:480px; max-width:calc(100vw - 40px);
box-shadow:var(--shadow-lg); animation:slideUp .2s ease;
overflow:hidden;
}
.modal-head{
padding:20px 24px 16px; border-bottom:1px solid var(--line);
display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
}
.modal-head h2{
margin:0; font-size:18px; font-weight:700; color:var(--silgan-ink);
letter-spacing:-.005em; line-height:1.3;
}
.modal-close{
background:transparent; border:0; font-size:24px; line-height:1;
color:var(--silgan-slate-2); cursor:pointer; padding:0; width:28px; height:28px;
border-radius:6px; transition:all .12s ease; flex-shrink:0;
}
.modal-close:hover{background:var(--rail); color:var(--silgan-ink)}
.modal-body{padding:20px 24px; display:flex; flex-direction:column; gap:16px}
.modal-body .field{display:flex; flex-direction:column; gap:6px}
.modal-body .field > span{
font-size:11px; text-transform:uppercase; letter-spacing:.14em;
color:var(--silgan-slate); font-weight:700;
}
.modal-body input[type=text], .modal-body input[type=email], .modal-body select{
padding:10px 12px; border:1.5px solid var(--line); border-radius:8px;
font-family:inherit; font-size:14px; background:#fff; color:var(--silgan-ink);
transition:all .12s ease;
}
.modal-body input:focus, .modal-body select:focus{
outline:none; border-color:var(--silgan-blue);
box-shadow:0 0 0 3px rgba(42,86,170,.15);
}
.modal-body select{
appearance:none; -webkit-appearance:none; padding-right:36px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 12px center; cursor:pointer;
}
.modal-body .hint-text{
font-size:12px; color:var(--silgan-slate-2); font-weight:500; margin-top:4px;
font-style:italic;
}
.modal-foot{
padding:14px 24px; background:var(--rail); border-top:1px solid var(--line);
display:flex; gap:10px; justify-content:flex-end;
}
.btn-secondary, .btn-primary{
padding:10px 18px; border-radius:8px; font-family:inherit;
font-size:13px; font-weight:700; cursor:pointer;
letter-spacing:.04em; text-transform:uppercase; transition:all .12s ease;
}
.btn-secondary{background:#fff; border:1px solid var(--line); color:var(--silgan-slate)}
.btn-secondary:hover{border-color:var(--silgan-slate); color:var(--silgan-ink)}
.btn-primary{
background:linear-gradient(135deg,var(--silgan-blue),var(--silgan-blue-2));
color:#fff; border:0;
box-shadow:0 2px 6px rgba(42,86,170,.25);
}
.btn-primary:hover{box-shadow:0 4px 12px rgba(42,86,170,.35); transform:translateY(-1px)}
.kpi-summary{
margin-top:24px; padding:18px 22px; background:linear-gradient(135deg, var(--silgan-blue), var(--silgan-blue-2));
color:#fff; border-radius:12px; display:flex; justify-content:space-between; align-items:center;
}
.kpi-summary .l{font-size:11px; text-transform:uppercase; letter-spacing:.14em; opacity:.75; font-weight:700}
.kpi-summary .v{font-size:32px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.spacer{flex:1}
.plant-pick{
display:flex; gap:10px; align-items:center;
background:var(--rail); padding:7px 12px 7px 14px; border-radius:10px; border:1px solid var(--line);
}
.plant-pick label{font-size:10px; color:var(--silgan-slate-2); text-transform:uppercase; letter-spacing:.12em; font-weight:700}
.plant-pick select{
background:#fff; color:var(--ink); border:1px solid var(--line);
border-radius:7px; padding:7px 26px 7px 10px; font-size:13px; font-weight:500;
font-family:inherit; cursor:pointer;
appearance:none; -webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 9px center;
}
.view-toggle{display:flex; background:var(--rail); border:1px solid var(--line); border-radius:10px; overflow:hidden; padding:3px}
.view-toggle button{
background:transparent; color:var(--silgan-slate); border:0;
padding:8px 16px; font-size:12px; font-weight:600;
font-family:inherit; cursor:pointer; border-radius:7px;
letter-spacing:.04em; text-transform:uppercase;
transition:all .15s ease;
}
.view-toggle button:hover{color:var(--silgan-ink)}
.view-toggle button.active{
background:var(--silgan-blue); color:#fff;
box-shadow:0 1px 2px rgba(42,86,170,.3), 0 2px 6px rgba(42,86,170,.2);
}
.badge{
display:inline-flex; align-items:center; gap:8px;
padding:10px 16px; border-radius:999px; font-size:12px; font-weight:700;
letter-spacing:.06em; text-transform:uppercase; color:#fff;
box-shadow:var(--shadow-sm);
}
.badge::before{
content:""; width:8px; height:8px; border-radius:50%;
background:rgba(255,255,255,.9); box-shadow:0 0 0 2px rgba(255,255,255,.25);
}
.badge.none {background:linear-gradient(135deg,#5b6b80,#3d4858)}
.badge.bronze {background:linear-gradient(135deg,var(--bronze-2),var(--bronze))}
.badge.silver {background:linear-gradient(135deg,var(--silver-2),var(--silver))}
.badge.gold {background:linear-gradient(135deg,var(--gold-2),var(--gold))}
.badge.platinum{background:linear-gradient(135deg,var(--platinum-2),var(--platinum))}
main{display:grid; grid-template-columns:280px 1fr 440px; gap:18px; padding:22px 28px}
.panel{background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
/* Topic rail */
.rail{padding:18px 0 14px}
.rail h2{
font-size:10px; text-transform:uppercase; letter-spacing:.16em;
color:var(--silgan-slate-2); font-weight:700; margin:0 20px 14px;
}
.rail .t{
display:flex; align-items:center; gap:12px; padding:12px 20px;
cursor:pointer; border-left:3px solid transparent;
transition:background .12s ease, border-color .12s ease;
}
.rail .t:hover{background:#f6f9fc}
.rail .t.active{background:linear-gradient(90deg,rgba(42,86,170,.07),transparent 80%); border-left-color:var(--silgan-blue)}
.rail .t.active .name{color:var(--silgan-ink); font-weight:600}
.rail .t .name{flex:1; font-size:13.5px; font-weight:500; color:var(--silgan-slate)}
.rail .t .pct{
font-size:11px; color:var(--silgan-slate); min-width:36px; text-align:right;
font-weight:700; font-variant-numeric:tabular-nums;
}
.rail .t .dot{
width:10px; height:10px; border-radius:50%; background:#d3dae3;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);
}
.rail .t .dot.bronze {background:linear-gradient(135deg,var(--bronze-2),var(--bronze))}
.rail .t .dot.silver {background:linear-gradient(135deg,var(--silver-2),var(--silver))}
.rail .t .dot.gold {background:linear-gradient(135deg,var(--gold-2),var(--gold))}
.rail .t .dot.platinum{background:linear-gradient(135deg,var(--platinum-2),var(--platinum))}
.rail .topic-add{
display:none; margin:6px 14px 12px; padding:8px 12px;
background:transparent; border:1.5px dashed var(--silgan-blue); color:var(--silgan-blue);
font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; border-radius:7px;
width:calc(100% - 28px); transition:all .15s ease;
}
body.editing .rail .topic-add{display:block}
.rail .topic-add:hover{background:rgba(42,86,170,.08)}
body.editing .rail .t .name{
background:rgba(255,248,220,.6); border:1px dashed rgba(185,136,42,.4);
border-radius:4px; padding:1px 6px; cursor:text;
}
body.editing .rail .t .name:focus{outline:none; background:#fff8dc; border-color:var(--gold); border-style:solid}
.rail .group-summary{
margin:18px 18px 6px; padding:18px;
background:linear-gradient(155deg,var(--silgan-blue) 0%, var(--silgan-blue-2) 100%);
color:#fff; border-radius:12px; box-shadow:0 4px 14px rgba(42,86,170,.25);
position:relative; overflow:hidden;
}
.rail .group-summary::before{
content:""; position:absolute; top:-30px; right:-20px; width:120px; height:120px;
background:radial-gradient(circle,rgba(255,255,255,.18) 0%,transparent 60%);
}
.rail .group-summary .lab{
font-size:10px; text-transform:uppercase; letter-spacing:.16em;
color:rgba(255,255,255,.7); font-weight:700;
}
.rail .group-summary .val{
font-size:42px; font-weight:800; margin-top:4px; letter-spacing:-.02em;
font-variant-numeric:tabular-nums; line-height:1;
}
.rail .group-summary .val small{font-size:18px; opacity:.6; font-weight:600; margin-left:2px}
.rail .group-summary .meta{font-size:12px; color:rgba(255,255,255,.85); margin-top:8px; font-weight:500}
.rail .group-summary .meta strong{color:#fff; font-weight:700}
/* Scoring panel */
.scoring{padding:26px 30px 30px}
.scoring .head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:18px; gap:20px}
.scoring h2{
margin:0; font-size:26px; font-weight:700; letter-spacing:-.015em;
color:var(--silgan-ink);
}
.scoring h2 .crumb{
display:block; font-size:11px; font-weight:700; color:var(--silgan-slate-2);
text-transform:uppercase; letter-spacing:.16em; margin-bottom:8px;
}
.scoring .head .meta{font-size:13px; color:var(--silgan-slate)}
.scoring .head .stats{
display:flex; gap:24px; align-items:center; padding:12px 18px;
background:var(--rail); border-radius:10px; border:1px solid var(--line);
}
.scoring .head .stats .s{display:flex; flex-direction:column}
.scoring .head .stats .s .l{font-size:10px; color:var(--silgan-slate-2); text-transform:uppercase; letter-spacing:.14em; font-weight:700}
.scoring .head .stats .s .v{font-size:20px; font-weight:700; color:var(--silgan-ink); font-variant-numeric:tabular-nums; margin-top:2px}
.scoring .levels{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:6px}
.lvl{
border-radius:12px; padding:18px 16px 16px; display:flex; flex-direction:column;
position:relative; overflow:hidden; min-height:280px;
background:#fff; border:1px solid var(--line);
transition:transform .15s ease, box-shadow .15s ease;
}
.lvl::before{
content:""; position:absolute; left:0; right:0; top:0; height:6px;
}
.lvl.bronze::before{background:linear-gradient(90deg,var(--bronze-2),var(--bronze))}
.lvl.silver::before{background:linear-gradient(90deg,var(--silver-2),var(--silver))}
.lvl.gold::before{background:linear-gradient(90deg,var(--gold-2),var(--gold))}
.lvl.platinum::before{background:linear-gradient(90deg,var(--platinum-2),var(--platinum))}
.lvl:hover{box-shadow:var(--shadow-lg); transform:translateY(-1px)}
.lvl h3{
margin:0; font-size:11px; text-transform:uppercase; letter-spacing:.18em; font-weight:800;
display:flex; align-items:center; gap:8px;
}
.lvl h3::before{
content:""; width:18px; height:18px; border-radius:50%; flex-shrink:0;
box-shadow:inset 0 1px 2px rgba(255,255,255,.45), 0 1px 2px rgba(0,0,0,.15);
}
.lvl.bronze h3{color:var(--bronze)} .lvl.bronze h3::before{background:linear-gradient(135deg,var(--bronze-2),var(--bronze))}
.lvl.silver h3{color:#6c7888} .lvl.silver h3::before{background:linear-gradient(135deg,var(--silver-2),var(--silver))}
.lvl.gold h3{color:var(--gold)} .lvl.gold h3::before{background:linear-gradient(135deg,var(--gold-2),var(--gold))}
.lvl.platinum h3{color:var(--platinum)} .lvl.platinum h3::before{background:linear-gradient(135deg,var(--platinum-2),var(--platinum))}
.lvl .pct{
font-size:30px; font-weight:800; margin:10px 0 4px;
font-variant-numeric:tabular-nums; line-height:1; color:var(--silgan-ink); letter-spacing:-.02em;
}
.lvl .pct small{font-size:13px; color:var(--silgan-slate-2); font-weight:600; margin-left:4px}
.lvl ul{list-style:none; padding:0; margin:6px 0 0; flex:1}
.lvl li{
display:flex; gap:10px; padding:7px 0; font-size:12.5px; line-height:1.4;
cursor:pointer; align-items:flex-start;
border-top:1px solid rgba(0,0,0,.04);
transition:background .12s ease;
}
.lvl li:first-child{border-top:0}
.lvl li label{flex:1; cursor:pointer; color:var(--silgan-ink); font-weight:500}
.lvl li.checked label{color:var(--silgan-slate-2); text-decoration:line-through; text-decoration-color:rgba(0,0,0,.25)}
/* Custom checkbox */
.lvl li input{
appearance:none; -webkit-appearance:none;
width:18px; height:18px; flex-shrink:0; margin:1px 0 0;
border:1.5px solid #c7d0db; border-radius:5px;
background:#fff; cursor:pointer; position:relative;
transition:all .15s ease;
}
.lvl li input:hover{border-color:var(--silgan-slate)}
.lvl li input:checked{border-color:transparent}
.lvl.bronze li input:checked{background:linear-gradient(135deg,var(--bronze-2),var(--bronze))}
.lvl.silver li input:checked{background:linear-gradient(135deg,var(--silver-2),var(--silver))}
.lvl.gold li input:checked{background:linear-gradient(135deg,var(--gold-2),var(--gold))}
.lvl.platinum li input:checked{background:linear-gradient(135deg,var(--platinum-2),var(--platinum))}
.lvl li input:checked::after{
content:""; position:absolute; left:5px; top:1px;
width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0;
transform:rotate(45deg);
}
.lvl li input:disabled{cursor:not-allowed; opacity:.4}
/* Status badges shown next to the level name */
.lvl-status{
display:inline-block; margin-left:8px; padding:3px 10px;
border-radius:99px; font-size:9.5px; font-weight:700;
letter-spacing:.08em; text-transform:uppercase;
vertical-align:middle; line-height:1.4;
}
.lvl-status.awarded{background:var(--ok,#2c8a4b); color:#fff}
.lvl-status.pending{background:rgba(0,0,0,.08); color:var(--silgan-slate); font-style:italic; font-weight:600}
/* "Pending" — level isn't contributing yet (because a prior level isn't 100%).
Plants can still tick to record reality. */
.lvl.pending{opacity:.88}
.lvl.pending .pct{color:var(--silgan-slate-2)}
.lvl.pending::after{display:none}
/* Awarded level gets a subtle green outline */
.lvl.awarded{box-shadow:0 0 0 2px rgba(44,138,75,.35), var(--shadow-sm)}
/* Inline next-level progress indicator below the Awarded badge */
.next-progress{
display:flex; align-items:center; gap:6px; flex-wrap:wrap;
margin:6px 0 4px; padding:6px 10px;
background:rgba(44,138,75,.06); border-radius:6px;
font-size:11px; font-weight:600; line-height:1.3;
}
.next-progress .cur{color:var(--ok,#2c8a4b); font-weight:700; letter-spacing:.02em}
.next-progress .arrow{color:var(--silgan-slate-2); font-weight:700; font-size:13px}
.next-progress .next{color:var(--silgan-slate); font-style:italic}
.next-progress .next strong{
color:var(--silgan-ink); font-style:normal; font-weight:800;
font-variant-numeric:tabular-nums;
}
.next-progress .next.silver strong{color:#6c7888}
.next-progress .next.gold strong{color:var(--gold)}
.next-progress .next.platinum strong{color:var(--platinum)}
.next-progress.all-done{
background:linear-gradient(90deg,rgba(58,139,196,.12),rgba(58,139,196,.04));
color:var(--platinum); justify-content:center; font-weight:700;
letter-spacing:.06em; text-transform:uppercase;
}
/* Roadmap Direction one-liner inside each level card */
.lvl-roadmap{
font-size:12px; line-height:1.45; font-weight:600; font-style:italic;
color:var(--silgan-slate); padding:8px 10px; margin:6px 0 4px;
background:rgba(255,255,255,.6);
border-left:3px solid var(--silgan-slate-2); border-radius:4px;
cursor:help;
}
.lvl.bronze .lvl-roadmap{border-left-color:var(--bronze); color:#7a4f23}
.lvl.silver .lvl-roadmap{border-left-color:var(--silver); color:#5e6b7c}
.lvl.gold .lvl-roadmap{border-left-color:var(--gold); color:#86631c}
.lvl.platinum .lvl-roadmap{border-left-color:var(--platinum); color:#1f5a85}
/* Level-trait block (Foundation / Feeling / Symptom / Principles) */
.lvl h3{flex-wrap:wrap; gap:6px}
.lvl-traits{
margin:8px 0 10px; padding:8px 10px;
background:rgba(255,255,255,.55); border-radius:8px;
border:1px solid rgba(0,0,0,.05);
font-size:11px; line-height:1.35; color:var(--silgan-slate);
}
.lvl-foundation{
font-size:9.5px; font-weight:800; letter-spacing:.18em;
text-transform:uppercase; margin-bottom:4px;
}
.lvl.bronze .lvl-foundation{color:var(--bronze)}
.lvl.silver .lvl-foundation{color:#6c7888}
.lvl.gold .lvl-foundation{color:var(--gold)}
.lvl.platinum .lvl-foundation{color:var(--platinum)}
.lvl-feeling{
font-weight:600; font-style:italic; color:var(--silgan-ink);
font-size:12px; line-height:1.35;
}
.lvl-symptom{margin-top:4px; font-size:10.5px; color:var(--silgan-slate)}
.lvl-symptom strong{
font-weight:700; color:var(--silgan-slate-2);
font-size:10.5px; margin-right:2px;
}
ul.lvl-principles{
margin:6px 0 0; padding-left:14px; list-style:disc;
font-size:10.5px; color:var(--silgan-ink); font-weight:500;
}
ul.lvl-principles li{margin-bottom:1px; line-height:1.3}
.lvl li button.el-remove{
display:none; background:transparent; border:0; color:#bcc5d1;
cursor:pointer; font-size:18px; line-height:1; padding:0 2px; margin-left:6px;
border-radius:4px; transition:all .12s ease;
}
body.editing .lvl li button.el-remove{display:inline-block}
body.editing .lvl li button.el-remove:hover{color:#c54a2c; background:rgba(197,74,44,.1)}
body.editing .lvl li label{
background:rgba(255,248,220,.5); border:1px dashed rgba(185,136,42,.4);
border-radius:4px; padding:2px 6px; margin:-2px -6px;
}
body.editing .lvl li label:focus{outline:none; background:#fff8dc; border-color:var(--gold)}
.lvl button.el-add{
display:none; margin-top:10px; padding:8px 12px;
background:transparent; border:1.5px dashed var(--silgan-blue); color:var(--silgan-blue);
font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; border-radius:7px;
transition:all .15s ease; width:100%;
}
body.editing .lvl button.el-add{display:block}
.lvl button.el-add:hover{background:rgba(42,86,170,.08)}
/* Legacy .locked retained for any other consumers; visual softened. */
.lvl.locked{opacity:.88}
.lvl .barwrap{
height:6px; background:rgba(0,0,0,.06); border-radius:99px;
overflow:hidden; margin:8px 0 4px;
}
.lvl .bar{height:100%; border-radius:99px; transition:width .4s cubic-bezier(.4,0,.2,1)}
.lvl.bronze .bar{background:linear-gradient(90deg,var(--bronze-2),var(--bronze))}
.lvl.silver .bar{background:linear-gradient(90deg,var(--silver-2),var(--silver))}
.lvl.gold .bar{background:linear-gradient(90deg,var(--gold-2),var(--gold))}
.lvl.platinum .bar{background:linear-gradient(90deg,var(--platinum-2),var(--platinum))}
/* Right panel — chart + summary */
.right{padding:24px 22px; display:flex; flex-direction:column; gap:18px; background:#fff}
.right h3{
margin:0; font-size:10px; text-transform:uppercase; letter-spacing:.16em;
color:var(--silgan-slate-2); font-weight:700;
}
.chart-box{position:relative; height:400px; margin:-6px 0}
.summary{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.card{
background:var(--rail); border-radius:10px; padding:14px 16px;
border:1px solid var(--line); transition:all .15s ease;
}
.card:hover{box-shadow:var(--shadow-sm)}
.card .l{font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--silgan-slate-2); font-weight:700}
.card .v{
font-size:28px; font-weight:800; margin-top:4px; color:var(--silgan-ink);
letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1;
}
.card .v small{font-size:13px; color:var(--silgan-slate-2); font-weight:500; margin-left:3px}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:11px; color:var(--silgan-slate)}
.legend span{display:inline-flex; align-items:center; gap:6px; font-weight:600}
.legend .sw{
width:12px; height:12px; border-radius:50%;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);
}
.next{
font-size:12.5px; color:var(--silgan-slate); padding:12px 14px;
background:linear-gradient(90deg,rgba(42,86,170,.05),transparent);
border-left:3px solid var(--silgan-blue); border-radius:4px;
line-height:1.45;
}
.next strong{color:var(--silgan-ink); font-weight:700}
footer.foot{
padding:18px 28px; font-size:11px; color:var(--silgan-slate-2); text-align:center;
border-top:1px solid var(--line); background:#fff;
letter-spacing:.02em;
}
footer.foot strong{color:var(--silgan-slate); font-weight:700}
@media (max-width:1180px){
main{grid-template-columns:240px 1fr 380px; padding:16px}
.scoring .levels{grid-template-columns:repeat(2,1fr)}
.scoring{padding:22px}
}
/* ====== Header tidying — prevent wrapping & make it responsive ====== */
header.topbar{ flex-wrap:wrap; row-gap:10px }
header.topbar .brand .titles h1,
header.topbar .brand .titles .sub{ white-space:nowrap }
header.topbar .mode-toggle{ flex-wrap:wrap }
header.topbar .mode-toggle a{ white-space:nowrap }
header.topbar .badge{ white-space:nowrap }
/* Tighter nav padding so all 6 items fit comfortably */
header.topbar .mode-toggle a{ padding:7px 12px !important; font-size:11.5px !important }
/* Plant on top, Year under it, one compact column */
header.topbar .pickers-stack{
display:flex; flex-direction:column; gap:6px;
}
header.topbar .pickers-stack .plant-pick{
padding:5px 10px 5px 12px;
}
header.topbar .pickers-stack .plant-pick select{
padding:5px 24px 5px 8px; font-size:12px; min-width:180px;
}
header.topbar .pickers-stack .plant-pick label{ font-size:9px }
/* User chip nowrap */
header.topbar > div:last-child > div{ white-space:nowrap }
header.topbar > div:last-child a{ white-space:nowrap }
/* Spacer hides on narrow screens so wrap is natural */
@media (max-width:1500px){
header.topbar .spacer{ flex-basis:100%; height:0 }
}
@media (max-width:1300px){
header.topbar{ padding:14px 20px; gap:14px }
header.topbar .brand .titles .sub{ display:none }
header.topbar .brand .titles h1{ font-size:16px }
header.topbar .brand .logo{ height:36px }
header.topbar .mode-toggle a{ padding:6px 10px !important; font-size:11px !important }
}
@media (max-width:900px){
header.topbar{ padding:12px 14px; gap:10px }
header.topbar .brand{ gap:12px }
header.topbar .brand .divider{ display:none }
header.topbar .mode-toggle{ width:100%; justify-content:center }
header.topbar .pickers-stack{ flex-direction:row }
main{ grid-template-columns:1fr !important; padding:14px !important }
.rail{ display:none }
.right{ display:none }
}