/* ==========================================================
   ITGOA — Tamil Nadu & Puducherry Unit
   Website + member portal stylesheet.

   One stylesheet serves both halves of the site:

     - the public pages (home, About, Our Team, Downloads, …),
       which use the three-column shell;
     - the member portal (login, registration, dashboard,
       Contact us, Feedback, administration), which uses a
       single centred column.

   The palette, type and square-cornered, ruled look are taken
   from the Unit website. Every class the portal already used
   is still here — only its appearance has changed.
   ========================================================== */

:root{
  /* --- website palette --- */
  --ink:       #101B3D;
  --ink-soft:  #2C3A66;
  --crimson:   #8E1B25;
  --crimson-d: #6E1119;
  --gold:      #C9A227;
  --gold-d:    #B08D2E;
  --paper:     #F2F0E8;
  --paper-2:   #EAE7DB;
  --card:      #FFFFFF;
  --surface:   #FFFFFF;
  --rule:      #DCD6C6;
  --rule-soft: #E8E4D7;
  --body:      #33342F;
  --muted:     #6B6A62;
  --sand:      #FAF8F1;
  --max:       1240px;

  /* portal aliases, kept so nothing that referenced them breaks */
  --ink-2:     #2C3A66;
  --ink-3:     #1F2E5F;
  --brass:     #C9A227;
  --brass-2:   #B08D2E;
  --line:      #DCD6C6;
  --line-soft: #E8E4D7;
  --text:      #33342F;

  --ok:        #1B5E20;
  --ok-bg:     #EAF4EA;
  --ok-line:   #9CC49C;
  --alert:     #8E1B25;
  --alert-bg:  #F8EAEA;
  --alert-line:#DDB5B5;
  --warn:      #7A5B08;
  --warn-bg:   #FBF3DC;
  --warn-line: #E3D097;

  --serif: "Zilla Slab", Georgia, "Times New Roman", serif;
  /* Noto Sans Tamil sits in the stack rather than only in --tamil: a font
     list is consulted per GLYPH, so Latin still renders in Inter and Tamil
     — menu names from the panel, mostly — renders in Noto Sans Tamil at
     whatever weight its surroundings use, instead of a system face that
     looks thinner than the English beside it. */
  --sans:  "Inter", "Noto Sans Tamil", "Segoe UI", Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --tamil: "Noto Sans Tamil", var(--sans);

  /* The website is square-cornered throughout. */
  --r: 0;
  --r-lg: 0;
  --shadow: 0 1px 2px rgba(16,27,61,.05);
  --shadow-lg: 0 10px 30px -14px rgba(16,27,61,.35);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--sans);font-size:16.5px;line-height:1.62;
  /* TYPOGRAPHY (v72). Ordinary text is 500, not 400: at this size Inter's
     regular reads thin on a white page, and everything that inherits from
     here — paragraphs, lists, table cells, hints, muted notes — is lifted
     by this one line. Labels, headings and buttons keep their own heavier
     weights below; nothing here is 700 that was not 700 before.
     -webkit-font-smoothing:antialiased was removed with the same aim: on
     macOS it thins every stroke, which is the complaint this pass answers. */
  font-weight:500;
  /* Keeps the footer at the foot of the window on short pages
     (the administrator sign-in, for one) instead of halfway up. */
  min-height:100vh;display:flex;flex-direction:column;
}

h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);line-height:1.2;margin:0 0 .5em;font-weight:600;letter-spacing:0;}
h1{font-size:2.1rem;}
h2{font-size:1.55rem;}
h3{font-size:1.12rem;}
p{margin:0 0 1em;}
img{max-width:100%;height:auto;display:block;}

a{color:var(--crimson);text-underline-offset:2px;}
a:hover{color:var(--ink);}

.wrap{max-width:var(--max);width:100%;margin:0 auto;padding:0 20px;}

.muted{color:var(--muted);}
.small{font-size:.86rem;}
.mono{font-family:var(--mono);}
.center{text-align:center;}
.rule{height:1px;background:var(--rule-soft);border:0;margin:1.4rem 0;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* An element carrying the `hidden` attribute must stay hidden even when a
   rule below gives it `display:flex` or `display:grid`. */
[hidden]{display:none !important;}

a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;
}

/* ==========================================================
   1. Site chrome
   ========================================================== */

/* ---------- File strip ---------- */
.filestrip{background:var(--ink);color:#C9CBD8;font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.06em;padding:6px 0;}
.filestrip .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;}

/* ---------- Masthead ---------- */
.masthead{background:var(--card);border-bottom:1px solid var(--rule);}
.masthead .wrap{display:flex;align-items:center;gap:16px;padding-top:9px;padding-bottom:9px;position:relative;}
/* 64px since v66: the redrawn emblem carries its ribbon, so the seal itself
   is a little smaller within the same height, and 54px made it a stamp. */
.crest{flex:0 0 auto;height:64px;display:flex;align-items:center;}
.crest img{height:64px;width:auto;object-fit:contain;}
.mast-text .org{font-family:var(--serif);font-weight:700;font-size:1.14rem;color:var(--ink);line-height:1.15;margin:0;}
.mast-text .unit{font-size:.86rem;color:var(--crimson);font-weight:700;margin:1px 0 0;}
.mast-text .motto{font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:2px 0 0;}

/* Right-hand corner of the masthead: the member link on public pages, the
   profile menu once somebody is logged in. */
.mastcorner{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:10px;}
.mastcorner .memberbtn{
  display:inline-block;text-decoration:none;background:var(--crimson);color:#fff;
  font-weight:700;font-size:.86rem;line-height:1.2;padding:10px 16px;
  border:2px solid var(--crimson);white-space:nowrap;
}
.mastcorner .memberbtn:hover{background:var(--ink);border-color:var(--ink);color:#fff;}
.mastcorner .memberbtn.quiet{background:#fff;color:var(--ink);border-color:var(--rule);}
.mastcorner .memberbtn.quiet:hover{background:var(--ink);color:#fff;border-color:var(--ink);}

@media (max-width:900px){
  .masthead .wrap{flex-wrap:wrap;}
  .mastcorner{margin-left:0;width:100%;padding-top:9px;}
  .mastcorner .memberbtn{display:block;text-align:center;white-space:normal;flex:1;}
}

/* ---------- Navigation with dropdowns ---------- */
/* The red bar stays at the top of the window while the page scrolls, so the
   menu is always within reach on the long pages. */
nav.main{background:var(--crimson);position:sticky;top:0;z-index:60;}
nav.main .wrap{display:flex;align-items:center;flex-wrap:wrap;}
nav.main ul{list-style:none;margin:0;padding:0;}
nav.main > .wrap > ul{display:flex;flex-wrap:wrap;}
nav.main li{position:relative;}
nav.main a, nav.main .parent{
  color:#F4EFE6;text-decoration:none;display:block;
  font-size:.83rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:13px 14px;border-bottom:3px solid transparent;cursor:pointer;
  background:none;border-left:0;border-right:0;border-top:0;font-family:inherit;
  width:100%;text-align:left;
}
nav.main > .wrap > ul > li > a:hover,
nav.main > .wrap > ul > li:hover > .parent,
nav.main > .wrap > ul > li:focus-within > .parent{background:var(--crimson-d);color:#fff;}
nav.main a.active{border-bottom-color:var(--gold);color:#fff;}
nav.main .caret{font-size:.6rem;margin-left:5px;}

nav.main ul ul{
  position:absolute;top:100%;left:0;min-width:240px;
  background:#1A1A1A;border-top:3px solid var(--crimson);
  box-shadow:0 8px 22px rgba(0,0,0,.3);display:none;
}
nav.main li:hover > ul,
nav.main li:focus-within > ul{display:block;}
nav.main ul ul li{border-bottom:1px solid rgba(255,255,255,.09);}
nav.main ul ul a, nav.main ul ul .parent{
  padding:11px 15px;font-size:.78rem;border-bottom:0;color:#EDEAE2;text-transform:uppercase;
}
nav.main ul ul a:hover, nav.main ul ul li:hover > .parent{background:var(--crimson);color:#fff;}
nav.main ul ul ul{top:0;left:100%;border-top:0;border-left:3px solid var(--crimson);}

.navtoggle{display:none;background:none;border:0;color:#fff;font-size:1.35rem;padding:11px 14px;cursor:pointer;margin-left:auto;font-family:inherit;}

/* ---------- The Secondary navigation bar ---------- */
/* A second, quieter row in navy under the red bar, drawn only when the
   Secondary navigation bar has menus in it (Admin panel › Bars & Menus). It scrolls away
   with the page; the red bar alone stays pinned. */
nav.main.secondary{background:var(--ink-soft);position:static;z-index:50;border-top:1px solid rgba(255,255,255,.12);}
nav.main.secondary a, nav.main.secondary .parent{font-size:.76rem;padding:10px 14px;letter-spacing:.05em;}
nav.main.secondary > .wrap > ul > li > a:hover,
nav.main.secondary > .wrap > ul > li:hover > .parent,
nav.main.secondary > .wrap > ul > li:focus-within > .parent{background:var(--ink);}
nav.main.secondary ul ul{border-top-color:var(--ink);}
nav.main.secondary ul ul a:hover, nav.main.secondary ul ul li:hover > .parent{background:var(--ink-soft);}
nav.main.secondary ul ul ul{border-left-color:var(--ink);}
nav.main.secondary .navtoggle{font-size:1rem;padding:9px 14px;}

/* ---------- Scrolling slogan bar ---------- */
.slogan{background:var(--ink);border-bottom:2px solid var(--gold);overflow:hidden;padding:8px 0;}
.slogan .track{display:inline-block;white-space:nowrap;animation:slogan-scroll 18s linear infinite;}
.slogan .track span{font-family:var(--serif);font-weight:700;font-size:1.02rem;color:var(--gold);letter-spacing:.06em;}
.slogan:hover .track{animation-play-state:paused;}
@keyframes slogan-scroll{0%{transform:translateX(100vw);}100%{transform:translateX(-100%);}}

/* ---------- Three-column shell (home) / single column (everywhere else) ---------- */
/* width:100% matters: the body is a flex column, and the `margin:0 auto`
   that centres this box also cancels a flex item's default stretch, so
   without it the shell shrinks to fit its contents instead of filling the
   page. With the sidebars gone from the inner pages that was very visible. */
.shell{max-width:var(--max);width:100%;margin:0 auto;padding:26px 20px 50px;display:grid;grid-template-columns:214px 1fr 268px;gap:26px;align-items:start;}
.shell.full{grid-template-columns:1fr;}
main{min-width:0;}

/* ---------- Sidebars ---------- */
.side{display:flex;flex-direction:column;gap:20px;}
.side .panel > h4{
  background:var(--ink);color:#fff;margin:0;padding:11px 14px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:600;
}
.side .panel .pbody{padding:14px;}
.side .panel ul{list-style:none;margin:0;padding:0;}
.side .panel ul li{border-bottom:1px solid var(--rule);}
.side .panel ul li:last-child{border-bottom:0;}
.side .panel ul a{display:block;padding:10px 14px;text-decoration:none;color:var(--ink);font-size:.88rem;font-weight:600;}
.side .panel ul a:before{content:"\203A";color:var(--crimson);margin-right:8px;font-weight:700;}
.side .panel ul a:hover{background:#F5F2E9;color:var(--crimson);}

/* Member area panel in the right-hand sidebar. */
.loginbox > h4{background:var(--crimson) !important;}
.loginbox .lbtn{
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  width:100%;background:#E07B1E;color:#fff;border:0;font-family:inherit;
  font-weight:700;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;
  padding:11px;cursor:pointer;text-align:center;text-decoration:none;
}
.loginbox .lbtn:hover{background:#C46814;color:#fff;}
.loginbox .lbtn:disabled{opacity:.55;cursor:not-allowed;}
.loginbox .alt{text-align:center;font-size:.86rem;margin:13px 0 0;color:var(--body);}
.loginbox .alt a{color:#1E6FA8;}
.loginbox .field{margin-bottom:12px;}
.loginbox label.lab{font-size:.86rem;}
.loginbox .hint{font-size:.75rem;}
.loginbox .msg{margin:12px 0 0;}

/* ---------- Downloads panel ---------- */
.dl a{display:flex;gap:10px;align-items:flex-start;text-decoration:none;color:var(--ink);font-size:.88rem;font-weight:600;border:1px solid var(--rule);background:var(--sand);padding:11px 12px;margin-bottom:9px;}
.dl a:last-child{margin-bottom:0;}
.dl a:hover{border-color:var(--crimson);color:var(--crimson);}
.dl .ic{color:var(--crimson);font-size:1rem;line-height:1.2;}
.dl .soon{border-style:dashed;color:var(--muted);background:#fff;}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:#B9BCCA;padding:40px 0 0;font-size:.9rem;margin-top:auto;}
footer h4{color:#fff;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 12px;font-weight:600;}
footer a{color:#D9DCE6;text-decoration:none;}
footer a:hover{color:var(--gold);}
footer ul{list-style:none;margin:0;padding:0;}
footer li{margin-bottom:7px;}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1.2fr;gap:32px;padding-bottom:30px;}
.footbar{border-top:1px solid rgba(255,255,255,.14);padding:15px 0;font-size:.77rem;font-weight:500;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--mono);letter-spacing:.04em;}
/* v78: the visitor line at the right of the foot bar, where "Administration" used to be. */
.footvc b{color:#fff;font-weight:700;}

/* ==========================================================
   2. Public page content blocks
   ========================================================== */

.pagehead{background:var(--ink);color:#fff;padding:26px 26px 24px;margin-bottom:22px;}
.pagehead .eyebrow{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 8px;}
.pagehead h1{color:#fff;margin:0;}
.pagehead p{color:#C6C9D6;max-width:66ch;margin:10px 0 0;}
.pagehead a{color:#EBD68B;}

.block{background:var(--card);border:1px solid var(--rule);padding:24px 26px;margin-bottom:22px;}
.block > :first-child{margin-top:0;}
.block > :last-child{margin-bottom:0;}

.sechead{margin:0 0 18px;}
.sechead .eyebrow{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 5px;}
.sechead h2{margin:0;}
.sechead .rule{width:52px;height:3px;background:var(--crimson);margin:10px 0 0;}

.hero{background:linear-gradient(180deg,#152350 0%,#0C1531 100%);color:#fff;padding:44px 30px;margin-bottom:22px;position:relative;overflow:hidden;}
.hero .eyebrow{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 12px;}
.hero h1{color:#fff;font-size:2.2rem;max-width:22ch;margin:0 0 14px;}
.hero p{color:#C6C9D6;max-width:58ch;margin:0 0 22px;}
.hero .emblem-mark{position:absolute;right:24px;top:50%;transform:translateY(-50%);width:168px;opacity:.13;pointer-events:none;}
.btnrow{display:flex;gap:11px;flex-wrap:wrap;}

.grid{display:grid;gap:16px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}

.card{background:var(--card);border:1px solid var(--rule);padding:18px 20px;}
.card h3{margin-top:0;}
.card p:last-child{margin-bottom:0;}

.aim{background:var(--sand);border:1px solid var(--rule);border-left:4px solid var(--crimson);padding:15px 17px;}
.aim .num{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.14em;color:var(--gold);display:block;margin-bottom:5px;}
.aim p{margin:0;font-size:.95rem;}

.pledge{background:var(--sand);border:1px solid var(--rule);border-top:4px solid var(--crimson);padding:18px;}
.pledge .num{font-family:var(--mono);font-size:1.35rem;color:var(--gold);display:block;line-height:1;margin-bottom:8px;}
.pledge h3{margin:0 0 6px;font-size:1.03rem;}
.pledge p{margin:0;font-size:.93rem;}

/* ---------- Notices (public list) ---------- */
.notices{list-style:none;margin:0;padding:0;}
.notices li{background:var(--sand);border:1px solid var(--rule);padding:13px 16px;margin-bottom:9px;display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;}
.notices .date{font-family:var(--mono);font-size:.7rem;font-weight:500;color:var(--crimson);flex:0 0 92px;padding-top:3px;}
.notices .txt{flex:1;min-width:190px;}
.notices .txt strong{display:block;color:var(--ink);}

/* ---------- Featured / Latest Uploads box (home page, v71) ----------
   One box, two tabs. Each list crawls upwards on its own inside a viewport
   of fixed height, and stops under the mouse. The height is set in rem, not
   rows: a long title wrapping to three lines must not push the box taller
   than the column beside it.

   Without the crawl — a reader who asked for less motion, a touch screen,
   or a script that did not run — the same box is an ordinary list that
   scrolls by hand: `.ticking` is only ever added by the script that moves
   it, and only overflow:hidden needs it. */
.feedbox{border:1px solid var(--rule);background:var(--card);box-shadow:0 1px 0 rgba(16,27,61,.04);}
.feedtabs{display:flex;flex-wrap:wrap;background:var(--ink);}
.feedtab{
  appearance:none;border:0;border-bottom:3px solid transparent;background:none;
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:#A7AEC2;padding:14px 20px 11px;cursor:pointer;
  display:flex;align-items:center;gap:8px;
}
.feedtab .n{font-size:.68rem;font-weight:600;letter-spacing:.06em;color:#7C859C;}
.feedtab .n:empty{display:none;}
.feedtab:hover{color:#fff;}
.feedtab.on{color:#fff;border-bottom-color:var(--gold);background:rgba(255,255,255,.08);}
.feedtab.on .n{color:var(--gold);}
.feedtab:focus-visible{outline:3px solid var(--gold);outline-offset:-3px;}

.feedscroll{position:relative;height:21rem;overflow-y:auto;overscroll-behavior:contain;background:var(--card);scrollbar-width:thin;scrollbar-color:#CFCABA transparent;}
.feedscroll.ticking{overflow:hidden;}
.feedscroll.ticking:before,.feedscroll.ticking:after{content:"";position:absolute;left:0;right:0;pointer-events:none;z-index:2;}
.feedscroll.ticking:before{top:0;height:18px;background:linear-gradient(#fff,rgba(255,255,255,0));}
.feedscroll.ticking:after{bottom:0;height:26px;background:linear-gradient(rgba(255,255,255,0),#fff);}

.feed-list{list-style:none;margin:0;padding:0;will-change:transform;}
.feed-list li{display:flex;gap:14px;align-items:flex-start;padding:13px 16px;border-bottom:1px solid #EFECE1;background:var(--card);}
.feed-list li:hover{background:var(--sand);}
.feed-list .feed-empty{display:block;padding:2.2rem 1rem;text-align:center;color:var(--muted);font-size:.95rem;}
.feed-list .feed-empty:hover{background:var(--card);}
.feed-date{font-family:var(--mono);font-size:.7rem;font-weight:500;color:var(--crimson);flex:0 0 72px;padding-top:4px;white-space:nowrap;}
.feed-main{flex:1 1 auto;min-width:0;}
.feed-title{display:block;font-weight:600;font-size:.98rem;line-height:1.4;color:var(--ink);text-decoration:none;text-wrap:pretty;overflow-wrap:anywhere;}
a.feed-title:hover,a.feed-title:focus{color:var(--crimson);}
.feed-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:4px;font-family:var(--mono);font-size:.66rem;font-weight:500;}
.feed-where{font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}
a.feed-where{text-decoration:none;border-bottom:1px dotted #B6B2A4;}
a.feed-where:hover,a.feed-where:focus{color:var(--crimson);border-color:currentColor;}
.feed-no{color:#8C8A80;}
.feed-members{color:var(--gold-d);letter-spacing:.06em;}

/* The file button and its download arrow. The button opens the paper the way
   the site always has (a PDF in a new tab); the arrow saves it instead. */
.feed-act{flex:0 0 auto;display:flex;align-items:stretch;margin-top:2px;}
.feed-type,.feed-dl{
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  border:1px solid var(--rule);background:var(--sand);color:var(--ink);
  font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.08em;white-space:nowrap;
}
.feed-type{padding:6px 10px;min-height:30px;}
.feed-dl{width:30px;min-height:30px;border-left:0;padding:0;}
.feed-dl svg{width:14px;height:14px;display:block;}
.feed-type:hover,.feed-type:focus,.feed-dl:hover,.feed-dl:focus{border-color:var(--crimson);color:var(--crimson);z-index:1;}
.feed-dl:hover,.feed-dl:focus{background:#fff;}
.feed-nofile{color:var(--muted);font-family:var(--mono);font-size:.66rem;font-weight:500;padding:6px 4px;}

.feedfoot{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;
  margin:0;padding:10px 16px;border-top:1px solid var(--rule-soft);background:var(--sand);
  font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.feedfoot .paused{color:var(--crimson);}
.feedfoot:has([data-feedhint]:empty){display:none;}

@media (max-width:640px){
  .feedscroll{height:24rem;}
  .feedtab{padding:12px 14px 9px;font-size:.68rem;letter-spacing:.1em;}
  /* Date above the title; the file button keeps its own row on the right. */
  .feed-list li{flex-wrap:wrap;gap:6px 12px;padding:12px 14px;}
  .feed-date{flex:1 1 100%;padding-top:0;}
  .feed-main{flex:1 1 0;min-width:0;}
  .feed-act{margin-top:0;}
  .feed-type{min-height:34px;}
  .feed-dl{min-height:34px;width:34px;}
}

/* ---------- Gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;}
.gal .ph{aspect-ratio:4/3;background:#E4E1D5;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.68rem;font-weight:500;color:var(--muted);text-align:center;padding:8px;}

/* ---------- Document tables ---------- */
td.docdate{white-space:nowrap;color:var(--muted);font-size:.88rem;font-weight:500;}
td.doctitle{line-height:1.5;}
a.dlbtn{
  display:inline-block;white-space:nowrap;text-decoration:none;
  border:1px solid var(--rule);background:var(--sand);color:var(--ink);
  font-size:.8rem;font-weight:700;padding:6px 12px;
}
a.dlbtn:hover{border-color:var(--crimson);color:var(--crimson);}

.newbadge{
  display:inline-block;background:#F3E8FF;color:#7326B8;
  border:1px solid #C9A0F0;border-radius:11px;
  font-family:var(--mono);font-size:.62rem;font-weight:600;
  letter-spacing:.1em;padding:1px 9px;margin-left:8px;vertical-align:middle;
}

/* ==========================================================
   3. Portal layout
   ========================================================== */

.page{padding:30px 0 56px;}
.split{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:32px;align-items:start;}

.panel{background:var(--card);border:1px solid var(--rule);}
.panel-pad{padding:22px 24px;}

.eyebrow{
  font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--crimson);margin:0 0 8px;
}

/* ---------- The identity-card panel (login, registration, dashboard) ---------- */

.idcard{
  position:relative;background:var(--card);
  border:1px solid var(--rule);border-top:4px solid var(--crimson);
  box-shadow:var(--shadow-lg);
}
.idcard-head{
  display:flex;align-items:center;gap:12px;
  padding:18px 22px 15px;border-bottom:1px solid var(--rule);
  background:var(--sand);
}
.idcard-head h2{margin:0;font-size:1.2rem;}
.idcard-body{padding:22px;}

.cardmark{flex:0 0 auto;width:44px;height:44px;object-fit:contain;}

/* Member card on the dashboard. */
.member-card{color:#E6E8F0;background:linear-gradient(180deg,#152350 0%,#0C1531 100%);border:1px solid var(--ink);border-top:4px solid var(--gold);}
.member-card .idcard-head{background:rgba(255,255,255,.05);border-bottom-color:rgba(255,255,255,.18);}
.member-card h2{color:#fff;}
.member-card .muted{color:#A9AEC2;}
.member-card .field-label{color:var(--gold);}
.member-card .field-value{color:#fff;}
.member-card .cardmark{background:#fff;padding:2px;}

.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem 1.4rem;}
.field-label{
  font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.18rem;
}
.field-value{font-size:.97rem;font-weight:600;color:var(--ink);}
.field-value.code{font-family:var(--mono);letter-spacing:.04em;font-weight:600;}

/* ==========================================================
   4. Forms
   ========================================================== */

.field{margin-bottom:1rem;}
label.lab{
  display:block;font-size:.88rem;font-weight:700;color:var(--ink);
  margin-bottom:.3rem;
}
.lab .req{color:var(--crimson);}
.hint{font-size:.8rem;color:var(--muted);margin-top:.3rem;}

input[type=text],input[type=password],input[type=email],input[type=tel],
input[type=number],input[type=date],select,textarea{
  width:100%;padding:10px 11px;
  font-family:var(--sans);font-size:.95rem;font-weight:500;color:var(--body);
  background:#fff;border:1px solid #BFBAA8;border-radius:0;
  transition:border-color .12s,box-shadow .12s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--ink-soft);
  box-shadow:0 0 0 3px rgba(44,58,102,.14);
}
input:disabled,input[readonly],select:disabled,textarea:disabled{
  background:var(--paper-2);color:var(--muted);cursor:not-allowed;border-color:var(--rule);
}
/* A button does NOT inherit the body's weight: the browser's own stylesheet
   sets 400 on form controls, which is why the ☰ Menu toggle, the close
   crosses and the small icon buttons were still hairline after the body was
   lifted. 500 is the floor; every button that already asked for 600 or 700
   — .btn, the navigation, the tabs — keeps it, since a class outranks this. */
button{font-family:var(--sans);font-weight:500;}

/* The browser draws "Choose file / No file chosen" itself, in its own Arial
   400 — the one piece of visible text on the Join and upload forms that the
   rest of this pass could not reach. Family and weight only. */
input[type=file]{font-family:var(--sans);font-weight:500;}

/* A search box was never in the list above, so it kept the browser's own
   Arial 400 — the thinnest text on the site, and on the Telephone Directory
   it is the one box everybody types in. Family and weight only: the border,
   padding and size each page gives its own box are left untouched. */
input[type=search]{font-family:var(--sans);font-weight:500;}

input.code-input{font-family:var(--mono);letter-spacing:.12em;}
/* What is typed is 500 like any other field; the prompt stays lighter in
   COLOUR rather than in stroke, so it reads as secondary without going
   hairline. */
input::placeholder,textarea::placeholder{font-weight:500;opacity:1;}
textarea{min-height:120px;font-family:var(--mono);font-size:.86rem;resize:vertical;}

/* Short free-text boxes (a member's note, an administrator's note). */
textarea.note-input{min-height:0;font-family:var(--sans);font-size:.93rem;line-height:1.5;}

/* Grievances and feedback are prose, not pasted data. */
textarea.prose-input{font-family:var(--sans);font-size:.97rem;line-height:1.6;min-height:150px;}

.locked-note{font-size:.76rem;color:var(--muted);display:inline-flex;align-items:center;gap:.28rem;margin-top:.28rem;}

/* Public-page form grid, kept for pages that use it. */
.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.formgrid .field.full{grid-column:1/-1;}

/* ---------- Buttons ---------- */

/* The base button is the website's gold call to action. Portal buttons always
   carry a modifier below, which overrides the colour and the capitals. */
.btn{
  display:inline-block;text-decoration:none;font-weight:700;font-size:.86rem;
  letter-spacing:.05em;text-transform:uppercase;padding:11px 22px;
  border:2px solid var(--gold);background:var(--gold);color:var(--ink);
  cursor:pointer;font-family:inherit;line-height:1.3;text-align:center;
}
.btn:hover{background:var(--gold-d);border-color:var(--gold-d);color:var(--ink);}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);}
.btn.ghost:hover{background:rgba(255,255,255,.12);color:#fff;}
.btn.ghost.dark{color:var(--ink);border-color:var(--ink);background:transparent;}
.btn.ghost.dark:hover{background:var(--ink);color:#fff;border-color:var(--ink);}

/* Portal buttons: sentence case, so long labels stay readable. */
.btn-primary,.btn-brass,.btn-ghost,.btn-danger,.btn-sm{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  text-transform:none;letter-spacing:0;font-size:.92rem;padding:10px 18px;
}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.55;cursor:not-allowed;}
.btn-primary{background:var(--ink);border-color:var(--ink);color:#fff;}
.btn-primary:hover:not(:disabled){background:var(--ink-soft);border-color:var(--ink-soft);color:#fff;}
.btn-brass{background:var(--crimson);border-color:var(--crimson);color:#fff;}
.btn-brass:hover:not(:disabled){background:var(--crimson-d);border-color:var(--crimson-d);color:#fff;}
.btn-ghost{background:#fff;color:var(--ink);border-color:#BFBAA8;}
.btn-ghost:hover:not(:disabled){background:var(--sand);border-color:var(--ink);color:var(--ink);}
.btn-danger{background:#fff;color:var(--crimson);border-color:var(--alert-line);}
.btn-danger:hover:not(:disabled){background:var(--alert-bg);color:var(--crimson);}
.btn-sm{padding:.36rem .7rem;font-size:.82rem;border-width:1px;}
.btn-block{width:100%;display:flex;}

.btn-row{display:flex;gap:.6rem;flex-wrap:wrap;}

.linkrow{display:flex;justify-content:space-between;gap:1rem;margin-top:1rem;font-size:.88rem;}
.linkrow a{font-weight:600;}

/* Links that look like buttons. */
a.btn{text-decoration:none;}
a.btn-brass,a.btn-primary{color:#fff;}
a.btn-brass:hover,a.btn-primary:hover{color:#fff;}

/* ==========================================================
   5. Messages, steps, tables, tags
   ========================================================== */

.msg{padding:11px 13px;font-size:.88rem;margin-bottom:1rem;border:1px solid;border-left-width:4px;}
.msg-error{background:var(--alert-bg);border-color:var(--alert-line);color:var(--crimson);}
.msg-ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok);}
.msg-info{background:#ECEFF7;border-color:#C2CADF;color:var(--ink-soft);}
.msg-warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn);}
.msg:empty{display:none;}

.dev-otp{
  font-family:var(--mono);font-size:1.1rem;letter-spacing:.3em;
  background:var(--warn-bg);border:1px dashed var(--warn-line);color:var(--warn);
  padding:.5rem .7rem;display:inline-block;margin-top:.4rem;
}

/* ---------- Stepper ---------- */
.steps{display:flex;gap:.35rem;margin-bottom:1.6rem;flex-wrap:wrap;}
.step-pip{flex:1 1 0;min-width:46px;height:3px;background:var(--rule);position:relative;}
.step-pip.done{background:var(--gold);}
.step-pip.active{background:var(--crimson);}
.step-caption{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem;}

.stage{display:none;}
.stage.active{display:block;animation:rise .22s ease-out;}
@keyframes rise{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}

/* ---------- Tables ---------- */
.tablewrap,.table-scroll{overflow-x:auto;border:1px solid var(--rule);background:var(--card);}
table{border-collapse:collapse;width:100%;font-size:.93rem;}
.tablewrap table{min-width:480px;}
th{
  background:var(--ink);color:#fff;text-align:left;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  padding:10px 13px;font-weight:600;white-space:nowrap;
}
td{padding:9px 13px;border-bottom:1px solid var(--rule);vertical-align:top;}
.table-scroll td{vertical-align:middle;}
tbody tr:last-child td{border-bottom:0;}
.tablewrap tbody tr:nth-child(even){background:#FAF9F4;}
.table-scroll tbody tr:hover{background:#FAF9F4;}
td.post{font-weight:700;color:var(--ink);white-space:nowrap;}
td.sl{width:78px;color:var(--muted);font-family:var(--mono);font-weight:500;}
td.code{font-family:var(--mono);font-size:.85rem;font-weight:500;}
td.mono{font-family:var(--mono);}
.empty td{text-align:center;color:var(--muted);font-style:italic;padding:22px 13px;}

.tag{display:inline-block;padding:.1rem .5rem;font-size:.72rem;font-weight:700;letter-spacing:.02em;border:1px solid;}
.tag-ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line);}
.tag-pend{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line);}
.tag-off{background:var(--paper-2);color:var(--muted);border-color:var(--rule);}
.tag-live{background:#ECEFF7;color:var(--ink-soft);border-color:#C2CADF;}
.tag-quiet{background:var(--paper-2);color:var(--muted);border-color:var(--rule);}

/* ---------- Counters ---------- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin-bottom:1.5rem;}
.stat{background:#fff;border:1px solid var(--rule);border-left:4px solid var(--crimson);padding:14px 16px;}
.stat .n{font-family:var(--serif);font-size:1.8rem;font-weight:600;color:var(--ink);line-height:1;}
.stat .l{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.35rem;}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:.2rem;border-bottom:1px solid var(--rule);margin-bottom:1.5rem;flex-wrap:wrap;}
.tab{
  padding:.6rem .95rem;font-size:.88rem;font-weight:700;color:var(--muted);
  background:none;border:0;border-bottom:3px solid transparent;cursor:pointer;font-family:inherit;
}
.tab:hover{color:var(--ink);}
.tab.active{color:var(--ink);border-bottom-color:var(--crimson);}
.tabpane{display:none;}
.tabpane.active{display:block;}

/* ==========================================================
   6. Profile menu, modal, notices, footer bar
   ========================================================== */

.profile-btn{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  background:#fff;border:1px solid var(--rule);
  color:var(--ink);padding:.32rem .7rem .32rem .35rem;
  font-family:inherit;font-size:.86rem;font-weight:600;
}
.profile-btn:hover{background:var(--sand);border-color:var(--ink);}
.avatar{
  width:28px;height:28px;display:grid;place-items:center;
  background:var(--crimson);color:#fff;font-size:.76rem;font-weight:700;font-family:var(--sans);
}
.menu-wrap{position:relative;}
.menu{
  position:absolute;right:0;top:calc(100% + .5rem);min-width:212px;z-index:80;
  background:#fff;border:1px solid var(--rule);
  box-shadow:var(--shadow-lg);padding:.3rem;display:none;
}
.menu.open{display:block;animation:rise .14s ease-out;}
.menu-name{padding:.55rem .7rem;border-bottom:1px solid var(--rule-soft);margin-bottom:.3rem;}
.menu-name strong{display:block;font-size:.92rem;color:var(--ink);}
.menu button,.menu a{
  display:block;width:100%;text-align:left;padding:.5rem .7rem;border:0;background:none;
  font-family:inherit;font-size:.89rem;color:var(--body);cursor:pointer;text-decoration:none;
}
.menu button:hover,.menu a:hover{background:var(--sand);color:var(--crimson);}
.menu .sep{height:1px;background:var(--rule-soft);margin:.3rem 0;}

/* ---------- Modal ---------- */
.backdrop{
  position:fixed;inset:0;background:rgba(16,27,61,.55);
  display:none;align-items:flex-start;justify-content:center;padding:4vh 1rem;z-index:90;overflow-y:auto;
}
.backdrop.open{display:flex;}
.modal{background:#fff;border:1px solid var(--rule);border-top:4px solid var(--crimson);box-shadow:var(--shadow-lg);width:min(620px,100%);animation:rise .18s ease-out;}
.modal-head{padding:1.05rem 1.4rem;border-bottom:1px solid var(--rule-soft);display:flex;justify-content:space-between;align-items:center;}
.modal-head h3{margin:0;}
.modal-body{padding:1.4rem;}
.modal-foot{padding:1rem 1.4rem;border-top:1px solid var(--rule-soft);display:flex;gap:.6rem;justify-content:flex-end;}
.x{background:none;border:0;font-size:1.35rem;line-height:1;color:var(--muted);cursor:pointer;padding:.2rem .4rem;font-family:inherit;}
.x:hover{color:var(--crimson);}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;}

/* An input with a button beside it, e.g. mobile number + "Send OTP". */
.input-row{display:flex;gap:.5rem;align-items:stretch;}
.input-row > input{flex:1;min-width:0;}
.input-row > .btn{white-space:nowrap;flex:0 0 auto;}

/* ---------- Portal notice list ---------- */
.notice{display:flex;gap:.9rem;padding:.85rem 0;border-bottom:1px solid var(--rule-soft);}
.notice:last-child{border-bottom:0;}
.notice-date{flex:none;width:96px;font-family:var(--mono);font-size:.7rem;font-weight:500;color:var(--crimson);letter-spacing:.06em;padding-top:.18rem;}
.notice-title{font-weight:700;color:var(--ink);font-size:.95rem;}
.notice-desc{font-size:.88rem;color:var(--muted);}

/* Legacy portal footer, kept in case any page still carries it. */
.foot{background:var(--ink);color:#B9BCCA;padding:1.6rem 0;font-size:.82rem;}
.foot a{color:#D9DCE6;}
.foot-inner{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;}

.spinner{
  width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;animation:spin .6s linear infinite;display:inline-block;
}
.btn .spinner,.btn-ghost .spinner{border-color:rgba(16,27,61,.25);border-top-color:var(--ink);}
.btn-primary .spinner,.btn-brass .spinner{border-color:rgba(255,255,255,.4);border-top-color:#fff;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ==========================================================
   7. Contact us, feedback, transfers
   ========================================================== */

/* The reason chosen decides what the rest of the page shows. */
.reason-panel{display:none;}
.reason-panel.on{display:block;}

.current-value{background:var(--paper-2);border:1px solid var(--rule);padding:.6rem .8rem;margin-bottom:.9rem;}
.current-value .field-label{display:block;}
.current-value .v{font-family:var(--mono);font-size:.92rem;font-weight:500;color:var(--ink);}

/* The acknowledgement, once something has been submitted. */
.ack{text-align:center;border:1px solid var(--ok-line);border-left:5px solid var(--ok);background:var(--ok-bg);padding:2rem 1.4rem;}
.ack h2,.ack h3{color:var(--ok);margin-bottom:.3rem;}
.ack .ack-no,.ack .num{
  font-family:var(--mono);font-size:1.6rem;font-weight:500;letter-spacing:.04em;
  color:var(--ink);background:#fff;border:1px dashed var(--ok-line);
  padding:.7rem 1.1rem;display:inline-block;margin:.7rem 0 .2rem;user-select:all;
}

.file-list{list-style:none;margin:.6rem 0 0;padding:0;}
.file-list li{display:flex;align-items:center;gap:.6rem;border:1px solid var(--rule);padding:.45rem .7rem;margin-bottom:.4rem;font-size:.9rem;background:#fff;}
.file-list .fname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.file-list .fsize{color:var(--muted);font-family:var(--mono);font-size:.8rem;font-weight:500;}
.file-list .fdrop{background:none;border:0;cursor:pointer;color:var(--crimson);font-size:1.1rem;line-height:1;padding:0 .2rem;font-family:inherit;}

.thread{border-left:3px solid var(--rule);padding-left:1rem;margin-bottom:1.1rem;}
.thread .ref{font-family:var(--mono);font-weight:500;color:var(--ink);}
.thread .quoted{white-space:pre-wrap;color:var(--muted);font-size:.92rem;margin:.35rem 0 0;}

/* The "log in first" shutter on the Contact us page. */
.locked-gate{text-align:center;border:1px solid var(--rule);background:var(--sand);padding:2rem 1.4rem;}
.locked-gate .cardmark{margin:0 auto .8rem;width:54px;height:54px;}
.locked-gate h3{margin-bottom:.5rem;}
.locked-gate p{max-width:34rem;margin-left:auto;margin-right:auto;}

/* Storage gauge on the Contact us tab. */
.gauge{height:10px;background:var(--paper-2);border:1px solid var(--rule);overflow:hidden;}
.gauge span{display:block;height:100%;transition:width .3s;}

/* Per-form notification rules on the Contact us tab. */
.form-rule{border:1px solid var(--rule);padding:1rem 1.1rem;margin-bottom:.9rem;max-width:46rem;background:#fff;}
.form-rule-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.7rem;}
.form-rule textarea[disabled]{background:var(--paper-2);color:var(--muted);}

/* Transfers & postings — the set questions. */
.posting-title{
  font-size:.95rem;text-transform:uppercase;letter-spacing:.06em;color:var(--crimson);
  margin:1.2rem 0 .6rem;padding-bottom:.35rem;border-bottom:1px solid var(--rule);
}
.posting-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 1rem;}
.posting-grid .field{margin-bottom:.9rem;}

/* Reasons and sub-reasons, in the admin panel. */
.reason-row{border:1px solid var(--rule);padding:.9rem 1rem;margin-bottom:.8rem;background:#fff;}
.reason-row.hidden-reason{opacity:.6;background:var(--paper-2);}
.reason-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem;}
.reason-head strong{font-size:1rem;}
.sub-chips{display:flex;flex-wrap:wrap;gap:.4rem;}
.sub-chip{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--rule);padding:.2rem .5rem .2rem .7rem;font-size:.85rem;background:var(--paper-2);}
.sub-chip.off{opacity:.55;text-decoration:line-through;}
.sub-chip button{background:none;border:0;cursor:pointer;color:var(--crimson);font-size:1rem;line-height:1;padding:0 .1rem;font-family:inherit;}

/* The MSG91 template box under each notification switch. */
.tpl-input{font-family:var(--mono);font-size:.85rem;font-weight:500;margin-top:.4rem;}

/* The password rules, shown wherever a password is chosen or changed. */
.pw-rules{
  background:var(--sand);border:1px solid var(--rule);
  border-left:4px solid var(--gold);
  padding:.7rem .9rem;margin-bottom:1.1rem;font-size:.86rem;color:var(--body);
}
.pw-rules strong{display:block;color:var(--ink);margin-bottom:.3rem;font-weight:700;}
.pw-rules ul{margin:0;padding-left:1.15rem;}
.pw-rules li{margin:.12rem 0;}

/* A field only an automated script would fill in. Kept out of sight and out
   of the tab order, rather than display:none, which some scripts check for. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================
   8. Stations map
   ========================================================== */

.mapshell{display:flex;border:1px solid var(--rule);background:var(--card);height:640px;overflow:hidden;}
#map{flex:1 1 auto;min-width:0;}
.mapoff{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;background:#F3F1E8;padding:28px;text-align:center;color:var(--muted);}
.mapoff p{margin:0 0 8px;font-size:.92rem;line-height:1.55;max-width:420px;}
.mapoff strong{color:var(--ink);}
.mapshell aside.stations{flex:0 0 330px;border-left:1px solid var(--rule);display:flex;flex-direction:column;background:var(--sand);}
.search-wrap{padding:12px;border-bottom:1px solid var(--rule);background:var(--card);}
.search-wrap input{width:100%;padding:9px 11px;border:1px solid #BFBAA8;font-family:inherit;font-weight:500;font-size:.92rem;}
ul.station-list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1 1 auto;}
li.station{padding:12px 14px;border-bottom:1px solid var(--rule);cursor:pointer;}
li.station:hover{background:#F1EDE0;}
li.station.active{background:#FFF6DC;border-left:4px solid var(--crimson);padding-left:10px;}
li.station .name{margin:0 0 3px;font-family:var(--serif);font-weight:600;color:var(--ink);font-size:.98rem;}
li.station .addr{margin:0;font-size:.83rem;color:var(--muted);line-height:1.45;}
li.station .phone{margin:3px 0 0;font-family:var(--mono);font-size:.76rem;font-weight:500;color:var(--crimson);}

.pin{width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--crimson);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.4);}
.pin.hq{background:var(--gold);border-color:var(--ink);width:20px;height:20px;}
.leaflet-popup-content{font-family:var(--sans);}
.popup-name{margin:0 0 4px;font-family:var(--serif);font-weight:700;color:var(--ink);font-size:1rem;}
.popup-addr{margin:0;font-size:.86rem;color:var(--body);}
.popup-phone{margin:4px 0 0;font-family:var(--mono);font-size:.78rem;font-weight:500;color:var(--crimson);}

.legend{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-top:14px;font-size:.88rem;color:var(--muted);}
.legend span{display:flex;gap:8px;align-items:center;}
.legend i{width:13px;height:13px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:inline-block;border:2px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,.35);}
.legend i.a{background:var(--gold);border-color:var(--ink);}
.legend i.b{background:var(--crimson);}

/* ==========================================================
   9. Responsive
   ========================================================== */

@media (max-width:1080px){
  .shell{grid-template-columns:1fr 250px;}
  .side.left{grid-column:1/-1;order:3;}
  .side.left .panel ul{display:grid;grid-template-columns:repeat(3,1fr);}
}
@media (max-width:900px){
  .split{grid-template-columns:1fr;}
  .split .login-col{order:-1;}
}
@media (max-width:820px){
  .shell{grid-template-columns:1fr;}
  .side.left .panel ul{grid-template-columns:repeat(2,1fr);}
  .g3{grid-template-columns:repeat(2,1fr);}
  .footgrid{grid-template-columns:1fr 1fr;}
  .mapshell{flex-direction:column;height:auto;}
  #map{height:52vh;min-height:340px;}
  .mapshell aside.stations{flex:0 0 auto;max-height:46vh;border-left:0;border-top:1px solid var(--rule);}
}
@media (max-width:640px){
  body{font-size:16px;}
  h1{font-size:1.7rem;}
  .hero h1{font-size:1.7rem;}
  .hero .emblem-mark{display:none;}
  .g2,.g3{grid-template-columns:1fr;}
  .formgrid{grid-template-columns:1fr;}
  .gal{grid-template-columns:repeat(2,1fr);}
  .footgrid{grid-template-columns:1fr;}
  .side.left .panel ul{grid-template-columns:1fr;}
  .crest,.crest img{height:52px;}
  .mast-text .org{font-size:.98rem;}
  .navtoggle{display:block;}
  nav.main > .wrap > ul{display:none;width:100%;flex-direction:column;}
  nav.main > .wrap > ul.open{display:flex;}
  nav.main ul ul{position:static;display:block;box-shadow:none;border-top:0;background:#111;}
  nav.main ul ul ul{border-left:3px solid var(--crimson);margin-left:10px;}
  nav.main .caret{float:right;}
  nav.main.secondary ul ul ul{border-left-color:var(--ink);}
  .slogan .track span{font-size:.92rem;}
  .panel-pad,.idcard-body{padding:16px;}
  .idcard-head{padding:15px 16px 13px;}
  .block{padding:18px;}
  .pagehead{padding:20px;}
  .two-col{grid-template-columns:1fr;}
  .linkrow{flex-direction:column;gap:.4rem;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  .slogan .track{animation:none;transform:none;text-align:center;display:block;}
}

/* ------------------------------------------------------------ officers & telephone directory
   Cards rather than a wide table, because most members will open this on a
   phone: a table of eleven columns cannot be read on a 360px screen, and
   pinching sideways to find a mobile number is no use to anyone. */

/* The search box is the whole point of the page, so it is given the full
   width and enough height to be an obvious target on a phone. */
.dir-search{margin-bottom:1.2rem;}
.dir-search input[type="search"]{
  width:100%;box-sizing:border-box;
  padding:1rem 1.1rem;font-size:1.06rem;line-height:1.4;
  border:2px solid var(--ink);background:#fff;
}
.dir-search input[type="search"]:focus{
  outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(201,162,39,.22);
}
.dir-search input[type="search"]::placeholder{color:#8C8B82;}

.dir-filters{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:.4rem;}

.dir-views{display:flex;gap:.2rem;border-bottom:1px solid var(--rule);margin:1.5rem 0 1rem;}
.dir-view{
  padding:.55rem .9rem;font-size:.88rem;font-weight:600;color:var(--muted);
  background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--sans);
}
.dir-view.active{color:var(--ink);border-bottom-color:var(--brass);}

.dir-card{
  background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--brass);
  padding:14px 16px;margin-bottom:.7rem;
}
.dir-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;}
.dir-card-head h3{font-size:1.02rem;margin:0;line-height:1.3;}
.dir-station{
  font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}
.dir-vacant{color:var(--muted);font-style:italic;font-weight:500;}
.dir-ic{
  font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.08em;vertical-align:middle;
  background:var(--paper-2);border:1px solid var(--rule);color:var(--ink-soft);
  padding:.1rem .35rem;border-radius:2px;margin-left:.3rem;
}
.dir-desig{margin:.35rem 0 .1rem;font-size:.93rem;color:var(--ink-soft);font-weight:600;}
.dir-office{margin:.15rem 0 .1rem;font-size:.86rem;color:var(--muted);}

.dir-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem;}
.dir-chip{
  display:inline-flex;align-items:baseline;gap:.4rem;
  background:var(--paper);border:1px solid var(--rule-soft);
  padding:.3rem .55rem;font-size:.86rem;font-weight:500;color:var(--text);
  text-decoration:none;font-family:var(--mono);
  /* long email addresses must wrap rather than push the card sideways */
  max-width:100%;overflow-wrap:anywhere;
}
a.dir-chip:hover{border-color:var(--brass);background:#fff;}
.dir-chip span{
  font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.dir-chip-call{border-color:var(--brass-2);}

.dir-office-card{cursor:pointer;}
.dir-office-card:hover,.dir-office-card:focus{border-left-color:var(--crimson);outline:none;}

@media (max-width:760px){
  .dir-search input[type="search"]{padding:.85rem .9rem;font-size:1rem;}
  .dir-filters{grid-template-columns:1fr;gap:.6rem;}
  .dir-card-head{flex-direction:column;gap:.15rem;}
  .dir-chip{width:100%;justify-content:flex-start;}
}

/* ---------- The home page slideshow (Admin panel › Content › Home Slideshow) ---------- */
/* Hidden until the page has fetched at least one published photograph, so
   with none the home page is exactly as before. */
.slideshow{position:relative;background:#111;margin:0 0 1.2rem;overflow:hidden;border:1px solid var(--line);}
.slideshow[hidden]{display:none;}
.ss-track{position:relative;aspect-ratio:16/9;max-height:560px;}
.ss-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .7s ease;}
.ss-slide.on{opacity:1;z-index:1;}
.ss-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.ss-slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.2rem 2rem 1rem;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));text-shadow:0 1px 2px rgba(0,0,0,.6);}
.ss-slide figcaption strong{display:block;font-family:var(--serif);font-size:1.35rem;line-height:1.25;}
.ss-slide figcaption span{display:block;font-size:.95rem;opacity:.95;margin-top:.15rem;}
.ss-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;background:rgba(0,0,0,.45);color:#fff;border:0;
  width:44px;height:64px;font-size:2rem;line-height:1;cursor:pointer;}
.ss-arrow:hover{background:rgba(0,0,0,.7);}
.ss-prev{left:0;} .ss-next{right:0;}
.ss-dots{position:absolute;right:1rem;bottom:.8rem;z-index:2;display:flex;gap:6px;}
.ss-dots button{width:11px;height:11px;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer;padding:0;}
.ss-dots button.on{background:var(--gold);}
@media (max-width:700px){
  .ss-slide figcaption{padding:1.6rem .9rem .9rem;}
  .ss-slide figcaption strong{font-size:1.05rem;}
  .ss-slide figcaption span{font-size:.82rem;}
  .ss-arrow{width:34px;height:48px;font-size:1.5rem;}
}

/* ------------------------------------------------------------ contact us
   The office-bearer cards and the two office addresses (v65). The
   photograph, name, designation and mobile in each card are written by
   content.js from the panel's Our Team table; what stands here is the
   layout only. */

.bearer-intro{max-width:56ch;margin:0 0 22px;}

.bearers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.bearer{display:flex;gap:18px;align-items:flex-start;background:var(--sand);padding:20px 22px;}
.bearer-photo{
  flex:0 0 96px;width:96px;height:120px;overflow:hidden;
  border:1px solid var(--rule);background:var(--paper-2);
}
.bearer-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block;}
.bearer-text{min-width:0;padding-top:2px;}

.bearer-post{
  font-family:var(--mono);font-weight:600;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--crimson);margin:0 0 6px;
}
.bearer-name{
  font-family:var(--serif);font-size:1.18rem;font-weight:600;line-height:1.25;
  color:var(--ink);margin:0 0 3px;
}
/* The designation, as the panel holds it. Hidden by the filler when the
   office has not recorded one, rather than left as an empty line. */
.bearer-desig{font-size:.86rem;line-height:1.35;color:var(--muted);margin:0 0 12px;}
.bearer-label{
  font-family:var(--mono);font-weight:600;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 3px;
}
.bearer-value{
  font-family:var(--mono);font-size:1rem;color:var(--crimson);
  text-decoration:none;border-bottom:1px solid var(--alert-line);
}
.bearer-value:hover{color:var(--crimson-d);border-bottom-color:var(--crimson);}

.bearer-mail{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--rule-soft);
}
.bearer-mail .bearer-label{margin:0;}

.offices{gap:26px;}
.office-eyebrow{
  font-family:var(--mono);font-weight:600;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin:0 0 8px;
}
.office-name{
  font-family:var(--serif);font-size:1.02rem;font-weight:600;line-height:1.4;
  color:var(--ink);margin:0 0 8px;
}
.office-second{border-left:1px solid var(--rule-soft);padding-left:26px;}

@media (max-width:640px){
  .office-second{border-left:0;padding-left:0;border-top:1px solid var(--rule-soft);padding-top:20px;}
}

/* ==========================================================
   Gallery folders (v81) — design "The Mosaic". Scoped to .galf-* (the
   folder index) and .galb-* (one folder and the full-size view).
   ========================================================== */

/* ---------- folder index ---------- */

.galf-years{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px;}
.galf-year{
  cursor:pointer;font:inherit;  font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:#fff;border:1px solid var(--rule);color:var(--ink);padding:7px 13px;text-decoration:none;
}
.galf-year:hover{border-color:var(--crimson);color:var(--crimson);}
.galf-year.on{background:var(--ink);border-color:var(--ink);color:#fff;}

.galf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}

.galf{
  display:block;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--rule);border-top:4px solid var(--rule);
}
.galf.first{border-top-color:var(--crimson);}
.galf:hover,.galf:focus-visible{border-color:var(--crimson);border-top-color:var(--crimson);}
.galf:hover .galf-open,.galf:focus-visible .galf-open{background:var(--crimson);border-color:var(--crimson);color:#fff;}

/* Cover plus the next three photographs. The third carries "+N". */
.galf-mosaic{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:3px;padding:3px;}
.galf-mosaic > :first-child{grid-row:1/3;aspect-ratio:1/1;}
.galf-mosaic > :nth-child(n+2){aspect-ratio:1/1;}
.galf-tile{background:#E4E1D5 repeating-linear-gradient(135deg,#E4E1D5 0 9px,#DBD7C8 9px 18px);overflow:hidden;position:relative;}
.galf-tile img{width:100%;height:100%;object-fit:cover;display:block;}
.galf-more{display:flex;align-items:center;justify-content:center;}
.galf-more span{position:absolute;
  font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--ink);
  background:rgba(242,240,232,.88);padding:6px 12px;
}

.galf-body{padding:16px 18px 18px;}
.galf-meta{
  font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--crimson);margin:0 0 6px;
}
.galf-body h3{font-size:1.22rem;margin:0 0 8px;text-wrap:pretty;}
.galf-rule{height:3px;width:52px;background:var(--gold);margin-bottom:12px;}
.galf-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.galf-count{
  font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.galf-open{
  font-size:.84rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  border:1px solid var(--ink);color:var(--ink);padding:8px 15px;
}

@media (max-width:760px){
  .galf-grid{grid-template-columns:1fr;}
}

/* ---------- one folder opened ---------- */

.galb-crumb{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.06em;color:var(--muted);margin:0 0 14px;}
.galb-crumb b{color:var(--ink);font-weight:600;}

.galb-hero{background:linear-gradient(180deg,#152350 0%,#0C1531 100%);color:#fff;padding:34px 30px;text-align:center;}
.galb-hero .eyebrow{color:var(--gold);margin:0 0 10px;}
.galb-hero h1{color:#fff;font-size:1.9rem;margin:0 auto;max-width:34ch;}
.galb-hero p{color:#C6C9D6;margin:12px auto 0;max-width:58ch;}

.galb-grid{
  background:var(--card);border:1px solid var(--rule);border-top:0;padding:14px;
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:10px;
}
.galb-tile{
  margin:0;border:1px solid var(--rule);background:#E4E1D5 repeating-linear-gradient(135deg,#E4E1D5 0 9px,#DBD7C8 9px 18px);
  display:flex;align-items:flex-end;padding:7px;cursor:zoom-in;overflow:hidden;position:relative;
}
.galb-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.galb-tile figcaption{
  position:relative;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.04em;
  color:var(--body);background:rgba(255,255,255,.9);padding:3px 6px;
}
.galb-tile.lead{grid-column:span 2;grid-row:span 2;}
.galb-tile:hover{border-color:var(--crimson);}

.galb-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px;flex-wrap:wrap;}
.galb-back{
  font-size:.84rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;
  border:1px solid var(--ink);color:var(--ink);padding:9px 16px;
}
.galb-back:hover{background:var(--ink);color:#fff;}
.galb-more{
  font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:#fff;border:1px solid var(--rule);color:var(--ink);padding:9px 14px;cursor:pointer;
}
.galb-more:hover{border-color:var(--crimson);color:var(--crimson);}

@media (max-width:900px){
  .galb-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:640px){
  .galb-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px;}
  .galb-hero{padding:24px 18px;}
  .galb-hero h1{font-size:1.5rem;}
}

/* ---------- the full-size view ---------- */

.galb-box{position:fixed;inset:0;background:rgba(10,14,30,.94);z-index:120;display:none;flex-direction:column;}
.galb-box.open{display:flex;}
.galb-box-top{
  display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 16px;
  color:#C6C9D6;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.08em;
}
.galb-box-close{
  background:none;border:1px solid rgba(255,255,255,.4);color:#fff;
  font-size:1.2rem;line-height:1;padding:5px 13px;cursor:pointer;font-family:inherit;
}
.galb-box-close:hover{background:rgba(255,255,255,.14);}
.galb-box-main{flex:1 1 auto;display:flex;align-items:center;gap:10px;padding:0 10px 16px;min-height:0;}
.galb-box-fig{flex:1 1 auto;min-width:0;height:100%;display:flex;flex-direction:column;margin:0;}
.galb-box-fig img{flex:1 1 auto;min-height:0;max-width:100%;object-fit:contain;}
.galb-ph{flex:1 1 auto;min-height:0;background:#222E52 repeating-linear-gradient(135deg,#2A3760 0 9px,#222E52 9px 18px);}
.galb-box-fig figcaption{
  color:#C6C9D6;font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.04em;
  margin-top:12px;text-align:center;
}
.galb-arrow{
  flex:0 0 auto;width:44px;height:64px;background:rgba(255,255,255,.12);border:0;color:#fff;
  font-size:2rem;line-height:1;cursor:pointer;font-family:inherit;
}
.galb-arrow:hover{background:rgba(255,255,255,.24);}

@media (max-width:640px){
  .galb-arrow{width:34px;height:48px;font-size:1.5rem;}
}

.galf-mosaic.n1{grid-template-columns:1fr;}
.galf-mosaic.n1 > :first-child{aspect-ratio:16/10;}
.galf-mosaic.n2 > :nth-child(2){grid-row:1/3;aspect-ratio:auto;}
.galf[hidden]{display:none;}
.galb-grid.galb-plain .galb-tile{cursor:pointer;}
.galb-none{grid-column:1/-1;margin:0;text-align:center;color:var(--muted);font-style:italic;padding:22px 13px;}
.galb-grid[hidden],.galb-hero[hidden],.galb-more[hidden],.galf-years[hidden]{display:none;}
.galb-box-fig img{flex:1 1 auto;min-height:0;max-width:100%;max-height:100%;object-fit:contain;align-self:center;}

/* ==== v85: Share a paper ====
   The Share button beside a paper (content.js, site-search.js) and the small
   menu a computer gets (common.js): WhatsApp, Email, Copy link. On a phone or
   tablet the phone's own share list is used instead, so the menu is rarely
   seen there. */
.share-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  border:1px solid var(--rule);background:var(--sand);color:var(--ink);
  font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}
.share-btn svg{width:14px;height:14px;display:block;flex:0 0 auto;}
.share-btn:hover,.share-btn:focus,.share-btn[aria-expanded="true"]{border-color:var(--crimson);color:var(--crimson);background:#fff;}
.share-btn:focus-visible{outline:2px solid var(--gold);outline-offset:1px;}
/* in a document table: under the Download link, with its word */
.share-btn.share-cell{display:flex;width:max-content;margin-top:7px;padding:5px 9px;min-height:30px;}
/* in the home page's box and on the Search page: a square beside the file buttons */
.share-btn.feed-share{width:30px;min-height:30px;padding:0;margin-left:6px;}
.share-btn.feed-share .share-t{display:none;}
@media (max-width:640px){
  .share-btn.feed-share{width:34px;min-height:34px;}
  .share-btn.share-cell{min-height:34px;}
}

.share-pop{
  position:fixed;z-index:85;min-width:230px;max-width:calc(100vw - 16px);box-sizing:border-box;
  background:#fff;border:1px solid var(--ink);border-top:3px solid var(--crimson);
  box-shadow:0 14px 30px rgba(16,27,61,.22);padding:0 0 4px;
}
.share-pop .share-link{margin:0;padding:9px 14px 8px;border-bottom:1px solid var(--rule-soft);font-family:var(--mono);font-size:.68rem;font-weight:500;color:var(--muted);overflow-wrap:anywhere;}
.share-pop .share-field{display:block;width:calc(100% - 20px);margin:8px 10px;padding:7px 8px;border:1px solid var(--ink);font-family:var(--mono);font-size:.72rem;color:var(--ink);background:#fff;}
.share-pop .share-items{display:flex;flex-direction:column;padding-top:4px;}
.share-pop .share-item{
  display:flex;align-items:center;gap:11px;width:100%;margin:0;padding:10px 14px;box-sizing:border-box;
  border:0;background:none;cursor:pointer;text-align:left;text-decoration:none;
  font-family:var(--sans);font-size:.93rem;font-weight:600;color:var(--ink);
}
.share-pop .share-item svg{width:18px;height:18px;flex:0 0 auto;color:var(--crimson);}
.share-pop .share-item:hover,.share-pop .share-item:focus{background:var(--sand);color:var(--crimson);outline:none;}
.share-pop .share-item:focus-visible{box-shadow:inset 3px 0 0 var(--gold);}
.share-pop .share-item.share-done,.share-pop .share-item.share-done svg{color:var(--ok);}
.share-pop .share-said{margin:0;padding:2px 14px 8px;font-size:.8rem;line-height:1.4;color:var(--muted);}
.share-pop .share-said:empty{padding:0;}   /* kept on the page, so a screen reader hears "Link copied" */

/* ==== v86: "You are here" on the document pages ====
   One line above the page's heading, drawn by the front function from the
   menus (functions/_lib/menus.js, injectTrail). */
.crumbs{margin:0 0 12px;font-size:.86rem;line-height:1.55;color:var(--muted);}
.crumbs-lab{font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-right:.7em;}
.crumbs ol{display:inline;list-style:none;margin:0;padding:0;}
.crumbs li{display:inline;}
.crumbs-sep{margin:0 .45em;color:#A9A596;}
.crumbs a{color:var(--crimson);font-weight:600;text-decoration:none;}
.crumbs a:hover,.crumbs a:focus{text-decoration:underline;}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:600;}
@media (max-width:640px){.crumbs-lab{display:block;margin:0 0 2px;}}

/* ==== v87: Accessibility ====
   The "Accessibility" button at the right of the masthead and its panel
   (/assets/js/accessibility.js, which every page loads in its <head>). The
   script sets up to three marks on <html>; with none of them — nothing
   chosen — every rule below is asleep and the website looks exactly as it
   always has.
     data-a11y-text   -2 … 3              Font Size
     data-a11y-sat    -2 … 1              Saturation
     data-a11y-theme  contrast | invert   High Contrast Theme / Invert Colors
   The colour choices are for the screen only: a page printed while one of
   them is on prints in its ordinary colours. */

/* ---------- the button, at the far right of the masthead ---------- */
.a11y{position:relative;flex:0 0 auto;}
.a11y-btn{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;margin:0;
  background:#fff;color:var(--ink);border:2px solid var(--rule);
  font-family:var(--sans);font-weight:700;font-size:.86rem;line-height:1;
  padding:10px 12px 10px 10px;white-space:nowrap;
}
.a11y-btn:hover,.a11y-btn[aria-expanded="true"]{border-color:var(--ink);background:var(--sand);}
.a11y-ic{width:1rem;height:1rem;flex:0 0 auto;display:block;}   /* 16px at the normal size: the button is 40px tall, no taller than Member login or the profile button, so the masthead keeps its height */
.a11y-caret{font-size:.62rem;line-height:1;transition:transform .15s;}
.a11y-btn[aria-expanded="true"] .a11y-caret{transform:rotate(180deg);}
@media (max-width:900px){
  /* On a phone the corner is a row of its own: Member login (or the profile
     menu) on the left, this on the right. When the two cannot share one line
     — the narrowest phones with a larger text — this moves to a line of its
     own, still on the right, rather than pushing the page sideways. */
  .mastcorner .a11y{margin-left:auto;}
  .mastcorner:has(> .a11y){flex-wrap:wrap;row-gap:8px;}
}

/* ---------- the panel ---------- */
.a11y-panel{
  position:absolute;right:0;top:calc(100% + 8px);z-index:82;
  width:20rem;max-width:calc(100vw - 24px);box-sizing:border-box;text-align:left;
  background:#fff;border:1px solid var(--ink);border-top:3px solid var(--crimson);
  box-shadow:0 14px 30px rgba(16,27,61,.22);animation:rise .14s ease-out;
  container-type:inline-size;
}
.a11y-row{padding:12px 16px 14px;border-bottom:1px solid var(--rule-soft);}
.a11y-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 9px;line-height:1.3;}
.a11y-lab{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
.a11y-val{font-size:.84rem;font-weight:600;color:var(--crimson);text-align:right;}
.a11y-ctl{display:flex;align-items:center;gap:8px;}
.a11y-step,.a11y-reset{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-width:2.6rem;height:2.6rem;margin:0;padding:0 6px;cursor:pointer;
  background:#fff;color:var(--ink);border:1px solid var(--ink);
  font-family:var(--serif);font-weight:700;font-size:1.1rem;line-height:1;
}
.a11y-step.a11y-small{font-size:.92rem;}
.a11y-step.a11y-big{font-size:1.3rem;}
.a11y-step.a11y-sign{font-family:var(--sans);font-size:1.45rem;font-weight:600;}
.a11y-reset svg{width:1.15rem;height:1.15rem;display:block;}
.a11y-step:hover,.a11y-reset:hover{background:var(--ink);color:#fff;}
.a11y-step[aria-disabled="true"],.a11y-reset[aria-disabled="true"]{opacity:.35;cursor:default;background:#fff;color:var(--ink);}
.a11y-scale{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:3px;padding:0 3px;}
.a11y-dot{flex:0 0 auto;width:.72rem;height:.72rem;border-radius:50%;border:2px solid #A9A596;background:#fff;cursor:pointer;box-sizing:border-box;}
.a11y-dot.norm{border-color:var(--ink);}
.a11y-dot.on{width:1.05rem;height:1.05rem;border-color:var(--crimson);background:var(--crimson);}
.a11y-dropbox{flex:0 0 auto;display:inline-flex;cursor:pointer;padding:2px;}
.a11y-drop{width:1.05rem;height:1.3rem;display:block;}
.a11y-drop path{fill:transparent;stroke:#A9A596;stroke-width:1.6;}
.a11y-dropbox.on .a11y-drop path{fill:var(--crimson);stroke:var(--crimson);}
.a11y-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:0;
  padding:12px 16px;background:#fff;border:0;border-bottom:1px solid var(--rule-soft);cursor:pointer;text-align:left;
  font-family:var(--sans);font-size:.95rem;font-weight:600;line-height:1.3;color:var(--ink);
}
.a11y-toggle:hover{background:var(--sand);}
.a11y-toggle:focus-visible{outline-offset:-3px;}
.a11y-box{flex:0 0 auto;width:1.35rem;height:1.35rem;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--ink);background:#fff;color:#fff;box-sizing:border-box;}
.a11y-box svg{width:1rem;height:1rem;display:block;visibility:hidden;}
.a11y-toggle[aria-pressed="true"] .a11y-box{background:var(--crimson);border-color:var(--crimson);}
.a11y-toggle[aria-pressed="true"] .a11y-box svg{visibility:visible;}
.a11y-note{margin:0;padding:10px 16px 12px;font-size:.78rem;line-height:1.45;color:var(--muted);}
/* Too narrow for the buttons and the steps on one line (a small phone with a
   larger text): the steps take a line of their own, above the buttons. */
@container (max-width:17.5rem){
  .a11y-ctl{flex-wrap:wrap;row-gap:10px;}
  .a11y-scale{order:-1;flex:1 1 100%;justify-content:space-around;}
  .a11y-reset{margin-left:auto;}
}

/* ---------- Font Size: the whole page's text, a step at a time ----------
   Nearly every size on the website is written in rem, so one setting on
   <html> moves all of it; the body's own size and the few widths that hold
   a date are given in rem here so they move with it, and the few things
   that would not fit a small screen at the larger sizes are let wrap. */
html[data-a11y-text="-2"]{font-size:87.5%;}
html[data-a11y-text="-1"]{font-size:93.75%;}
html[data-a11y-text="1"]{font-size:110%;}
html[data-a11y-text="2"]{font-size:120%;}
html[data-a11y-text="3"]{font-size:133.33%;}
html[data-a11y-text] body{font-size:1.03125rem;}   /* 16.5px at the normal size */
/* A button or box this stylesheet gives no size keeps the browser's own
   (13.3px), which no setting on <html> reaches; :where() keeps this weaker
   than every size the site does give. */
:where(html[data-a11y-text]) :where(button, input, select, textarea){font-size:.8333rem;}
html[data-a11y-text] input[type=file]{max-width:100%;}   /* "Choose file" grows with the text; it must not grow past the screen */
html[data-a11y-text] .notices .date{flex-basis:5.75rem;}
html[data-a11y-text] .notice-date{width:6rem;}
/* the "You are here" line may wrap after any of its arrows */
html[data-a11y-text] .crumbs-sep::after{content:"\200B";}
@media (min-width:641px){
  html[data-a11y-text] .feed-date{flex-basis:4.5rem;}
  html[data-a11y-text] .ss-drop .feed-date{flex-basis:4.375rem;}
}
@media (max-width:640px){
  html[data-a11y-text] body{font-size:1rem;}
  html[data-a11y-text] .ss-box input[type=search]{font-size:max(16px,1rem);}   /* a phone still does not zoom into the box */
}

@media screen{

/* ---------- Saturation and Invert Colors: one filter over the whole page ---------- */
html[data-a11y-sat],html[data-a11y-theme="invert"]{filter:var(--a11y-invert,) var(--a11y-sat,);}
html[data-a11y-sat="-2"]{--a11y-sat:saturate(0);}
html[data-a11y-sat="-1"]{--a11y-sat:saturate(.5);}
html[data-a11y-sat="1"]{--a11y-sat:saturate(1.6);}
html[data-a11y-theme="invert"]{--a11y-invert:invert(1) hue-rotate(180deg);}
/* Photographs, the logo and the stations map are turned back, so they look as they are. */
html[data-a11y-theme="invert"] :is(img,picture,video,canvas,iframe,object,embed),
html[data-a11y-theme="invert"] #map{filter:invert(1) hue-rotate(180deg);}
html[data-a11y-theme="invert"] #map :is(img,picture,video,canvas){filter:none;}

/* ---------- High Contrast Theme ----------
   Every element black with white text, links and buttons yellow, the
   keyboard's place a thick cyan ring — written for every element at once,
   so nothing on any page (or added to one later) is left in its old
   colours. The pins on the stations map, and the legend that explains
   them, keep theirs: the map under them is a picture (and the clear box
   that holds a pin's pointer stays clear). The colour names the stylesheet
   uses for lines are given light values, so a border drawn in them stays
   visible on black. */
html[data-a11y-theme="contrast"]{
  color-scheme:dark;background:#000;
  --ink:#fff;--ink-soft:#fff;--ink-2:#fff;--ink-3:#fff;
  --crimson:#fff;--crimson-d:#fff;--gold:#fff;--gold-d:#fff;--brass:#fff;--brass-2:#fff;
  --rule:#A3A3A3;--rule-soft:#707070;--line:#A3A3A3;--line-soft:#707070;
  --ok-line:#7CEB7C;--alert-line:#FF9494;--warn-line:#FFD84D;
}
html[data-a11y-theme="contrast"] :not(:where(.pin, .leaflet-marker-icon, .leaflet-popup-tip-container, .legend i)){
  background-color:#000 !important;background-image:none !important;
  color:#fff !important;box-shadow:none !important;text-shadow:none !important;
}
html[data-a11y-theme="contrast"] ::before,
html[data-a11y-theme="contrast"] ::after{color:inherit !important;background:none !important;box-shadow:none !important;}
html[data-a11y-theme="contrast"] svg{background-color:transparent !important;}   /* an icon takes the ground it sits on: black, or yellow when pointed at */
html[data-a11y-theme="contrast"] ::placeholder{color:#C8C8C8 !important;opacity:1;}
html[data-a11y-theme="contrast"] ::selection{background:#FF0;color:#000;}
html[data-a11y-theme="contrast"] :focus-visible{outline:3px solid #0FF !important;}
html[data-a11y-theme="contrast"] :is(input,select,textarea):focus{outline:3px solid #0FF !important;outline-offset:0;}
html[data-a11y-theme="contrast"] .ss-box:focus-within{outline:3px solid #0FF;outline-offset:1px;}

/* links, buttons and anything else that is pressed: yellow */
html[data-a11y-theme="contrast"] :is(a, button, summary, [role="button"], [role="tab"], nav.main .parent, input[type="submit"], input[type="button"], input[type="reset"]),
html[data-a11y-theme="contrast"] :is(a, button, summary, [role="button"], [role="tab"], nav.main .parent) *{color:#FF0 !important;}
html[data-a11y-theme="contrast"] :is(.btn, .lbtn, .memberbtn, .profile-btn, .a11y-btn, .a11y-step, .a11y-reset, .share-btn, .feed-type, .feed-dl, a.dlbtn, .galf-open, .galb-back, .galb-more, .galf-year, .galb-box-close, .jur-chip, input[type="submit"], input[type="button"], input[type="reset"]){border-color:#FF0 !important;}
html[data-a11y-theme="contrast"] :is(.lbtn, .ss-go, .ss-arrow, .galb-arrow, .navtoggle){border:2px solid #FF0 !important;}
html[data-a11y-theme="contrast"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="search"]), select, textarea){border-color:#FFF !important;}
html[data-a11y-theme="contrast"] .dir-search input[type="search"],
html[data-a11y-theme="contrast"] .search-wrap input{border-color:#FFF !important;}
html[data-a11y-theme="contrast"] :is(input[type="checkbox"], input[type="radio"]){accent-color:#FF0;}
html[data-a11y-theme="contrast"] :is(a, button, input, select, textarea, [role="button"]):is(:disabled, [aria-disabled="true"]),
html[data-a11y-theme="contrast"] :is(a, button, [role="button"]):is(:disabled, [aria-disabled="true"]) *{color:#A3A3A3 !important;}
html[data-a11y-theme="contrast"] :is(a, button, input, select, textarea, [role="button"]):is(:disabled, [aria-disabled="true"]){border-color:#707070 !important;}

/* pointed at, chosen or highlighted: black on yellow */
html[data-a11y-theme="contrast"] :is(a:hover, button:not(:disabled):not([aria-disabled="true"]):hover, nav.main li:hover > .parent, nav.main li:focus-within > .parent, .feedtab.on, .galf-year.on, .jur-chip:hover, mark, .dir-office-card:hover, .jur-card:hover){background-color:#FF0 !important;color:#000 !important;}
html[data-a11y-theme="contrast"] :is(a:hover, button:not(:disabled):not([aria-disabled="true"]):hover, nav.main li:hover > .parent, nav.main li:focus-within > .parent, .feedtab.on, .galf-year.on, .jur-chip:hover, mark, .dir-office-card:hover, .jur-card:hover) *{background-color:transparent !important;color:#000 !important;}

/* where the page is now, and other marks that were only a colour */
html[data-a11y-theme="contrast"] nav.main a.active{border-bottom-color:#FF0 !important;}
html[data-a11y-theme="contrast"] :is(.tab.active, .dir-view.active){border-bottom-color:#FF0 !important;color:#FF0 !important;}
html[data-a11y-theme="contrast"] .crumbs [aria-current="page"]{text-decoration:underline;text-underline-offset:3px;}
html[data-a11y-theme="contrast"] li.station.active{border-left-color:#FF0 !important;}
html[data-a11y-theme="contrast"] :is(.sechead .rule, .galf-rule){background-color:#FF0 !important;}
html[data-a11y-theme="contrast"] :is(.rule:not(.sechead .rule), .vc-rule, .menu .sep){background-color:#707070 !important;}
html[data-a11y-theme="contrast"] .step-pip{background-color:#707070 !important;}
html[data-a11y-theme="contrast"] .step-pip.done{background-color:#FFF !important;}
html[data-a11y-theme="contrast"] .step-pip.active{background-color:#FF0 !important;}
html[data-a11y-theme="contrast"] .gauge span{background-color:#FF0 !important;}
html[data-a11y-theme="contrast"] .spinner{border-color:#707070 !important;border-top-color:#FF0 !important;}
html[data-a11y-theme="contrast"] .ss-dots button{border:2px solid #FFF !important;}
html[data-a11y-theme="contrast"] .ss-dots button.on{background-color:#FF0 !important;border-color:#FF0 !important;}
html[data-a11y-theme="contrast"] .msg-error{border-color:#FF9494 !important;}
html[data-a11y-theme="contrast"] .msg-ok{border-color:#7CEB7C !important;}
html[data-a11y-theme="contrast"] .msg-warn{border-color:#FFD84D !important;}
html[data-a11y-theme="contrast"] .vc-digit{border:1px solid #A3A3A3;}

/* boxes that sit over the page get a clear edge */
html[data-a11y-theme="contrast"] :is(nav.main ul ul, .menu, .share-pop, .ss-drop, .a11y-panel, .modal, .jur-modal-card){border:2px solid #FFF !important;}
html[data-a11y-theme="contrast"] :is(footer, .slogan){border-top:2px solid #A3A3A3;}
html[data-a11y-theme="contrast"] th{border-bottom:2px solid #FFF;}

/* the logo keeps the white it was drawn for */
html[data-a11y-theme="contrast"] :is(.crest img, .door-brand img, .cardmark){background-color:#FFF !important;padding:3px;}

/* the Accessibility panel itself */
html[data-a11y-theme="contrast"] .a11y-dot{border-color:#A3A3A3 !important;}
html[data-a11y-theme="contrast"] .a11y-dot.on{background-color:#FF0 !important;border-color:#FF0 !important;}
html[data-a11y-theme="contrast"] .a11y-drop path{stroke:#A3A3A3;}
html[data-a11y-theme="contrast"] .a11y-dropbox.on .a11y-drop path{fill:#FF0;stroke:#FF0;}
html[data-a11y-theme="contrast"] .a11y-box{border-color:#FF0 !important;}
html[data-a11y-theme="contrast"] .a11y-toggle[aria-pressed="true"] .a11y-box{background-color:#FF0 !important;}
html[data-a11y-theme="contrast"] .a11y-toggle[aria-pressed="true"] .a11y-box :is(svg, path){color:#000 !important;}
html[data-a11y-theme="contrast"] .a11y-toggle:hover .a11y-box{border-color:#000 !important;}

}