/* ============================================================
   TRANSWARRANTY - INVESTOR PAGE SHELL (sidebar + content column)
   Lifted from the investor pages, which each carry their own inline copy.
   Self-contained: tokens and resets are scoped to .shell so the stylesheet can
   be dropped into a page with a different :root without either side bleeding
   into the other (tfl-corporate-information.html, for instance, defines its own
   --rule for table borders, which must NOT become the sidebar's --rule).
   Loaded via <link rel="stylesheet" href="assets/investor-shell.css">
   ============================================================ */

/* ---- scoped design tokens ---- */
.shell{
  --blue:#0071c1;
  --blue-deep:#005a9c;
  --card:#ffffff;
  --line:#e8edf2;
  --rule:#f0f3f7;
  --chip:#e5eefa;
  --band:#f4f7fe;
  --slate:#64748b;
  --slate-2:#6b7488;
  --navy:#1e2a44;
  --shell:1538px;
  --side-w:360px;
  font-family:'Outfit','Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
@media (max-width:1100px){ .shell{ --side-w:300px; } }

/* ---- insulation from the host page's global element styles ----
   The investor pages rely on a global a{text-decoration:none;color:inherit} and
   button{...} reset. A page without those would render every sidebar link
   underlined and UA-blue. Re-assert them here, scoped.
   NOTE: no color on .shell a - it scores 0,1,1 and would outrank
   .sub-row / .side-lodr (0,1,0) and strip their colours. Anchors that need one
   set it themselves; .crumbs a is the one that genuinely inherits. */
.shell *{ box-sizing:border-box; }
.shell a{ text-decoration:none; }
.shell button{ font:inherit; background:none; border:0; cursor:pointer; color:inherit; }
.crumbs a{ color:inherit; }
.scrim.is-open{opacity:1;visibility:visible}
.nav-panel.is-open{opacity:1;visibility:visible;transform:none}
.shell{
  position:relative;
  max-width:var(--shell);
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:var(--side-w) 1fr;
  gap:41px;
  align-items:stretch;
}
.content{min-width:0}
/* ------------------------------------------------------------
   SIDEBAR
   ------------------------------------------------------------ */
.side{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  align-self:stretch;
}
.side ul{list-style:none;margin:0;padding:0}
.side-row{
  position:relative;
  display:flex;align-items:center;gap:22px;
  width:100%;
  min-height:62px;
  padding:14px 32px 14px 30px;
  border-bottom:1px solid var(--rule);
  text-align:left;
  transition:background-color .18s ease;
}
.side-row:hover{background:#f6f9fd}
.side-row .ico{flex:0 0 22px;width:22px;height:22px;color:var(--blue)}
.side-row .txt{
  flex:1;
  font-size:15px;font-weight:500;line-height:1.35;letter-spacing:-.2px;
  color:var(--navy);
}
.side-row .arw{flex:0 0 10px;width:10px;height:10px;color:var(--blue);transition:transform .25s ease}
/* --- expanded section (not the current one): plain child list -------- */
.side-group{position:relative;border-bottom:1px solid var(--rule)}
.side-group > .side-row{border-bottom:0}
.side-group.is-open > .side-row .arw{transform:rotate(90deg)}
.side-group:not(.is-open) .side-sub{display:none}
.side-sub{list-style:none;margin:0;padding:2px 0 14px}
.sub-row{
  display:flex;align-items:center;gap:23px;
  min-height:44px;
  padding:5px 20px 5px 46px;
  font-size:15px;font-weight:500;letter-spacing:-.2px;
  color:var(--navy);
  transition:color .18s ease;
}
/* every child carries a blue dot */
.sub-row .mk{
  flex:0 0 9px;width:9px;height:9px;border-radius:50%;
  background:var(--blue);
}
.sub-row:hover{color:var(--blue)}
/* --- section holding the current page ------------------------------- */
.side-group.is-active > .side-row .txt{color:var(--blue)}
.side-group.is-active > .side-row .arw{transform:rotate(-90deg)}
/* the highlight wraps the current row only */
.sub-row.is-current{
  margin:2px 16px 2px 10px;
  padding:5px 16px 5px 36px;
  background:var(--band);border-radius:10px;
  color:var(--blue);
}
/* current top-level row (e.g. AGM and EGM, MOA & AOA) */
.side-row--current{
  width:auto;margin:6px 16px;padding:14px 20px;
  background:var(--band);border-radius:10px;border-bottom:0;
}
.side-row--current .txt{color:var(--blue)}
.side-row--current .dot{
  flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:var(--blue);
}
.side > ul > li:last-child > .side-row,
.side > ul > li:last-child.side-group{border-bottom:0}
/* ------------------------------------------------------------
   BREADCRUMB + PAGE HEAD
   ------------------------------------------------------------ */
.crumbs{
  display:flex;align-items:center;flex-wrap:wrap;gap:11px;
  font-size:13.5px;color:var(--slate-2);
  margin:0 0 34px;
}
.crumbs a{transition:color .18s ease}
.crumbs a:hover{color:var(--blue)}
.crumbs svg{width:11px;height:11px;color:#a8b1c2;flex:0 0 11px}
.crumbs .here{color:var(--blue);font-weight:500}
.page-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:56px;
  margin:0 0 35px;
}
.page-head h1{
  margin:0;
  font-size:49px;font-weight:700;line-height:1.14;letter-spacing:-.8px;
  color:var(--blue);
  max-width:560px;
}
.page-head p{
  margin:14px 0 0;max-width:470px;
  font-size:16.5px;line-height:26px;color:var(--slate);
}
/* ============================================================
   LODR BUTTON AT THE TOP OF THE SIDEBAR
   Shown at the top of the sidebar on every investor page.
   Financial Reports and the home investor block additionally keep
   the full-size card in the page header.
   ============================================================ */
.side-lodr{
  display:flex;align-items:center;gap:10px;
  margin:20px 16px 18px;
  padding:16px 12px 16px 16px;
  background:var(--blue);color:#fff;
  border-radius:12px;
  transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.side-lodr span{
  flex:1;text-align:center;
  font-size:14.5px;font-weight:600;line-height:1.46;letter-spacing:-.1px;
}
.side-lodr svg{flex:0 0 17px;width:17px;height:17px}
.side-lodr:hover{
  background:var(--blue-deep);transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,113,193,.26);
}
@media (max-width:1100px){
  .side-row .txt,.sub-row{font-size:13.5px}
  .side-row{padding:13px 18px 13px 22px;gap:15px}
  .side-row .ico{flex-basis:20px;width:20px;height:20px}
  .sub-row{padding-left:34px;gap:16px}
  .page-head{flex-direction:column;gap:26px}
}
@media (max-width:860px){
  .shell{grid-template-columns:1fr;gap:24px}
  .side{order:2}
  .content{order:1}
  .page-head h1{font-size:34px;letter-spacing:-.6px}
  .page-head p{font-size:16px;line-height:24px}
}
@media (max-width:560px){
  .shell{padding:0 16px}
  .crumbs{font-size:12.5px;gap:8px;margin-bottom:22px}
  .page-head h1{font-size:29px}
  .side-row{padding:12px 18px;gap:16px;min-height:56px}
  .sub-row{padding-left:38px;gap:12px}
}
@media (max-width:1100px){
  .side-lodr{margin:16px 12px 14px;padding:14px 10px 14px 13px}
  .side-lodr span{font-size:13.5px}
}