/* SOFCOM investor - page styles. Light theme only. Tokens from sofcom-styles.css.
   Layout mirrors the reference IR page: category rail (left) + accordion panel (right). */

/* .sr-only now lives in sofcom-styles.css so every page has it. */

.ir2-hero__sub{max-width:72rem;margin:1.6rem auto 0;color:var(--slate-600);
  font-size:1.7rem;line-height:1.6}

.ir2-section{padding:6.4rem 0}
.ir2-section--alt{background:var(--slate-50)}

/* ---- Company snapshot ---- */
.ir2-snapshot{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;margin-bottom:3.2rem}
.ir2-snapshot__item{display:flex;flex-direction:column;gap:.6rem;padding:2rem;
  background:var(--white);border-radius:1.2rem;box-shadow:var(--shadow-card)}
.ir2-snapshot__k{font-size:1.3rem;font-weight:600;color:var(--slate-500);
  text-transform:uppercase;letter-spacing:.06em}
.ir2-snapshot__v{font-size:1.8rem;font-weight:700;color:var(--navy-900)}

/* ---- Compliance officer ---- */
.ir2-officer{padding:2.8rem;background:var(--white);border-radius:1.6rem;box-shadow:var(--shadow-floating)}
.ir2-officer__title{font-size:1.9rem;font-weight:700;color:var(--navy-900);margin-bottom:1.8rem}
.ir2-officer__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem 3.2rem}
.ir2-officer__row{display:flex;flex-direction:column;gap:.4rem}
.ir2-officer__k{font-size:1.3rem;font-weight:600;color:var(--slate-500)}
.ir2-officer__v{font-size:1.6rem;color:var(--slate-700);min-height:2.2rem}
.ir2-officer__v a{color:var(--blue);text-decoration:none}
.ir2-officer__v a:hover{text-decoration:underline}
/* A required field with no value must read as visibly blank, never as a fabricated one. */
.ir2-officer__v[data-needs-input]:empty::after{content:'\2014';color:var(--slate-400)}

/* ---- Browser: rail + panel ---- */
.ir2-browser{display:grid;grid-template-columns:34rem minmax(0,1fr);gap:2.4rem;align-items:start}

/* Left category rail. One tab per row of the Reg 46 status sheet (30+) plus the non-Reg-46
   categories, so the rail is taller than the viewport - it scrolls inside itself. */
.ir2-rail{display:flex;flex-direction:column;gap:.6rem;position:sticky;top:9rem;
  max-height:calc(100vh - 12rem);overflow-y:auto;overscroll-behavior:contain;
  padding-right:.6rem;scrollbar-width:thin}
.ir2-rail::-webkit-scrollbar{width:.6rem}
.ir2-rail::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:99.9rem}
.ir2-tab{display:flex;align-items:flex-start;gap:1rem;width:100%;text-align:left;
  padding:1.2rem 1.4rem;font-family:inherit;font-size:1.4rem;font-weight:600;line-height:1.35;
  color:var(--slate-700);background:var(--white);border:1px solid var(--slate-200);
  border-radius:1rem;cursor:pointer;transition:border-color .2s var(--ease),
  color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)}
.ir2-tab:hover{border-color:var(--blue-tint);color:var(--navy-900)}
.ir2-tab.is-active{background:var(--navy-900);border-color:var(--navy-900);color:var(--white);
  box-shadow:var(--shadow-floating)}
.ir2-tab__label{flex:1 1 auto;min-width:0}
/* Sr. No. from the status sheet - lets the rail be checked against the sheet row by row. */
.ir2-tab__sr{flex:0 0 auto;width:2.4rem;padding:.1rem 0;font-size:1.2rem;font-weight:700;
  text-align:center;color:var(--slate-500);background:var(--slate-100);border-radius:.5rem}
.ir2-tab.is-active .ir2-tab__sr{color:var(--white);background:rgba(255,255,255,.18)}
.ir2-tab__count{flex:0 0 auto;min-width:2.4rem;padding:.2rem .8rem;font-size:1.2rem;font-weight:700;
  text-align:center;color:var(--slate-600);background:var(--slate-100);border-radius:99.9rem}
.ir2-tab.is-active .ir2-tab__count{color:var(--white);background:rgba(255,255,255,.18)}
.ir2-tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Right panel */
.ir2-panel{min-width:0;background:var(--white);border:1px solid var(--slate-200);
  border-radius:1.6rem;box-shadow:var(--shadow-card);padding:3.2rem}
.ir2-panel__head{border-bottom:1px solid var(--slate-200);padding-bottom:2rem;margin-bottom:2.4rem}
.ir2-panel__title{font-size:2.4rem;font-weight:700;color:var(--navy-900)}
.ir2-panel__intro{margin-top:.8rem;font-size:1.5rem;line-height:1.6;color:var(--slate-600)}
.ir2-panel__hint{font-size:1.4rem;color:var(--slate-500);margin-bottom:1.6rem}

/* Accordions */
.ir2-acc{border:1px solid var(--slate-200);border-radius:1.2rem;overflow:hidden;margin-bottom:1rem}
.ir2-acc__head{display:flex;align-items:center;gap:1.2rem;width:100%;padding:1.6rem 2rem;
  font-family:inherit;font-size:1.6rem;font-weight:700;color:var(--navy-900);
  background:var(--white);border:0;cursor:pointer;transition:background .2s var(--ease)}
.ir2-acc__head:hover{background:var(--slate-50)}
.ir2-acc.is-open .ir2-acc__head{background:#F2F6FF;box-shadow:inset .4rem 0 0 var(--blue)}
.ir2-acc__title{flex:1 1 auto;text-align:left}
.ir2-acc__badge{flex:0 0 auto;min-width:2.4rem;padding:.2rem .8rem;font-size:1.2rem;font-weight:700;
  text-align:center;color:var(--blue);background:var(--white);border:1px solid var(--blue-tint);
  border-radius:99.9rem}
.ir2-acc__chev{flex:0 0 auto;width:1rem;height:1rem;border-right:2px solid var(--slate-500);
  border-bottom:2px solid var(--slate-500);transform:rotate(45deg);transition:transform .2s var(--ease)}
.ir2-acc.is-open .ir2-acc__chev{transform:rotate(-135deg)}
.ir2-acc__body{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.ir2-acc.is-open .ir2-acc__body{max-height:400rem}
.ir2-acc__inner{padding:.8rem 1.4rem 1.6rem;display:flex;flex-direction:column;gap:.6rem}

/* Document rows */
.ir2-doc{display:flex;align-items:center;gap:1.4rem;padding:1.2rem 1.4rem;background:var(--white);
  border:1px solid var(--slate-200);border-radius:.8rem;text-decoration:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.ir2-doc:hover{border-color:var(--blue-tint);box-shadow:0 8px 20px -12px rgba(3,41,82,.16)}
.ir2-doc:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ir2-doc__icon{flex:0 0 auto;width:3.2rem;height:3.2rem;display:grid;place-items:center;
  background:#F2F6FF;border-radius:.6rem}
.ir2-ic{width:1.7rem;height:1.7rem;fill:none;stroke:var(--blue);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ir2-doc__body{flex:1 1 auto;min-width:0}
.ir2-doc__name{display:block;font-size:1.5rem;font-weight:600;color:var(--navy-900)}
.ir2-doc__date{display:block;margin-top:.2rem;font-size:1.3rem;color:var(--slate-500)}
.ir2-doc__btn{flex:0 0 auto;padding:.7rem 1.6rem;font-size:1.3rem;font-weight:700;color:var(--white);
  background:var(--blue);border-radius:99.9rem;transition:background .2s var(--ease)}
.ir2-doc:hover .ir2-doc__btn{background:var(--blue-dark)}
/* Visited state. A reader working through 200+ filings needs to see which ones
   they have already opened; the marker is a dot rather than a colour change so it
   survives greyscale and does not weaken the name's contrast. */
a.ir2-doc:visited .ir2-doc__name::after{
  content:"";display:inline-block;vertical-align:middle;
  width:.6rem;height:.6rem;margin-left:.8rem;border-radius:50%;
  background:var(--slate-400);
}
a.ir2-doc:visited .ir2-doc__btn{background:var(--slate-500)}
a.ir2-doc:visited:hover .ir2-doc__btn{background:var(--blue-dark)}
/* Unavailable document: looks inert, not like a working link. */
/* Not a link, but still statutory text a reader must be able to read: keep the row
   visually quiet through the border and weight, not by fading the label below AA.
   (opacity:.6 + slate-400 landed at 2.56:1.) */
.ir2-doc--dead{background:var(--slate-50);cursor:default}
.ir2-doc--dead:hover{border-color:var(--slate-200);box-shadow:none}
.ir2-doc--dead .ir2-doc__name{color:var(--slate-600)}
.ir2-doc--dead .ir2-doc__na{flex:0 0 auto;font-size:1.3rem;color:var(--slate-600);font-weight:600}

/* Empty + noscript states */
.ir2-empty,.ir2-noscript{padding:3.2rem 2rem;text-align:center;color:var(--slate-500);
  font-size:1.5rem;line-height:1.6;background:var(--slate-50);border:1px dashed var(--slate-200);
  border-radius:1rem}
.ir2-noscript a{color:var(--blue)}

@media (max-width:991px){
  .ir2-snapshot{grid-template-columns:repeat(2,1fr)}
  /* Rail moves above the panel and scrolls horizontally, like a tab strip. Tabs wrap to two
     lines instead of running nowrap - with 40+ statutory heads a nowrap strip is endless. */
  .ir2-browser{grid-template-columns:1fr;gap:1.6rem}
  .ir2-rail{position:static;flex-direction:row;flex-wrap:nowrap;max-height:none;
    overflow-x:auto;overflow-y:hidden;gap:.8rem;padding:0 0 .8rem;
    -webkit-overflow-scrolling:touch}
  .ir2-tab{width:auto;max-width:26rem;flex:0 0 auto;align-items:center}
  .ir2-panel{padding:2.4rem}
}
@media (max-width:600px){
  .ir2-section{padding:4.8rem 0}
  .ir2-snapshot{grid-template-columns:1fr}
  .ir2-officer__grid{grid-template-columns:1fr}
  .ir2-panel{padding:1.8rem}
  .ir2-acc__head{padding:1.4rem 1.6rem;font-size:1.5rem}
  .ir2-doc{flex-wrap:wrap}
  .ir2-doc__btn{margin-left:auto}
}

@media (prefers-reduced-motion:reduce){
  .ir2-tab,.ir2-doc,.ir2-acc__head,.ir2-acc__chev{transition:none}
  .ir2-acc__body{transition:none}
}