/* sessions-country.css - the country pages under the trading sessions page (India, Pakistan, Nigeria; SEO review of
   21 October 2026, F7), on top of tools.css and sessions.css, which they share with the main page. Nothing here
   changes the main page. The parts: the answer as a small table in the hero band, a 24-hour ribbon of the country's
   day per season, the stretches between clock changes for about a year, the week and broker server time. The
   session colours are the ones sessions.css checked; the seasons of the year bar reuse three of them and the orange. */

/* ---- the hero: London, New York and both, in the three kinds of week ---- */
.ctry-hero{--s-lon:#6283da;--s-ny:#e65a30}
.ctry-hero .lead{max-width:760px}
.cgw{margin-top:22px;max-width:760px}
.cg{width:100%;margin:0;border-collapse:separate;border-spacing:0;border:1px solid var(--band-line);border-radius:12px;background:var(--band-card);font-variant-numeric:tabular-nums;overflow:hidden}
.cg caption{caption-side:top;text-align:left;padding:0 0 8px;font:500 15px/1.3 var(--display);color:var(--band-2)}
.cg th,.cg td{padding:12px 14px;border-bottom:1px solid var(--band-line);text-align:left;vertical-align:middle}
.cg tbody tr:last-child th,.cg tbody tr:last-child td{border-bottom:0}
.cg thead th{padding-top:10px;padding-bottom:10px;border-top:4px solid var(--c);font:600 14px/1.2 "Inter",system-ui,sans-serif;color:var(--band-text);white-space:nowrap}
.cg thead td{border-top:4px solid transparent}
.cg thead .cg-b{border-top-color:var(--orange)}
.cg thead .bh-sw{width:14px;height:14px;margin-right:6px;vertical-align:-2px}
.cg tbody th{width:30%;font-weight:400}
.cg tbody th b{display:block;font:500 16px/1.2 var(--display);color:var(--band-text)}
.cg tbody th span{display:block;margin-top:2px;font-size:13px;line-height:1.3;color:var(--band-faint)}
.cg tbody tr:nth-child(even) td,.cg tbody td{background:none}
.cg tbody td{font:400 clamp(16px,2.4vw,24px)/1.1 var(--display);color:#fbf8f2;white-space:nowrap}
.cg .cg-l{display:inline-block;margin-left:4px;padding:2px 7px;border-radius:5px;background:var(--band);font:600 12px/1.3 "Inter",system-ui,sans-serif;color:var(--band-2);vertical-align:3px}
.cg .cg-x th b{color:#ea6a45}
.cg .cg-x .cg-l{background:#ea6a45;color:#17181d}
/* a phone: each row's name on a line of its own, its three times under the three column heads (the roles in the
   markup keep it a table for screen readers) */
@media (max-width:599px){
  .cg,.cg thead,.cg tbody,.cg tr{display:block}
  .cg caption{display:block}
  .cg tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--band-line)}
  .cg tbody tr:last-child{border-bottom:0}
  .cg th,.cg td{border-bottom:0}
  .cg thead td{display:none}
  .cg thead th{padding:8px 10px;font-size:13px}
  .cg thead .bh-sw{display:none}
  .cg tbody th{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;width:auto;padding:10px 10px 0}
  .cg tbody th b{font-size:15px}
  .cg tbody th span{margin:0;font-size:12px}
  .cg tbody td{padding:6px 10px 12px;font-size:16px}
  .cg .cg-l{display:block;width:max-content;margin:5px 0 0;vertical-align:0}
}
@media (max-width:379px){.cg tbody td{font-size:14.5px}.cg th,.cg td{padding-left:8px;padding-right:6px}}

/* ---- season by season: a 24-hour ribbon of the country's day, then the table ---- */
.ssn .ex-tabs{margin-bottom:6px}
.ssn-c{margin:10px 0 4px;font-size:15px;color:var(--text-2)}
.rb{position:relative;margin:26px 0 8px;padding:0 0 22px}
.rb-r{position:relative;height:28px;margin:0 0 6px;border-radius:6px;background:var(--fill-2)}
.rb-r i{position:absolute;top:0;bottom:0;display:flex;align-items:center;gap:5px;padding:0 7px;border-radius:6px;background:var(--c);color:var(--on);
  font:500 12.5px/1 "Inter",system-ui,sans-serif;font-style:normal;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.rb-r b{font-weight:700}
.rb-r.s-cme i{background:repeating-linear-gradient(135deg,var(--s-cme) 0 7px,var(--s-cme2) 7px 10px)}
.rb-r.s-cme b{padding:1px 5px;border-radius:4px;background:var(--s-cme)}
.rb-k{position:absolute;top:0;bottom:0;border:1.5px dashed var(--s-cme);border-radius:5px}
/* the London and New York overlap: a dashed box over their two lanes (the third and fourth) */
.rb-o{position:absolute;top:64px;height:70px;border:2px dashed var(--orange);border-radius:8px;background:color-mix(in srgb,var(--orange) 9%,transparent);pointer-events:none}
.rb-o b{position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:1px 7px;border-radius:5px;background:var(--orange);color:#fff;font:700 12px/1.3 "Inter",system-ui,sans-serif;white-space:nowrap}
.rb-ax{position:absolute;left:0;right:0;bottom:0;height:16px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.rb-ax span{position:absolute;transform:translateX(-50%)}
.rb-ax span:first-child{transform:none}
.rb-ax span:last-child{transform:translateX(-100%)}
@media (max-width:559px){.rb-r i span{display:none}.rb-r i{padding:0 5px;font-size:12px}}
/* both tables fit a phone without scrolling: the times stay on one line, the clock notes wrap */
.tool-art .tw table.ct,.tool-art .tw table.cwt{min-width:0}
.ct td{vertical-align:top}
.ct .ct-n{display:block;font-weight:600;white-space:nowrap}
.ct .ct-own{display:block;margin:2px 0 0 17px;font-size:13.5px;color:var(--muted)}
.ct .ct-o .ct-own{margin-left:19px}
.ct .ct-l{width:46%;font-weight:600;color:var(--text)}
.ct .ct-d{display:inline-block;width:10px;height:10px;margin-right:7px;border-radius:3px;background:var(--c);vertical-align:0}
.ct .s-cme .ct-d{background:repeating-linear-gradient(135deg,var(--s-cme) 0 3px,var(--s-cme2) 3px 5px)}
.ct tbody tr.ct-o td{background:color-mix(in srgb,var(--orange) 8%,transparent)}
.ct .bh-sw{width:12px;height:12px;margin-right:7px;vertical-align:-1px}

/* ---- when the hours shift: the year to scale, then a card per stretch ---- */
.yb{margin:16px 0 6px}
.yb-t{position:relative;height:18px;border-radius:9px;overflow:hidden;background:var(--fill-2)}
.yb-t i{position:absolute;top:0;bottom:0}
.yb-summer{background:var(--s-tok)}
.yb-winter{background:var(--s-lon)}
.yb-step{background:var(--orange);min-width:4px}
.yb-ax{position:relative;height:18px;margin-top:4px;font-size:12px;color:var(--muted);overflow:hidden}
.yb-ax .ybm{position:absolute;padding-left:3px;border-left:1px solid var(--line)}
@media (max-width:559px){.yb-ax .ybm2{display:none}}
.shfl{list-style:none;margin:12px 0 10px;padding:0;display:grid;gap:10px}
@media (min-width:720px){.shfl{grid-template-columns:repeat(2,minmax(0,1fr))}}
.shf{padding:12px 14px;border:1px solid var(--line);border-left:5px solid var(--k);border-radius:10px;background:var(--fill)}
.shf-summer{--k:var(--s-tok)}
.shf-winter{--k:var(--s-lon)}
.shf-step{--k:var(--orange);background:color-mix(in srgb,var(--orange) 7%,var(--fill))}
.shf p{margin:0}
.shf-d{font:500 16px/1.25 var(--display)}
.shf-k{margin-top:2px!important;font-size:13.5px;color:var(--muted)}
.shf-step .shf-k{color:var(--orange-t);font-weight:600}
.shf-h{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px!important;font-size:14.5px;font-variant-numeric:tabular-nums}
.shf-h span{white-space:nowrap}
.shf-h .s-lon b,.shf-h .s-ny b{color:var(--e)}
.shf-b b{color:var(--orange-t)}

/* ---- the week in the country's own days (the bar itself is sessions.css's .wkx) ---- */
.wkx-t .wkx-m{font-size:12px}
.cwt td.nb{white-space:nowrap}
.cwt td:first-child{width:40%}
@media (max-width:559px){.ct th,.ct td,.cwt th,.cwt td{padding:8px 6px}.ct td{font-size:14px}.ct .ct-own{font-size:12.5px}}

/* ---- broker server time: a card per New York season ---- */
.svx{display:grid;gap:12px;margin:14px 0 6px}
@media (min-width:720px){.svx{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sv{padding:14px 16px;border:1px solid var(--band-line);border-radius:12px;background:var(--band);color:var(--band-2)}
.sv p{margin:0}
.sv-h{font-size:14px;font-weight:600;color:var(--band-text)}
.sv-big{margin-top:6px!important;font:400 clamp(20px,2.4vw,24px)/1.15 var(--display);color:#fbf8f2;font-variant-numeric:tabular-nums}
.sv-g{margin-top:6px!important;font-size:14px}
.sv-t{width:100%;margin:10px 0 0;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
/* the site's striped rows (site.css .guide tbody) stay off the ink card */
.sv-t tbody tr:nth-child(even) td{background:none}
.sv-t th,.sv-t td{padding:5px 6px;border-top:1px solid var(--band-line);text-align:left;color:var(--band-2);background:none}
.sv-t thead th{border-top:0;font-weight:600;color:var(--band-text)}
.sv-t td.nb{color:var(--band-text)}