:root{
  --link-blue: #3FA9FF;
  --accent-green: #00FF6A;
  /* Brand */
  --bg:#0B2A4A;
  --bg2:#071F36;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.04);
  --text:#EAF2FF;
  --muted:rgba(234,242,255,.72);
  --muted2:rgba(234,242,255,.55);
  --green:#00FF6A;
  --blue:#38BDF8;
  --border:rgba(255,255,255,.12);
  --border2:rgba(255,255,255,.08);
  --shadow:0 18px 55px rgba(0,0,0,.28);
  --shadow2:0 10px 30px rgba(0,0,0,.22);
  --radius:18px;
  --radius2:14px;
  --max:1060px;
}

/* Apple-like top navigation */
.topnav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.topnav-inner{
  max-width:1100px;
  margin:0 auto;
  padding:10px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.topnav-logo{display:inline-flex;align-items:center;gap:10px}
.topnav-logo img{width:18px;height:18px;display:block}
.topnav .nav{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:center;
}
.topnav .nav a{
  color:rgba(10,10,10,.88);
  font-size:13px;
  font-weight:600;
  padding:6px 8px;
  border-radius:999px;
}
.topnav .nav a:hover{background:rgba(0,0,0,.06);text-decoration:none}
.topnav .nav a.active{background:rgba(0,0,0,.10)}

/* Push content below sticky bar */
html{scroll-padding-top:70px}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{color-scheme:dark;scroll-behavior:smooth}

body{
  min-height:100vh;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.65;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(56,189,248,.18), transparent 60%),
    radial-gradient(900px 520px at 90% 0%, rgba(0,255,106,.12), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--max);margin:0 auto;padding:28px 20px}
.wrap-narrow{max-width:980px;margin:0 auto}

/* Header */
header.hero{
  padding:18px 0 10px;
  position:relative;
}
header.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 55%),
    radial-gradient(900px 350px at 50% 0%, rgba(255,255,255,.06), transparent 60%);
  pointer-events:none;
}

header.hero > .wrap{position:relative}

.header-flags-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px}
.flag-icon{height:44px;width:auto;border-radius:6px;box-shadow:0 8px 22px rgba(0,0,0,.28)}

.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  box-shadow:var(--shadow2);
  font-weight:800;
  letter-spacing:.2px;
}
.brand .logo{width:44px;height:44px;border-radius:12px;display:inline-block;object-fit:cover}

h1{font-size:clamp(28px,4.4vw,46px);margin:10px 0 6px;letter-spacing:.2px;text-align: left}
header.hero h2{margin:0 0 8px;text-align: left;color:var(--muted);font-weight:650;letter-spacing:.2px}

p.lead{font-size:clamp(16px,2.2vw,20px);color:var(--muted);margin:0 auto 10px;max-width:860px;text-align: left}

.nav{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:12px;
}
.nav a{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  color:var(--muted);
  font-size:13px;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.nav a:hover{background:rgba(255,255,255,.08);text-decoration:none;transform:translateY(-1px)}
.nav a.active, .nav a[aria-current="page"]{
  color:var(--text);
  border-color:rgba(0,255,106,.45);
  background:rgba(0,255,106,.10);
}

/* Layout blocks */
section{padding:18px 0}

.panel{
  background:linear-gradient(180deg, var(--panel), var(--panel2));
  border:1px solid var(--border2);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow2);
}

.sep{height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);margin:22px 0}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:12px}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--border2);
  padding:16px;
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
  transition:transform .12s ease, border-color .12s ease;
}
.card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.14)}

section h2{font-size:22px;margin:0 0 10px;letter-spacing:.2px}

.meta{font-size:13px;color:var(--muted2)}
.error{color:#fecaca}

/* Notes / callouts */
.note{color:var(--muted)}
.notice{
  border-left:4px solid var(--green);
  color:rgba(234,242,255,.92);
  padding:12px 14px;
  background:rgba(0,0,0,.16);
  border-radius:14px;
}

/* Badges / tags */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  font-size:12px;
  color:var(--muted);
}
.tag{display:inline-block;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--border);font-size:12px;color:var(--muted)}
.tags{display:inline-flex;gap:8px;flex-wrap:wrap;margin-left:8px}

/* Buttons & inputs (Oracle login, forms, etc.) */
button,
.btn{
  border:1px solid rgba(0,255,106,.38);
  background:rgba(0,255,106,.12);
  color:var(--text);
  padding:10px 14px;
  border-radius:14px;
  cursor:pointer;
  font-weight:800;
  letter-spacing:.15px;
}
button:hover,
.btn:hover{background:rgba(0,255,106,.18)}
button:disabled{opacity:.6;cursor:not-allowed}

input, textarea, select{
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
}
input::placeholder, textarea::placeholder{color:rgba(234,242,255,.52)}
input:focus, textarea:focus, select:focus{border-color:rgba(56,189,248,.55);box-shadow:0 0 0 4px rgba(56,189,248,.14)}

/* Article / blog typography */
.article-body{
  max-width:980px;
  margin:0 auto;
  text-align: left;
}
.article-body h2, .article-body h3{scroll-margin-top:100px}
.article-body p, .article-body li{font-size:16px}
.article-body ul{list-style:disc;list-style-position:inside;padding-left:0}
.article-body ol{list-style-position:inside;padding-left:0}
.article-body .callout{border-left:4px solid var(--green);padding:12px 14px;background:rgba(0,0,0,.16);border-radius:14px;text-align:left}

/* Tables inside articles */
table{width:100%;border-collapse:collapse;margin:14px 0;border-radius:14px;overflow:hidden}
th,td{border:1px solid rgba(255,255,255,.14);padding:10px 12px;vertical-align:top;text-align:left}
th{background:rgba(0,0,0,.18);color:rgba(234,242,255,.92);font-weight:800}
tr:nth-child(even) td{background:rgba(255,255,255,.02)}

/* Blog index list */
#posts{list-style:none;padding:0;margin:0}
#posts > li{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.10)}
#posts > li:last-child{border-bottom:0}
#posts > li a{font-weight:800;color:var(--text)}

/* Recent articles (homepage) */
.recent-articles-section .ra-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.recent-articles-section .ra-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
  margin-top:10px;
}
.ra-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--border2);
  box-shadow:var(--shadow2);
  transition:transform .12s ease, border-color .12s ease;
}
.ra-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.14);text-decoration:none}
.ra-title{font-weight:900;color:var(--text);letter-spacing:.1px}
.ra-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;color:var(--muted2);font-size:12px}
.ra-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;border:1px solid rgba(0,255,106,.34);background:rgba(0,255,106,.10);color:rgba(234,242,255,.92);font-size:12px}

/* Footer */
footer{padding:34px 20px;color:var(--muted2);text-align: left;font-size:14px}
footer a{color:rgba(234,242,255,.86)}

code{background:rgba(255,255,255,.08);padding:2px 6px;border-radius:8px;border:1px solid rgba(255,255,255,.10)}

/* Small screens */
@media (max-width: 560px){
  .wrap{padding:22px 14px}
  .brand{gap:10px;padding:9px 12px}
  .brand .logo{width:40px;height:40px}
  .nav a{padding:8px 11px}
  .panel{padding:16px}
}


/* --- Hi K Robot: Top bar dark theme override (2026-01-15) --- */
:root{
  --hk-bg:#0B2A4A;
  --hk-green:#00FF6A;
}

.topbar, .top-bar, .apple-topbar, header .navwrap, header .nav, header.nav, .site-header{
  background: rgba(11,42,74,0.92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

.topbar a, .top-bar a, .apple-topbar a, header .nav a, header .navwrap a, .site-header a, nav.nav a{
  color: rgba(255,255,255,0.90) !important;
}

.topbar a:hover, .top-bar a:hover, .apple-topbar a:hover, header .nav a:hover, header .navwrap a:hover, .site-header a:hover, nav.nav a:hover{
  color: #FFFFFF !important;
}

.topbar a.active, .top-bar a.active, .apple-topbar a.active, header .nav a.active, nav.nav a.active{
  background: rgba(0,255,106,0.14) !important;
  border: 1px solid rgba(0,255,106,0.45) !important;
  color: #FFFFFF !important;
}

.topbar .logo, .top-bar .logo, .apple-topbar .logo, header .logo{
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.25));
}
/* --- end override --- */

/* v8: topbar dark + logo visibility */
header.topnav{
  background:#0B2A4A !important;
  border-bottom:1px solid rgba(255,255,255,0.10);
}
header.topnav .topnav-inner{
  display:flex;
  align-items:center;
  gap:10px; /* keep logo tight to Home */
}
header.topnav .topnav-logo{
  display:flex;
  align-items:center;
  margin-right:6px;
}
header.topnav .topnav-logo img{
  height:50px;
  width:auto;
  display:block;
}
header.topnav .topnav-links a{
  color: rgba(255,255,255,0.92) !important;
}
header.topnav .topnav-links a:hover{ color:#fff !important; }
header.topnav .topnav-links a.active{
  background: rgba(0,255,106,0.14) !important;
  border: 1px solid rgba(0,255,106,0.45) !important;
  color:#fff !important;
}
/* v8 end */

/* v8: hero title row (title + logo inline) */
.hero-title-row{
  display:flex;
  align-items:baseline;
  gap:16px;
  flex-wrap:wrap;
}
.hero-title-row h1{ margin:10px 0 6px; }
.hero-title-logo{
  height:46px; /* matches h1 max size */
  width:auto;
  display:block;
  opacity:0.95;
}
/* v8 end hero */

/* v9: topnav-logo inside nav (logo next to Home) */
header.topnav nav.nav.topnav-links{
  display:flex;
  align-items:center;
  gap:12px;
}
header.topnav nav.nav.topnav-links .topnav-logo{
  display:flex;
  align-items:center;
  padding:0;
  margin-right:6px; /* keeps it tight to Home */
  border:none;
  background:transparent;
}
header.topnav nav.nav.topnav-links .topnav-logo img{
  height:50px;
  width:auto;
  display:block;
}
/* v9 end */

/* v11: unified color system
   Green = stance/risk/disclaimer/important
   Blue  = clickable content links
   White = structure text (headings/body) */

/* Base text */
body{ color: var(--text); }
h1,h2,h3,h4,h5,h6{ color: rgba(255,255,255,.94); }

/* GREEN: disclaimers / important / notice */
.disclaimer, .disclaimer *,
.notice, .notice *,
.important, .important *{
  color: var(--accent-green) !important;
}

/* BLUE: content links inside main content areas (exclude top nav) */
main a,
.panel a,
.article-body a,
#posts > li > a,
#posts > li > a:visited,
.activity-log a,
.activity-log a:visited,
.timeline a,
.timeline a:visited{
  color: var(--link-blue);
  text-decoration: none;
}
main a:hover,
.panel a:hover,
.article-body a:hover,
#posts > li > a:hover,
.activity-log a:hover,
.timeline a:hover{
  text-decoration: underline;
}

/* Keep navigation links white */
header.topnav a{
  color: rgba(255,255,255,.92) !important;
}
header.topnav a:hover{ color:#fff !important; }
header.topnav a.active{ color:#fff !important; }

/* Muted text helpers */
.muted, small, .meta, #posts .meta, #posts .desc{
  color: var(--muted);
}
/* v11 end */

/* ===== Hero spacing fixes (Site Info Center + all hero pages) ===== */
/* The large blank area was coming from: .wrap { padding: 28px 20px } used inside hero and again in <main>. */
/* Reduce bottom padding inside the hero's inner .wrap, and reduce the top padding of the first main after hero. */
header.hero .wrap,
.hero .wrap{
  padding-bottom: 12px !important;
}

header.hero,
.hero{
  padding-bottom: 6px !important;
}

header.hero h2,
.hero h2{
  margin-bottom: 6px !important;
}

/* Pull content closer to the hero */
header.hero + main.wrap,
.hero + main.wrap{
  padding-top: 12px !important;
}

/* Keep section spacing slightly tighter (avoid huge gaps between blocks) */
main.wrap section{
  padding-top: 10px;
  padding-bottom: 10px;
}


/* v19: mobile topnav — stable 2-row grid, short labels (no 'K Robot'), logo without pill/frame */
@media (max-width: 520px){
  /* ensure nav can occupy full row width on mobile */
  header.topnav .topnav-inner{
    width: 100%;
  }
  header.topnav nav.nav.topnav-links{
    width: 100%;
    display: grid !important;
    grid-template-columns: 60px 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 10px 12px;
  }

  /* logo: no pill / no border / no background */
  header.topnav nav.nav.topnav-links a.topnav-logo{
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-self: start;
    width: 60px;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }
  header.topnav nav.nav.topnav-links a.topnav-logo img{
    height: 46px;
    width: auto;
    display: block;
  }

  /* fixed placement for remaining 6 links */
  header.topnav nav.nav.topnav-links a:nth-child(2){ grid-column: 2; grid-row: 1; } /* Home */
  header.topnav nav.nav.topnav-links a:nth-child(3){ grid-column: 3; grid-row: 1; } /* Analysis */
  header.topnav nav.nav.topnav-links a:nth-child(4){ grid-column: 4; grid-row: 1; } /* Matrix */
  header.topnav nav.nav.topnav-links a:nth-child(5){ grid-column: 2; grid-row: 2; } /* Perspectives */
  header.topnav nav.nav.topnav-links a:nth-child(6){ grid-column: 3; grid-row: 2; } /* Lab */
  header.topnav nav.nav.topnav-links a:nth-child(7){ grid-column: 4; grid-row: 2; } /* Site Info */

  /* links fill each grid cell (but not the logo) */
  header.topnav nav.nav.topnav-links a:not(.topnav-logo){
    width: 100% !important;
    min-width: 0;
    padding: 10px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
  }

  /* hide original text (including any nested elements) to prevent overlap/duplication */
  header.topnav nav.nav.topnav-links a:not(.topnav-logo),
  header.topnav nav.nav.topnav-links a:not(.topnav-logo) *{
    font-size: 0 !important;
    color: transparent !important;
    text-shadow: none !important;
  }

  /* repaint short labels (visual only; href unchanged) */
  header.topnav nav.nav.topnav-links a:not(.topnav-logo)::after{
    content: "";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.05;
    color: #F3F6FA;
    pointer-events: none;
    white-space: nowrap;
  }
  header.topnav nav.nav.topnav-links a:nth-child(2)::after{ content: "Home"; }
  header.topnav nav.nav.topnav-links a:nth-child(3)::after{ content: "Analysis"; }
  header.topnav nav.nav.topnav-links a:nth-child(4)::after{ content: "Matrix"; }
  header.topnav nav.nav.topnav-links a:nth-child(5)::after{ content: "Perspectives"; }
  header.topnav nav.nav.topnav-links a:nth-child(6)::after{ content: "Lab"; }
  header.topnav nav.nav.topnav-links a:nth-child(7)::after{ content: "Site Info"; }
}
/* v19 end */
/* === v20: remove top navigation divider line (desktop + mobile) === */
.topbar, .top-bar, .apple-topbar,
header.topnav,
header.topnav .navwrap,
header.topnav nav,
header.topnav .topnav-inner,
header.topnav .topnav-links,
.site-header{
  border-bottom: none !important;
  box-shadow: none !important;
}
/* === v20 end === */

/* ===== Home: Latest Updates (grouped sections + responsive) ===== */
/* If you don't see this taking effect, confirm your home page section has id="latest-updates"
   and you're editing /assets/style.css (the file linked by <link href="assets/style.css" ...> on index.html). */
#latest-updates{
  background: linear-gradient(180deg, rgba(11,42,74,0.35), rgba(11,42,74,0));
  padding: 24px 20px 8px;
  border-radius: 16px;
}
#latest-updates h3{
  margin: 26px 0 12px;
  font-weight: 650;
  color: rgba(207,231,255,0.95);
  letter-spacing: .15px;
}
#latest-updates h3:first-of-type{ margin-top: 14px; }

/* keep cards in a deep tone inside Latest Updates */
#latest-updates .ra-card{
  background: radial-gradient(120% 120% at 0% 0%, rgba(18,24,38,0.96) 0%, rgba(11,16,32,0.96) 55%, rgba(7,11,24,0.96) 100%);
}

/* Force 1-column on phones (and small tablets) */
@media (max-width: 900px){
  #latest-updates{
    padding: 18px 14px 6px;
    border-radius: 14px;
  }
  #latest-updates .ra-grid{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  #latest-updates h3{
    margin: 18px 0 10px;
    font-size: 15px;
  }
  #latest-updates .ra-card{
    padding: 14px;
  }
}
/* ===== end Home: Latest Updates ===== */

/* === Home: Latest Updates section marker (centered dot) === */
#latest-updates h3{
  position: relative;
  padding-left: 16px;
}

#latest-updates h3::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  transform: translateY(-50%);
}
/* === end section marker === */


/* === v21: mobile landscape topnav single-line === */
@media (max-width: 900px) and (orientation: landscape) {
  header.topnav nav.nav.topnav-links{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
  }

  header.topnav nav.nav.topnav-links a{
    white-space: nowrap;
    font-size: 12.5px;
    padding: 6px 10px;
    flex: 0 0 auto;
  }

  header.topnav nav.nav.topnav-links a.topnav-logo img{
    height: 28px;
    width: auto;
  }
}
/* === v21 end === */

/* === AI Civilization Map canonical provenance and versioning === */
.map-canonical-status,
.canonical-governance-grid,
.release-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:18px 0;
}
.map-status-item,
.canonical-governance-card,
.release-card,
.activity-release-status,
.release-policy,
.canonical-version-note,
.canonical-external-note{
  border:1px solid rgba(120,255,181,.20);
  background:linear-gradient(180deg,rgba(11,42,74,.46),rgba(5,18,34,.52));
  border-radius:14px;
  padding:14px 15px;
}
.map-status-item span,
.release-card-header,
.activity-release-status span{
  display:block;
  color:rgba(236,244,255,.62);
  font-size:.82rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.map-status-item strong,
.canonical-governance-card strong,
.activity-release-status strong{
  display:block;
  margin:4px 0;
  color:#eef7ff;
}
.map-status-item small,
.canonical-governance-card span{
  display:block;
  color:rgba(236,244,255,.72);
  line-height:1.55;
}
.map-status-item a,
.canonical-governance-card a,
.release-card a,
.canonical-version-note a,
.canonical-external-note a{
  color:#78ffb5;
}
.map-method-definition{
  margin:12px 0;
  padding:14px 15px;
  border-left:4px solid #00ff6e;
  border-radius:0 12px 12px 0;
  background:rgba(0,255,110,.06);
  color:rgba(236,244,255,.88);
  line-height:1.7;
}
.map-method-version{
  color:rgba(236,244,255,.68);
  font-size:.94rem;
}
.canonical-version-note,
.canonical-external-note,
.release-policy{
  color:rgba(236,244,255,.76);
  line-height:1.68;
}
.activity-release-status{
  margin:16px 0 4px;
}
.canonical-releases > p{
  color:rgba(236,244,255,.74);
  line-height:1.7;
}
.release-card-header{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  text-transform:none;
}
.release-version{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(0,255,110,.34);
  background:rgba(0,255,110,.10);
  color:#78ffb5;
  border-radius:999px;
  padding:3px 10px;
  font-weight:800;
  letter-spacing:.03em;
}
.release-card h3{
  margin:12px 0 8px;
}
.release-card p{
  color:rgba(236,244,255,.73);
  line-height:1.65;
}
@media (max-width:760px){
  .map-canonical-status,
  .canonical-governance-grid,
  .release-grid{
    grid-template-columns:1fr;
  }
  .release-card-header{
    align-items:flex-start;
    flex-direction:column;
  }
}
/* === end canonical provenance and versioning === */

/* === Responsive article tables === */
.article-body .table-wrap,
.panel .table-wrap{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
}
.article-body .table-wrap table,
.panel .table-wrap table{
  width:max-content;
  min-width:100%;
  max-width:none;
}
/* === end responsive article tables === */

@media (max-width: 720px){
  .article-body table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

@media (max-width: 720px){
  article.panel table,
  main .panel table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* === Responsive code blocks === */
pre{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
pre code{
  white-space:pre;
}
/* === end responsive code blocks === */