: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-topic.depth-2{padding-left:36px; background:linear-gradient(90deg, rgba(35,82,162,.78) 0%, rgba(35,82,162,.68) 100%)}
.rm-topic.depth-2 .rm-topic-name{font-size:13.5px; font-weight:600}
.rm-topic.depth-3{padding-left:54px; background:linear-gradient(90deg, rgba(35,82,162,.58) 0%, rgba(35,82,162,.5) 100%)}
.rm-topic.depth-3 .rm-topic-name{font-size:12.5px; font-weight:500}
.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}
}
/* Size of the Prize page */
.sop-page .head{display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap}
.sop-page .stats{display:flex; gap:12px}
.sop-page .stats .s{
background:linear-gradient(135deg,#fff,#f7f9fc); border:1px solid var(--line);
border-radius:10px; padding:10px 16px; min-width:140px;
}
.sop-page .stats .s .l{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--silgan-slate-2); font-weight:700}
.sop-page .stats .s .v{font-size:22px; font-weight:800; color:var(--silgan-blue); line-height:1.2; margin-top:2px}
.sop-admin .add-plant-form .th-field{background:#f7f9fc}
.sop-table-wrap{padding:0; overflow-x:auto}
table.sop-table{width:100%; border-collapse:collapse; font-size:13px}
table.sop-table th, table.sop-table td{padding:8px 10px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap}
table.sop-table th.c-kpi, table.sop-table td.c-kpi{text-align:left}
table.sop-table thead th{background:#f4f6fa; font-weight:700; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:#4D5F73}
table.sop-table .sec{text-align:center; border-left:1px solid var(--line); padding:6px 10px}
table.sop-table .sec-pl{background:linear-gradient(135deg,#dff0fb,#b4d7ea); color:#1f5378}
table.sop-table .sec-target{background:linear-gradient(135deg,#fbf2d6,#ecc66a); color:#8a6418}
table.sop-table .sec-ult{background:linear-gradient(135deg,#dff0fb,#9dc7e3); color:#1f5378}
table.sop-table .sec-battery{background:#f4f6fa}
table.sop-table .sop-subheaders th{font-size:10px; background:#fafbfd; border-left:1px solid var(--line)}
table.sop-table tbody tr:hover{background:#fafbfd}
table.sop-table td.c-num{font-variant-numeric:tabular-nums}
table.sop-table td.c-num[data-editable="1"]{cursor:cell}
table.sop-table td.c-num[data-editable="1"]:hover{background:#fff8dc; box-shadow:inset 0 0 0 1px var(--gold-2)}
table.sop-table td.c-empty[data-editable="1"]::before{content:'·'; color:#cbd5e1}
table.sop-table td.c-empty[data-editable="1"]:hover::before{content:'+ add'; color:#8a6418; font-size:11px; font-weight:600}
table.sop-table .cell-unit{color:#8893a3; font-size:11px; margin-left:3px}
/* number column + unit column line up: fixed left-aligned unit slot */
table.sop-table td.c-num:not(.c-money) .cell-display{display:inline-block; text-align:right}
table.sop-table td.c-num:not(.c-money) .cell-unit{display:inline-block; width:48px; margin-left:5px; text-align:left}
table.sop-table .kpi-name{font-weight:600; color:var(--silgan-slate)}
table.sop-table .kpi-unit{display:none}
table.sop-table input.sop-cell-input{
width:100%; padding:4px 6px; border:2px solid var(--silgan-blue); border-radius:4px;
font-family:inherit; font-size:13px; font-variant-numeric:tabular-nums;
text-align:right; background:#fff; box-shadow:0 0 0 3px rgba(42,86,170,.15);
}
table.sop-table tfoot td{border-top:2px solid var(--silgan-slate); background:#f7f9fc; font-weight:600; font-size:13px}
table.sop-table tfoot td.c-money strong{font-size:15px; color:var(--silgan-blue)}
/* Horizontal "battery" gauge (current → ultimate goal, with 2026 target marker) */
.battery{
position:relative; box-sizing:border-box;
width:140px; height:22px; margin-right:7px;
border:2px solid #6b7686; border-radius:5px;
background:#eef1f6; display:inline-block; overflow:visible; vertical-align:middle;
}
/* positive terminal nub on the right end */
.battery::after{
content:""; position:absolute; right:-6px; top:50%; transform:translateY(-50%);
width:5px; height:11px; background:#6b7686; border-radius:0 2px 2px 0;
}
/* charge level */
.battery .bat-fill{
position:absolute; top:0; left:0; bottom:0;
background:#8893a3;
border-radius:3px 0 0 3px; transition:width .25s ease;
}
.battery.battery-hit{border-color:#2c8a4b}
.battery.battery-hit::after{background:#2c8a4b}
.battery.battery-hit .bat-fill{background:#2c8a4b}
.battery.battery-miss{border-color:#c54a2c}
.battery.battery-miss::after{background:#c54a2c}
.battery.battery-miss .bat-fill{background:#d97a2a}
.battery .bat-target{position:absolute; top:-3px; bottom:-3px; width:2px; background:#1F2D3D; border-radius:1px; transform:translateX(-1px); z-index:2}
.battery-empty{color:#cbd5e1; font-size:13px}
.battery.battery-none{opacity:.4}
.stats .l .unit-note{font-weight:500; opacity:.6; font-size:.82em; margin-left:3px}
.sop-page .c-actions{text-align:center}
/* Top Five Hoshin Projects */
.sop-hoshin .sop-hoshin-list{list-style:none; margin:10px 0 4px; padding:0; display:flex; flex-direction:column; gap:8px}
.sop-hoshin-list li{display:flex; align-items:center; gap:10px}
.sop-hoshin-num{flex:0 0 24px; width:24px; height:24px; border-radius:50%; background:var(--silgan-blue,#1F4E79); color:#fff;
font-size:13px; font-weight:700; display:inline-flex; align-items:center; justify-content:center}
.sop-hoshin-input{flex:1; padding:8px 10px; border:1px solid #cdd5e0; border-radius:6px; font-size:14px; background:#fff}
.sop-hoshin-input:focus{outline:none; border-color:var(--silgan-blue,#1F4E79); box-shadow:0 0 0 2px rgba(31,78,121,.15)}
.sop-hoshin-input[readonly]{background:#f4f6fa; color:#475569}
.sop-hoshin-status{display:inline-block; min-height:16px; font-size:12px; color:#2c8a4b; font-weight:600}
.sop-page .c-actions .t-btn{padding:2px 6px; font-size:12px}
.sop-uploads h3 .hint{display:inline-block; margin-left:8px; color:var(--silgan-slate-2); font-weight:600; font-size:10px; letter-spacing:.04em; text-transform:uppercase}
.sop-upload-form{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.sop-upload-form input[type=file]{flex:1; min-width:240px}
.sop-upload-status{font-size:12px; color:var(--silgan-slate-2)}
.sop-upload-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px}
.sop-upload-list li{
display:flex; align-items:center; gap:12px; padding:8px 12px;
background:#f7f9fc; border:1px solid var(--line); border-radius:8px; font-size:13px;
}
.sop-upload-list li .sop-file-link{flex:1; color:var(--silgan-blue); text-decoration:none; font-weight:600}
.sop-upload-list li .sop-file-link:hover{text-decoration:underline}
.sop-upload-list li .sop-file-meta{color:var(--silgan-slate-2); font-size:11px}
.sop-upload-empty{color:var(--silgan-slate-2); font-style:italic}
/* Plant certification award badge (per-plant overall, on /practices rail) */
.plant-award{
display:inline-flex; align-items:center; gap:6px;
margin-top:8px; padding:5px 11px; border-radius:99px;
font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
color:#fff;
}
.plant-award .award-star{font-size:13px; line-height:1}
.plant-award.award-none{background:#e2e6ec; color:#6b7480}
.plant-award.award-bronze {background:linear-gradient(135deg,#d49862,#a26735)}
.plant-award.award-silver {background:linear-gradient(135deg,#c4ccd6,#8893a3); color:#2a323d}
.plant-award.award-gold {background:linear-gradient(135deg,#ecc66a,#b9882a)}
.plant-award.award-platinum{background:linear-gradient(135deg,#9dc7e3,#3477a7)}
.plant-award-hint{margin-top:5px; font-size:11px; line-height:1.35; color:var(--silgan-slate-2)}
/* Threshold-editing form on /admin/topics */
.threshold-form{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.threshold-form .th-field{
display:inline-flex; align-items:center; gap:6px;
padding:6px 10px; border-radius:10px;
background:#f7f9fc; border:1px solid var(--line); font-size:13px; font-weight:600;
}
.threshold-form .th-field input{
width:64px; padding:6px 8px; border:1px solid var(--line); border-radius:6px;
font-family:inherit; font-size:13px; background:#fff; text-align:right;
}
.threshold-form .th-field input:focus{outline:none; border-color:var(--silgan-blue); box-shadow:0 0 0 3px rgba(42,86,170,.15)}
.threshold-form .th-bronze {background:linear-gradient(135deg,#fbeede,#f7dfc1); border-color:#d49862}
.threshold-form .th-silver {background:linear-gradient(135deg,#eef1f5,#dde2e9); border-color:#c4ccd6}
.threshold-form .th-gold {background:linear-gradient(135deg,#fbf2d6,#f4e29a); border-color:#ecc66a}
.threshold-form .th-platinum{background:linear-gradient(135deg,#dff0fb,#bfdef0); border-color:#9dc7e3}
.threshold-form .th-status{font-size:12px; color:var(--silgan-slate-2); margin-left:8px}
/* 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}
.plant-edit{
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; margin-right:6px;
}
.plant-edit:hover{background:rgba(35,82,162,.06); color:var(--silgan-blue); border-color:var(--silgan-blue)}
/* ====== 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.none {background:#d3dae3; opacity:.6}
.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 .t.depth-2{padding-left:38px}
.rail .t.depth-2 .name{font-size:13px}
.rail .t.depth-3{padding-left:56px}
.rail .t.depth-3 .name{font-size:12.5px; color:var(--silgan-slate-2)}
.rail .t.inactive{cursor:default; opacity:.55}
.rail .t.inactive:hover{background:transparent}
.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);}
/* 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 }
}
/* ===== Best Practices ===== */
.bp-search{display:flex; gap:8px; align-items:center; margin:0 0 18px}
.bp-search input[type=search]{flex:1; padding:10px 12px; border:1px solid #cdd5e0; border-radius:8px; font-size:14px}
.bp-search input[type=search]:focus{outline:none; border-color:var(--silgan-blue,#1F4E79); box-shadow:0 0 0 2px rgba(31,78,121,.15)}
.bp-clear{font-size:12px; color:var(--silgan-slate,#64748b); text-decoration:none; padding:6px 8px}
.bp-layout{display:grid; grid-template-columns:240px 1fr; gap:20px; align-items:start}
.bp-cats{background:#f7f9fc; border:1px solid var(--line,#e2e8f0); border-radius:10px; padding:12px}
.bp-cats-head{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--silgan-slate,#64748b); margin-bottom:8px}
.bp-cats ul{list-style:none; margin:0 0 10px; padding:0}
.bp-cats li{display:flex; align-items:center; justify-content:space-between; border-radius:7px; padding:1px}
.bp-cats li.active{background:var(--silgan-blue,#1F4E79)}
.bp-cats li.active > a{color:#fff}
.bp-cats li > a{flex:1; display:block; padding:7px 9px; font-size:13px; font-weight:600; color:#1F2D3D; text-decoration:none; border-radius:7px}
.bp-cat-tools{display:flex; gap:2px; padding-right:4px}
.bp-cats li:hover .bp-cat-tools{display:flex}
.bp-x, .ex-c-tools button{background:none; border:0; cursor:pointer; color:inherit; opacity:.6; font-size:12px; padding:2px 4px}
.bp-cat-tools button{cursor:pointer; font-size:12px; line-height:1; padding:4px 7px; border:1px solid #cdd5e0; border-radius:6px; background:#fff; color:#334155; opacity:1}
.bp-cats li.active .bp-cat-tools button{background:rgba(255,255,255,.85); border-color:transparent}
.bp-cat-tools button:hover, .bp-x:hover, .ex-c-tools button:hover{opacity:1}
.bp-add-cat{display:block; box-sizing:border-box; width:100%; text-align:center; background:#fff; border:1px dashed #cbd5e1; border-radius:7px; padding:8px; font-size:12px; font-weight:600; color:var(--silgan-blue,#1F4E79); cursor:pointer}
.bp-main .net-card, .ex-main .net-card{margin-bottom:16px}
.bp-add-entry, .ex-add-post{display:flex; flex-direction:column; gap:8px}
.bp-add-entry input, .bp-add-entry textarea, .ex-add-post input, .ex-add-post textarea,
.bp-entry-edit input, .bp-entry-edit textarea, .ex-post-edit input, .ex-post-edit textarea, .ex-desc-edit textarea{
width:100%; padding:9px 11px; border:1px solid #cdd5e0; border-radius:7px; font-size:14px; font-family:inherit; box-sizing:border-box}
.bp-add-entry .primary-btn, .ex-add-post .primary-btn{align-self:flex-start}
.bp-entry h3{margin:0 0 6px; font-size:17px}
.bp-body{font-size:14px; line-height:1.55; color:#334155}
.bp-atts{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:5px}
.bp-atts li{display:flex; align-items:center; gap:8px; font-size:13px}
.bp-atts a{color:var(--silgan-blue,#1F4E79); text-decoration:none; font-weight:600}
.bp-att-size{color:#94a3b8; font-size:11px}
.bp-entry-admin{display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line,#eef2f7); flex-wrap:wrap}
.bp-upload input[type=file]{display:none}
.bp-upload-btn{cursor:pointer; font-size:12px; font-weight:600; color:var(--silgan-blue,#1F4E79); border:1px solid #cdd5e0; border-radius:6px; padding:6px 10px}
.bp-upload input[type=file]:valid + .bp-upload-btn{background:#eef5ff}
.t-btn{background:#fff; border:1px solid #cdd5e0; border-radius:6px; padding:6px 10px; font-size:12px; font-weight:600; cursor:pointer; color:#334155}
.t-btn:hover{border-color:var(--silgan-blue,#1F4E79)}
.bp-results{display:flex; flex-direction:column; gap:8px}
.bp-results h3{margin:0 0 6px}
.bp-result{display:block; padding:11px 14px; background:#fff; border:1px solid var(--line,#e2e8f0); border-radius:9px; text-decoration:none; color:inherit}
.bp-result:hover{border-color:var(--silgan-blue,#1F4E79); background:#f7faff}
.bp-result-cat{display:block; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--silgan-slate,#64748b)}
.bp-result-title{display:block; font-size:15px; font-weight:600; color:#1F2D3D; margin-top:2px}
.bp-result-snip{display:block; font-size:13px; color:#64748b; margin-top:3px}
.bp-empty{color:#94a3b8; font-size:13px}
/* ===== Excellence Teams ===== */
.ex-tabs{display:flex; gap:6px; margin:0 0 18px; flex-wrap:wrap}
.ex-tabs a{padding:9px 18px; border-radius:8px; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
text-decoration:none; color:#334155; background:#f1f5f9; border:1px solid var(--line,#e2e8f0)}
.ex-tabs a.active{background:var(--silgan-blue,#1F4E79); color:#fff; border-color:var(--silgan-blue,#1F4E79)}
.ex-layout{display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start}
.ex-blog h3, .ex-contacts h3{margin:0 0 12px; font-size:15px}
.ex-desc-edit, .ex-post-edit{display:flex; flex-direction:column; gap:8px}
.ex-post{padding:14px 0; border-bottom:1px solid var(--line,#eef2f7)}
.ex-post:last-child{border-bottom:0}
.ex-post h4{margin:0 0 2px; font-size:16px}
.ex-post-date{font-size:11px; color:#94a3b8; margin-bottom:6px}
.ex-post-actions, .ex-desc-edit-btn{margin-top:10px}
.ex-contact-list{list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:10px}
.ex-contact-list li{position:relative; padding:10px 12px; background:#f7f9fc; border:1px solid var(--line,#e2e8f0); border-radius:9px}
.ex-c-name{font-weight:700; font-size:14px}
.ex-c-role{font-size:12px; color:#64748b}
.ex-c-email{font-size:12px; color:var(--silgan-blue,#1F4E79); text-decoration:none; word-break:break-all}
.ex-c-tools{position:absolute; top:8px; right:8px; display:flex; gap:2px}
.ex-contact-list li:hover .ex-c-tools{display:flex}
/* ===== Excellence Teams — attachments + resources ===== */
.ex-side .net-card{margin-bottom:16px}
.ex-side h3{margin:0 0 12px; font-size:15px}
.ex-post-imgs{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.ex-post-imgs figure{position:relative; margin:0}
.ex-post-imgs img{max-width:180px; max-height:150px; border-radius:8px; border:1px solid var(--line,#e2e8f0); display:block; object-fit:cover}
.ex-post-imgs .bp-x{position:absolute; top:5px; right:5px; background:rgba(255,255,255,.92); border-radius:50%; line-height:1}
.ex-resource-list{list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:6px}
.ex-resource-list li{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px;
padding:7px 9px; background:#f7f9fc; border:1px solid var(--line,#e2e8f0); border-radius:8px}
.ex-resource-list a{color:var(--silgan-blue,#1F4E79); text-decoration:none; font-weight:600; word-break:break-word}
.ex-resource-list a:hover{text-decoration:underline}
.ex-resource-add{display:flex; flex-direction:column; gap:6px}
.ex-resource-add .bp-add-cat{width:100%; text-align:center}
.ex-resource-add .bp-upload{display:block}
/* ===== Teams — add/rename, new-post files, modal, rich text ===== */
.ex-tab-add{padding:9px 16px; border-radius:8px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
background:#fff; color:var(--silgan-blue,#1F4E79); border:1px dashed #cbd5e1; cursor:pointer}
.ex-rename-team{margin-left:10px; vertical-align:middle; font-size:11px; padding:4px 8px}
.ex-add-post-files{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.ex-newfile-names{font-size:12px; color:#64748b}
.ex-modal{position:fixed; inset:0; background:rgba(15,23,42,.45); display:flex; align-items:center; justify-content:center; z-index:1000}
.ex-modal-card{background:#fff; border-radius:12px; padding:22px; width:min(420px,92vw); box-shadow:0 24px 64px rgba(0,0,0,.28)}
.ex-modal-card h3{margin:0 0 16px; font-size:18px}
.ex-modal-card form{display:flex; flex-direction:column; gap:12px}
.ex-modal-card label{display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:700; color:#475569; letter-spacing:.02em}
.ex-modal-card input{padding:9px 11px; border:1px solid #cdd5e0; border-radius:7px; font-size:14px}
.ex-modal-card input:focus{outline:none; border-color:var(--silgan-blue,#1F4E79); box-shadow:0 0 0 2px rgba(31,78,121,.15)}
.ex-modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:6px}
.rte-toolbar{display:flex; gap:4px; flex-wrap:wrap; margin-bottom:8px}
.rte-toolbar button{min-width:32px; padding:6px 9px; border:1px solid #cdd5e0; border-radius:6px; background:#fff; cursor:pointer; font-size:13px; color:#334155}
.rte-toolbar button:hover{border-color:var(--silgan-blue,#1F4E79)}
.rte-toolbar input[type=color]{width:34px; height:32px; padding:2px; border:1px solid #cdd5e0; border-radius:6px; background:#fff; cursor:pointer}
.rte-editor{min-height:120px; border:1px solid #cdd5e0; border-radius:8px; padding:11px 13px; font-size:14px; line-height:1.55; background:#fff; overflow-y:auto}
.rte-editor:focus{outline:none; border-color:var(--silgan-blue,#1F4E79); box-shadow:0 0 0 2px rgba(31,78,121,.15)}
.rte-content h3, .rte-content h4, .rte-content p, .rte-content ul, .rte-content ol{margin:0 0 8px}
/* ===== Practice evidence ===== */
.el-evidence-toggle{margin-left:8px; font-size:11px; font-weight:600; color:var(--silgan-blue,#1F4E79);
background:#fff; border:1px solid #cdd5e0; border-radius:6px; padding:3px 8px; cursor:pointer; white-space:nowrap}
.el-evidence-toggle:hover{border-color:var(--silgan-blue,#1F4E79)}
li.el-evidence-panel{list-style:none; background:#f7f9fc; border:1px solid var(--line,#e2e8f0);
border-radius:8px; padding:10px 12px; margin:2px 0 8px 28px}
.ev-files{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px}
.ev-file{display:inline-flex; align-items:center; gap:5px; font-size:13px; background:#fff;
border:1px solid var(--line,#e2e8f0); border-radius:6px; padding:4px 8px}
.ev-file a{color:var(--silgan-blue,#1F4E79); text-decoration:none; font-weight:600}
.ev-x{background:none; border:0; color:#94a3b8; cursor:pointer; font-size:14px; line-height:1; padding:0 2px}
.ev-x:hover{color:#c54a2c}
.ev-empty{font-size:12px; color:#94a3b8}
.ev-upload{display:inline-block}
.ev-upload .bp-upload-btn{font-size:11px; padding:5px 9px}
/* Compact nav: Admin dropdown */
.nav-admin{position:relative; align-self:center}
.nav-admin summary{
list-style:none; cursor:pointer; user-select:none;
padding:8px 14px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
color:var(--silgan-slate); border:1px solid var(--line); border-radius:9px; background:var(--rail);
display:inline-flex; align-items:center; gap:6px;
}
.nav-admin summary::-webkit-details-marker{display:none}
.nav-admin summary .caret{font-size:10px; opacity:.7}
.nav-admin[open] summary, .nav-admin.active summary{color:var(--silgan-ink); border-color:var(--silgan-blue)}
.nav-admin[open] summary .caret{transform:rotate(180deg)}
.nav-admin .nav-admin-menu{
position:absolute; right:0; top:calc(100% + 6px); z-index:300;
background:#fff; border:1px solid var(--line); border-radius:10px;
box-shadow:0 14px 34px rgba(0,15,40,.14); padding:6px; min-width:170px;
display:flex; flex-direction:column; gap:2px;
}
.nav-admin .nav-admin-menu a{
padding:9px 12px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
color:var(--silgan-slate); text-decoration:none; border-radius:7px; white-space:nowrap;
}
.nav-admin .nav-admin-menu a:hover{background:var(--rail); color:var(--silgan-ink)}
.nav-admin .nav-admin-menu a.active{background:var(--silgan-blue); color:#fff}
/* ===== Best Practices — file library ===== */
.bp-upload-main{display:inline-block; margin-bottom:14px}
.bp-upload-main .bp-upload-btn{font-size:13px; padding:9px 14px}
ul.bp-files{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.bp-file-item{background:#fff; border:1px solid var(--line,#e2e8f0); border-radius:10px; padding:12px 14px}
.bp-file-link{display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--silgan-blue,#1F4E79); font-weight:700; font-size:15px}
.bp-file-link:hover .bp-file-name{text-decoration:underline}
.bp-file-meta{display:block; font-size:11px; color:#94a3b8; margin-top:2px}
.bp-file-note{font-size:13px; color:#475569; margin-top:8px; line-height:1.5}
.bp-file-actions{display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap}
.bp-replace{display:inline-block}
.bp-replace input[type=file]{display:none}
.bp-replace .t-btn{display:inline-block}
.bp-result-title small{font-weight:500; color:#94a3b8; margin-left:6px}
.ex-modal-card textarea:focus{outline:none; border-color:var(--silgan-blue,#1F4E79); box-shadow:0 0 0 2px rgba(31,78,121,.15)}
/* Best Practices — sub-categories + file ordering */
.bp-subcats-wrap{padding:0; background:none; border:0}
ul.bp-subcats{list-style:none; margin:1px 0 4px 0; padding:0}
ul.bp-subcats > li{border-radius:7px}
ul.bp-subcats > li > a{padding-left:24px !important; font-weight:500; font-size:12.5px}
ul.bp-subcats > li > a::before{content:"\21B3"; position:absolute; left:8px; opacity:.4}
ul.bp-subcats > li{position:relative}
.bp-ord{padding:5px 9px; font-size:13px; line-height:1}
/* ===== Best Practices — Card library ===== */
.bp-toolbar{display:flex; align-items:center; gap:12px; margin:0 0 14px; flex-wrap:wrap}
.bp-toolbar .bp-search{flex:1; min-width:300px; margin:0}
.bp-toolbar-right{display:flex; gap:8px; align-items:center}
.bp-pending-btn{background:#fff8e6; color:#9a6a00; border:1px solid #f0c869; border-radius:8px;
padding:8px 14px; font-size:12px; font-weight:700; cursor:pointer}
.bp-pending-btn:hover{background:#fff0c8}
.bp-submit-btn{padding:9px 16px}
.bp-my-pending{background:#f7f9fc; border:1px solid var(--line,#e2e8f0); border-radius:8px; padding:8px 12px;
margin-bottom:12px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:12px}
.bp-my-pending > strong{font-size:11px; color:var(--silgan-slate,#64748b); text-transform:uppercase; letter-spacing:.05em}
.bp-my-pending a{display:inline-flex; align-items:center; gap:6px; padding:5px 9px; background:#fff;
border:1px solid var(--line,#e2e8f0); border-radius:6px; color:#334155; text-decoration:none}
.bp-mp-code{font-weight:700; color:var(--silgan-blue,#1F4E79); font-size:11px}
.bp-mp-title{font-weight:600}
.bp-mp-status{font-size:11px; padding:2px 7px; border-radius:99px; font-weight:700; text-transform:uppercase; letter-spacing:.05em}
.bp-badge{display:inline-block; font-size:10px; font-weight:700; padding:2px 7px; border-radius:99px;
text-transform:uppercase; letter-spacing:.06em; vertical-align:middle; margin-left:6px}
.bp-mand{background:#fde2e2; color:#a83434}
.bp-inno{background:#e2effd; color:#1F4E79}
.bp-st-pending {background:#fff3cf; color:#7a5900}
.bp-st-approved {background:#d8f0df; color:#22663a}
.bp-st-rejected {background:#fbd9d9; color:#9a2828}
.bp-card-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px}
.bp-card-tile{background:#fff; border:1px solid var(--line,#e2e8f0); border-radius:10px; padding:14px;
cursor:pointer; transition:border-color .15s, box-shadow .15s}
.bp-card-tile:hover{border-color:var(--silgan-blue,#1F4E79); box-shadow:0 4px 12px rgba(31,78,121,.08)}
.bp-card-tile-head{display:flex; align-items:center; gap:6px; margin-bottom:6px}
.bp-card-code{font-size:11px; font-weight:700; color:var(--silgan-blue,#1F4E79); letter-spacing:.05em}
.bp-card-tile-title{margin:0 0 6px; font-size:15px; line-height:1.3}
.bp-card-tile-snip{font-size:12.5px; color:#475569; line-height:1.45; margin:0 0 8px}
.bp-card-tile-meta{font-size:11px; color:#94a3b8}
/* Modals */
.bp-modal{position:fixed; inset:0; background:rgba(15,23,42,.5); display:flex; align-items:flex-start;
justify-content:center; z-index:1000; padding:40px 16px; overflow-y:auto}
.bp-modal-card{background:#fff; border-radius:12px; padding:24px; width:min(720px,100%);
box-shadow:0 24px 64px rgba(0,0,0,.28); position:relative}
.bp-modal-card.bp-submit-card, .bp-modal-card.bp-view-card{width:min(880px,100%)}
.bp-modal-x{position:absolute; top:10px; right:12px; background:none; border:0; font-size:24px;
line-height:1; cursor:pointer; color:#94a3b8}
.bp-modal-x:hover{color:#1F2D3D}
.bp-modal-head{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px}
.bp-modal-head h3{margin:0}
.bp-modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:14px; padding-top:14px;
border-top:1px solid var(--line,#eef2f7)}
/* Submit form */
#bpSubmitForm label{display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:700;
color:#475569; letter-spacing:.02em; text-transform:uppercase}
#bpSubmitForm input[type=text], #bpSubmitForm input[type=email], #bpSubmitForm input:not([type]),
#bpSubmitForm input[type=tel], #bpSubmitForm select, #bpSubmitForm textarea{
padding:9px 11px; border:1px solid #cdd5e0; border-radius:7px; font-size:14px;
font-family:inherit; font-weight:400; color:#1F2D3D; text-transform:none; letter-spacing:0}
#bpSubmitForm input:focus, #bpSubmitForm select:focus, #bpSubmitForm textarea:focus{
outline:none; border-color:var(--silgan-blue,#1F4E79); box-shadow:0 0 0 2px rgba(31,78,121,.15)}
#bpSubmitForm input[type=file]{padding:6px 0; border:0; font-size:13px}
.bp-form-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-bottom:12px}
.bp-f-wide{display:flex; flex-direction:column; gap:4px; margin-bottom:12px}
.bp-fset{border:1px solid var(--line,#e2e8f0); border-radius:9px; padding:12px 14px; margin-bottom:14px}
.bp-fset legend{font-size:11px; font-weight:700; color:var(--silgan-slate,#64748b); text-transform:uppercase;
letter-spacing:.06em; padding:0 6px}
.bp-benefits{display:flex; flex-wrap:wrap; gap:8px 18px}
.bp-benefits label{flex-direction:row; align-items:center; gap:6px; font-weight:600; text-transform:none;
letter-spacing:0; font-size:13px; color:#334155}
.bp-pics{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.bp-pic{flex-direction:column; gap:6px}
.bp-pic > span{font-size:11px; color:var(--silgan-slate,#64748b); font-weight:700; text-transform:uppercase}
/* View card (poster) */
.bp-view-head{margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line,#eef2f7)}
.bp-view-code{font-size:12px; color:var(--silgan-blue,#1F4E79); font-weight:700; letter-spacing:.06em}
.bp-view-head h2{margin:4px 0 6px; font-size:22px}
.bp-view-meta{font-size:12px; color:#64748b}
.bp-reject{margin-top:8px; padding:8px 10px; background:#fff5f5; border:1px solid #f5c6c6;
border-radius:8px; color:#9a2828; font-size:13px}
.bp-pics-view{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0}
.bp-pics-view figure{margin:0; background:#f7f9fc; border:1px solid var(--line,#e2e8f0); border-radius:8px;
padding:8px; text-align:center}
.bp-pics-view figcaption{font-size:11px; font-weight:700; color:var(--silgan-slate,#64748b);
text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px}
.bp-pics-view img{max-width:100%; max-height:280px; border-radius:6px; display:block; margin:0 auto}
.bp-pic-empty{padding:40px 0; color:#cbd5e1; font-size:13px}
.bp-sec{margin:12px 0}
.bp-sec h5{margin:0 0 4px; font-size:11px; font-weight:700; color:var(--silgan-slate,#64748b);
text-transform:uppercase; letter-spacing:.06em}
.bp-sec p{margin:0; font-size:14px; line-height:1.55; color:#334155}
.bp-bn{display:inline-block; padding:3px 9px; font-size:12px; background:#eef5ff;
color:var(--silgan-blue,#1F4E79); border-radius:99px; margin-right:5px; font-weight:600}
.bp-results-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px 16px; margin-top:4px}
.bp-results-grid > div{font-size:13px; color:#334155}
.bp-doc-list{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:5px}
.bp-doc-list a{color:var(--silgan-blue,#1F4E79); text-decoration:none; font-weight:600; font-size:13px}
.bp-view-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:18px; padding-top:14px;
border-top:1px solid var(--line,#eef2f7); flex-wrap:wrap}
/* Pending list */
.bp-pending-list{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px}
.bp-pending-list a{display:flex; gap:10px; align-items:center; padding:9px 12px; background:#f7f9fc;
border:1px solid var(--line,#e2e8f0); border-radius:8px; text-decoration:none; color:#1F2D3D}
.bp-pending-list a:hover{border-color:var(--silgan-blue,#1F4E79); background:#fff}
/* Instructions */
.bp-instr{font-size:13.5px; line-height:1.55; color:#334155}
.bp-instr ol{padding-left:20px; margin:8px 0}
.bp-instr li{margin:4px 0}
/* ===== Practice Documents page ===== */
.pd-page .head{margin-bottom:14px}
.pd-toolbar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 16px}
.pd-toolbar select{padding:8px 11px; border:1px solid #cdd5e0; border-radius:7px; font-size:14px; min-width:240px}
.pd-counts{font-size:12px; color:var(--silgan-slate,#64748b)}
.pd-counts strong{color:#1F2D3D}
.pd-tier{margin:18px 0 24px}
.pd-tier > h3{margin:0 0 10px; padding:8px 12px; border-radius:8px; font-size:14px; letter-spacing:.05em; text-transform:uppercase}
.pd-tier-bronze > h3{background:linear-gradient(90deg,#fff5e6,#ffe8c2); color:#7a4400}
.pd-tier-silver > h3{background:linear-gradient(90deg,#f3f4f6,#dde2e8); color:#374151}
.pd-tier-gold > h3{background:linear-gradient(90deg,#fff8d8,#f5d97a); color:#5a4500}
.pd-tier-platinum > h3{background:linear-gradient(90deg,#e7eef7,#b6c8df); color:#1F4E79}
.pd-tier-count{display:inline-block; margin-left:8px; padding:1px 9px; border-radius:99px; background:rgba(255,255,255,.6); font-size:11px}
.pd-subtopic{margin:14px 0 6px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--silgan-slate,#64748b)}
.pd-card{background:#fff; border:1px solid var(--line,#e2e8f0); border-radius:10px; padding:14px 16px; margin-bottom:10px}
.pd-card.pd-no-doc{background:#fbfbfb; border-style:dashed}
.pd-card > header{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px}
.pd-card > header h4{margin:0; font-size:15px; flex:1}
.pd-dot{width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0}
.pd-dot.on {background:#22c55e}
.pd-dot.off{background:#cbd5e1}
.pd-meta{font-size:11px; color:var(--silgan-slate,#64748b)}
.pd-gen-btn{background:#eef5ff; border-color:#cbd9ee}
.pd-sec{margin:10px 0 0; padding-top:10px; border-top:1px solid var(--line,#eef2f7)}
.pd-sec h5{margin:0 0 4px; font-size:11px; font-weight:700; color:var(--silgan-slate,#64748b); text-transform:uppercase; letter-spacing:.06em}
.pd-sec-body{font-size:13.5px; line-height:1.55; color:#334155}
.pd-checklist{list-style:none; margin:4px 0 0; padding:0}
.pd-checklist li{padding:5px 0 5px 22px; position:relative; font-size:13px; color:#334155; border-bottom:1px dashed #eef2f7}
.pd-checklist li::before{content:""; position:absolute; left:0; top:8px; width:13px; height:13px; border:1.5px solid #cdd5e0; border-radius:3px; background:#fff}
.pd-card-actions{margin-top:10px; display:flex; gap:8px}
.pd-card-cat{font-size:11px; color:var(--silgan-slate,#64748b); font-weight:700; text-transform:uppercase; letter-spacing:.05em}
/* Practice Documents — edit modal */
#pdEditForm label{display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:700;
color:#475569; letter-spacing:.02em; text-transform:uppercase; margin-bottom:10px}
#pdEditForm textarea{padding:9px 11px; border:1px solid #cdd5e0; border-radius:7px;
font-size:13.5px; font-family:inherit; font-weight:400; text-transform:none; letter-spacing:0;
width:100%; box-sizing:border-box; resize:vertical; line-height:1.5; color:#1F2D3D}
#pdEditForm textarea:focus{outline:none; border-color:var(--silgan-blue,#1F4E79); box-shadow:0 0 0 2px rgba(31,78,121,.15)}
.pd-edit-name{margin:0 0 14px; font-size:14px; color:#1F2D3D; font-weight:600;
padding:8px 11px; background:#f7f9fc; border-radius:7px}
/* Practices page — two-row item layout (text on top, actions underneath) */
.levels .lvl ul li{display:flex; flex-direction:column; align-items:stretch; gap:6px; padding:6px 0}
.el-row1{display:flex; align-items:flex-start; gap:8px}
.el-row1 input[type=checkbox]{margin-top:3px; flex-shrink:0}
.el-row1 label{flex:1; line-height:1.4; white-space:normal; word-wrap:break-word}
.el-actions{display:flex; flex-wrap:wrap; gap:5px; padding-left:26px}
.el-actions button, .el-actions a{padding:3px 9px; font-size:11px; line-height:1.4; border:1px solid #cdd5e0; background:#fff; color:#334155; border-radius:6px; cursor:pointer; text-decoration:none; white-space:nowrap; font-weight:600}
.el-actions button:hover, .el-actions a:hover{border-color:var(--silgan-blue,#1F4E79)}
.el-actions .el-doc-view{background:#eef5ff; color:var(--silgan-blue,#1F4E79); border-color:#cbd9ee}
.el-actions .el-remove{color:#a83434; border-color:#e2c4c4; padding:3px 7px}
/* Practice-doc edit modal — per-row editors + bullet helper */
.pd-f-label{display:flex !important; flex-direction:row !important; align-items:center; gap:8px;
text-transform:uppercase; font-size:12px; font-weight:700; color:#475569; letter-spacing:.02em; margin-bottom:4px}
.pd-bullet-btn{padding:2px 8px; font-size:11px; border:1px solid #cdd5e0; background:#fff; color:#334155;
border-radius:5px; cursor:pointer; font-weight:600}
.pd-bullet-btn:hover{border-color:var(--silgan-blue,#1F4E79); color:var(--silgan-blue,#1F4E79)}
.pd-rows{display:flex; flex-direction:column; gap:6px; margin-bottom:6px}
.pd-row{display:flex; gap:6px; align-items:center}
.pd-row > input{flex:1; padding:7px 10px; border:1px solid #cdd5e0; border-radius:7px; font-size:13.5px;
font-family:inherit; font-weight:400; text-transform:none; letter-spacing:0; color:#1F2D3D}
.pd-row > input:focus{outline:none; border-color:var(--silgan-blue,#1F4E79); box-shadow:0 0 0 2px rgba(31,78,121,.15)}
.pd-row-x{padding:5px 9px; border:1px solid #e2c4c4; background:#fff; color:#a83434; border-radius:6px;
cursor:pointer; font-size:12px; line-height:1; font-weight:700}
.pd-row-x:hover{background:#fbeaea}
.pd-row-add{align-self:flex-start}
/* Section titles (Definition / Connection / Examples / Conclusion / Significance / Checklist)
in strong Silgan blue, on both Practice Docs page and the /practices quick-view modal. */
.bp-sec h5, .pd-sec h5, .pd-card .bp-sec h5 {
color: var(--silgan-blue, #1F4E79);
font-weight: 800;
font-size: 13px;
}