/* readyset.css - base styles for the ReadySET templates.

   Originally derived from tigris.css (2004). Modernised for Fili.ReadyTemplate, the continuation of ReadySET: HTML5
   pages, CSS custom properties, a responsive single-column layout, and a dark colour scheme
   that follows the operating system. Every class name from ReadySET 0.9.3 is still honoured,
   so documents filled in from the old templates keep working with this file.

   Do not customise this file. Fonts, colours and the show/hide toggles belong in inst.css,
   which is loaded after this one and overrides it. */


/* ------------------------------------------------------------------ design tokens */

:root {
  color-scheme: light dark;

  --rs-font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
  --rs-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --rs-measure: 68rem;

  --rs-bg: #ffffff;
  --rs-fg: #1b1f24;
  --rs-muted: #5f6368;
  --rs-rule: #d0d3d8;
  --rs-link: #0b57d0;
  --rs-link-visited: #6b3fa0;

  --rs-heading-bg: #e8eaed;
  --rs-heading-bar: #5f6368;

  --rs-th-bg: #e8eaed;
  --rs-td-bg: #f5f6f7;

  --rs-note-bg: #fff8c5;
  --rs-note-fg: #3b2e00;
  --rs-note-border: #d4a72c;

  --rs-impact-bg: #eef1f4;
  --rs-impact-border: #b6bcc4;

  --rs-sample1: #a4262c;
  --rs-sample2: #107c10;
  --rs-sample3: #0b57d0;
  --rs-sample4: #8a2be2;

  --rs-target: #d93025;

  --rs-nav-bg: #1f2328;
  --rs-nav-fg: #f6f8fa;
}

@media (prefers-color-scheme: dark) {
  :root {
    --rs-bg: #0f1115;
    --rs-fg: #e6e6e6;
    --rs-muted: #9aa0a6;
    --rs-rule: #2f343a;
    --rs-link: #8ab4f8;
    --rs-link-visited: #c58af9;

    --rs-heading-bg: #1c2026;
    --rs-heading-bar: #9aa0a6;

    --rs-th-bg: #1c2026;
    --rs-td-bg: #161a1f;

    --rs-note-bg: #2b2610;
    --rs-note-fg: #f3e9c4;
    --rs-note-border: #a68a2c;

    --rs-impact-bg: #161a1f;
    --rs-impact-border: #3a4048;

    --rs-sample1: #f28b82;
    --rs-sample2: #81c995;
    --rs-sample3: #8ab4f8;
    --rs-sample4: #c58af9;

    --rs-target: #f28b82;

    --rs-nav-bg: #000000;
    --rs-nav-fg: #e6e6e6;
  }
}


/* ------------------------------------------------------------------ page */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  max-width: var(--rs-measure);
  margin: 0 auto;
  padding: 0 1rem 3rem;
  background: var(--rs-bg);
  color: var(--rs-fg);
  font: 1rem/1.55 var(--rs-font);
}

h2 {
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 1.25rem 0 0.75rem;
}

h3, h4 {
  clear: both;
  background: var(--rs-heading-bg);
  border-left: 0.6rem solid var(--rs-heading-bar);
  border-radius: 0 4px 4px 0;
  padding: 0.3rem 0.6rem;
  margin: 1.75rem 0 0.5rem;
  font-size: 1.2rem;
  line-height: 1.3;
}

h4 {
  font-size: 1.05rem;
  border-left-width: 0.4rem;
}

p, ul, ol, dl {
  margin: 0.67em 0;
}

dt {
  font-weight: 600;
  margin-top: 0.75em;
}

dd {
  margin: 0.25em 0 0.67em 1.5rem;
}

ol ol { list-style-type: lower-alpha; }
ol ol ol { list-style-type: lower-roman; }

a { color: var(--rs-link); }
a:visited { color: var(--rs-link-visited); }
a:focus-visible { outline: 2px solid var(--rs-link); outline-offset: 2px; }

code, pre, textarea, kbd {
  font-family: var(--rs-mono);
  font-size: 0.9em;
}

pre {
  overflow-x: auto;
  padding: 0.75rem;
  background: var(--rs-td-bg);
  border-radius: 4px;
}

img {
  max-width: 100%;
  height: auto;
}

small { font-size: 0.85em; }

form { margin: 0; }

[id] { scroll-margin-top: 3.5rem; }


/* ------------------------------------------------------------------ site navigation bar
   Added by the mirror so every page can get back to the template index. It is not part of
   the template proper: delete the <nav class="sitenav"> element when you copy a template. */

.sitenav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  margin: 0 -1rem 1rem;
  padding: 0.5rem 1rem;
  background: var(--rs-nav-bg);
  color: var(--rs-nav-fg);
  font-size: 0.875rem;
}

.sitenav a {
  color: inherit;
  text-decoration: none;
  padding: 0.25rem 0;
}

.sitenav a:hover,
.sitenav a:focus-visible {
  text-decoration: underline;
  outline-color: currentColor;
}

.sitenav .brand {
  font-weight: 700;
  margin-right: auto;
}

.sitenav .brand small {
  font-weight: 400;
  opacity: 0.75;
  margin-left: 0.4em;
}


/* ------------------------------------------------------------------ tables */

table {
  border-collapse: collapse;
  border-spacing: 0;
  max-width: 100%;
  margin: 0.5rem 0;
  font-size: 0.95rem;
}

td, th {
  padding: 0.35rem 0.6rem;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--rs-rule);
}

th {
  background: var(--rs-th-bg);
  font-weight: 600;
}

.readyset td {
  background: var(--rs-td-bg);
}

/* "axial" tables have their headers down the left-hand side */
.readyset .axial th,
.readyset .axial td {
  border: 0;
  border-bottom: 1px solid var(--rs-rule);
}

.readyset .axial th {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}

.readyset .axial td {
  background: transparent;
}

tr ul, tr ol, tr p { margin-top: 0; }
tr ul { padding-left: 1.25em; }

.right  { text-align: right !important; }
.center { text-align: center !important; }

/* letter tabs at the top of the glossaries */
.tabs {
  border-bottom: 3px solid var(--rs-rule);
  margin: 0.67em 0;
}

.tabs th, .tabs td {
  border: 0;
  padding: 0.2rem 0.6rem;
  font-weight: 600;
  background: transparent;
}

.tabs a { text-decoration: none; }


/* ------------------------------------------------------------------ instruction boxes */

.sticky, .tip, .todo {
  background: var(--rs-note-bg);
  color: var(--rs-note-fg);
  border: 1px solid var(--rs-note-border);
  border-left-width: 4px;
  border-radius: 4px;
  padding: 0.6rem 0.8rem;
  margin: 0.75rem 0;
}

.sticky a, .tip a, .todo a { color: inherit; }

/* the quick-links box floated beside the project overview on the home page */
.quicklinks {
  float: right;
  margin: 0 0 1rem 1.5rem;
  padding: 0.75rem 1rem;
}

.quicklinks a { display: block; }

.tip, .todo {
  padding-left: 3rem;
  min-height: 2rem;
  background-repeat: no-repeat;
  background-position: 0.6rem 0.55rem;
  background-size: 1.75rem;
}

.tip  { background-image: url(tip.png); }
.todo { background-image: url(todo.png); }

#processimpact {
  background: var(--rs-impact-bg) url(gears.png) no-repeat 0.6rem 0.55rem / 1.75rem;
  border: 1px solid var(--rs-impact-border);
  border-radius: 4px;
  padding: 0.6rem 0.8rem 0.6rem 3rem;
  margin: 0.75rem 0;
}

.reusablefragment {
  padding: 0.5rem;
  margin: 3rem 0;
  background: var(--rs-td-bg);
  border: 2px dashed var(--rs-rule);
}


/* ------------------------------------------------------------------ sample text
   Example content that you are meant to replace carries a coloured double rule on the right.
   The four colours distinguish alternative samples for the same slot. */

.sample1, .sample2, .sample3, .sample4 {
  border-right: 4px double;
  padding-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.sample1 { border-right-color: var(--rs-sample1); }
.sample2 { border-right-color: var(--rs-sample2); }
.sample3 { border-right-color: var(--rs-sample3); }
.sample4 { border-right-color: var(--rs-sample4); }


/* ------------------------------------------------------------------ misc template classes */

.linklist a { display: block; }
.sub { padding-left: 1em; }

.tier1 { margin-left: 0; }
.tier2 { margin-left: 1.5em; }
.tier3 { margin-left: 3em; }
.tier4 { margin-left: 4.5em; }

.level1 { padding-left: 0; }
.level2 { padding-left: 1em; }
.level3 { padding-left: 2em; }
.level4 { padding-left: 3em; }

.alt { display: none; }

a.def {
  text-decoration: none;
  border-bottom: 1px dashed var(--rs-link);
  cursor: help;
}

:target {
  outline: 2px solid var(--rs-target);
  outline-offset: 2px;
}

.legal1 {
  display: none;
  margin: 2rem 0 0;
  padding: 0.5rem;
  border: 2px solid var(--rs-rule);
  text-align: center !important;
  font-size: 2rem;
  font-weight: 700;
}

.footnote {
  margin-top: 3rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rs-rule);
  font-size: 0.8rem;
  color: var(--rs-muted);
}


/* ------------------------------------------------------------------ browse page */

.browse details {
  margin: 0.75rem 0;
  background: var(--rs-td-bg);
  border: 1px solid var(--rs-rule);
  border-radius: 6px;
}

.browse summary {
  cursor: pointer;
  padding: 0.6rem 0.9rem;
  font-weight: 600;
}

.browse details > * + * {
  margin-left: 0.9rem;
  margin-right: 0.9rem;
}

.browse details > :last-child {
  padding-bottom: 0.75rem;
}

.browse .group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.25rem 1.5rem;
  padding-left: 0;
  list-style: none;
}

.browse .group > li {
  margin: 0.5rem 0;
}

.browse .group ul {
  margin: 0.15rem 0 0;
  padding-left: 1.25rem;
}

.browse .group ul ul {
  list-style-type: circle;
}


/* ------------------------------------------------------------------ small screens */

@media (max-width: 40rem) {
  body { font-size: 0.95rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.1rem; }

  table {
    display: block;
    overflow-x: auto;
  }

  .readyset .axial th {
    white-space: normal;
    width: auto;
  }

  .quicklinks {
    float: none;
    margin: 0.75rem 0;
  }

  dd { margin-left: 1rem; }
}