/* WEKA theme (the 2025 identity): Onest headings, IBM Plex Sans body, IBM Plex Mono code, the purple accent.
   Mobile first. No external assets: the fonts are served from /fonts (see fonts/FONTS.md). */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-heading: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --bg: #f8f8f5;
  --surface: #ffffff;
  --text: #171c21;
  --muted: #64686b;
  --line: #d1d2d3;
  --accent: #7c03ec;
  --accent-text: #ffffff;
  --accent-soft: #f4ecfc;
  --code-bg: #f2f2eb;
  --error-bg: #ffe7e1;
  --error-text: #8a1c14;
  --info-bg: #f4ecfc;
  --info-text: #430a53;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0e11;
    --surface: #13171c;
    --text: #fcfcfb;
    --muted: #b2b3b5;
    --line: #3e4246;
    --accent: #c79ff1;
    --accent-text: #171c21;
    --accent-soft: #280632;
    --code-bg: #171c21;
    --error-bg: #3a1a18;
    --error-text: #ffb4ab;
    --info-bg: #280632;
    --info-text: #edb4fd;
  }
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { font-size: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.55 var(--font-body);
}

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

.page-header, main, .page-footer {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1rem;
}
/* the guide view is wider than the sign-in and access views: its screenshots show at full width and its tables fit */
body.view-guide .page-header, body.view-guide main, body.view-guide .page-footer { max-width: 72rem; }

/* the header: the wordmark (its letters take the header's text colour), a divider, the page title as a sub-brand */
.page-header {
  padding-top: 1.25rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
.brand-bar { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.wordmark { display: block; flex: none; height: 26px; width: calc(26px * 739 / 153); }
.brand-bar h1 { font-size: 1.125rem; line-height: 1.3; margin: 0; padding-left: 0.75rem; border-left: 1px solid var(--line); min-width: 0; }
.page-footer { padding-top: 1rem; padding-bottom: 2rem; }
.page-footer > p:first-child { margin: 0 0 0.5rem; }

h1, h2, h3, .heading {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.01em;
}
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 0.5rem; }
h2 { font-size: 1.25rem; line-height: 1.3; margin: 1.25rem 0 0.75rem; }
h3 { font-size: 1.05rem; margin: 1rem 0 0.5rem; }
h2:focus, main:focus { outline: none; }

code, kbd, pre, samp {
  font-family: var(--font-mono);
}
/* the sizes the browser's monospace default gave (13px blocks): the guide's code blocks stay readable at phone width */
pre { font-size: 0.8125rem; }
code, kbd, samp { font-size: 0.875em; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a.button:hover { text-decoration: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

section { background: var(--surface); border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.5rem 1rem 1rem; }

label { display: block; font-weight: 600; margin: 0.75rem 0 0.25rem; }

input[type="email"], input[type="text"] {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 0.375rem;
}

#code { letter-spacing: 0.3em; font-size: 1.25rem; max-width: 12rem; }

button, .button {
  display: inline-block;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.375rem;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
button.primary, a.button.primary { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }
button.small { min-height: 2.25rem; padding: 0.25rem 0.75rem; font-weight: 500; }
button:disabled { opacity: 0.6; cursor: default; }
/* a <label class="button"> over a visually hidden file input (Upload a file): the button's look, its focus ring and its disabled look */
label.button { position: relative; margin: 0; font-weight: 600; }
label.button:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
label.button:has(input:disabled) { opacity: 0.6; cursor: default; }
label.button:not(:has(input:disabled)):hover { background: var(--accent-soft); }
/* secondary controls tint on hover; the primary button and the selected tab keep their accent */
button:not(.primary):not([aria-selected="true"]):hover:not(:disabled), a.button:not(.primary):hover {
  background: var(--accent-soft);
}

form button { margin-top: 0.75rem; }

/* the two live regions stay rendered (so screen readers announce changes); empty ones take no room */
#notice, #notice-error { margin: 1rem 0; padding: 0.75rem 1rem; border-radius: 0.375rem; }
#notice:empty, #notice-error:empty { margin: 0; padding: 0; }
#notice-error { background: var(--error-bg); color: var(--error-text); }
#notice { background: var(--info-bg); color: var(--info-text); }
/* the Environments tab's countdown to the first build, styled as an info notice */
#e-countdown { margin: 1rem 0; padding: 0.75rem 1rem; border-radius: 0.375rem; background: var(--info-bg); color: var(--info-text); font-weight: 600; }

.who { color: var(--muted); }

.cards { margin: 0; display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
.card { border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.75rem; min-width: 0; }
.card dt { color: var(--muted); font-size: 0.9rem; }
.card dd { margin: 0.25rem 0 0; }
.card dd.hint { color: var(--muted); font-size: 0.85rem; }
.card code, .guide code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  background: var(--code-bg);
  border-radius: 0.25rem;
  padding: 0.1rem 0.3rem;
  overflow-wrap: anywhere;
}

/* an attendee's sign-in code on the admin page, large enough to read out */
.card code.big { font-size: 1.5rem; letter-spacing: 0.2em; }

/* the login card: one block of commands per operating system, a code line and its Copy button side by side (the button
   drops under the line at phone width); a long command wraps inside its own box */
.os-block { margin: 0.5rem 0 0; }
.os-title { margin: 0 0 0.25rem; font-weight: 600; }
.cmd { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.25rem 0; }
.cmd code { flex: 1 1 16rem; min-width: 0; display: block; padding: 0.5rem 0.6rem; }
#os-other { margin-top: 0.75rem; }
#os-other summary { cursor: pointer; color: var(--accent); }
#os-other[open] summary { margin-bottom: 0.25rem; }


.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }

/* the guide's contents: one link per section */
nav ol { list-style: none; margin: 0; padding: 0; }
nav li { padding: 0.4rem 0; border-bottom: 1px solid var(--line); }

.guide { margin-top: 1rem; overflow-wrap: anywhere; }
/* links inside the guide's running text stay underlined: colour alone would not set them apart from the text */
.guide a { text-decoration: underline; }
/* the key download in the guide is the access page's button, without the running-text underline */
.guide a.button { text-decoration: none; }
.guide h2 { border-top: 1px solid var(--line); padding-top: 1rem; }
.guide pre {
  background: var(--code-bg);
  border-radius: 0.375rem;
  padding: 0.75rem 5.5rem 0.75rem 0.75rem;     /* room on the right for the Copy button, reading "Copied" */
  overflow-x: auto;
  margin: 0;
}
.guide pre code { background: none; padding: 0; overflow-wrap: normal; }
/* the wrapper, not the scrolling pre, positions the Copy button, so it stays put while long lines scroll */
.guide .code-wrap { position: relative; margin: 1em 0; }         /* the margin the pre used to carry */
/* shown without hover (phones have none); same look as .small buttons */
.guide .code-wrap .copy-code { position: absolute; top: 0.375rem; right: 0.375rem; margin: 0; min-width: 5rem; user-select: none; }
.guide table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.guide th, .guide td { border: 1px solid var(--line); padding: 0.25rem 0.5rem; }
.guide img { max-width: 100%; height: auto; }
/* a screenshot: ![caption](images/<name>) becomes a figure; the caption sits under it, a click opens the lightbox */
.guide figure { margin: 1em 0; }
.guide img.shot { display: block; border: 1px solid var(--line); border-radius: 0.5rem; cursor: zoom-in; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.guide figcaption { margin-top: 0.375rem; font-size: 0.9rem; color: var(--muted); }
/* a callout: the guide writes "> **In the WEKA UI** ..." for the steps that happen in the browser rather than the terminal */
.guide blockquote { margin: 1em 0; padding: 0.75rem 1rem; border-left: 4px solid var(--accent); background: var(--code-bg); border-radius: 0 0.375rem 0.375rem 0; }
.guide blockquote > :first-child { margin-top: 0; }
.guide blockquote > :last-child { margin-bottom: 0; }
/* the lightbox: the page's own dialog, full size image, Close button and the caption */
/* the lightbox fills the window; the image fits it, and a click on the image toggles its actual size (scroll to pan) */
.lightbox { width: 96vw; max-width: none; height: 94vh; max-height: none; box-sizing: border-box; border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.75rem; overflow: auto; }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.6); }
.lightbox form { display: flex; justify-content: flex-end; margin: 0 0 0.5rem; }
.lightbox img { display: block; max-width: 100%; max-height: calc(94vh - 6rem); height: auto; margin: 0 auto; cursor: zoom-in; }
.lightbox img.actual { max-width: none; max-height: none; cursor: zoom-out; }
.lightbox p { margin: 0.5rem 0 0; text-align: center; }

/* admin page (admin.html): tables, tabs, forms and the confirmation dialog */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.admin main, .admin .page-header, .admin .page-footer { max-width: 76rem; }
.admin-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.admin-who { margin: 0; color: var(--muted); }
.admin-who button { margin-left: 0.5rem; }

.muted { color: var(--muted); }
.small-text { font-size: 0.85rem; }
/* the help line under an admin field: its purpose and default; wraps at any width, a long word included */
small.hint { display: block; margin: 0.25rem 0 0; color: var(--muted); font-size: 0.85rem; line-height: 1.35; overflow-wrap: anywhere; }
.toolbar + small.hint { margin-top: -0.5rem; }
fieldset.field-group small.hint { margin: 0.125rem 0 0.25rem; }
.flag { color: var(--error-text); font-weight: 600; }
.tag { margin-left: 0.5rem; padding: 0.05rem 0.4rem; border-radius: 0.25rem; background: var(--error-bg); }

.banner { margin: 1rem 0; padding: 0.75rem 1rem; border-radius: 0.375rem; background: var(--error-bg); color: var(--error-text); border: 1px solid var(--error-text); }

.admin input[type="number"], .admin input[type="datetime-local"], .admin input[type="password"], .admin textarea, .admin select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 0.375rem;
}
/* a locked field (the Settings tab until Modify): greyed on the panel colour, still readable */
.admin input:disabled, .admin select:disabled { color: var(--muted); -webkit-text-fill-color: var(--muted); background: var(--surface); opacity: 1; cursor: default; }
.admin textarea { font-family: var(--font-mono); font-size: 0.95em; }
.admin .toolbar select, .admin .row-actions select { width: auto; min-height: 2.25rem; padding: 0.25rem 0.5rem; }
.admin input[type="checkbox"] { width: 1.25rem; height: 1.25rem; vertical-align: middle; }
.check { margin: 0.75rem 0 0; }
label.inline { display: inline; font-weight: 400; margin: 0; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.75rem 0; }
.toolbar label { margin: 0; }
.toolbar h3 { margin: 0; }
.toolbar input[type="text"] { width: auto; flex: 1 1 14rem; min-height: 2.25rem; }
.admin .toolbar input[type="datetime-local"] { width: auto; flex: 0 1 14rem; min-width: 0; min-height: 2.25rem; }

/* the page's one time-zone selector, above the notices on every signed-in view */
.tz-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin: 0.75rem 0 0; }
.tz-bar[hidden] { display: none; }
.tz-bar label { margin: 0; }
.admin .tz-bar select { width: auto; max-width: 100%; min-height: 2.25rem; padding: 0.25rem 0.5rem; }
.tz-bar small.hint { flex: 1 1 100%; margin: 0; }

.tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--line); margin: 1rem 0; }
.tabs [role="tab"] { border-bottom-width: 0; border-radius: 0.375rem 0.375rem 0 0; font-weight: 500; }
.tabs [role="tab"][aria-selected="true"] { color: var(--accent-text); background: var(--accent); border-color: var(--accent); font-weight: 600; }
[role="tabpanel"]:focus { outline: none; }

.subpanel { border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.25rem 1rem 1rem; margin: 1rem 0; }
.subpanel h3 { margin-top: 0.75rem; }
.fields { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }

.table-wrap { overflow-x: auto; margin: 0.5rem 0 1rem; border: 1px solid var(--line); border-radius: 0.375rem; }
.admin table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.admin th, .admin td { text-align: left; vertical-align: top; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); }
.admin th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.admin tbody tr:last-child td { border-bottom: 0; }
.admin tbody tr:hover td { background: var(--accent-soft); }
.admin td.wrap { overflow-wrap: anywhere; min-width: 12rem; }
.row-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.row-actions .assign-group { display: inline-flex; gap: 0.4rem; align-items: center; flex: none; }   /* picker and Assign stay side by side */

button.danger { color: var(--error-text); border-color: var(--error-text); }

/* the events list: an archived row (shown while Show archived is ticked) is greyed, its link too; the box beside Refresh */
.admin tbody tr.archived td, .admin tbody tr.archived td a { color: var(--muted); }
.check-inline { display: inline-flex; align-items: center; gap: 0.4rem; }

pre#log-view {
  margin: 0.75rem 0 0;
  padding: 0.75rem;
  max-height: 24rem;
  overflow: auto;
  background: var(--code-bg);
  border-radius: 0.375rem;
  font-size: 0.85rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* header links, the workshops list, the editor and the generic form dialog */
.admin-nav { display: flex; gap: 1rem; }
.admin-nav a[aria-current="page"] { color: var(--text); font-weight: 700; text-decoration: none; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { padding: 0.2rem 0; }
.ws-card h3 { margin-top: 0.75rem; }
.ws-card-head { justify-content: space-between; }
.ws-card .table-wrap { margin-bottom: 0.5rem; }
.editor { display: grid; gap: 0 1.5rem; grid-template-columns: minmax(0, 1fr); }
.editor-pane, .editor-side { min-width: 0; }
.admin textarea#ed-guide { min-height: 20rem; resize: vertical; }
#ed-preview { padding: 0.25rem 1rem 1rem; max-height: 75vh; overflow: auto; border: 1px solid var(--line); border-radius: 0.375rem; }
#ed-preview h2:first-child { border-top: 0; padding-top: 0; }
#ed-result ul, #ed-unknown ul { margin: 0.25rem 0 0.75rem; padding-left: 1.25rem; }
#ed-result p, #ed-unknown p { margin: 0.5rem 0 0; }
.ph-unknown { color: var(--error-text); font-weight: 600; }
fieldset.field-group { margin: 0.75rem 0 0; padding: 0; border: 0; }
fieldset.field-group legend { padding: 0; font-weight: 600; }
#dialog-form-error { margin-top: 0.75rem; border-radius: 0.375rem; background: var(--error-bg); color: var(--error-text); }
#dialog-form-error:not(:empty) { padding: 0.75rem 1rem; }
dialog#dialog-form { width: min(40rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); overflow-y: auto; }
dialog form .actions button { margin-top: 0; }
/* the groups of a long form dialog (New event): a titled heading over its fields, and the collapsed Advanced block */
#dialog-form-fields h4 { margin: 1.25rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--line); font-size: 1rem; }
#dialog-form-fields h4:first-child { margin-top: 0.5rem; padding-top: 0; border-top: 0; }
#dialog-form-fields details { margin: 0.75rem 0 0; }
#dialog-form-fields summary { cursor: pointer; color: var(--accent); font-weight: 600; }
#dialog-form-fields details[open] summary { margin-bottom: 0.25rem; }

dialog {
  width: min(32rem, calc(100% - 2rem));
  padding: 0.5rem 1.25rem 1.25rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
dialog h2:focus { outline: none; }

@media (min-width: 900px) {
  .editor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

@media (min-width: 40rem) {
  .fields { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: 1fr 1fr; }
  .card-wide { grid-column: 1 / -1; }
  main, .page-header, .page-footer { padding-left: 1.5rem; padding-right: 1.5rem; }
  section { padding: 0.5rem 1.5rem 1.5rem; }
}