secondo.css

*, *::before, *::after{
   box-sizing:border-box;
}


:root{
   color-scheme: light;

   /* brand */
   /* the color rgb(184,0,0) the the rgb value from the secondo-logo */
   --secondo-red-rgb: 184,0,0;
   --secondo-red: rgb(var(--secondo-red-rgb));
   --secondo-red-dark-rgb: 138,0,0;
   --secondo-red-dark: rgb(var(--secondo-red-dark-rgb));
   --secondo-red-hover: rgb(120,0,0);
   --secondo-red-btn-hover: rgb(140,0,0);
   --secondo-visited-rgb: 138,64,54;
   --secondo-visited: rgb(var(--secondo-visited-rgb));

   /* surfaces */
   --surface-page: rgb(240,240,240);
   --surface-raised: white;
   --surface-code: rgb(228,228,228);
   --surface-pre: rgb(245,245,245);

   /* borders, light to dark */
   --border-divider: rgb(222,222,222);
   --border-subtle: rgb(224,224,224);
   --border-strong: rgb(210,210,210);
   --border-table: rgb(228,228,228);

   /* text, strongest to faintest */
   --text-body: black;
   --text-muted: rgb(70,70,70);
   --text-venue: rgb(110,110,110);
   --text-footer: rgb(90,90,90);
   --text-faint: rgb(140,140,140);
   --text-caption: gray;

   /* syntax highlighting (Rouge); see the .highlight rules further down */
   --code-comment: rgb(106,115,125);
   --code-keyword: rgb(0,92,197);
   --code-string: rgb(3,106,60);
   --code-number: rgb(0,92,197);
   --code-builtin: rgb(111,66,193);
   --code-operator: rgb(70,70,70);

   /* type */
   --font-ui: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
   --font-heading: ui-serif,Georgia,"Times New Roman",serif;
   --font-mono: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
   --line-height-body: 1.5;

   /* heading scale; h1 and h2 grow with the viewport, the rest are fixed */
   --step-h1: clamp(1.9rem, 1.5rem + 1.6vw, 2.5rem);
   --step-h2: clamp(1.45rem, 1.25rem + 0.8vw, 1.75rem);
   --step-h3: 1.2rem;
   --step-h4: 1.02rem;

   /* radii */
   --radius-sm: 3px;
   --radius-md: 6px;
   --radius-lg: 8px;
   --radius-xl: 10px;

   /* the reading column shared by content blocks and the footer */
   --content-max: 48rem;
}


/* page format */
body{
   margin:0;
   font-size:100%;
   font-style:normal;
   font-weight:normal;
   font-family:var(--font-ui);
   /* long-form documentation needs more leading than the browser default */
   line-height:var(--line-height-body);
   color:var(--text-body);
   background-color:var(--surface-page);
   text-align:left;
}

.secondo{
   font-variant:small-caps;
}


/* headlines */
h1{ color:var(--secondo-red);
    text-align:center;
    line-height:1.25;
    font-size:var(--step-h1);
    font-style:normal;
    font-weight:bold;
    font-family:var(--font-heading); }

h2{ color:var(--secondo-red);
    line-height:1.25;
    font-size:var(--step-h2);
    font-style:normal;
    font-weight:bold;
    font-family:var(--font-heading); }

h3{ color:var(--secondo-red);
    line-height:1.25;
    font-size:var(--step-h3);
    font-style:italic;
    font-weight:bold;
    font-family:var(--font-heading); }

h4,h5,h6{
    line-height:1.25;
    font-size:var(--step-h4);
    font-style:normal;
    font-weight:bold;
    font-family:var(--font-heading); }

/* keep headings off ragged one-word last lines, and keep in-page anchor
   targets clear of the fixed mobile hamburger */
h1,h2,h3{
    text-wrap:balance;
    scroll-margin-top:24px;
}

/* keyboard focus must stay visible in both themes; currentColor adapts */
:focus-visible{
    outline:2px solid currentColor;
    outline-offset:2px;
}

/* navigation sidebar (_includes/nav.html) */
aside.sidebar{
    position:fixed;
    top:0;
    left:0;
    width:270px;
    height:100vh;
    /* dvh accounts for collapsing mobile browser chrome; vh above is the fallback */
    height:100dvh;
    overflow-y:auto;
    font-family:var(--font-ui);
    font-size:1rem;
    line-height:normal;
    text-align:left;
    background:linear-gradient(180deg, var(--secondo-red) 0%, var(--secondo-red-dark) 100%);
}

/* main content area, offset by the fixed sidebar width */
main{
    display:block;
    margin-left:270px;
    padding:20px;
    overflow-x:auto;
}

.nav-toggle-btn{
    display:none;
}


a.nav-logo,
a.nav-logo:link,
a.nav-logo:visited,
a.nav-logo:hover,
a.nav-logo:focus{
    display:block;
    margin:16px 14px 8px;
    padding:12px 10px 10px;
    background:var(--surface-raised);
    border-radius:var(--radius-lg);
    text-align:center;
    box-shadow:0 2px 6px rgba(0,0,0,0.3);
}

.nav-logo img{
    width:100%;
    max-width:210px;
    height:auto;
    padding:0;
    margin:0;
}

nav.navi{
    padding:8px 8px 24px;
}

nav.navi ul{
    list-style:none;
    margin:0;
    padding:0;
}

nav.navi li{
    margin:1px 0;
}

nav.navi .navi-label{
    display:block;
    padding:12px 12px 4px;
    color:white;
    font-weight:bold;
    font-size:0.85rem;
    letter-spacing:0.3px;
}

nav.navi > ul > li > ul{
    margin:2px 4px 8px 10px;
    padding-left:10px;
    border-left:1px solid rgba(255,255,255,0.3);
}


ul{
  list-style-type:square;
  list-style-position:outside;
}

ul.algebra{
   list-style-type:none;
   display:grid;
   grid-template-columns:repeat(2, 1fr);
   gap:16px;
   margin:16px 0 0;
   padding:0;
   max-width:46rem;
}

ul.algebra li{
   background:var(--surface-raised);
   border:1px solid var(--border-subtle);
   border-left:3px solid var(--secondo-red);
   padding:14px 18px;
}

ul.algebra span.algebraname{
   display:block;
   margin-bottom:4px;
   color:var(--secondo-red);
   font-size:1.05rem;
}

/* navigation card grid (index.html "Where to go next") */
ul.cards{
   list-style:none;
   display:grid;
   grid-template-columns:repeat(3, 1fr);
   gap:16px;
   margin:18px 0 0;
   padding:0;
   max-width:48rem;
}

ul.cards li{
   display:flex;
}

a.card,
a.card:link,
a.card:visited{
   display:flex;
   flex-direction:column;
   width:100%;
   padding:15px 18px;
   background:var(--surface-raised);
   border:1px solid var(--border-subtle);
   border-left:3px solid var(--secondo-red);
   text-decoration:none;
   color:var(--text-body);
   transition:box-shadow .15s ease, border-left-color .15s ease;
}

a.card:hover,
a.card:focus{
   text-decoration:none;
   color:var(--text-body);
   box-shadow:0 2px 12px rgba(0,0,0,0.09);
   border-left-color:var(--secondo-red-dark);
}

a.card .card-title{
   font-weight:bold;
   font-size:1.02rem;
   color:var(--secondo-red);
   margin-bottom:6px;
}

a.card .card-desc{
   font-size:0.88rem;
   color:var(--text-muted);
   line-height:1.5;
}

/* Links  don't change the order of this definitions */
/* not visited */
a:link{ color:var(--secondo-red);
        font-style:normal;
        text-decoration:underline;
        text-decoration-color:rgba(var(--secondo-red-rgb),0.4);
        text-underline-offset:2px;
        transition:color .15s ease, text-decoration-color .15s ease;
}

nav.navi a.navi{
   display:block;
   padding:9px 12px;
   font-family:var(--font-ui);
   font-weight:600;
   font-style:normal;
   color:white;
   font-size:0.9rem;
   text-decoration:none;
   border-left:3px solid transparent;
   border-radius:0 5px 5px 0;
   transition:background-color .15s ease, border-color .15s ease;
}

nav.navi > ul > li > ul a.navi{
   font-weight:400;
   font-size:0.82rem;
   padding:6px 10px;
   color:rgba(255,255,255,0.85);
}

/*  visited*/
a:visited{color:var(--secondo-visited);
           font-style:normal;
           text-decoration:underline;
           text-decoration-color:rgba(var(--secondo-visited-rgb),0.4);
           text-underline-offset:2px;
}

nav.navi a.navi:visited{
   color:white;
}

nav.navi > ul > li > ul a.navi:visited{
   color:rgba(255,255,255,0.85);
}


/* activ  */
a:hover,a:focus{ color:var(--secondo-red-hover);
                 font-style:normal;
                 text-decoration:underline;
                 text-decoration-color:var(--secondo-red-hover);
               }


nav.navi a.navi:hover,
nav.navi a.navi:focus,
nav.navi a.navi.active{
   background-color:rgba(255,255,255,0.16);
   border-left-color:white;
   color:white;
   text-decoration:none;
}

nav.navi > ul > li > ul a.navi:hover,
nav.navi > ul > li > ul a.navi:focus,
nav.navi > ul > li > ul a.navi.active{
   color:white;
}

img{ border-style:none;
     padding:0;
     margin:0;
     max-width:100%;
     height:auto;
     }

span.algebraname{
    color:var(--text-body);
    font-weight:bolder;
}

section.section{
     padding:28px 0;
     max-width:48rem;
}

section.section + section.section{
     border-top:1px solid var(--border-divider);
}

div.short{
     margin-left:2rem;
     text-align:left;
     max-width:46rem;
}

/* screenshot + caption for query examples (index.html) */
figure.query-figure{
     margin:18px 0 34px;
     max-width:640px;
}

figure.query-figure img{
     border:1px solid var(--border-strong);
}

/* caption styling is shared by the query figures on index.html and the
   screenshot walkthrough on content_getting_started.html */
figcaption{
     margin:8px 0 0;
     font-size:0.8rem;
     color:var(--text-caption);
     line-height:1.5;
}

div.paper{
    font-style:italic;
}

div.comment{
  color:var(--text-caption);
}

div.footnote{
 margin-top:15px;
 border-top:1px;
 border-top-style:solid;
 padding-top:15px;
 font-size:x-small;
}

/* shared site footer (_includes/footer.html) */
footer.site-footer{
  margin-top:48px;
  padding-top:16px;
  border-top:1px solid var(--border-strong);
  max-width:48rem;
  font-size:0.8rem;
  color:var(--text-footer);
  line-height:1.7;
}

footer.site-footer .site-footer-date{
  display:block;
  margin-top:6px;
  color:var(--text-faint);
}

/* content classes used by BerlinMOD/BerlinMOD.html */
div.normal{
     margin-left:2rem;
     text-align:left;
     max-width:46rem;
}

div.deprecated{
    color:var(--text-caption);
    font-style:italic;
}

a.deprecated{
    color:var(--text-caption);
}

div.indented{
    margin-left:2rem;
}

span.object{
    font-family:var(--font-mono);
    font-size:0.9em;
}

/* publication list (content_papers.html) */
ol.pub-list{
  list-style:none;
  margin:20px 0 0;
  padding:0;
  max-width:52rem;
}

ol.pub-list li{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:14px 4px;
  border-top:1px solid var(--border-subtle);
  border-left:3px solid transparent;
  transition:background-color .15s ease, border-left-color .15s ease;
}

ol.pub-list li:first-child{
  border-top:none;
}

ol.pub-list li:hover{
  background-color:rgba(var(--secondo-red-rgb),0.035);
  border-left-color:var(--secondo-red);
}

.pub-meta{
  flex:1 1 auto;
  min-width:0;
}

.pub-meta .authors{
  display:block;
  color:var(--text-muted);
}

.pub-meta .title{
  display:block;
  margin-top:2px;
  font-weight:bold;
  color:var(--text-body);
}

.pub-meta .venue{
  display:block;
  margin-top:2px;
  font-style:italic;
  color:var(--text-venue);
}

.pub-badge{
  display:inline-block;
  margin-top:6px;
  padding:2px 8px;
  font-style:normal;
  font-size:small;
  font-weight:bold;
  color:white;
  background:var(--secondo-red);
  border-radius:var(--radius-xl);
}

.pub-links{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  padding-top:2px;
  text-align:right;
}

.pub-links a{
  font-size:0.85rem;
  white-space:nowrap;
}

span.file{
  font-family:var(--font-mono);
  font-size:0.9em;
}

span.command{
  font-family:var(--font-mono);
  font-size:large;
}

/* inline code and code blocks (used by documentation pages)

   The size is set explicitly here. Browsers shrink monospace text only when
   the family is the bare `monospace` keyword; naming a real face first opts
   out of that, which would otherwise render code noticeably larger than the
   surrounding prose. */
code{
  font-family:var(--font-mono);
  font-size:0.9em;
  background-color:var(--surface-code);
  padding:1px 3px;
  border-radius:var(--radius-sm);
}

pre{
  font-family:var(--font-mono);
  font-size:0.875rem;
  line-height:1.45;
  background-color:var(--surface-pre);
  border:1px solid var(--border-strong);
  border-left:3px solid var(--secondo-red);
  padding:10px 12px;
  overflow-x:auto;
  max-width:52rem;
  text-align:left;
}

pre code{
  background-color:transparent;
  font-size:inherit;
  padding:0;
}


/* content data tables (content_sources.html and other download/overview pages) */
div.table-wrap{
  overflow-x:auto;
  max-width:52rem;
}

table.datatable{
  border-collapse:collapse;
  margin-top:10px;
  text-align:left;
}


table.datatable th{
  text-align:left;
  padding:7px 18px 7px 0;
  border-bottom:2px solid var(--secondo-red);
  vertical-align:top;
}

table.datatable td{
  padding:7px 18px 7px 0;
  border-bottom:1px solid var(--border-table);
  vertical-align:top;
}

table.datatable tr:last-child td{
  border-bottom:none;
}

table.datatable th:last-child,
table.datatable td:last-child{
  padding-right:0;
}


a.btn:link,
a.btn:visited{
  display:inline-block;
  font-family:var(--font-ui);
  font-weight:600;
  font-style:normal;
  font-size:0.95rem;
  color:white;
  background:var(--secondo-red);
  padding:8px 20px;
  border-radius:var(--radius-md);
  border:none;
  text-decoration:none;
  transition:background-color .15s ease;
}

a.btn:hover,
a.btn:focus {
  color:white;
  background:var(--secondo-red-btn-hover);
  text-decoration:none;
}

a.btn.btn-outline:link,
a.btn.btn-outline:visited{
  color:var(--secondo-red);
  background:transparent;
  border:2px solid var(--secondo-red);
  padding:6px 18px;
}

a.btn.btn-outline:hover,
a.btn.btn-outline:focus {
  color:white;
  background:var(--secondo-red);
  border-color:var(--secondo-red);
}

/* in-page table of contents for long single-page documents
   (DSecondo/DSECONDO-Website/index.html) */
nav.page-toc{
  max-width:48rem;
  margin:20px 0 8px;
  padding:14px 18px;
  background:var(--surface-raised);
  border:1px solid var(--border-subtle);
  border-left:3px solid var(--secondo-red);
}

nav.page-toc ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  margin:0;
  padding:0;
}

nav.page-toc a{
  font-size:0.9rem;
  font-weight:600;
}


/* ------------------------------------------------------------------
   Syntax highlighting (Rouge, build-time)

   Only blocks with a real lexer are highlighted -- shell, ini, diff.
   SECONDO's own executable language has no Rouge lexer, so those blocks
   stay plain <pre>. Both must look identical apart from colour, hence
   the shared box styling below.
   ------------------------------------------------------------------ */

/* the inner <pre> picks up the shared pre rule above, so a highlighted
   block and a plain one are the same box; the figure only carries the
   vertical rhythm that <pre> would otherwise supply itself */
figure.highlight{
  margin:1em 0;
  max-width:52rem;
}

figure.highlight pre{
  margin:0;
}

/* Rouge token classes. Anything not listed inherits the body colour,
   which is the right default for identifiers. */
.highlight .c, .highlight .c1, .highlight .cm, .highlight .cp, .highlight .cs{
  color:var(--code-comment);
  font-style:italic;
}
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt{
  color:var(--code-keyword);
}
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .sc,
.highlight .sd, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx{
  color:var(--code-string);
}
.highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .mo{
  color:var(--code-number);
}
.highlight .nb, .highlight .nc, .highlight .nf, .highlight .nn, .highlight .nv, .highlight .vg{
  color:var(--code-builtin);
}
.highlight .o, .highlight .ow, .highlight .p{
  color:var(--code-operator);
}
/* SQL's lexer classes double-quoted text as a quoted identifier (.nv), but
   in SECONDO's optimizer syntax those are string literals. Scoped to sql so
   shell variables ($VAR, also .nv) keep the builtin colour. */
.language-sql .nv{
  color:var(--code-string);
}

.highlight .gd{ color:var(--code-string); }
.highlight .gi{ color:var(--code-keyword); }
.highlight .err{ color:inherit; }


/* ------------------------------------------------------------------
   Copy-to-clipboard button (assets/site.js wraps each code block)
   ------------------------------------------------------------------ */

div.code-block{
  position:relative;
  max-width:52rem;
}

button.copy-btn{
  position:absolute;
  top:6px;
  right:6px;
  padding:3px 9px;
  font-family:var(--font-ui);
  font-size:0.75rem;
  font-weight:600;
  color:var(--text-muted);
  background:var(--surface-raised);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  cursor:pointer;
  /* stays out of the way on pages with dozens of code blocks */
  opacity:0;
  transition:opacity .15s ease, color .15s ease, border-color .15s ease;
}

div.code-block:hover button.copy-btn,
div.code-block:focus-within button.copy-btn{
  opacity:1;
}

button.copy-btn:hover{
  color:var(--secondo-red);
  border-color:var(--secondo-red);
}

button.copy-btn.copied{
  opacity:1;
  color:var(--secondo-red);
  border-color:var(--secondo-red);
}

/* keyboard users must be able to see it even without hover */
button.copy-btn:focus-visible{
  opacity:1;
}


/* ------------------------------------------------------------------
   Heading anchor links (assets/site.js)
   ------------------------------------------------------------------ */

a.heading-anchor,
a.heading-anchor:link,
a.heading-anchor:visited{
  margin-left:0.4em;
  color:var(--text-faint);
  font-size:0.8em;
  font-weight:normal;
  text-decoration:none;
  opacity:0;
  transition:opacity .15s ease, color .15s ease;
}

h2:hover a.heading-anchor,
h3:hover a.heading-anchor,
a.heading-anchor:focus-visible{
  opacity:1;
}

a.heading-anchor:hover{
  color:var(--secondo-red);
  text-decoration:none;
}

ol:not(.pub-list) > li{
  margin-bottom:0.8em;
}

.guide-indent > h3{
  margin-left:1rem;
  margin-top:1.6em;
}

.guide-indent > h4{
  margin-left:2rem;
  margin-top:1.4em;
}

.guide-indent > p,
.guide-indent > ul,
.guide-indent > ol,
.guide-indent > pre,
.guide-indent > figure.highlight,
.guide-indent > div.code-block{
  margin-left:2rem;
}


/* ------------------------------------------------------------------
   Small utilities

   Each of these replaces an inline style attribute that was repeated
   across the content pages.
   ------------------------------------------------------------------ */

/* centred block, mostly diagrams and figure wrappers */
.center{
  text-align:center;
  margin:16px 0;
}

/* a small trailing aside under a section */
p.note{
  margin-top:16px;
  font-size:0.9rem;
}

/* the hero button pair on index.html */
.btn-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin:20px 0 8px;
}

/* multi-column name lists (content_team.html) */
ul.two-col,
ul.four-col{
  column-gap:2rem;
}

ul.two-col{ column-count:2; }
ul.four-col{ column-count:4; column-gap:1.5rem; }

/* postal address block (content_contact.html) */
address.contact{
  font-style:normal;
  margin:12px 0;
}

address.contact .label{
  display:block;
  margin-top:1em;
  font-weight:bold;
}

address.contact .line{
  display:block;
  padding-left:1em;
}


/* ------------------------------------------------------------------
   Responsive breakpoints

     1100px  narrow desktop / landscape tablet -- shrink the sidebar
      800px  mobile -- sidebar becomes a hamburger overlay
      640px  small phone -- multi-column grids collapse to one column
   ------------------------------------------------------------------ */

@media (max-width:1100px){
    aside.sidebar{
        width:220px;
    }

    main{
        margin-left:220px;
        padding-left:16px;
        padding-right:16px;
    }
}

@media (max-width:800px){
    .nav-toggle-btn{
        display:flex;
        align-items:center;
        justify-content:center;
        position:fixed;
        top:12px;
        left:12px;
        z-index:1000;
        width:44px;
        height:44px;
        background:var(--secondo-red);
        color:white;
        font-size:22px;
        line-height:1;
        font-family:inherit;
        border:none;
        border-radius:var(--radius-md);
        cursor:pointer;
        box-shadow:0 2px 6px rgba(0,0,0,0.3);
    }

    /* the outline is drawn on the light page background, so it needs a dark
       colour rather than the button's own red */
    .nav-toggle-btn:focus-visible{
        outline:3px solid var(--text-muted);
        outline-offset:2px;
    }

    aside.sidebar{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        max-width:320px;
        height:100vh;
        height:100dvh;
        max-height:100dvh;
        overflow-y:hidden;
        transform:translateX(-100%);
        /* visibility keeps the closed menu out of the tab order; transform alone
           moves it off-screen but leaves its links focusable */
        visibility:hidden;
        transition:transform .25s ease, visibility .25s ease;
        z-index:999;
    }

    aside.sidebar.nav-open{
        transform:translateX(0);
        visibility:visible;
        overflow-y:auto;
    }

    main{
        margin-left:0;
        padding-top:68px;
    }

    /* drop the reading-column indent on small screens */
    div.short,
    div.normal,
    div.indented,
    .guide-indent > h3,
    .guide-indent > h4,
    .guide-indent > p,
    .guide-indent > ul,
    .guide-indent > ol,
    .guide-indent > pre,
    .guide-indent > figure.highlight,
    .guide-indent > div.code-block{
        margin-left:0;
    }

    /* the card grid collapses with the sidebar rather than at its own
       breakpoint, so cards and navigation change together */
    ul.cards{ grid-template-columns:1fr; }
}

@media (max-width:800px){
    ul.four-col{ column-count:2; }
}

@media (max-width:640px){
    ul.algebra{ grid-template-columns:1fr; }

    ul.two-col,
    ul.four-col{ column-count:1; }

    ol.pub-list li{ flex-direction:column; }
    .pub-links{ flex-direction:row; flex-wrap:wrap; align-items:flex-start; text-align:left; }
}


@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}