/* =====================================================================
   HSECompass Brand Stylesheet
   Primary  Deep Teal        #006B6B
   CTA      Warm Terracotta  #C9654A
   Ground   Creamy Off-White #F8F6F0
   Text     Almost Black     #1A1D23
   ===================================================================== */
:root{
  --primary:#006B6B; --primary-dark:#00504F; --primary-light:#E6F0F0;
  --secondary:#C9654A; --secondary-dark:#A94F38; --secondary-light:#F7E6E1;
  --background:#F8F6F0; --text:#1A1D23;
  --success:#3A7D5C; --warning:#D48C2C; --critical:#B53B3B; --info:#4A7B9D;
  --slate:#E8ECF0; --muted:#6B7280; --border:#D1CEC5; --white:#FFFFFF;
  --navy:#1E2F4D; --peach:#E8A87C; --mint:#3A7D5C;
  --radius:10px; --radius-sm:6px;
  --shadow:0 1px 2px rgba(26,29,35,.06),0 2px 8px rgba(26,29,35,.06);
  --shadow-lg:0 8px 28px rgba(26,29,35,.12);
  --sidebar-w:252px; --header-h:60px;
  --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);font-size:14px;line-height:1.55;color:var(--text);background:var(--background);-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-dark);text-decoration:underline}
h1,h2,h3,h4,h5{color:var(--text);margin:0 0 .5rem;font-weight:600;line-height:1.25}
h1{font-size:1.5rem} h2{font-size:1.25rem} h3{font-size:1.05rem} h4{font-size:.95rem}
p{margin:0 0 1rem}
hr{border:0;border-top:1px solid var(--border);margin:1.25rem 0}
.text-muted{color:var(--muted)} .text-critical{color:var(--critical)} .text-success{color:var(--success)}
.text-warning{color:var(--warning)} .text-info{color:var(--info)} .text-primary{color:var(--primary)}
.text-right{text-align:right} .text-center{text-align:center} .text-sm{font-size:.82rem}
.fw-600{font-weight:600} .mono{font-family:ui-monospace,Consolas,monospace;font-size:.85em}

/* ---------------------------------------------------------- app shell */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:var(--primary);color:#fff;position:fixed;top:0;bottom:0;left:0;display:flex;flex-direction:column;z-index:40}
.sidebar-brand{height:var(--header-h);display:flex;align-items:center;gap:.6rem;padding:0 1.1rem;border-bottom:1px solid rgba(255,255,255,.14);flex-shrink:0}
.sidebar-brand .mark{width:30px;height:30px;border-radius:8px;background:var(--secondary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:#fff}
.sidebar-brand .name{font-weight:600;font-size:1rem;letter-spacing:.2px}
.sidebar-nav{flex:1;overflow-y:auto;padding:.75rem 0 2rem}
.sidebar-nav::-webkit-scrollbar{width:6px}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px}
.nav-section{padding:.9rem 1.15rem .35rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.9px;color:rgba(255,255,255,.5);font-weight:600}
.nav-item{display:flex;align-items:center;gap:.7rem;padding:.55rem 1.15rem;color:rgba(255,255,255,.82);font-size:.875rem;border-left:3px solid transparent;transition:.15s}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.nav-item.active{background:rgba(255,255,255,.13);color:#fff;border-left-color:var(--secondary);font-weight:600}
.nav-item svg{width:17px;height:17px;flex-shrink:0;fill:currentColor;opacity:.9}
.nav-item .count{margin-left:auto;background:var(--secondary);color:#fff;border-radius:9px;padding:1px 7px;font-size:.7rem;font-weight:600}

.main{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-width:0}
.topbar{height:var(--header-h);background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:1rem;padding:0 1.5rem;position:sticky;top:0;z-index:30}
.topbar .search{flex:1;max-width:420px;position:relative}
.topbar .search input{width:100%;padding:.5rem .75rem .5rem 2.2rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--background);font-size:.875rem;font-family:inherit}
.topbar .search svg{position:absolute;left:.65rem;top:50%;transform:translateY(-50%);width:16px;height:16px;fill:var(--muted)}
.topbar .spacer{flex:1}
.icon-btn{position:relative;width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer}
.icon-btn:hover{background:var(--slate)}
.icon-btn svg{width:17px;height:17px;fill:var(--text)}
.icon-btn .dot{position:absolute;top:-5px;right:-5px;background:var(--critical);color:#fff;font-size:.63rem;font-weight:700;border-radius:9px;min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.user-chip{display:flex;align-items:center;gap:.6rem;padding:.3rem .5rem;border-radius:var(--radius-sm);cursor:pointer}
.user-chip:hover{background:var(--slate);text-decoration:none}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:700;flex-shrink:0}
.user-chip .meta{line-height:1.2}
.user-chip .meta .n{font-weight:600;font-size:.83rem;color:var(--text)}
.user-chip .meta .r{font-size:.72rem;color:var(--muted)}

.content{padding:1.5rem;flex:1}
.page-head{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap}
.page-head .titles{flex:1;min-width:220px}
.page-head h1{margin:0 0 .15rem}
.page-head .sub{color:var(--muted);font-size:.86rem}
.breadcrumb{font-size:.78rem;color:var(--muted);margin-bottom:.35rem}
.breadcrumb a{color:var(--muted)}
.page-actions{display:flex;gap:.5rem;flex-wrap:wrap}

/* ------------------------------------------------------------- cards */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:1.25rem}
.card-head{padding:.85rem 1.1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.75rem}
.card-head h3{margin:0;font-size:.98rem}
.card-head .spacer{flex:1}
.card-body{padding:1.1rem}
.card-body.tight{padding:0}
.card-foot{padding:.8rem 1.1rem;border-top:1px solid var(--border);background:var(--background);border-radius:0 0 var(--radius) var(--radius)}

.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)} .grid-6{grid-template-columns:repeat(6,1fr)}
@media(max-width:1200px){.grid-6{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.grid-3,.grid-2{grid-template-columns:1fr}.grid-6,.grid-4{grid-template-columns:repeat(2,1fr)}}

/* --------------------------------------------------------- kpi tiles */
.kpi{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi .label{font-size:.73rem;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600}
.kpi .value{font-size:1.75rem;font-weight:700;line-height:1.15;margin:.3rem 0 .1rem;color:var(--text)}
.kpi .meta{font-size:.76rem;color:var(--muted)}
.kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary)}
.kpi.cta::after{background:var(--secondary)} .kpi.ok::after{background:var(--success)}
.kpi.warn::after{background:var(--warning)} .kpi.crit::after{background:var(--critical)}
.kpi.info::after{background:var(--info)}
.kpi.crit .value{color:var(--critical)}

/* ------------------------------------------------------------ tables */
.table-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:.86rem}
table.data th{text-align:left;padding:.6rem .8rem;background:var(--background);border-bottom:1px solid var(--border);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);white-space:nowrap}
table.data td{padding:.65rem .8rem;border-bottom:1px solid var(--slate);vertical-align:middle}
table.data tbody tr:hover{background:var(--background)}
table.data tbody tr:last-child td{border-bottom:none}
table.data th a{color:var(--muted)}
.empty{padding:2.5rem 1rem;text-align:center;color:var(--muted)}
.empty svg{width:40px;height:40px;fill:var(--border);margin-bottom:.5rem}

/* ------------------------------------------------------------ badges */
.badge{display:inline-block;padding:.16rem .55rem;border-radius:20px;font-size:.72rem;font-weight:600;line-height:1.5;white-space:nowrap}
.badge-success{background:rgba(58,125,92,.13);color:var(--success)}
.badge-warning{background:rgba(212,140,44,.15);color:#9a6316}
.badge-muted{background:var(--slate);color:var(--muted)}
.badge-critical{background:rgba(181,59,59,.13);color:var(--critical)}
.badge-info{background:rgba(74,123,157,.13);color:var(--info)}
.badge-secondary{background:rgba(201,101,74,.13);color:var(--secondary-dark)}
.badge-primary{background:var(--primary-light);color:var(--primary)}
.chip{display:inline-block;padding:.16rem .55rem;border-radius:var(--radius-sm);font-size:.74rem;font-weight:600;color:#fff}
.chip-low{background:var(--success)} .chip-medium{background:var(--warning)}
.chip-high{background:var(--secondary)} .chip-extreme{background:var(--critical)}
.chip-muted{background:var(--slate);color:var(--muted)}

/* ----------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.5rem .95rem;border-radius:var(--radius-sm);font-size:.86rem;font-weight:600;font-family:inherit;border:1px solid transparent;cursor:pointer;transition:.15s;text-decoration:none;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn svg{width:15px;height:15px;fill:currentColor}
/* Primary CTA is ALWAYS terracotta with white text */
.btn-primary{background:var(--secondary);color:#fff}
.btn-primary:hover{background:var(--secondary-dark);color:#fff}
/* Secondary is transparent with a teal border */
.btn-secondary{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-secondary:hover{background:var(--primary-light);color:var(--primary-dark)}
.btn-ghost{background:var(--white);color:var(--text);border-color:var(--border)}
.btn-ghost:hover{background:var(--slate)}
.btn-critical{background:var(--critical);color:#fff}
.btn-critical:hover{background:#9a3131;color:#fff}
.btn-success{background:var(--success);color:#fff}
.btn-sm{padding:.3rem .6rem;font-size:.78rem}
.btn-block{width:100%}
.btn:disabled,.btn.disabled{opacity:.55;cursor:not-allowed}

/* ------------------------------------------------------------- forms */
.form-row{margin-bottom:1rem}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 1rem}
.form-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 1rem}
@media(max-width:900px){.form-grid,.form-grid-3{grid-template-columns:1fr}}
label{display:block;font-size:.8rem;font-weight:600;margin-bottom:.3rem;color:var(--text)}
label .req{color:var(--critical)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
input[type=time],input[type=datetime-local],input[type=search],input[type=tel],select,textarea{
  width:100%;padding:.55rem .7rem;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--background);font-family:inherit;font-size:.875rem;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,107,107,.12);background:var(--white)}
textarea{min-height:92px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B7280'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;background-size:18px;padding-right:2rem}
.help{font-size:.76rem;color:var(--muted);margin-top:.25rem}
.field-error{font-size:.76rem;color:var(--critical);margin-top:.25rem}
.check{display:flex;align-items:center;gap:.5rem;font-weight:500;font-size:.86rem;margin-bottom:.4rem}
.check input{width:auto;margin:0}
fieldset{border:1px solid var(--border);border-radius:var(--radius);padding:1rem;margin:0 0 1.25rem}
legend{font-weight:600;font-size:.85rem;padding:0 .4rem;color:var(--primary)}

/* Error message: crimson text on light slate, never a red background */
.alert{padding:.8rem 1rem;border-radius:var(--radius-sm);margin-bottom:1rem;font-size:.87rem;border:1px solid transparent}
.alert-error{background:var(--slate);color:var(--critical);border-color:rgba(181,59,59,.25)}
.alert-success{background:var(--background);color:var(--success);border-color:rgba(58,125,92,.3)}
.alert-warning{background:#FDF6EA;color:#9a6316;border-color:rgba(212,140,44,.3)}
.alert-info{background:#EFF4F8;color:var(--info);border-color:rgba(74,123,157,.3)}
.alert ul{margin:.4rem 0 0;padding-left:1.1rem}

/* ------------------------------------------------------------ filter */
.filters{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end;padding:.9rem 1.1rem;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:1rem}
.filters .f{min-width:150px}
.filters label{font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}

/* -------------------------------------------------------- pagination */
.pagination{display:flex;gap:.3rem;align-items:center;padding:.85rem 1.1rem;flex-wrap:wrap}
.pagination a,.pagination span{padding:.35rem .65rem;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.82rem;color:var(--text);background:var(--white)}
.pagination a:hover{background:var(--slate);text-decoration:none}
.pagination .current{background:var(--primary);color:#fff;border-color:var(--primary)}
.pagination .info{border:none;background:none;color:var(--muted);margin-left:auto}

/* ------------------------------------------------------------- misc */
.tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--border);margin-bottom:1.25rem;overflow-x:auto}
.tabs a{padding:.6rem 1rem;font-size:.87rem;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.tabs a:hover{color:var(--text);text-decoration:none}
.tabs a.active{color:var(--primary);border-bottom-color:var(--primary)}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 1rem 1.4rem;border-left:2px solid var(--slate)}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-6px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--primary)}
.timeline .t{font-size:.75rem;color:var(--muted)}
.dl{display:grid;grid-template-columns:180px 1fr;gap:.55rem 1rem;font-size:.87rem}
.dl dt{color:var(--muted);font-weight:600}
.dl dd{margin:0}
@media(max-width:700px){.dl{grid-template-columns:1fr;gap:.15rem 0}.dl dd{margin-bottom:.6rem}}
.progress{height:7px;background:var(--slate);border-radius:4px;overflow:hidden}
.progress span{display:block;height:100%;background:var(--primary)}
.bar-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem;font-size:.83rem}
.bar-row .lab{width:150px;color:var(--muted);flex-shrink:0}
.bar-row .track{flex:1;height:9px;background:var(--slate);border-radius:5px;overflow:hidden}
.bar-row .track span{display:block;height:100%;background:var(--primary);border-radius:5px}
.bar-row .val{width:44px;text-align:right;font-weight:600}

/* --------------------------------------------------------- auth page */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;
  background:linear-gradient(160deg,var(--primary) 0%,var(--mint) 100%)}
.auth-card{width:100%;max-width:430px;background:var(--white);border-radius:14px;box-shadow:var(--shadow-lg);padding:2rem;border:1px solid var(--border)}
.auth-card.wide{max-width:720px}
.auth-brand{display:flex;align-items:center;gap:.65rem;justify-content:center;margin-bottom:1.4rem}
.auth-brand .mark{width:38px;height:38px;border-radius:10px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.auth-brand .name{font-size:1.3rem;font-weight:700;color:var(--text)}
.auth-foot{text-align:center;margin-top:1.1rem;font-size:.84rem;color:var(--muted)}

@media print{.sidebar,.topbar,.page-actions,.filters,.pagination{display:none!important}
 .main{margin-left:0}.card{box-shadow:none;break-inside:avoid}body{background:#fff}}
@media(max-width:900px){
 .sidebar{transform:translateX(-100%);transition:.2s}
 .sidebar.open{transform:none}
 .main{margin-left:0}
 .menu-toggle{display:flex!important}
}
.menu-toggle{display:flex}

/* ===================================================================
   Risk & aspect register
   =================================================================== */

/* KPI tiles ---------------------------------------------------------- */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:.75rem;margin-bottom:1.25rem}
.kpi{background:var(--white);border:1px solid var(--border);border-top:3px solid var(--muted);
     border-radius:var(--radius);padding:.85rem 1rem;box-shadow:var(--shadow)}
.kpi-label{font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
           color:var(--muted);margin-bottom:.3rem}
.kpi-value{font-size:1.75rem;font-weight:700;color:var(--text);line-height:1.05}
.kpi-teal{border-top-color:var(--primary)}
.kpi-critical{border-top-color:var(--critical)}
.kpi-warning{border-top-color:var(--warning)}
.kpi-success{border-top-color:var(--success)}
.kpi-info{border-top-color:var(--info)}

/* Slicers narrow, charts wide - equal thirds squeezed the charts flat.
   align-items:start stops the two chart cards being stretched to the
   slicer card's height, which left a band of dead space under each one. */
.register-top{display:grid;grid-template-columns:268px 1fr 1fr;gap:1rem;
              align-items:start;margin-bottom:1.25rem}
.register-top .card{margin-bottom:0}
.register-top .card-body{padding:.9rem 1rem}
.register-top .form-row{margin-bottom:.6rem}
.register-top .form-row label{display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;
                              letter-spacing:.05em;color:var(--muted);margin-bottom:.2rem}
.register-top .form-row select,.register-top .form-row input{padding:.4rem .55rem;font-size:.82rem}
.register-top .btn{padding:.4rem .9rem;font-size:.82rem}
.chart-box{height:224px;position:relative}
@media(max-width:1400px){.register-top{grid-template-columns:1fr 1fr}
  .register-top .card:first-child{grid-column:1/-1}}
@media(max-width:900px){.register-top{grid-template-columns:1fr}}

/* Register table ------------------------------------------------------ */
.card-head.dark{background:var(--navy);border-bottom:none;
                border-radius:var(--radius) var(--radius) 0 0}
.card-head.dark h3{color:var(--white);font-size:.92rem}
.card-head.dark .muted{color:rgba(255,255,255,.62);font-size:.76rem}

.register-wrap{overflow:auto;max-height:72vh}
table.register{width:100%;border-collapse:separate;border-spacing:0;font-size:.75rem}
/* The header is sticky, so its cells MUST be fully opaque - any alpha and
   the rows scroll visibly through the header text. Every background below
   is a solid colour for that reason. */
table.register thead th{position:sticky;background:#F8F6F0;z-index:5;
  border-bottom:1px solid var(--border);font-size:.63rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;color:var(--muted);padding:.4rem .5rem;text-align:left;white-space:nowrap}
table.register thead tr.group-row th{top:0;z-index:4;text-align:center;font-size:.6rem;
  padding:.3rem .5rem;color:var(--navy)}
table.register thead tr.head-row th{top:0;z-index:5}
/* Only a table that actually carries the grouped band needs the offset. */
table.register thead tr.group-row + tr.head-row th{top:23px}
/* A hairline under the whole header so it reads as one band while scrolling. */
table.register thead tr.head-row th{box-shadow:0 1px 0 var(--border)}
table.register td{padding:.4rem .5rem;border-bottom:1px solid var(--slate);vertical-align:top;
  line-height:1.32}
table.register tbody tr:hover td{background:#FBFAF6}
table.register tbody tr:last-child td{border-bottom:none}

/* Tint the two scoring blocks so the eye can tell them apart. */
table.register .blk-init{background:rgba(201,101,74,.05)}
table.register .blk-res{background:rgba(58,125,92,.05)}
table.register tbody tr:hover .blk-init{background:rgba(201,101,74,.09)}
table.register tbody tr:hover .blk-res{background:rgba(58,125,92,.09)}
table.register th.blk-init{background:#F3E8DF}
table.register th.blk-res{background:#E5EAE1}

table.register td.num{text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap;
  color:var(--muted);width:26px}
table.register td.score{text-align:center;font-weight:700;font-variant-numeric:tabular-nums;width:44px}
table.register td.ctrl{font-size:.72rem;color:var(--muted);min-width:170px;max-width:210px}
table.register td.subject{min-width:140px;max-width:200px}
table.register td.who{min-width:104px}
table.register td.who strong{display:block;font-weight:600}
table.register .nowrap{white-space:nowrap}
table.register td.empty{text-align:center;color:var(--muted);padding:2.5rem}
table.register .line2{font-size:.68rem;color:var(--muted);margin-top:1px;line-height:1.25}
table.register .chip{white-space:nowrap;font-size:.66rem;padding:.1rem .5rem}

/* Rank pills - light slate ground, never a solid red block. */
.rank{display:inline-block;padding:.15rem .55rem;border-radius:999px;font-size:.68rem;
      font-weight:700;white-space:nowrap;background:var(--slate)}
.rk-critical{color:var(--critical);background:#F2E4E4}
.rk-high{color:#9A6416;background:#FAF0DF}
.rk-medium{color:var(--info);background:#E7EEF4}
.rk-low{color:var(--success);background:#E4EFE9}

.chip-teal{background:var(--primary-light);color:var(--primary-dark)}
.chip-info{background:#E7EEF4;color:var(--info)}
.chip-muted{background:var(--slate);color:var(--muted)}

.row-actions{display:flex;gap:.35rem;white-space:nowrap;align-items:center}
.row-actions a{font-size:.72rem;font-weight:600;text-decoration:none}
.row-actions a:hover{text-decoration:underline}

/* Row action icon buttons ---------------------------------------------- */
/* Icon-only so a register can carry Open / Edit / PDF / Delete without    */
/* forcing the table into horizontal scroll. The label stays available to  */
/* screen readers and as a hover tooltip.                                  */
.act-btn{width:30px;height:30px;flex:0 0 30px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--white);display:inline-flex;
  align-items:center;justify-content:center;text-decoration:none;cursor:pointer;
  transition:background .12s ease,border-color .12s ease,color .12s ease}
.act-btn svg{width:15px;height:15px;fill:var(--muted);pointer-events:none;transition:fill .12s ease}
.act-btn:hover{text-decoration:none;background:var(--slate);border-color:var(--muted)}
.act-btn:hover svg{fill:var(--text)}
.act-btn:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.act-primary:hover{background:var(--primary-light);border-color:var(--primary)}
.act-primary:hover svg{fill:var(--primary-dark)}
.act-danger:hover{background:var(--slate);border-color:var(--critical)}
.act-danger:hover svg{fill:var(--critical)}
/* Visually hidden label kept in the DOM for assistive tech and Copy table. */
.act-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Dark table headers put the buttons on navy - keep them readable there.  */
.card-head.dark .act-btn{background:transparent;border-color:rgba(255,255,255,.35)}
.card-head.dark .act-btn svg{fill:#fff}

/* Export dropdown ------------------------------------------------------ */
.dropdown{position:relative;display:inline-block}
.dropdown-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:60;
  min-width:196px;background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:.35rem}
.dropdown-menu.open{display:block}
.dropdown-menu a{display:block;padding:.5rem .7rem;border-radius:var(--radius-sm);
  font-size:.82rem;color:var(--text);text-decoration:none}
.dropdown-menu a:hover{background:var(--background);color:var(--primary)}

/* ------------------------------------------------- risk analytics ---- */
.reg-tabs{display:flex;gap:.25rem;background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);padding:.35rem;margin-bottom:1.25rem;box-shadow:var(--shadow)}
.reg-tabs a{padding:.5rem 1rem;border-radius:var(--radius-sm);font-size:.86rem;font-weight:600;
  color:var(--muted);text-decoration:none}
.reg-tabs a:hover{background:var(--background);color:var(--text)}
.reg-tabs a.on{background:var(--primary-light);color:var(--primary-dark);
  box-shadow:inset 0 -2px 0 var(--primary)}

.kpi-row.kpi-6{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

/* Each table sits beside the chart that shows the same numbers. */
.an-pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.25rem}
.an-pair .card{margin-bottom:0}
@media(max-width:1100px){.an-pair{grid-template-columns:1fr}}

.an-table{font-size:.82rem}
.an-table td.num,.an-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.an-table td.empty{text-align:center;color:var(--muted);padding:2rem}
.an-table .line2{font-size:.72rem;color:var(--muted);margin-top:1px}
.an-scroll{max-height:330px;overflow-y:auto}

.delta{font-weight:700;font-size:.8rem}
.delta.down{color:var(--success)}
.delta.up{color:var(--critical)}

.btn-copy,.btn-png{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  color:var(--white);font-size:.7rem;font-weight:600;padding:.25rem .6rem;
  border-radius:var(--radius-sm);cursor:pointer}
.btn-copy:hover,.btn-png:hover{background:rgba(255,255,255,.24)}
/* On a light card head the same buttons need dark ink. */
.card-head:not(.dark) .btn-png,
.card-head:not(.dark) .btn-copy{background:var(--background);border-color:var(--border);color:var(--muted)}
.card-head:not(.dark) .btn-png:hover,
.card-head:not(.dark) .btn-copy:hover{background:var(--slate);color:var(--text)}

.chart-box.tall{height:300px}
.chart-box.xtall{height:420px}

/* ------------------------------------------ operational HR & OHS ---- */
.eyebrow{font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--info);margin-bottom:.25rem}

.ohs-tabs{display:flex;gap:.15rem;flex-wrap:wrap;background:var(--white);
  border:1px solid var(--border);border-radius:var(--radius);padding:.35rem;
  margin-bottom:1.25rem;box-shadow:var(--shadow)}
.ohs-tabs a{padding:.5rem .8rem;border-radius:var(--radius-sm);font-size:.8rem;font-weight:600;
  color:var(--muted);text-decoration:none;white-space:nowrap}
.ohs-tabs a:hover{background:var(--background);color:var(--text)}
.ohs-tabs a.on{background:var(--primary-light);color:var(--primary-dark);
  box-shadow:inset 0 -2px 0 var(--primary)}
.ohs-tabs a.pending{opacity:.55}
.ohs-tabs a.pending::after{content:" ·";color:var(--border)}

/* Entry form on the left, the two trend charts stacked on the right. */
.ohs-split{display:grid;grid-template-columns:340px 1fr;gap:1rem;align-items:start;
  margin-bottom:1.25rem}
.ohs-split .card{margin-bottom:0}
.ohs-charts{display:grid;gap:1rem}
@media(max-width:1100px){.ohs-split{grid-template-columns:1fr}}

.req{color:var(--secondary)}
.btn-block{width:100%;justify-content:center}
.formula-box{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  background:var(--background);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:.6rem .8rem;margin:.25rem 0 1rem;font-size:.76rem;color:var(--muted)}
.formula-box code{background:transparent;color:var(--text);font-size:.76rem}
.formula-box strong{color:var(--success);font-size:.92rem;white-space:nowrap}

.an-table td.hrs{color:var(--success);font-weight:700;
  font-family:"Segoe UI",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.an-table td.nowrap{white-space:nowrap}
.row-actions a.danger{color:var(--critical)}

.chip-violet{background:#ECEBFA;color:#5B54C4}
.chip-mint{background:#E4EFE9;color:var(--success)}
.chip-amber{background:#FAF0DF;color:#9A6416}

/* Read-only computed field (man-hours, person-hours) */
.readonly-field{background:var(--background);color:var(--success);font-weight:700;
  border:1px solid var(--border);cursor:default}
.btn-success{background:var(--success);color:var(--white);border:1px solid var(--success)}
.btn-success:hover{background:#2F6A4C;border-color:#2F6A4C;color:var(--white)}
.an-table td.mh{color:var(--info);font-weight:700;font-variant-numeric:tabular-nums}

/* Excused duty: two stacked scorecards beside the monthly chart */
.ed-top{display:grid;grid-template-columns:260px 1fr;gap:1rem;align-items:start;margin-bottom:1.25rem}
.ed-top .card{margin-bottom:0}
.ed-kpis{display:grid;gap:.75rem}
.ed-kpis .kpi{margin:0}
@media(max-width:900px){.ed-top{grid-template-columns:1fr}}
.an-table td.days{color:var(--critical);font-weight:700;font-variant-numeric:tabular-nums}
.muted.small{font-size:.76rem}
.chip-rose{background:#FBE9EC;color:#B04252}

/* Accidents & Incidents -------------------------------------------------
   The register is wide by nature - 17 columns including five Why Q&A
   pairs - so it scrolls inside its own wrapper and every long column
   wraps rather than stretching the page. */
.grid-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1200px){.grid-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.grid-5{grid-template-columns:repeat(2,1fr)}}

.an-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.25rem}
.an-trio .card{margin-bottom:0}
@media(max-width:1300px){.an-trio{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.an-trio{grid-template-columns:1fr}}

.legend-line{margin:.3rem 0 0;line-height:1.7}
.legend-line span{margin-right:.85rem;white-space:nowrap}
.legend-line strong{color:var(--text)}

.form-section{margin:1.15rem 0 .55rem;font-size:.78rem;font-weight:700;
  color:var(--primary-dark);text-transform:uppercase;letter-spacing:.03em;
  border-bottom:1px solid var(--border);padding-bottom:.35rem}
.form-section:first-child{margin-top:0}
.form-section .hint,.form-row label .hint{font-weight:500;text-transform:none;
  letter-spacing:0;color:var(--muted)}
.standalone-box{background:var(--slate);border-radius:var(--radius-sm);
  padding:.7rem .8rem;margin-bottom:.2rem}
.form-actions{display:flex;align-items:center;gap:.6rem;margin-top:1.1rem;
  border-top:1px solid var(--border);padding-top:.9rem;flex-wrap:wrap}

/* 5-Why grid - five equal cells, each with its question and answer. */
.why-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem}
@media(max-width:1200px){.why-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.why-grid{grid-template-columns:1fr}}
.why-cell{border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:.55rem;background:var(--white)}
.why-cell label{display:block;font-size:.72rem;font-weight:700;
  color:var(--text);margin-bottom:.35rem}
.why-cell input,.why-cell textarea{width:100%;font-size:.78rem}
.why-cell input{margin-bottom:.35rem}

/* Contributing factors - tick a heading to open its write-up. */
.cf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
@media(max-width:900px){.cf-grid{grid-template-columns:1fr}}
.cf-cell{border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:.55rem .65rem;background:var(--white)}
.cf-cell.wide{grid-column:span 2}
@media(max-width:900px){.cf-cell.wide{grid-column:span 1}}
.cf-head{display:flex;align-items:center;gap:.45rem;font-size:.78rem;
  font-weight:700;color:var(--text);cursor:pointer}
.cf-head input{width:auto;margin:0}
.cf-cell textarea{width:100%;margin-top:.4rem;font-size:.78rem}

/* Repeating rows: action + owner + date, and team members. */
.repeat-head{display:grid;gap:.5rem;font-size:.68rem;font-weight:700;
  color:var(--muted);text-transform:uppercase;letter-spacing:.03em;padding:0 .1rem .3rem}
.repeat-rows{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.6rem}
.repeat-row{display:grid;gap:.5rem;align-items:start}
.grid-capa{grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,2fr) 34px}
.grid-team{grid-template-columns:repeat(5,minmax(0,1fr)) 34px}
@media(max-width:900px){.repeat-head{display:none}
  .grid-capa,.grid-team{grid-template-columns:1fr}}
.repeat-row input,.repeat-row textarea{width:100%;font-size:.8rem}
.row-x{border:1px solid var(--border);background:var(--white);border-radius:var(--radius-sm);
  width:34px;height:34px;color:var(--critical);font-size:1.1rem;line-height:1;cursor:pointer}
.row-x:hover{background:var(--slate);border-color:var(--critical)}

/* The register itself. */
/* Rows here are several lines tall, so the register gets more height
   than the shorter sub-registers before it starts scrolling. */
.ai-scroll{max-height:660px}
.ai-table{min-width:2400px}
.ai-table td.wrap{white-space:normal;min-width:150px;max-width:230px;line-height:1.35}
.ai-table td.why{min-width:135px;max-width:170px;font-size:.72rem}
.ai-table td.why .qa{font-weight:700;color:var(--primary-dark)}
.ai-table td.root{color:var(--critical);font-weight:600;min-width:150px}
.ai-table td.root strong{color:var(--critical)}
.ai-table .line2.accent{color:var(--info);font-weight:600}
.ai-table .cf-line{margin-bottom:.3rem}
.ai-table .cf-line:last-child{margin-bottom:0}
.kpi .kpi-unit{font-size:.72rem;font-weight:600;color:var(--muted);margin-left:.15rem}

/* Accident Notifications ------------------------------------------------ */
.ntf-scroll{max-height:620px}
.ntf-table{min-width:1500px}
.ntf-table td.wrap{white-space:normal;min-width:190px;max-width:300px;line-height:1.4}
.ntf-summary{display:flex;flex-wrap:wrap;gap:1.4rem;background:var(--slate);
  border-radius:var(--radius-sm);padding:.7rem .9rem;margin-bottom:1rem}
.ntf-summary .lbl{display:block;font-size:.66rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:.15rem}
.ntf-summary strong{font-size:.84rem}

/* Recipient status shows as a dot, so a long list stays scannable. */
.rcp-line{margin-bottom:.35rem;padding-left:.9rem;position:relative;font-size:.78rem}
.rcp-line:last-child{margin-bottom:0}
.rcp-line .dot{position:absolute;left:0;top:.42rem;width:7px;height:7px;border-radius:50%;
  background:var(--muted)}
.dot-queued{background:var(--warning)!important}
.dot-sent{background:var(--info)!important}
.dot-acknowledged{background:var(--success)!important}
.dot-failed{background:var(--critical)!important}

/* Directory picker for the distribution list. */
.staff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
@media(max-width:1200px){.staff-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.staff-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.staff-grid{grid-template-columns:1fr}}
.staff-pick{display:flex;align-items:flex-start;gap:.5rem;border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:.5rem .6rem;background:var(--white);cursor:pointer;
  font-size:.8rem;transition:border-color .12s ease,background .12s ease}
.staff-pick:hover{border-color:var(--primary);background:var(--primary-light)}
.staff-pick input{width:auto;margin:.15rem 0 0}
.staff-pick .line2{display:block;font-size:.7rem;color:var(--muted);font-weight:500}
.staff-pick:has(input:checked){border-color:var(--primary);background:var(--primary-light)}

.grid-ext{grid-template-columns:minmax(0,3fr) minmax(0,3fr) minmax(0,3fr) 34px}
@media(max-width:900px){.grid-ext{grid-template-columns:1fr}}

/* Safety Meetings & Emergency Drill Evaluation -------------------------- */
.mtg-scroll{max-height:520px}
.mtg-table{min-width:1120px}
.mtg-table td.wrap{white-space:normal;min-width:250px;max-width:360px;line-height:1.4}
.drl-scroll{max-height:620px}
.drl-table{min-width:2600px}
.drl-table td.wrap{white-space:normal;min-width:200px;max-width:280px;line-height:1.4}
/* A criterion answered with anything but the best option is worth seeing
   at a glance without reading every cell. */
.drl-table .chip{white-space:nowrap}
.drl-table td.crit{white-space:normal;min-width:120px;max-width:150px;font-size:.74rem}
.drl-table td.crit.flag{color:var(--warning);font-weight:700}
.form-section-row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  border-bottom:1px solid var(--border);padding-bottom:.45rem;margin-bottom:.6rem}

/* Clinic Attendance ----------------------------------------------------- */
.cln-scroll{max-height:640px}
.cln-table{min-width:2500px}
.cln-table td.wrap{white-space:normal;min-width:170px;max-width:250px;line-height:1.4}
.cln-table td.vitals{font-family:"Segoe UI",system-ui,sans-serif;font-size:.72rem;
  font-variant-numeric:tabular-nums;min-width:180px}
.cln-table .chip{white-space:nowrap}

/* Absenteeism Rate ------------------------------------------------------ */
.formula-line{margin:.3rem 0 0;line-height:1.55;max-width:78ch}
.formula-line a{color:var(--primary-dark);font-weight:600}
.hc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;
  background:var(--slate);border-radius:var(--radius-sm);padding:.75rem .8rem}
@media(max-width:1200px){.hc-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.hc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.hc-grid{grid-template-columns:1fr}}
.hc-grid .form-row{margin:0}
.hc-grid label{font-size:.74rem}
.abs-table td.rate{font-weight:700;font-variant-numeric:tabular-nums}
.abs-table td.rate.good{color:var(--success)}
.abs-table td.rate.over{color:var(--critical)}
.abs-table tfoot td{background:var(--slate);border-top:2px solid var(--border);font-weight:600}

/* Fault Tree Analysis --------------------------------------------------- */
.fta-split{display:grid;grid-template-columns:330px minmax(0,1fr);gap:1rem;margin-bottom:1.25rem;
  align-items:start}
@media(max-width:1100px){.fta-split{grid-template-columns:1fr}}
.fta-split .card{margin-bottom:1rem}
.fta-list{position:sticky;top:calc(var(--header-h) + 1rem);margin-bottom:0}
@media(max-width:1100px){.fta-list{position:static}}
.fta-list-body{max-height:520px;overflow-y:auto}
.fta-item{display:block;padding:.7rem .85rem;border-bottom:1px solid var(--border);
  text-decoration:none;color:inherit;border-left:3px solid transparent}
.fta-item:hover{background:var(--slate);text-decoration:none}
.fta-item.on{background:var(--primary-light);border-left-color:var(--primary)}
.fta-item-top{display:flex;align-items:flex-start;gap:.5rem;justify-content:space-between}
.fta-item-top strong{font-size:.82rem;line-height:1.35}
.fta-item-ref{font-size:.7rem;color:var(--primary-dark);font-weight:700;margin-top:.25rem;
  font-variant-numeric:tabular-nums}
.fta-item-meta{font-size:.7rem;color:var(--muted);margin-top:.1rem}
.fta-detail{min-width:0}
.fta-save-row{display:flex;gap:.5rem;align-items:stretch;margin-top:.6rem}
.fta-save-row .btn{flex:1}
.fta-save-row .act-btn{width:auto;flex:0 0 44px;height:auto}

/* Node type picker */
.block-label{display:block;font-size:.78rem;font-weight:700;margin:.4rem 0 .35rem}
.nt-grid{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.7rem}
.nt-cell{display:flex;align-items:flex-start;gap:.55rem;border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:.5rem .65rem;background:var(--white);cursor:pointer;
  font-size:.8rem;transition:border-color .12s ease,background .12s ease}
.nt-cell:hover{border-color:var(--primary)}
.nt-cell.on{border-color:var(--primary);background:var(--primary-light)}
.nt-cell input{width:auto;margin:.2rem 0 0}
.nt-cell .line2{display:block;font-size:.72rem;color:var(--muted);font-weight:500;margin-top:.1rem}
.gate-help{font-style:italic}

/* Diagram */
.fta-canvas{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--white);
  overflow:auto;padding:.6rem;max-height:640px}
.fta-canvas svg{display:block;max-width:none}
.fta-legend{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;margin-top:.6rem;
  font-size:.72rem;color:var(--muted)}
.fta-legend span{display:inline-flex;align-items:center;gap:.35rem}
.fta-legend i{width:13px;height:13px;display:inline-block}
.fta-legend .lg-top{background:var(--navy);border-radius:2px}
.fta-legend .lg-int{background:var(--white);border:1.5px solid var(--primary);border-radius:2px}
.fta-legend .lg-basic{background:#FFF6F0;border:1.5px solid var(--secondary);border-radius:50%}
.fta-legend .lg-und{background:var(--white);border:1.5px dashed var(--muted);
  transform:rotate(45deg);border-radius:1px}
.fta-legend .lg-gate{color:#fff;font-weight:700;padding:.1rem .4rem;border-radius:9px;font-size:.65rem}
.fta-legend .lg-gate em{font-style:normal;opacity:.75;font-weight:600}
.gate-pill{display:inline-block;color:#fff;font-weight:700;font-size:.66rem;
  padding:.12rem .45rem;border-radius:9px;letter-spacing:.02em}
.gate-AND,.lg-gate.gate-AND{background:#1E2F4D}
.gate-OR,.lg-gate.gate-OR{background:#006B6B}
.gate-PAND,.lg-gate.gate-PAND{background:#C9654A}
.gate-POR,.lg-gate.gate-POR{background:#D48C2C}
.gate-SEQ,.lg-gate.gate-SEQ{background:#5B6ABF}
.gate-SPARE,.lg-gate.gate-SPARE{background:#3A7D5C}
.gate-FDEP,.lg-gate.gate-FDEP{background:#B53B3B}

.fta-scroll{max-height:520px}
.fta-table{min-width:1350px}
.fta-table td.wrap{white-space:normal;min-width:210px;max-width:340px;line-height:1.4}
.kpi .small-value{font-size:1.05rem;line-height:1.5}
.an-table td .ref{color:var(--primary-dark);font-variant-numeric:tabular-nums}
.btn-sm{padding:.3rem .7rem;font-size:.76rem}

/* Environment & ESG hub -------------------------------------------------- */
.industry-picker{display:flex;flex-direction:column;gap:.15rem;background:var(--white);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:.4rem .6rem;min-width:220px}
.industry-picker label{font-size:.64rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em}
.industry-picker select{border:0;background:transparent;padding:0;font-weight:700;font-size:.82rem}
.industry-banner{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;
  background:var(--primary-light);border:1px solid #CFE3E3;border-radius:var(--radius);
  padding:.6rem .9rem;margin-bottom:1rem;font-size:.78rem;color:var(--text)}
.industry-banner .ib-name{font-weight:800;color:var(--primary-dark)}
.industry-banner .ib-sep{color:var(--border)}
.industry-banner .ib-blurb{color:var(--muted);font-size:.75rem}

.derived-box{display:flex;flex-wrap:wrap;gap:.5rem .9rem;background:var(--slate);
  border-radius:var(--radius-sm);padding:.6rem .8rem;margin:.7rem 0 .2rem}
.derived-box .dv{display:flex;flex-direction:column;min-width:118px}
.derived-box em{font-style:normal;font-size:.64rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em}
.derived-box strong{font-size:.86rem;font-variant-numeric:tabular-nums}
.formula-chip{font-size:.68rem;color:rgba(255,255,255,.62)!important}
.method-notes{margin:0;padding-left:1.1rem;font-size:.79rem;line-height:1.65;color:var(--text)}
.method-notes li{margin-bottom:.4rem}
.factor-form .btn{width:100%}

.env-scroll{max-height:600px}
.env-table{min-width:2300px}
.env-table th.d-energy,.env-table td.d-energy{background:#FDF6EA}
.env-table th.d-water,.env-table td.d-water{background:#EDF4FA}
.env-table th.d-water2,.env-table td.d-water2{background:#E9F3F3}
.env-table th.d-waste,.env-table td.d-waste{background:#E9F5EE}
.env-table th.d-s1,.env-table td.d-s1{background:#FBEDED}
.env-table th.d-s2,.env-table td.d-s2{background:#F1EEFA}
.an-table tfoot td{background:var(--slate);border-top:2px solid var(--border);font-weight:600}
.row-pending td{background:#FBFAF7}
.row-pending .muted{font-style:italic}

.gri-scroll{max-height:620px}
.aq-scroll{max-height:600px}
.aq-table{min-width:1500px}
.aq-table td.aq{font-variant-numeric:tabular-nums}
.aq-table td.aq.over{color:var(--critical);font-weight:800;background:#FBEDED}
.aq-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.55rem;background:var(--slate);
  border-radius:var(--radius-sm);padding:.7rem .8rem;margin:.2rem 0 .3rem}
@media(max-width:1200px){.aq-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.aq-grid{grid-template-columns:repeat(2,1fr)}}
.aq-grid .form-row{margin:0}
.aq-grid label{font-size:.72rem}
.aq-warn{color:var(--warning);font-weight:700}
.aq-ok{color:var(--success);font-weight:600}
.guide-line{margin:.35rem 0 0;line-height:1.7}
.guide-line span{margin-right:.8rem;white-space:nowrap}
.ref-note{margin:-.5rem 0 1.25rem;line-height:1.6;max-width:118ch}

/* =====================================================================
   Tab 5 - Inspections, CAPA & Permit To Work
   ===================================================================== */

/* Inspection form beside the dispatch card, as the client lays it out.
   One column below 1300px, where two would each be too narrow to read. */
.asr-split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:1rem;align-items:start;margin-bottom:1rem}
@media(max-width:1300px){.asr-split{grid-template-columns:minmax(0,1fr)}}
.asr-split .card{margin-bottom:0}

/* A boxed sub-section inside a long form. */
.panel{background:var(--slate);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:.75rem .85rem;margin:.2rem 0 .9rem}
.panel-head{margin:0 0 .55rem;padding-bottom:.4rem;border-bottom:1px solid var(--border);
  font-size:.78rem;font-weight:700;color:var(--text);letter-spacing:.01em}
.panel-amber{background:#FBF3E6;border-color:#E7CDA0}
.panel-amber .panel-head{border-bottom-color:#E7CDA0}
.panel-rose{background:#FBEDED;border-color:#E5BEBE}
.panel-rose .panel-head{border-bottom-color:#E5BEBE}
select.picker{font-weight:600}

/* ---------------------------------------------------- checklist rows */
.chk-scroll{max-height:380px;overflow-y:auto;padding-right:.3rem}
.chk-row{display:flex;gap:.6rem;align-items:flex-start;background:var(--white);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:.55rem .65rem;margin-bottom:.45rem}
.chk-n{flex:0 0 1.4rem;font-size:.72rem;font-weight:700;color:var(--muted);
  text-align:right;padding-top:.15rem;font-variant-numeric:tabular-nums}
.chk-body{flex:1 1 auto;min-width:0}
.chk-txt{font-size:.82rem;line-height:1.45;margin-bottom:.4rem}
.chk-ans{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.4rem}
.chk-opt{display:inline-flex;align-items:center;gap:.3rem;cursor:pointer;
  border:1px solid var(--border);border-radius:999px;padding:.15rem .55rem;
  font-size:.72rem;font-weight:600;color:var(--muted);background:var(--white);
  transition:background .12s,border-color .12s,color .12s}
.chk-opt input{margin:0;accent-color:var(--primary)}
.chk-opt:hover{border-color:var(--primary)}
.chk-opt.ok:has(input:checked){background:#E9F5EE;border-color:var(--success);color:var(--success)}
.chk-opt.no:has(input:checked){background:#FBEDED;border-color:var(--critical);color:var(--critical)}
.chk-opt.na:has(input:checked){background:var(--slate);border-color:var(--muted);color:var(--muted)}
input.chk-note{width:100%;font-size:.76rem;padding:.28rem .45rem}
.chk-live{margin:.55rem 0 0;font-size:.78rem;color:var(--muted)}
.chk-live .bad{color:var(--critical);font-weight:700}

/* --------------------------------------------- permit controls & PPE */
.ctl-list{max-height:340px;overflow-y:auto;padding-right:.3rem}
.ctl-row{display:flex;gap:.55rem;align-items:flex-start;background:var(--white);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:.45rem .6rem;margin-bottom:.35rem;font-size:.8rem;line-height:1.45;cursor:pointer}
.ctl-row input[type=checkbox]{margin:.18rem 0 0;accent-color:var(--primary);flex:0 0 auto}
.ctl-row:has(input:checked){border-color:var(--primary);background:var(--primary-light)}
.ppe-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem}
@media(max-width:760px){.ppe-list{grid-template-columns:minmax(0,1fr)}}
.ppe-chip{display:flex;gap:.45rem;align-items:center;background:var(--white);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:.35rem .55rem;font-size:.78rem;cursor:pointer}
.ppe-chip input{margin:0;accent-color:var(--primary)}
.ppe-chip:has(input:checked){border-color:var(--primary);background:var(--primary-light)}

.ptw-banner{margin:.2rem 0 .8rem;padding:.5rem .7rem;border-radius:var(--radius-sm);
  background:var(--primary-light);border-left:3px solid var(--primary);
  font-size:.78rem;color:var(--text)}
.gas-verdict{margin:.55rem 0 0;font-size:.78rem;font-weight:600}
.gas-verdict.ok{color:var(--success)}
.gas-verdict.bad{color:var(--critical)}

/* ------------------------------------------------------- signatures */
/* Segmented control: two radios that read as a pair of buttons. */
.sign-modes.seg{display:flex;gap:.4rem;margin-bottom:.55rem}
.seg-btn{flex:1 1 0;text-align:center;cursor:pointer;border:2px solid var(--border);
  border-radius:var(--radius-sm);padding:.35rem .5rem;font-size:.75rem;font-weight:700;
  color:var(--muted);background:var(--white);transition:border-color .12s,color .12s,background .12s}
.seg-btn input{position:absolute;opacity:0;pointer-events:none}
.seg-btn:hover{border-color:var(--primary)}
.seg-btn:has(input:checked){border-color:var(--primary);background:var(--primary-light);
  color:var(--primary-dark)}
.sign-pad{height:66px;background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:0 .6rem;margin-top:.45rem}
/* A script face for typed initials, so the sign-off reads as a signature.
   Every fallback here is a cursive the platform actually ships. */
.sign-ink{font-family:"Segoe Script","Brush Script MT","Snell Roundhand","Apple Chancery",
  "URW Chancery L",cursive;font-size:1.9rem;line-height:1;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sign-img{max-height:56px;max-width:100%;object-fit:contain}
.sign-ph{font-size:.72rem;color:var(--muted)}
.sign-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin:.2rem 0 1rem}
@media(max-width:900px){.sign-trio{grid-template-columns:minmax(0,1fr)}}
.sign-card{background:var(--slate);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:.7rem .75rem}
.sign-card .panel-head{font-size:.74rem}

/* --------------------------------------------------- photo evidence */
.photo-prev{display:flex;gap:.65rem;align-items:center;margin-top:.5rem;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:.5rem}
.photo-prev img{max-height:96px;border-radius:4px;border:1px solid var(--border)}

/* ------------------------------------------------------ result panel */
.res-ok{margin-top:1rem;padding:.85rem .95rem;border:2px solid var(--success);
  border-radius:var(--radius-sm);background:#F1F8F4}
.ro-head{margin:0 0 .6rem;font-weight:700;font-size:.88rem;color:var(--success)}
.ro-sum{display:grid;gap:.4rem;font-size:.79rem}
.ro-sum > div{display:flex;gap:.5rem;align-items:baseline}
.ro-sum span{flex:0 0 13rem;color:var(--muted);font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em}
.ro-sum strong{flex:1 1 auto;font-weight:600;min-width:0}
.ro-sum .bad{color:var(--critical);font-weight:800}
.ro-actions{display:flex;gap:.5rem;margin-top:.8rem;flex-wrap:wrap}
.btn.block{flex:1 1 auto}

.res-card .res-grid{display:grid;grid-template-columns:190px minmax(0,1fr);
  gap:1rem;align-items:start}
@media(max-width:820px){.res-card .res-grid{grid-template-columns:minmax(0,1fr)}}
.res-score{background:var(--slate);border-radius:var(--radius-sm);padding:.9rem;text-align:center}
.res-score.res-fail{background:#FBEDED}
.rs-pct{font-size:2.2rem;font-weight:800;line-height:1;color:var(--primary)}
.rs-pct span{font-size:1rem;margin-left:.1rem}
.res-fail .rs-pct{color:var(--critical)}
.rs-type{font-size:1rem;font-weight:800;line-height:1.25;color:var(--primary)}
.rs-lbl{font-size:.7rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;font-weight:700;margin:.35rem 0 .5rem}
.res-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem .9rem;margin:0}
@media(max-width:820px){.res-meta{grid-template-columns:minmax(0,1fr)}}
.res-meta > div{min-width:0}
.res-meta dt{font-size:.68rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.03em;font-weight:700}
.res-meta dd{margin:.1rem 0 0;font-size:.82rem}
.res-meta dd.bad{color:var(--critical);font-weight:700}
.res-action{margin-top:.9rem;padding:.7rem .85rem;border-radius:var(--radius-sm);
  background:var(--primary-light);border-left:3px solid var(--primary)}
.res-action.ra-bad{background:#FBEDED;border-left-color:var(--critical)}
.ra-head{margin:0 0 .35rem;font-size:.8rem;font-weight:700}
.res-action p{margin:0 0 .3rem;font-size:.82rem}
.res-table{min-width:640px}

/* --------------------------------------------------------- dispatch */
.dsp-log{max-height:340px;overflow-y:auto;padding-right:.3rem}
.dsp-line{display:flex;gap:.55rem;align-items:flex-start;padding:.55rem .1rem;
  border-bottom:1px solid var(--slate)}
.dsp-line:last-child{border-bottom:0}
.dsp-line .dot{flex:0 0 8px;height:8px;border-radius:50%;margin-top:.4rem}
.dot-ok{background:var(--success)}
.dot-wait{background:var(--warning)}
.dsp-line .line2{font-size:.78rem;margin-top:.1rem}
.dsp-line .line3{font-size:.71rem;color:var(--muted);margin-top:.1rem}
.dsp-line .muted{font-size:.74rem}

/* ---------------------------------------------------------- tables */
.insp-scroll{max-height:640px}
.insp-table{min-width:2100px}
.insp-table td.num.flag{color:var(--critical);font-weight:800;background:#FBEDED}
.ptw-scroll{max-height:640px}
.ptw-table{min-width:2000px}

/* Class rules that set `display` beat the browser's own [hidden] rule, so
   restate it once, last, for everything the JS toggles. */
[hidden]{display:none!important}

/* A label that wraps to two lines must not shove its input out of line with
   its neighbours, so inside a grid the control sits at the bottom of the cell. */
.panel .grid .form-row,.asr-split .grid .form-row{display:flex;flex-direction:column}
.panel .grid .form-row > input,.panel .grid .form-row > select,
.asr-split .grid .form-row > input,.asr-split .grid .form-row > select{margin-top:auto}
/* These rows are <label>s, and the app makes form labels bold; the checklist
   text is body copy, not a field label. */
.ctl-row,.ppe-chip{font-weight:400}

/* =====================================================================
   Tab 6 - standalone CAPA register
   ===================================================================== */
.ms-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
@media(max-width:1100px){.ms-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.ms-row{grid-template-columns:minmax(0,1fr)}}
.ms{position:relative}
.ms > label{display:block;font-size:.78rem;font-weight:600;margin-bottom:.3rem;color:var(--text)}
.ms-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.4rem;
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:.48rem .6rem;font:inherit;font-size:.82rem;color:var(--text);text-align:left;cursor:pointer}
.ms-btn:hover{border-color:var(--primary)}
.ms.on .ms-btn{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-light)}
.ms-caret{flex:0 0 auto;width:0;height:0;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:5px solid var(--muted)}
.ms-panel{position:absolute;z-index:40;top:100%;left:0;right:0;margin-top:.25rem;
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);max-height:260px;overflow-y:auto;padding:.35rem}
.ms-opt{display:flex;align-items:center;gap:.45rem;padding:.32rem .45rem;
  border-radius:4px;font-size:.79rem;cursor:pointer}
.ms-opt:hover{background:var(--slate)}
.ms-opt input{margin:0;accent-color:var(--primary);flex:0 0 auto}
.ms-opt > span{flex:1 1 auto;min-width:0}
.ms-opt em{font-style:normal;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}

.capa-scroll{max-height:660px}
.capa-table{min-width:2000px}
.capa-table tr.row-overdue td:first-child{box-shadow:inset 3px 0 0 var(--critical)}

/* =====================================================================
   Tab 7 - Master Control Center
   ===================================================================== */
.mcc-head{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;
  background:linear-gradient(135deg,#0B1220,#1F3864);color:#fff;
  border-radius:var(--radius);padding:1.1rem 1.25rem;margin-bottom:1rem;box-shadow:var(--shadow)}
.mcc-head > div{flex:1 1 340px;min-width:0}
.mcc-head .eyebrow{color:#93C5FD;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em}
.mcc-head h1{color:#fff;margin:.15rem 0 .35rem;font-size:1.4rem}
.mcc-head p{color:#CBD5E1;font-size:.8rem;line-height:1.6;margin:0;max-width:110ch}
.mcc-reset{flex:0 0 auto;align-self:center;background:rgba(255,255,255,.1);color:#fff;
  border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-sm);
  padding:.45rem .8rem;font-size:.78rem;font-weight:700;white-space:nowrap}
.mcc-reset:hover{background:rgba(255,255,255,.2);color:#fff;text-decoration:none}
.mcc-reset.off{opacity:.45;pointer-events:none}

.mcc-row{grid-template-columns:repeat(5,minmax(0,1fr));align-items:end}
@media(max-width:1200px){.mcc-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.mcc-row{grid-template-columns:minmax(0,1fr)}}
.mcc-row .form-row{margin:0}

.eyebrow-sm{font-size:.68rem;font-weight:700;color:var(--primary);
  text-transform:uppercase;letter-spacing:.06em}
.kpi-row.kpi-5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1200px){.kpi-row.kpi-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.kpi-row.kpi-5{grid-template-columns:repeat(2,minmax(0,1fr))}}

.narrative{max-width:104ch}
.narrative section{padding:.15rem 0 .75rem;border-bottom:1px solid var(--slate)}
.narrative section:last-child{border-bottom:0;padding-bottom:0}
.narrative h4{margin:0 0 .3rem;font-size:.88rem;color:var(--text)}
.narrative h4::after{content:"";display:block;width:26px;height:2px;
  background:var(--primary);margin-top:.28rem}
.narrative p{margin:0;font-size:.86rem;line-height:1.7;color:var(--text)}

.mcc-scroll{max-height:680px}
.mcc-table{min-width:1600px}

/* =====================================================================
   Tab 8 - Asset & equipment inspection registers
   ===================================================================== */
.reg-pick{display:flex;gap:.9rem;align-items:flex-end;flex-wrap:wrap}
.reg-form{flex:1 1 460px;min-width:0}
.reg-form .form-row{margin:0}
.reg-actions{flex:0 0 auto;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.iso-note{display:flex;gap:.6rem;align-items:flex-start;margin:.85rem 0 0;
  background:var(--slate);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:.65rem .8rem;font-size:.79rem;line-height:1.65;color:var(--text)}
.iso-note .chip{flex:0 0 auto;margin-top:.1rem}

.kpi-row.kpi-6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:1300px){.kpi-row.kpi-6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.kpi-row.kpi-6{grid-template-columns:repeat(2,minmax(0,1fr))}}

.ast-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;
  align-items:start;margin-bottom:1rem}
@media(max-width:1200px){.ast-trio{grid-template-columns:minmax(0,1fr)}}
.ast-trio .card{margin-bottom:0}
.ms-stack{display:grid;gap:.65rem}

.ast-scroll{max-height:680px}
.ast-table{min-width:2200px}
.ast-table tr.row-overdue td:first-child{box-shadow:inset 3px 0 0 var(--critical)}

/* =====================================================================
   Tab 1 - Executive dashboard
   ===================================================================== */
.exec-hero{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  background:linear-gradient(135deg,#0B1220,#1F3864);color:#fff;
  border-radius:var(--radius);padding:1.3rem 1.4rem;margin-bottom:1rem;box-shadow:var(--shadow)}
.eh-left{flex:1 1 420px;display:flex;gap:1rem;align-items:flex-start;min-width:0}
.eh-mark{flex:0 0 auto;width:46px;height:46px;border-radius:14px;
  background:linear-gradient(145deg,var(--primary),var(--primary-dark));
  box-shadow:0 6px 18px rgba(0,107,107,.45),inset 0 1px 0 rgba(255,255,255,.25);
  position:relative}
.eh-mark{display:inline-flex;align-items:center;justify-content:center}
.eh-mark svg{width:24px;height:24px;fill:#fff;display:block}
.exec-hero .eyebrow{color:#93C5FD;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em}
.exec-hero h1{color:#fff;margin:.15rem 0 .35rem;font-size:1.35rem}
.exec-hero p{color:#CBD5E1;font-size:.79rem;line-height:1.6;margin:0;max-width:78ch}
.eh-period{flex:0 0 auto;display:flex;flex-direction:column;gap:.15rem;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-sm);padding:.6rem .9rem}
.ehp-label{font-size:.66rem;font-weight:700;color:#93C5FD;
  text-transform:uppercase;letter-spacing:.05em}
.ehp-value{font-size:.92rem;font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ehp-sub{font-size:.7rem;color:#94A3B8;white-space:nowrap}

/* Milestone banner */
.milestone{display:flex;align-items:center;gap:1rem;border-radius:var(--radius);
  padding:.85rem 1.1rem;margin-bottom:1rem;border:1px solid var(--border);background:var(--white)}
.ms-good{background:#EDF7F1;border-color:var(--success)}
.ms-ok{background:#FBF3E6;border-color:var(--warning)}
.ms-watch{background:#FBEDED;border-color:var(--critical)}
.ms-days{flex:0 0 auto;font-size:2.1rem;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums}
.ms-good .ms-days{color:var(--success)}
.ms-ok .ms-days{color:var(--warning)}
.ms-watch .ms-days{color:var(--critical)}
.ms-copy{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.ms-copy strong{font-size:.88rem}
.ms-copy span{font-size:.76rem;color:var(--muted)}

.sub-chart-head{margin:1rem 0 .45rem;padding-top:.8rem;border-top:1px solid var(--slate);
  font-size:.76rem;font-weight:700;color:var(--text)}
.an-pair > div > .sub-chart-head:first-child{margin-top:0;padding-top:0;border-top:0}
.chart-box.short{height:200px}

/* Radar */
.radar-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.rchip{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;
  border:1px solid var(--border);border-radius:999px;padding:.22rem .6rem;
  font-size:.73rem;font-weight:600;color:var(--muted);background:var(--white)}
.rchip input{margin:0;accent-color:var(--primary)}
.rchip:hover{border-color:var(--primary)}
.rchip:has(input:checked){background:var(--primary-light);border-color:var(--primary);
  color:var(--primary-dark)}
.radar-split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:1rem;align-items:start}
@media(max-width:1100px){.radar-split{grid-template-columns:minmax(0,1fr)}}
.radar-table{min-width:420px}
.radar-table td .line2{font-size:.68rem;color:var(--muted);font-style:italic}

/* Row-action tones used by the register pages. */
.act-success:hover{background:#E9F5EE;border-color:var(--success)}
.act-success:hover svg{fill:var(--success)}
/* A card-head link styled as one of the small header buttons. */
a.btn-copy{text-decoration:none;display:inline-flex;align-items:center}
a.btn-copy:hover{text-decoration:none;color:var(--white)}
.card-head:not(.dark) a.btn-copy:hover{color:var(--text)}

/* =====================================================================
   Tab: JSA register - the slicer card stacks its three slicers, so the
   card sits beside the two charts at the same height as the risk tab.
   ===================================================================== */
.ms-col{display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem}
#tblJsa td.ctl{min-width:180px;font-weight:400}
#tblJsa td.ctl strong{font-weight:600;color:var(--muted);font-size:.74rem}

/* =====================================================================
   Standardized JSA entry form
   ===================================================================== */
.ppe-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.35rem .9rem}
@media(max-width:900px){.ppe-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ppe-grid{grid-template-columns:minmax(0,1fr)}}
.ppe-check{display:flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:400;
  color:var(--text);padding:.25rem .1rem;cursor:pointer}
.ppe-check input{width:auto;margin:0;flex:none}
.ppe-check:hover span{color:var(--primary)}

.risk-key{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.risk-key .key-label{font-size:.72rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin-right:.35rem}

.step-row{position:relative;border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:1.75rem .9rem .9rem;margin-bottom:.9rem;background:var(--white)}
.step-row .step-no{position:absolute;top:0;left:0;background:var(--slate);color:var(--muted);
  font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:.2rem .6rem;border-radius:var(--radius-sm) 0 var(--radius-sm) 0}

.appr-block{background:var(--background);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:.75rem}
.appr-block .appr-head{margin:0 0 .5rem;font-size:.72rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted)}
.appr-block .form-row:last-child{margin-bottom:0}
.sig-input{font-family:'Segoe Script','Brush Script MT',cursive;font-size:1rem}

/* Three-across slicer row, for the training and man-hours registers. */
.ms-row-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.ms-row-3{grid-template-columns:minmax(0,1fr)}}

/* =====================================================================
   Module header icon - one per page, matching the sidebar entry, so
   every module opens the same way.
   ===================================================================== */
.page-head-icon{flex:none;width:42px;height:42px;border-radius:var(--radius-sm);
  background:var(--primary-light);display:inline-flex;align-items:center;justify-content:center;
  margin-top:.1rem}
.page-head-icon svg{width:22px;height:22px;fill:var(--primary);display:block}
.page-head .breadcrumb + h1,.page-head .eyebrow + h1{margin-top:0}
@media(max-width:640px){
  .page-head-icon{width:34px;height:34px}
  .page-head-icon svg{width:18px;height:18px}
}

/* Tab-strip icons: every sub-register carries its own glyph, so a strip can
   be scanned by shape as well as by label. The icon inherits the link's
   colour, so it follows the hover and active states for free. */
.ohs-tabs a,.reg-tabs a{display:inline-flex;align-items:center;gap:.4rem}
.ohs-tabs a .tab-icon,.reg-tabs a .tab-icon{width:15px;height:15px;flex:none;
  fill:currentColor;opacity:.75;display:block}
.ohs-tabs a.on .tab-icon,.reg-tabs a.on .tab-icon{opacity:1}
.ohs-tabs a:hover .tab-icon,.reg-tabs a:hover .tab-icon{opacity:1}
.reg-tabs a .tab-icon{width:16px;height:16px}

/* =====================================================================
   Collapsible sidebar
   The rail keeps every entry reachable - the icons stay, the labels
   become tooltips - so the page itself gets ~190px more width for the
   wide registers. The choice is remembered per browser.
   ===================================================================== */
.sidebar,.main{transition:width .16s ease,margin-left .16s ease}
body.nav-collapsed{--sidebar-w:64px}
body.nav-collapsed .sidebar-brand{padding:0;justify-content:center}
body.nav-collapsed .sidebar-brand .name{display:none}
body.nav-collapsed .nav-item{justify-content:center;padding:.6rem 0;gap:0;border-left-width:0;
  border-right:3px solid transparent}
body.nav-collapsed .nav-item.active{border-right-color:var(--secondary)}
body.nav-collapsed .nav-item > span{display:none}
body.nav-collapsed .nav-item svg{width:19px;height:19px}
/* The group headings would wrap to nothing, so they become a divider rule. */
body.nav-collapsed .nav-section{height:1px;padding:0;margin:.55rem .85rem;overflow:hidden;
  text-indent:-9999px;background:rgba(255,255,255,.16)}
/* The unread count still needs to be visible on the rail. */
body.nav-collapsed .nav-item .count{position:absolute;top:.25rem;right:.6rem;font-size:.6rem;
  min-width:14px;height:14px;line-height:14px;padding:0 3px}
body.nav-collapsed .nav-item{position:relative}
body.nav-collapsed .menu-toggle svg{transform:rotate(90deg)}
.menu-toggle svg{transition:transform .16s ease}

/* =====================================================================
   Wide tables: a scrollbar above the table as well as below it, and the
   identifying first column plus the actions column pinned in place.
   ===================================================================== */
.xscroll{overflow-x:auto;overflow-y:hidden;height:12px;margin:0 0 -1px;
  background:var(--background);border-bottom:1px solid var(--border)}
.xscroll > div{height:1px}
.xscroll::-webkit-scrollbar{height:10px}
.xscroll::-webkit-scrollbar-track{background:var(--slate);border-radius:5px}
.xscroll::-webkit-scrollbar-thumb{background:#B9C4CE;border-radius:5px}
.xscroll::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* Pinned columns. The cells need their own background or the scrolling
   content shows through them, and the stripe has to be repeated. */
.register thead .head-row th:first-child{position:sticky;left:0;z-index:7;background:#F8F6F0}
.data.an-table thead th:first-child{position:sticky;left:0;z-index:7;
  background:var(--background)}
.register tbody td:first-child:not(.empty),
.data.an-table tbody td:first-child:not(.empty){position:sticky;left:0;z-index:2;
  background:var(--white)}
.register tbody tr:nth-child(even) td:first-child:not(.empty),
.data.an-table tbody tr:nth-child(even) td:first-child:not(.empty){background:#FAFBFC}
.register tbody tr:hover td:first-child:not(.empty),
.data.an-table tbody tr:hover td:first-child:not(.empty){background:var(--background)}
.register tbody td:first-child:not(.empty)::after,
.data.an-table tbody td:first-child:not(.empty)::after,
.register thead .head-row th:first-child::after,
.data.an-table thead th:first-child::after{content:"";position:absolute;top:0;right:0;bottom:0;
  width:1px;background:var(--border)}

.register thead .head-row th.no-export:last-child{position:sticky;right:0;z-index:7;
  background:#F8F6F0}
.data.an-table thead th.no-export:last-child{position:sticky;right:0;z-index:7;
  background:var(--background)}
.register tbody td.no-export:last-child,
.data.an-table tbody td.no-export:last-child{position:sticky;right:0;z-index:2;
  background:var(--white)}
.register tbody tr:nth-child(even) td.no-export:last-child,
.data.an-table tbody tr:nth-child(even) td.no-export:last-child{background:#FAFBFC}
.register tbody tr:hover td.no-export:last-child,
.data.an-table tbody tr:hover td.no-export:last-child{background:var(--background)}
.register tbody td.no-export:last-child::before,
.data.an-table tbody td.no-export:last-child::before,
.register thead .head-row th.no-export:last-child::before,
.data.an-table thead th.no-export:last-child::before{content:"";position:absolute;top:0;left:0;
  bottom:0;width:1px;background:var(--border)}

/* A pinned column would fight the drawer on a phone, where the table is
   scrolled with a finger anyway. */
@media(max-width:640px){
  .register thead .head-row th:first-child,.data.an-table thead th:first-child,
  .register tbody td:first-child,.data.an-table tbody td:first-child,
  .register thead .head-row th.no-export:last-child,.data.an-table thead th.no-export:last-child,
  .register tbody td.no-export:last-child,.data.an-table tbody td.no-export:last-child{position:static}
  .xscroll{display:none}
}
@media print{.xscroll{display:none}}

/* Column headings hold their place in the scrolling registers, the same way
   the wide registers' do. */
.table-wrap.an-scroll table.data thead th{position:sticky;top:0;z-index:5}
.table-wrap.an-scroll table.data.an-table thead th:first-child,
.table-wrap.an-scroll table.data.an-table thead th.no-export:last-child{z-index:7}

/* =====================================================================
   Master control centre - the board report
   Each section reads as a page of a management report: heading strip,
   narrative, a colour-flagged scorecard and its own supporting trends.
   ===================================================================== */
.report-body{padding:0}
.rep-sec{padding:1.1rem 1.25rem;border-bottom:1px solid var(--border)}
.rep-sec:last-child{border-bottom:0}
.rep-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
.rep-head h4{margin:0;font-size:1rem;color:var(--text)}
.rep-icon{width:26px;height:26px;flex:none;border-radius:var(--radius-sm);
  background:var(--primary-light);display:inline-flex;align-items:center;justify-content:center}
.rep-icon svg{width:15px;height:15px;fill:var(--primary)}
.rep-tag{font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);background:var(--slate);border-radius:var(--radius-pill);padding:.15rem .5rem}
.rep-sec p{font-size:.84rem;line-height:1.65;margin:0 0 .55rem;color:var(--text)}
.rep-list,.rep-recs{margin:.2rem 0 .7rem;padding-left:1.15rem}
.rep-list li,.rep-recs li{font-size:.82rem;line-height:1.6;margin-bottom:.3rem}
.rep-sec .hl{font-weight:700;color:var(--primary-dark)}
.rep-sec .hl-good{color:var(--success)}
.rep-sec .hl-bad{color:var(--critical)}
.rep-sec .hl-k{color:#1F3864}
.rep-label{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:.9rem 0 .4rem!important}

.rep-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
@media(max-width:1100px){.rep-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.rep-cards{grid-template-columns:minmax(0,1fr)}}
.rep-card{border:1px solid var(--border);border-left:3px solid var(--muted);
  border-radius:var(--radius-sm);padding:.55rem .7rem;background:var(--white)}
.rep-card .rc-label{font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.2rem}
.rep-card .rc-value{font-size:1.15rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.rep-card.tone-good{border-left-color:var(--success);background:#F3F9F5}
.rep-card.tone-good .rc-value{color:var(--success)}
.rep-card.tone-bad{border-left-color:var(--critical);background:#FDF5F5}
.rep-card.tone-bad .rc-value{color:var(--critical)}
.rep-card.tone-warn{border-left-color:var(--warning);background:#FDF9F2}
.rep-card.tone-warn .rc-value{color:#A96A12}

.rep-charts{display:grid;gap:.7rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.rep-charts.cols-1{grid-template-columns:minmax(0,1fr)}
@media(max-width:900px){.rep-charts{grid-template-columns:minmax(0,1fr)}}
.rep-chart{border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem .6rem;
  background:var(--white)}
.rep-chart .rc-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem}
.rep-chart .rc-head span{font-size:.74rem;font-weight:600;color:var(--text)}
.rep-chart .rc-head .btn-png{margin-left:auto}
.rep-chart .chart-box{height:190px}

/* Slicer panel tools: select all, clear, and a filter for the long lists. */
.ms-tools{display:flex;align-items:center;gap:.35rem;padding:.1rem .1rem .4rem;
  border-bottom:1px solid var(--border);margin-bottom:.35rem}
.ms-tool{background:var(--slate);border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--primary-dark);font-size:.72rem;font-weight:700;padding:.2rem .5rem;cursor:pointer;
  font-family:inherit;white-space:nowrap;line-height:1.4}
.ms-tool:hover{background:var(--primary-light);border-color:var(--primary)}
.ms-count{margin-left:auto;font-size:.68rem;color:var(--muted);white-space:nowrap}
.ms-search{width:100%;margin-bottom:.35rem;padding:.3rem .45rem;font-size:.78rem;
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--background);
  font-family:inherit}
.ms-search:focus{outline:none;border-color:var(--primary);background:var(--white)}

/* =====================================================================
   Training matrix: courses down the side, target groups across the top.
   ===================================================================== */
.matrix-grid th.mx-col{writing-mode:horizontal-tb;min-width:74px;max-width:96px;
  font-size:.66rem;line-height:1.25;white-space:normal;text-align:center;vertical-align:bottom}
.matrix-grid td.mx-cell{text-align:center;vertical-align:middle;padding:.4rem .3rem;
  border-left:1px solid var(--slate)}
.matrix-grid .mx-mark{display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:22px;padding:0 .35rem;border-radius:var(--radius-sm);
  font-size:.76rem;font-weight:700}
.matrix-grid .mx-none{color:var(--border)}
.matrix-grid .mx-scheduled .mx-mark{background:#E4EFE9;color:var(--success)}
.matrix-grid .mx-due .mx-mark{background:#FBF0DE;color:#A96A12}
.matrix-grid .mx-overdue .mx-mark{background:#F7E2E2;color:var(--critical)}
.matrix-grid .mx-unscheduled .mx-mark{background:var(--slate);color:var(--muted)}

/* ---------------------------------------------------------- QR tags ---- */
/* The asset form puts the code beside a live picture of it, so what gets
   printed is never a surprise. On a narrow screen the picture drops under
   the fields rather than squeezing them. */
.qr-split{display:grid;grid-template-columns:1fr 220px;gap:1.5rem;align-items:start}
@media (max-width:820px){.qr-split{grid-template-columns:1fr}}

.qr-preview-wrap{justify-self:center}
.qr-preview,.qr-tag{
  width:200px;height:200px;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);padding:.5rem;display:flex;align-items:center;justify-content:center
}
.qr-tag{width:210px;height:210px;margin:0 auto;border-style:dashed;border-width:2px}
.qr-preview svg,.qr-tag svg{width:100%;height:100%}

.qr-card{display:inline-block}
.qr-empty{font-size:.78rem;color:var(--muted);text-align:center;padding:.5rem;line-height:1.35}

.qr-note{font-size:.78rem;margin-top:.4rem;line-height:1.4}
.qr-note-ok{color:var(--success);font-weight:600}
.qr-note-warn{color:var(--warning);font-weight:600}

/* ------------------------------------------- RCA worksheets ------------ */
/* One worksheet per methodology, only the chosen one on screen. The grids
   are dense by design: an FMEA has ten columns and an investigator should be
   able to see a whole failure mode on one line. */
.rca-grid{width:100%;table-layout:fixed}
table.data.rca-grid th{
  font-size:.72rem;text-transform:none;letter-spacing:0;line-height:1.25;
  white-space:normal;color:var(--text);padding:.45rem .5rem;vertical-align:bottom
}
table.data.rca-grid td{padding:.3rem .35rem;vertical-align:top}
.rca-grid input,.rca-grid textarea,.rca-grid select{
  width:100%;margin:0;font-size:.82rem;padding:.35rem .45rem
}
/* The 1-10 scores are one or two digits: the spinner steals the room they
   need, so it goes and the figure is centred. */
.rca-grid input[type=number]{text-align:center;padding:.35rem .2rem;-moz-appearance:textfield}
.rca-grid input[type=number]::-webkit-outer-spin-button,
.rca-grid input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rca-grid textarea{min-height:48px;resize:vertical}
.rca-grid [data-static]{
  display:block;font-size:.8rem;color:var(--text);font-weight:600;padding:.4rem .2rem;line-height:1.3
}
.rca-grid td .btn{padding:.2rem .45rem;line-height:1}

/* The FMEA needs more width than the card gives it; it scrolls sideways
   rather than crushing ten columns into a phone. */
.rca-wide{overflow-x:auto}
.rca-wide .rca-grid{min-width:1180px}

/* Risk priority number, banded the way the toolkit prioritises action. */
.rca-grid .rca-rpn{text-align:center;font-weight:700;border-radius:var(--radius-sm)}
.rca-grid .rca-rpn[data-band=low]{color:var(--success)}
.rca-grid .rca-rpn[data-band=medium]{color:var(--info)}
.rca-grid .rca-rpn[data-band=high]{color:var(--warning)}
.rca-grid .rca-rpn[data-band=critical]{color:var(--critical)}

.rca-read dt{font-weight:600;font-size:.8rem;color:var(--muted);margin-top:.6rem}
.rca-read dd{margin:.15rem 0 0;white-space:pre-wrap}

/* ------------------------------------------ permit to work forms ------- */
/* The permit type chooses the form; only one is ever on screen. The tick
   lists are wide and shallow, so they wrap into columns rather than running
   down the page as one long line of boxes. */
.permit-checks{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:.15rem .8rem;margin:.2rem 0 .4rem
}
.permit-checks .check{display:flex;align-items:flex-start;gap:.45rem;font-size:.85rem;padding:.2rem 0}
.permit-checks .check input{margin-top:.15rem}

table.data.permit-questions th,table.data.permit-grid th{
  font-size:.72rem;text-transform:none;letter-spacing:0;white-space:normal;
  color:var(--text);padding:.45rem .5rem;vertical-align:bottom
}
table.data.permit-questions td,table.data.permit-grid td{padding:.35rem .5rem;vertical-align:top}
.permit-questions td:first-child{line-height:1.35}
.permit-grid{table-layout:fixed;width:100%}
.permit-grid input,.permit-grid textarea,.permit-grid select{
  width:100%;margin:0;font-size:.82rem;padding:.35rem .45rem
}
.permit-questions input[type=text]{width:100%;margin:0;font-size:.82rem;padding:.3rem .45rem}
.permit-grid td .btn{padding:.2rem .45rem;line-height:1}

/* ------------------------------------- dropdowns you can add to -------- */
/* Every list that holds words rather than records ends with "+ Other (type
   it in)". Choosing it swaps the select for a box, with a way back. */
.open-typed{display:flex;gap:.4rem;align-items:center}
.open-typed-input{flex:1;margin:0}
.open-typed-back{
  background:none;border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--muted);font-size:.75rem;padding:.45rem .6rem;cursor:pointer;white-space:nowrap
}
.open-typed-back:hover{border-color:var(--primary);color:var(--primary)}
option.open-other{font-style:italic;color:var(--primary)}