/* The page's look. Colours, fonts, corner radii, the border width and the press duration are warlocks-schema's design
   values (values.css, the crafting screen's palette), used through their custom properties; this file defines no
   colour of its own. Font sizes and spacing live here until the app's theme moves onto the schema's values. */

@font-face {
  font-family: "Cinzel";
  src: url("../fonts/Cinzel.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Alegreya";
  src: url("../fonts/Alegreya.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--basalt-050);
  color: var(--parchment-900);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.5;
}

h1, h2, h3, button, .wordmark, nav a, .badge, label.step {
  font-family: var(--font-display);
}

h1, h2, h3 { color: var(--gilt); margin: 0 0 0.5rem; line-height: 1.2; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1.05rem; }

a { color: var(--gilt); }

/* Visible focus for every control, the keyboard's only cue (Olle, question 24). */
:focus-visible {
  outline: var(--border-w) solid var(--gilt);
  outline-offset: 2px;
}

.quiet { color: var(--parchment-660); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The bar: the name left, the tabs, the login or the account right. */
.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding: 0.75rem 1rem;
  border-bottom: var(--border-w) solid var(--basalt-300);
  background: var(--basalt-100);
}

.wordmark {
  color: var(--gilt);
  text-decoration: none;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}

nav ul { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }

nav a {
  display: block;
  padding: 0.35rem 0.8rem;
  border: var(--border-w) solid transparent;
  border-radius: var(--radius-pill);
  color: var(--parchment-660);
  text-decoration: none;
}

nav a:hover { color: var(--parchment-900); }

/* The tab shown is marked by its border and its colour together, not by colour alone. */
nav a[aria-current="page"] {
  color: var(--gilt);
  border-color: var(--basalt-380);
  background: var(--basalt-160);
}

.account { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }

button {
  min-height: 2.5rem;
  padding: 0.4rem 1rem;
  border: var(--border-w) solid var(--basalt-380);
  border-radius: var(--radius-pill);
  background: var(--basalt-160);
  color: var(--parchment-900);
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform var(--dur-press);
}

button:hover { border-color: var(--gilt); }
button:active { transform: translateY(1px); }

button.primary {
  background: linear-gradient(var(--gilt-300), var(--gilt-700));
  border-color: var(--gilt-700);
  color: var(--basalt-050);
}

.freshness {
  margin: 0;
  padding: 0.5rem 1rem;
  border-bottom: var(--border-w) solid var(--basalt-300);
  color: var(--parchment-660);
  font-size: 0.95rem;
}

.trouble { color: var(--molten-top); }

main { max-width: 72rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
main:focus { outline: none; }
main section { margin-top: 1.5rem; }

.landing { text-align: center; padding-top: 22vh; }
.landing .title { font-size: clamp(2rem, 7vw, 3.5rem); letter-spacing: 0.06em; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  align-items: start;
  gap: 0.75rem;
}

.card {
  padding: 0.9rem 1rem;
  border: var(--border-w) solid var(--basalt-300);
  border-radius: var(--radius-card);
  background: var(--basalt-100);
}

.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.card-head p { margin: 0; }

.facts { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.9rem; margin: 0.5rem 0 0; }
.facts dt { color: var(--parchment-660); }
.facts dd { margin: 0; overflow-wrap: anywhere; }

/* A status in words; the colour only repeats what the word says. */
.badge {
  flex: none;
  padding: 0.1rem 0.55rem;
  border: var(--border-w) solid transparent;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.badge-working { background: var(--gilt); color: var(--basalt-050); }
.badge-idle, .badge-done { background: var(--ash); color: var(--basalt-050); }
.badge-blocked { border-color: var(--molten-top); color: var(--molten-top); }
.badge-stalled { background: var(--molten-top); color: var(--basalt-050); }
.badge-dead { background: var(--molten-lo); color: var(--parchment-900); }

label.step { display: block; color: var(--parchment-660); font-size: 0.9rem; margin-bottom: 0.25rem; }

progress {
  appearance: none;
  display: block;
  width: 100%;
  height: 0.7rem;
  border: var(--border-w) solid var(--basalt-380);
  border-radius: var(--radius-bar);
  background: var(--basalt-050);
}

progress::-webkit-progress-bar { background: var(--basalt-050); border-radius: var(--radius-bar); }
progress::-webkit-progress-value { background: linear-gradient(var(--gilt-300), var(--gilt-700)); border-radius: var(--radius-bar); }
progress::-moz-progress-bar { background: linear-gradient(var(--gilt-300), var(--gilt-700)); border-radius: var(--radius-bar); }

.threads { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.threads a { font-family: var(--font-display); font-size: 1.05rem; }
.threads p { margin: 0.25rem 0 0; }

.letters { display: grid; gap: 0.75rem; }
.letter-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.links { margin: 0; padding-left: 1.2rem; overflow-wrap: anywhere; }

dialog {
  width: min(32rem, calc(100% - 2rem));
  padding: 1.25rem;
  border: var(--border-w) solid var(--basalt-380);
  border-radius: var(--radius-card);
  background: var(--basalt-100);
  color: var(--parchment-900);
}

dialog::backdrop { background: color-mix(in oklch, var(--basalt-050) 60%, transparent); }

dialog label { display: block; margin-top: 0.5rem; }
dialog p { margin: 0.25rem 0; }

dialog input[name="runes"] {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.4rem 0.6rem;
  border: var(--border-w) solid var(--basalt-380);
  border-radius: var(--radius-pill);
  background: var(--basalt-050);
  color: var(--parchment-900);
  font: inherit;
}

label.check { display: flex; align-items: center; gap: 0.5rem; }
label.check input { width: 1.2rem; height: 1.2rem; accent-color: var(--gilt); }

.keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin: 0.75rem 0; }
.keypad .rune { text-transform: capitalize; }

.error { color: var(--molten-top); min-height: 1.5em; }

.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }