/* The layout of the site. The colors are custom properties set by the theme
   (ai_pycal/theme.py): the pycal blue and yellow by default, changed with the
   COLOR_... settings (docs/how-to/brand.rst). EXTRA_CSS_URL can add more. */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
  background: var(--surface);
  color: var(--text);
}
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
h1, h2, h3 { line-height: 1.2; }
.wrap { max-width: 64rem; margin: 0 auto; padding: 0 1rem; }
.muted { color: var(--text-muted); }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: .5rem; background: var(--surface); padding: .5rem; z-index: 10; }

.nav { background: var(--nav); color: var(--nav-text); border-bottom: .3rem solid var(--accent); }
.nav-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .6rem; padding-bottom: .6rem; }
.nav a, .nav .link-button { color: var(--nav-text); text-decoration: none; }
.nav a:hover, .nav .link-button:hover { text-decoration: underline; color: var(--nav-text); }
.brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.15rem; }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; list-style: none; margin: 0; padding: 0; }
.menu form { margin: 0; }
.handle { opacity: .85; }
.link-button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

main.wrap { padding-top: 1.5rem; padding-bottom: 2rem; min-height: 60vh; }
.footer { border-top: 1px solid var(--border); background: var(--surface-tint); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding-top: 1rem; padding-bottom: 1rem; }
.table-wrap { overflow-x: auto; }
.footer small a { color: inherit; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; margin: 0; padding: 0; }
/* The menu of the colors, like the switch of the documentation: a dropdown with icons, without JavaScript. */
.icon { display: inline-block; vertical-align: -.2em; flex: none; }
.theme-menu { position: relative; }
/* The menu of the account in the top bar, without JavaScript. */
.account-menu { position: relative; }
.account-menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .4rem; padding: .3rem .6rem; border: 1px solid color-mix(in srgb, var(--nav-text) 50%, transparent); border-radius: .4rem; color: var(--nav-text); }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary::after { content: "▾"; font-size: .8em; }
.account-menu summary:hover, .account-menu[open] summary { background: color-mix(in srgb, var(--nav-text) 18%, transparent); }
.account-menu ul { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 20; min-width: 13rem; list-style: none; margin: 0; padding: .3rem; background: var(--surface); border: 1px solid var(--border); border-radius: .5rem; box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .2); }
.nav .account-menu ul a, .account-menu ul button { display: flex; align-items: center; gap: .4rem; width: 100%; box-sizing: border-box; padding: .45rem .6rem; border: 0; border-radius: .3rem; background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.nav .account-menu ul a:hover, .account-menu ul button:hover { background: var(--surface-tint); text-decoration: none; color: var(--text); }
.account-menu form { margin: 0; }
.account-menu .menu-heading { padding: .2rem .6rem; color: var(--text-muted); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
/* the heading links to the Django admin for staff: it keeps the look of a heading */
.nav .account-menu ul .menu-heading a { display: inline; width: auto; padding: 0; border-radius: 0; color: inherit; font: inherit; text-decoration: none; }
.nav .account-menu ul .menu-heading a:hover { background: none; color: var(--text); text-decoration: underline; }
.account-menu .separator { height: 1px; margin: .3rem .2rem; background: var(--border); }
.count { display: inline-block; min-width: 1.3em; padding: 0 .35em; border-radius: 1em; background: var(--accent); color: var(--accent-text); font-size: .8em; font-weight: 700; text-align: center; }
/* Links to the documentation next to things: a question mark in a circle, in a new tab. */
.help-link { display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; margin-left: .25em; border: 1.5px solid currentColor; border-radius: 50%; color: var(--primary); font-size: .85em; font-weight: 700; line-height: 1; text-decoration: none; vertical-align: .1em; }
.help-link:hover, .help-link:focus-visible { background: var(--primary); color: var(--surface); text-decoration: none; }
/* The logs: triggers that open to their actions; triggers without actions are gray. */
.log { list-style: none; padding: 0; margin: 0; }
.log-trigger { display: flex; align-items: flex-start; gap: .5rem; border-bottom: 1px solid var(--border); padding: .5rem 0; }
.log-trigger > details, .log-trigger > .log-row { flex: 1; min-width: 0; }
.log-trigger summary { cursor: pointer; font-weight: 400; }
.log-summary { font-weight: 600; }
.log-empty { color: var(--text-muted); }
.log-empty .log-summary { font-weight: 400; }
.log-actions { margin: .4rem 0 .2rem 1.2rem; padding: 0; }
.log-actions li { margin: .2rem 0; overflow-wrap: anywhere; }
.log-global { text-decoration: none; color: var(--text-muted); padding: 0 .3rem; }
.log-global:hover { color: var(--primary); }
/* Links to GitHub: the mark of GitHub, alone where it is clear what it links to. */
/* The path of a page in the site: owner / repository / agreement, with a menu of the others. */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin: 0 0 1rem; }
.crumbs-path { margin: 0; overflow-wrap: anywhere; }
/* the path stays, the dropdown changes the part after it: owner / repo / [▾] name */
.crumbs-start { font-size: 2em; line-height: 1.2; overflow-wrap: anywhere; }
.crumbs-start a { text-decoration: none; color: var(--primary); }
.crumbs-start a:hover { text-decoration: underline; }
.crumbs-current { margin: 0; overflow-wrap: anywhere; }
.crumbs-current a { color: var(--text); text-decoration: none; }
.crumb-menu li a { white-space: nowrap; }
.crumbs-path a { text-decoration: none; }
.crumbs-path a:hover { text-decoration: underline; }
.crumbs-path a:last-child { color: var(--text); }
h1.crumbs-path a:not(:last-child), h2.crumbs-path a:not(:last-child) { font-weight: 400; color: var(--primary); }
.crumbs-sep { color: var(--text-muted); font-weight: 400; margin: 0 .2em; }
.crumb-menu { position: relative; }
.crumb-menu summary { list-style: none; cursor: pointer; padding: .1rem .5rem; border: 1px solid var(--border); border-radius: .4rem; color: var(--primary); }
.crumb-menu summary::-webkit-details-marker { display: none; }
.crumb-menu ul { position: absolute; z-index: 20; left: 0; top: calc(100% + .3rem); min-width: 16rem; list-style: none; margin: 0; padding: .3rem; background: var(--surface); border: 1px solid var(--border); border-radius: .5rem; box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .2); }
.crumb-menu li a { display: block; padding: .4rem .6rem; border-radius: .3rem; }
.crumb-menu li a:hover { background: var(--surface-tint); }
.projects { list-style: none; padding: 0; margin: 0; }
.owners { list-style: none; padding: 0; margin: 0; }
.owner { margin: 0 0 .8rem; }
.owner > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; padding: .5rem 0; cursor: pointer; font-size: 1.15rem; }
.owner-name { font-weight: 700; }
.owner-name a { text-decoration: none; }
.owner > .projects { margin-left: 1.25rem; }
.project { border: 1px solid var(--border); border-radius: .5rem; margin: 0 0 .6rem; background: var(--surface); }
.project summary { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; padding: .7rem 1rem; cursor: pointer; font-weight: 400; }
.project[open] summary { border-bottom: 1px solid var(--border); }
.project-name { font-weight: 700; overflow-wrap: anywhere; }
.project-name a { text-decoration: none; }
.project > ul, .project > p { margin: .6rem 1rem .8rem; }
/* Tabs without JavaScript: radio buttons before the panels, shown with :checked. */
.tabs { display: flex; flex-wrap: wrap; gap: 0 .25rem; }
.tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.tabs > label { order: 0; padding: .5rem 1rem; border: 1px solid var(--border); border-bottom: 0; border-radius: .5rem .5rem 0 0; background: var(--surface-tint); color: var(--primary); cursor: pointer; font-weight: 600; }
.tabs > input:checked + label { background: var(--surface); color: var(--text); }
.tabs > input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.tabs > .card { order: 1; flex: 1 1 100%; border-top-left-radius: 0; }
.tabs > .tab-changes { display: none; }
#view-changes:checked ~ .tab-changes { display: block; }
#view-changes:checked ~ .tab-agreement { display: none; }
.version { font-size: .95rem; }
/* The state of an agreement for me: signed (green), missing (red), optional and unsigned (yellow). */
.state-signed, .card.state-signed { background: var(--signed-bg); border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.state-missing, .card.state-missing { background: var(--missing-bg); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.state-optional, .card.state-optional { background: var(--optional-bg); border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); }
.state-merged, .card.state-merged { background: var(--merged-bg); border-color: color-mix(in srgb, var(--merged) 45%, var(--border)); }
.pull-badge-signed { color: var(--success); }
.pull-badge-missing, .pull-badge-closed { color: var(--danger); }
.pull-badge-optional { color: var(--warning); }
.pull-badge-merged { color: var(--merged); }
.pulls { list-style: none; padding: 0; }
li.state-signed, li.state-missing, li.state-optional, li.state-merged { border: 1px solid; border-radius: .4rem; padding: .45rem .7rem; margin: .4rem 0; list-style: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pull-menu .menu-panel { position: absolute; z-index: 20; left: 0; top: calc(100% + .3rem); min-width: 20rem; max-width: 90vw; padding: .5rem; background: var(--surface); border: 1px solid var(--border); border-radius: .5rem; box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .2); }
.pull-menu .menu-panel ul { position: static; box-shadow: none; border: 0; padding: .3rem 0 0; min-width: 0; }
.menu-filter { display: flex; gap: .4rem; }
.menu-filter input { flex: 1; min-width: 0; }
.crumb-menu a[aria-current="page"] { font-weight: 700; }
.card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.card-title h3 { margin: 0; }
.card-title + p, .card-title + * { margin-top: .4rem; }
.log-link { color: var(--text-muted); display: inline-flex; padding: .2rem; border-radius: .3rem; }
.log-link:hover { color: var(--primary); background: var(--surface-tint); }
.label-link { text-decoration: none; }
.status-badge { text-decoration: none; }
.facts-list { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; }
.facts-list dt { color: var(--text-muted); font-weight: 600; }
.facts-list dd { margin: 0; }
.valid-check { color: var(--success); font-weight: 700; }
.card-title .tech-menu dl { left: auto; right: 0; }
.tech-menu { position: relative; }
.tech-menu summary { list-style: none; cursor: pointer; display: flex; padding: .25rem; border-radius: .3rem; color: var(--text-muted); }
.tech-menu summary::-webkit-details-marker { display: none; }
.tech-menu summary:hover, .tech-menu[open] summary { color: var(--primary); background: var(--surface-tint); }
.tech-menu dl { position: absolute; left: 0; top: calc(100% + .3rem); z-index: 20; width: max-content; max-width: min(90vw, 40rem); margin: 0; padding: .6rem .8rem; background: var(--surface); border: 1px solid var(--border); border-radius: .5rem; box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .2); display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; font-size: .9rem; }
.tech-menu dt { color: var(--text-muted); font-weight: 600; }
.tech-menu dd { margin: 0; overflow-wrap: anywhere; }
.agreement-details { border-top: 1px solid var(--border); margin-top: 2rem; padding-top: .75rem; font-size: .9rem; }
.github-link { display: inline-flex; align-items: center; gap: .35em; }
.github-link .github-mark { width: 1em; height: 1em; }
.github-link-icon { color: var(--text-muted); text-decoration: none; padding: .1em; border-radius: .25em; vertical-align: middle; }
.github-link-icon:hover, .github-link-icon:focus-visible { color: var(--primary); background: var(--surface-tint); }
h1 .github-link-icon .github-mark { width: .75em; height: .75em; }
.theme-menu summary { list-style: none; display: flex; align-items: center; padding: .3rem .45rem; border: 1px solid color-mix(in srgb, var(--nav-text) 50%, transparent); border-radius: .4rem; color: var(--nav-text); font-weight: 400; }
.theme-menu summary::-webkit-details-marker { display: none; }
.theme-menu summary:hover, .theme-menu[open] summary { background: color-mix(in srgb, var(--nav-text) 18%, transparent); }
.theme-menu summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-menu form { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 20; display: flex; flex-direction: column; min-width: 11rem; padding: .3rem; background: var(--surface); border: 1px solid var(--border); border-radius: .5rem; box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .2); }
.theme-menu button { display: flex; align-items: center; gap: .55rem; width: 100%; white-space: nowrap; padding: .45rem .6rem; border: 0; border-radius: .3rem; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.theme-menu button:hover, .theme-menu button:focus-visible { background: var(--surface-tint); }
.theme-menu button[aria-pressed="true"] { color: var(--primary); font-weight: 700; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: .5rem; padding: 1rem 1.25rem; margin: 0 0 1rem; }
.card.narrow { max-width: 32rem; margin: 2rem auto; }
.card h2:first-child, .card h1:first-child { margin-top: 0; }
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.hero { border-left: .4rem solid var(--accent); background: var(--surface-tint); padding: 1.25rem 1.5rem; border-radius: .5rem; margin-bottom: 1.5rem; }
.hero .lead { font-size: 1.15rem; }
.stats { color: var(--text-muted); margin-bottom: 0; }

.button {
  display: inline-block; padding: .5rem 1rem; border-radius: .4rem; border: 1px solid var(--primary);
  background: var(--primary); color: var(--surface); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.button:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--surface); }
.nav .button-accent, .button-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.nav .button-accent:hover { color: var(--accent-text); text-decoration: none; filter: brightness(.95); }
.button-small { padding: .2rem .6rem; font-size: .9rem; }
.button-quiet { background: transparent; color: var(--primary); }
.button-quiet:hover { color: var(--surface); }
form.inline { display: inline; }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
input[type="email"], input:not([type]) { font: inherit; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: .3rem; background: var(--surface); color: var(--text); }

.messages { margin-bottom: 1rem; }
.message { border-left: .3rem solid var(--primary); background: var(--surface-tint); padding: .6rem .9rem; border-radius: .3rem; }
.message-success { border-color: var(--success); }
.message-warning { border-color: var(--warning); }
.message-error { border-color: var(--danger); }
.error h1 { color: var(--danger); }

/* The pages of errors: the status large in the blue of the logo, underlined in its yellow. */
.status-page { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem 2.5rem; max-width: 52rem; margin: 2rem auto; padding: 1.5rem 1.75rem; background: var(--surface-tint); border-left: .4rem solid var(--accent); border-radius: .5rem; }
.status-page.error { border-left-color: var(--danger); }
.status-code { margin: 0; font-size: clamp(3.5rem, 12vw, 6rem); font-weight: 800; line-height: 1; color: var(--brand); letter-spacing: -.03em; border-bottom: .35rem solid var(--accent); }
.status-page.error .status-code { border-bottom-color: var(--danger); }
.status-text { flex: 1 1 20rem; min-width: 0; }
.status-text h1 { margin-top: 0; }
.status-text .lead { font-size: 1.1rem; }
.status-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.copy-details { margin: 1rem 0; }
.copy-details label { display: block; margin: .4rem 0; font-size: .9rem; }
textarea.copy { width: 100%; box-sizing: border-box; font: .85rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: .3rem; padding: .5rem; resize: vertical; }
form.stacked label { display: block; font-weight: 600; margin-bottom: .2rem; }
form.stacked input:not([type="hidden"]) { width: 100%; max-width: 26rem; box-sizing: border-box; }
form.stacked small { display: block; color: var(--text-muted); margin-top: .2rem; }
.status-help { color: var(--text-muted); font-size: .95rem; margin-bottom: 0; }
.detail code { white-space: pre-wrap; word-break: break-word; }

.badge { display: inline-block; font-size: .8rem; font-weight: 600; padding: .05rem .5rem; border-radius: 1rem; border: 1px solid currentColor; }
.badge-success { color: var(--success); }
.badge-warning { color: var(--warning); }
.badge-error { color: var(--danger); }
.badge.muted { color: var(--text-muted); }  /* optional: gray */
.badge-strong { color: var(--text); }  /* mandatory: black on light backgrounds */
.badges { display: inline-flex; flex-wrap: wrap; gap: .3rem; vertical-align: middle; font-weight: 400; }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.list { padding-left: 1.2rem; }
.list.to-sign { padding-left: 0; }
.facts th { width: 8rem; white-space: nowrap; color: var(--text-muted); font-weight: 600; }
.list li { margin: .3rem 0; }
.steps li { margin: .4rem 0; }
/* a numbered list that is a card: room for the numbers inside its border */
ol.card, ul.card { padding-left: 2.75rem; }

.agreement { overflow-wrap: anywhere; }
.agreement-text { white-space: pre-wrap; }
.diff { white-space: pre-wrap; background: var(--surface-tint); padding: .75rem; border-radius: .3rem; overflow-x: auto; }
.diff span { display: block; }
.diff-added { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
.diff-removed { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); text-decoration: line-through; }
.diff-skip { color: var(--text-muted); }

@media (max-width: 40rem) {
  .table, .table tbody, .table tr, .table td { display: block; }
  .table thead { display: none; }
}

/* Policy pages keep long Markdown readable and choices usable without scripts. */
details { margin: .75rem 0; }
summary { cursor: pointer; font-weight: 600; }
input[type="radio"], input[type="checkbox"] { margin-right: .35rem; }
select { font: inherit; padding: .4rem; max-width: 100%; }

/* The menu of the languages, next to the colors: each language in its own name. */
.language-menu summary { gap: .3rem; }
.language-menu .language-code { font-size: .75rem; font-weight: 700; letter-spacing: .03em; }