/* ATLAS-TWiki-inspired skin.
   Colour tokens mirror the public CERN ATLAS TWiki (Pattern skin) with a
   gold accent borrowed from the CGV Web brand. */

:root {
  --atlas-blue:    #003153;   /* Prussian blue */
  --atlas-blue-2:  #164a7a;
  --atlas-blue-3:  #00213a;
  --atlas-gold:    #c99a2d;   /* accent against white */
  --atlas-gold-2:  #e8b84a;   /* brighter, for dark backgrounds */
  --page-bg:       #f5f5f2;
  --panel-bg:      #ffffff;
  --border:        #cfcfc9;
  --muted:         #6a6a6a;
  --text:          #222;
  --link:          #003153;
  --link-hover:    #8a6617;
  --code-bg:       #eef1f5;
  --toc-bg:        #eef3f8;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--page-bg); color: var(--text);
  font-family: "Lucida Grande", "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 1.55; }
body { min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

/* ---------- top bar (ATLAS ribbon) ---------- */
header.ribbon {
  background: linear-gradient(to bottom, var(--atlas-blue) 0%, var(--atlas-blue-3) 100%);
  color: #fff; padding: 8px 16px; display: flex; align-items: center; gap: 14px;
  border-bottom: 3px solid var(--atlas-gold);
}
header.ribbon .brand { display: flex; align-items: center; gap: 10px; }
header.ribbon .brand img { width: 38px; height: 38px; }
header.ribbon .brand b { font-size: 17px; letter-spacing: .3px; }
header.ribbon .brand span { opacity: .85; font-size: 12px; }
header.ribbon nav { margin-left: auto; display: flex; gap: 14px; align-items: center; }
header.ribbon nav a { color: #fff; opacity: .92; font-size: 13px; }
header.ribbon nav a:hover { opacity: 1; text-decoration: underline; color: var(--atlas-gold-2); }
header.ribbon .gh {
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%; width: 32px; height: 32px;
  transition: background .15s, border-color .15s;
}
header.ribbon .gh:hover { background: var(--atlas-gold-2); border-color: var(--atlas-gold-2); }
header.ribbon .gh object { pointer-events: none; }

/* ---------- breadcrumb ---------- */
.trail { background: #e7e7e2; padding: 5px 16px; font-size: 12px; border-bottom: 1px solid var(--border); color: #333; }
.trail a { color: var(--atlas-blue-2); }

/* ---------- layout (grows to fill viewport) ---------- */
.layout { flex: 1 0 auto; display: grid; grid-template-columns: 240px 1fr 240px; gap: 0; }
aside.sidebar { background: var(--panel-bg); border-right: 1px solid var(--border); padding: 14px 10px 40px; }
aside.sidebar h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--atlas-blue);
  border-bottom: 2px solid var(--atlas-gold); padding-bottom: 4px; margin: 10px 4px 6px; }
aside.sidebar ul { list-style: none; padding: 0; margin: 0 0 10px; }
aside.sidebar li a { display: block; padding: 4px 8px; border-left: 3px solid transparent; color: #222; font-size: 13px; }
aside.sidebar li a:hover { background: var(--toc-bg); border-left-color: var(--atlas-blue-2); text-decoration: none; }
aside.sidebar li a.active { background: #fff7e0; border-left-color: var(--atlas-gold); color: var(--atlas-blue); font-weight: 600; }
aside.sidebar input.search { width: 100%; padding: 5px 7px; border: 1px solid var(--border); border-radius: 2px; font-size: 12px; margin-bottom: 10px; }

main.content { background: var(--panel-bg); padding: 18px 28px 40px; border-right: 1px solid var(--border); min-width: 0; overflow-wrap: break-word; }
main.content img { max-width: 100%; height: auto; }
main.content .twiki-tablewrap { max-width: 100%; overflow-x: auto; }
main.content h1 { font-size: 26px; color: var(--atlas-blue); border-bottom: 2px solid var(--atlas-gold); padding-bottom: 6px; margin: 4px 0 14px; }
main.content h2 { font-size: 19px; color: var(--atlas-blue); margin-top: 28px; border-bottom: 1px solid var(--atlas-gold); padding-bottom: 3px; }
main.content h3 { font-size: 15px; color: #333; margin-top: 20px; }
main.content p  { margin: 8px 0; }
main.content ul, main.content ol { padding-left: 22px; }
main.content li { margin: 2px 0; }
main.content code { background: var(--code-bg); padding: 1px 5px; border-radius: 2px; font-family: Consolas, Menlo, monospace; font-size: 12.5px; color: #0b2a5c; }
main.content pre { background: #1e2733; color: #e8eef7; padding: 10px 14px; border-radius: 4px; overflow-x: auto; font-size: 12.5px; }
main.content pre code { background: transparent; color: inherit; padding: 0; }
main.content table { border-collapse: collapse; margin: 10px 0; width: 100%; font-size: 13px; }
main.content th { background: var(--atlas-blue); color: #fff; text-align: left; padding: 5px 8px; font-weight: 600; border-bottom: 2px solid var(--atlas-gold); }
main.content td { border: 1px solid var(--border); padding: 5px 8px; vertical-align: top; }
main.content tr:nth-child(even) td { background: #fafafa; }
main.content blockquote { border-left: 3px solid var(--atlas-gold); background: #fff9eb; padding: 6px 12px; color: #333; margin: 10px 0; }
main.content dl dt { font-weight: 600; color: var(--atlas-blue); margin-top: 6px; }
main.content dl dd { margin: 0 0 6px 16px; }
main.content .err { background: #fff9e6; border: 1px solid var(--atlas-gold); color: var(--atlas-blue-3); padding: 10px 14px; border-radius: 3px; }
main.content .notice-red { border-left: 4px solid #c8102e; background: #fdecee; color: #4a0a14; padding: 10px 14px; margin: 12px 0; border-radius: 2px; font-size: 13px; }
main.content .notice-red strong { color: #8a0a1c; }
main.content .notice-red a { color: #8a0a1c; text-decoration: underline; }

/* ---------- right TOC ---------- */
aside.toc { background: var(--toc-bg); padding: 14px 12px; font-size: 12px; border-left: 3px solid var(--atlas-gold); }
aside.toc .twiki-toc h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--atlas-blue); }
aside.toc ul { list-style: none; padding-left: 10px; margin: 0; }
aside.toc li { margin: 2px 0; }
aside.toc a { color: #2a3b66; }
aside.toc a:hover { color: var(--atlas-gold); }

/* ---------- footer ---------- */
footer.foot {
  flex: 0 0 auto;
  background: linear-gradient(to bottom, var(--atlas-blue-3) 0%, #05224f 100%);
  color: #e3e8f3; padding: 14px 18px; font-size: 12px;
  display: flex; align-items: center; gap: 14px;
  border-top: 3px solid var(--atlas-gold);
}
footer.foot .partners { display: flex; align-items: center; gap: 18px; }
footer.foot .lab { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
footer.foot .lab img { width: 32px; height: 32px; object-fit: contain; }
footer.foot .lab:hover img { filter: brightness(1.15); }
footer.foot .links { margin-left: auto; display: flex; gap: 16px; }
footer.foot a { color: var(--atlas-gold-2); }
footer.foot a:hover { color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .layout { grid-template-columns: 200px 1fr; }
  aside.toc { display: none; }
}
@media (max-width: 680px) {
  .layout { grid-template-columns: 1fr; }
  aside.sidebar { border-right: 0; border-bottom: 1px solid var(--border); }
  header.ribbon nav { display: none; }
}