/* The site's own stylesheet. It covers the server-rendered pages only; the
   editor ships its own CSS with its bundle. The custom properties are the ones
   the React app already used, so the two halves of the site look like one. */

:root {
  --color-background: #f4f4f0;
  --color-dark: #0b0d0f;
  --color-primary: #bbd0d0;
  --color-error: #d04040;
  --color-ok: #2b7a4b;
  --color-link: #1877f2;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-background);
  color: var(--color-dark);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-size: 18px;
  line-height: 1.6666;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* Header ------------------------------------------------------------------ */

/* One bar: the wordmark, the path to where this page is, and the account. */
.topbar {
  display: flex;
  align-items: center;
  gap: 0 0.75em;
  min-height: 3.25rem;
  padding: 0.35em 1em;
  background-color: var(--color-dark);
  color: #fff;
}

.wordmark {
  flex: none;
  margin: 0;
  font-family: 'Monoton', cursive;
  font-weight: 400;
  font-size: 1.65rem;
  line-height: 1;
}

.wordmark a {
  color: #fff;
  text-decoration: none;
}

/* The path carries on from the wordmark, each step after a slash in the
   colour of the bar's links, set in the headings' face. */
.crumbs {
  display: flex;
  align-items: baseline;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: 'Rokkitt', serif;
  font-size: 1.3rem;
  line-height: 1.2;
}

.crumbs li {
  display: flex;
  min-width: 0;
  white-space: nowrap;
}

.crumbs li::before {
  content: '/';
  padding: 0 0.45em 0 0;
  color: #56646a;
}

.crumbs li + li::before {
  padding-left: 0.45em;
}

.crumbs a {
  overflow: hidden;
  text-overflow: ellipsis;
  color: #e6eded;
  text-decoration: none;
}

.crumbs a:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-underline-offset: 0.2em;
}

.crumbs a[aria-current='page'] {
  color: var(--color-primary);
}

.menu {
  display: flex;
  align-items: center;
  gap: 1.25em;
  min-width: 0;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  white-space: nowrap;
}

.menu li {
  min-width: 0;
}

.menu form {
  margin: 0;
}

.menu a,
.menu button {
  color: #c3d1d1;
  text-decoration: none;
}

.menu a:hover,
.menu button:hover {
  color: #fff;
  text-decoration: underline;
}

.menu button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.menu .account {
  display: flex;
  align-items: center;
  gap: 0.35em;
  min-width: 0;
}

.menu .account .material-icons {
  font-size: 1.35rem;
}

.account-email {
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar a:focus-visible,
.topbar button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

/* A phone: the address gives way to the icon that stands for it, and the
   wordmark shrinks so the path still fits beside it. */
@media only screen and (max-width: 600px) {
  .topbar {
    gap: 0 0.5em;
    min-height: 2.75rem;
    padding: 0.3em 0.75em;
  }

  .wordmark {
    font-size: 1.15rem;
  }

  .crumbs {
    font-size: 1.05rem;
  }

  .menu {
    gap: 0.9em;
  }

  .account-email {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* The admin looking in as somebody else: loud, so it is never forgotten. */
.impersonating {
  padding: 0.25em 1em;
  background-color: var(--color-error);
  color: white;
}

.impersonating form {
  margin: 0;
}

.impersonating button.linkish {
  color: white;
  text-decoration: underline;
}

/* Body -------------------------------------------------------------------- */

.appbody {
  padding: 1em;
}

.prose {
  max-width: 44em;
}

/* The "Updated:" line above a policy: said once, and quietly — it is about the
   text rather than part of it. */
.prose .hint {
  color: #666;
  font-size: 0.9em;
}

/* The MCP address and the command that adds it: things to copy exactly. */
.prose pre {
  padding: 0.75em 1em;
  overflow-x: auto;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* The demo on the page that connects an AI assistant. */
.prose .video {
  margin: 1.5em 0;
}

.prose .video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 6px;
}

.prose .video figcaption {
  color: #666;
  font-size: 0.9em;
  margin-top: 0.5em;
}

.prose code {
  font-size: 0.95em;
}

/* Allow and deny, on the page that connects an AI assistant. */
.decision {
  display: flex;
  gap: 1.5em;
  align-items: center;
  margin-top: 1.5em;
}

.prose h1,
.prose h2,
.landing h1,
.landing h2 {
  font-family: 'Rokkitt', serif;
  margin-block-end: 0.3em;
}

.columns {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  align-items: flex-start;
}

/* A column of cards inside .columns: it takes the share a card would, and
   its cards stack at their own height rather than stretching. */
.column {
  flex: 1 1 22em;
  display: flex;
  flex-direction: column;
  gap: 1em;
  min-width: 0;
}

.column > .card {
  flex: none;
}

.card {
  flex: 1 1 22em;
  padding: 1em 1.5em;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.card h1,
.card h2 {
  font-family: 'Rokkitt', serif;
  margin-block-start: 0.2em;
}

.empty {
  color: #666;
}

/* Projects ---------------------------------------------------------------- */

.projects-page {
  max-width: 78rem;
  margin: 0 auto;
}

.projects-title {
  margin: 0.3em 0 0.9em;
  font-family: 'Rokkitt', serif;
  font-size: 2.2em;
  line-height: 1.1;
}

/* Every project is its deck lying on the table: the first card face up, and
   the edges of the cards under it showing. */
.decks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 2.5em 1.75em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.deck-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* The space a card lies in. The cards of a project sit on its bottom edge,
   so that the names under them line up whatever the cards' shapes; the room
   at the top and right is for the edges of the cards beneath. That room is
   a share of the width, so what is left for the card is always 23 wide by
   28 tall, the proportions deckShape in decks.go measures cards against. */
.deck {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 5 / 6;
  padding: 8% 8% 0 0;
  /* Sized by the column alone, never by the picture in it, so that every
     deck in a row is the same height and the names under them line up. */
  contain: size;
  text-decoration: none;
}

.deck:focus-visible {
  outline: none;
}

/* The card's proportions come from its width and height attributes: its
   height fills the space, and its width follows, unless it is a wide card. */
.deck-face {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  border-radius: 4.5% / 3.2%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 13, 15, 0.18), 0 12px 22px -14px rgba(11, 13, 15, 0.55);
  transition: transform 0.15s ease-out;
}

.deck-face.deck-wide {
  width: 100%;
  height: auto;
  max-width: none;
  max-height: 100%;
}

/* The cards under the top one, as offset outlines of it. Each is two
   shadows: a card's paper, and a hairline that is its edge. */
.deck-face.deck-stack-1 {
  box-shadow: 6px -6px 0 -1px #fff, 6px -6px 0 0 #b6c3c3,
    0 1px 2px rgba(11, 13, 15, 0.18), 0 12px 22px -14px rgba(11, 13, 15, 0.55);
}

.deck-face.deck-stack-2 {
  box-shadow: 6px -6px 0 -1px #fff, 6px -6px 0 0 #b6c3c3,
    12px -12px 0 -1px #fff, 12px -12px 0 0 #b6c3c3,
    0 1px 2px rgba(11, 13, 15, 0.18), 0 12px 22px -14px rgba(11, 13, 15, 0.55);
}

/* A deck that has never been opened in the editor has no picture yet. */
.deck-empty {
  border: 1px solid #d3dbdb;
}

.deck-tile:hover .deck-face,
.deck-tile:focus-within .deck-face {
  transform: translateY(-4px);
}

/* Starting a project: an empty space where a card would go. */
.deck-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 635 / 889;
  border: 2px dashed #9eb1b1;
  background: transparent;
  box-shadow: none;
  color: #5b6b6b;
}

.deck-blank .material-icons {
  font-size: 2.75rem;
}

.deck-new:hover .deck-blank,
.deck-new:focus-within .deck-blank {
  border-color: var(--color-dark);
  background: #fff;
  color: var(--color-dark);
}

.deck-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-top: 0.9em;
}

.deck-name {
  color: var(--color-dark);
  font-family: 'Rokkitt', serif;
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.deck-name:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.deck-name:focus-visible {
  outline: 2px solid var(--color-dark);
  outline-offset: 2px;
  border-radius: 2px;
}

.deck-meta {
  margin-top: 0.2em;
  color: #5f6b6b;
  font-size: 0.8em;
  line-height: 1.35;
}

.project-actions {
  display: flex;
  gap: 0.1em;
  margin: 0.35em 0 0 -0.45em;
}

/* With a pointer, the actions keep quiet until the deck is pointed at; on a
   touch screen they are always there to be tapped. */
@media (hover: hover) {
  .project-actions {
    opacity: 0.45;
    transition: opacity 0.15s;
  }

  .deck-tile:hover .project-actions,
  .project-actions:focus-within {
    opacity: 1;
  }
}

/* A button that is an icon, quiet until it is pointed at. */
button.iconbutton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  padding: 0;
  border-radius: 6px;
  background: none;
  color: #4a5555;
}

button.iconbutton:hover {
  opacity: 1;
  background: #e6ebe6;
  color: var(--color-dark);
}

button.iconbutton:focus-visible {
  outline: 2px solid var(--color-dark);
  outline-offset: 1px;
}

button.iconbutton .material-icons {
  font-size: 1.1em;
}

button.iconbutton.danger {
  background: none;
  color: var(--color-error);
}

button.iconbutton.danger:hover {
  background: #fbe9e9;
}

.rename-project {
  margin-top: 0.9em;
}

.rename-project input[type='text'] {
  margin: 0 0 0.4em;
  padding: 0.3em 0.45em;
  font-family: 'Rokkitt', serif;
  font-size: 1.1em;
  font-weight: 700;
}

.rename-actions {
  display: flex;
  align-items: baseline;
  gap: 1em;
  font-size: 0.9em;
}

.rename-project .status {
  margin: 0.3em 0 0;
}

/* The assistant and the feedback, under the decks and set off from them. */
.asides {
  margin-top: 4em;
  padding-top: 2.5em;
  border-top: 1px solid #dde3df;
}

@media (prefers-reduced-motion: reduce) {
  .deck-face,
  .project-actions {
    transition: none;
  }
}

@media only screen and (max-width: 600px) {
  .decks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2em 1.25em;
  }

  .projects-title {
    font-size: 1.8em;
  }
}

/* Forms ------------------------------------------------------------------- */

label {
  display: block;
  font-size: 0.9em;
  color: #555;
}

input[type='text'],
input[type='email'] {
  display: block;
  width: 100%;
  max-width: 24em;
  padding: 0.5em;
  margin: 0.25em 0 0.75em;
  font: inherit;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
}

button,
a.button {
  font: inherit;
  padding: 0.4em 1em;
  border: none;
  border-radius: 6px;
  background: var(--color-dark);
  color: #fff;
  cursor: pointer;
}

button:hover,
a.button:hover {
  opacity: 0.9;
}

/* A link wearing a button: the data download is an <a> rather than a form,
   because what comes back is a file for the browser to save. */
a.button {
  display: inline-block;
  text-decoration: none;
}

button[disabled] {
  opacity: 0.5;
  cursor: progress;
}

button.linkish {
  background: none;
  color: var(--color-link);
  padding: 0;
  text-decoration: underline;
}

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

button.linkish.danger {
  background: none;
  color: var(--color-error);
}

.status {
  margin: 0.5em 0 0;
  font-size: 0.9em;
}

.status-error {
  color: var(--color-error);
}

.status-ok {
  color: var(--color-ok);
}

/* Feedback ---------------------------------------------------------------- */

.feedback {
  margin-bottom: 1em;
  border: 2px solid var(--color-primary);
}

.assistant ul {
  padding-inline-start: 1.25em;
}

.assistant-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  align-items: center;
}

.feedback ul {
  padding-inline-start: 1.25em;
}

.feedback li {
  margin: 0.3em 0;
}

.feedback textarea {
  display: block;
  width: 100%;
  padding: 0.5em;
  margin: 0.25em 0 0.75em;
  font: inherit;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  resize: vertical;
}

.consent {
  margin: 0 0 0.75em;
}

.consent label {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  font-size: 1em;
  color: inherit;
  cursor: pointer;
}

/* The box sits on the first line of the label rather than at the top of the
   whole thing, which on a narrow screen is several lines tall. The offset is
   half the difference between that line and the box, so the two share a
   middle; both are in em, so a browser with larger text keeps the alignment.
   font-size is set because an input does not inherit one, and the em would
   otherwise be the browser's own smaller default. */
.consent input[type='checkbox'] {
  flex: none;
  font-size: inherit;
  width: 1em;
  height: 1em;
  margin: calc((1.6666em - 1em) / 2) 0 0;
}

.consent .hint {
  display: block;
  margin: 0.25em 0 0 1.6em;
  color: #666;
  font-size: 0.9em;
}

/* Import banner ----------------------------------------------------------- */

.banner {
  margin-bottom: 1em;
  padding: 0.75em 1.25em;
  border: 2px solid var(--color-primary);
  border-radius: 8px;
  background: #fff;
}

.banner p {
  margin: 0.4em 0;
}

.import-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em;
}

/* Landing ----------------------------------------------------------------- */

/* The landing page runs edge to edge: its hero carries the black of the
   header bar on down, and the cards lie on it as on a table. */
.landing {
  margin: -1em -1em 0;
}

.landing-section h2 {
  margin: 0 0 0.4em;
  font-size: 2.2em;
  line-height: 1.1;
}

.landing .hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 2em 3em;
  padding: 2.5em max(1.5em, calc((100% - 72em) / 2 + 1.5em)) 3.5em;
  background-color: var(--color-dark);
  color: #fff;
}

.landing .hero-title {
  max-width: 11em;
  margin: 0 0 0.35em;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.02;
}

.landing .hero-lede {
  max-width: 30em;
  margin: 0;
  color: #c3d1d1;
  font-size: 1.1em;
}

/* Signing in is part of the hero rather than a box laid on it: the address
   and the button on one line, on the same black as the rest. */
.landing .hero .signin {
  max-width: 30em;
  margin: 2em 0 0;
  padding: 1.25em 0 0;
  border-top: 1px solid #2c3438;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #fff;
}

.landing .hero .signin h2 {
  margin: 0 0 0.15em;
  font-size: 1.5em;
}

.landing .hero .signin p {
  margin: 0 0 0.9em;
  color: #c3d1d1;
  font-size: 0.95em;
}

.landing .hero .signin form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.landing .hero .signin label {
  flex-basis: 100%;
  color: #8d9c9c;
}

.landing .hero .signin input[type='email'] {
  flex: 1 1 14em;
  max-width: none;
  margin: 0;
  border-color: #3a4448;
}

.landing .hero .signin button {
  flex: none;
  background: var(--color-primary);
  color: var(--color-dark);
  font-weight: 600;
}

.landing .hero .signin button:hover {
  background: #fff;
  opacity: 1;
}

.landing .hero .signin input:focus-visible,
.landing .hero .signin button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.landing .hero .signin .status-error {
  color: #ff8f8f;
}

.landing .hero .signin .status-ok {
  color: #8fd6a8;
}

.landing .hero .cta {
  margin: 1.5em 0 0;
}

/* A hand of cards. Each turns about a point well below the hand, so the five
   spread into an arc; they are dealt into it once, as the page opens. */
.landing .hand {
  margin: 0;
}

.landing .fan {
  --card-w: clamp(140px, 16vw, 230px);
  position: relative;
  height: calc(var(--card-w) * 1.72 + 1em);
}

.landing .fan-card {
  position: absolute;
  left: 50%;
  bottom: calc(var(--card-w) * 0.3 + 0.25em);
  width: var(--card-w);
  height: auto;
  margin-left: calc(var(--card-w) / -2);
  border-radius: 4.7% / 3.4%;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.07);
  transform-origin: 50% 190%;
  transform: rotate(var(--angle));
  animation: deal 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.landing .fan-card:nth-child(1) { --angle: -20deg; animation-delay: 0.05s; }
.landing .fan-card:nth-child(2) { --angle: -10deg; animation-delay: 0.1s; }
.landing .fan-card:nth-child(3) { --angle: 0deg; animation-delay: 0.15s; }
.landing .fan-card:nth-child(4) { --angle: 10deg; animation-delay: 0.2s; }
.landing .fan-card:nth-child(5) { --angle: 20deg; animation-delay: 0.25s; }

@keyframes deal {
  from {
    transform: translateY(1.5em) rotate(0deg);
  }
}

.landing .hand figcaption {
  color: #8d9c9c;
  font-size: 0.85em;
  text-align: center;
}

.landing .cta a {
  display: inline-block;
  padding: 0.25em 0.75em;
  border-radius: 8px;
  font-family: 'Rokkitt', serif;
  font-size: 1.6em;
  background-color: var(--color-primary);
  color: var(--color-dark);
  text-decoration: none;
}

.landing .cta a:hover {
  background-color: #fff;
}

.landing .cta a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.landing-section {
  max-width: 72em;
  margin: 0 auto;
  padding: 4em 1.5em 0;
}

.landing .section-lede {
  max-width: 36em;
  margin: 0 0 1.75em;
}

.landing .shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #d5dcdc;
  border-radius: 10px;
  box-shadow: 0 24px 48px -28px rgba(11, 13, 15, 0.45);
}

/* The features are grouped by what you are doing when you need them; the
   teal rule over each group heading is what marks where a group begins. */
.landing .feature-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17em, 1fr));
  gap: 2em 3em;
  margin-top: 1.25em;
}

.landing .feature-group h3 {
  margin: 0 0 0.75em;
  padding-top: 0.5em;
  border-top: 4px solid var(--color-primary);
  font-family: 'Rokkitt', serif;
  font-size: 1.4em;
  line-height: 1.2;
}

.landing .feature-group dl {
  margin: 0;
}

.landing .feature-group dt {
  margin-top: 1em;
  font-weight: 700;
  line-height: 1.35;
}

.landing .feature-group dt:first-child {
  margin-top: 0;
}

.landing .feature-group dd {
  margin: 0.2em 0 0;
  color: #3b4246;
  font-size: 0.95em;
  line-height: 1.55;
}

.landing .printing {
  display: grid;
  grid-template-columns: minmax(0, 22em) minmax(0, 1fr);
  align-items: center;
  gap: 2em 4em;
  padding-bottom: 1em;
}

/* The page as it comes out of the printer, lying on the desk. */
.landing .sheet {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(11, 13, 15, 0.08), 0 24px 44px -20px rgba(11, 13, 15, 0.45);
  transform: rotate(-2deg);
}

.landing .printing-text {
  max-width: 34em;
}

.landing .printing h3 {
  margin: 1.1em 0 0.2em;
  font-family: 'Rokkitt', serif;
  font-size: 1.4em;
  line-height: 1.2;
}

.landing .printing p {
  margin: 0;
}

@media only screen and (max-width: 800px) {
  .landing .hero {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 1.5em;
  }

  .landing .hand {
    order: -1;
  }

  .landing .fan {
    --card-w: min(30vw, 170px);
  }

  .landing .printing {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing .sheet {
    max-width: 18em;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing .fan-card {
    animation: none;
  }
}

/* Use-case pages ----------------------------------------------------------- */

/* A page about one kind of card is built from the landing page's parts: the
   hero, the hand of cards, the sections. What it adds is the three steps,
   the questions, and the button again at the bottom. */
.usecase .cta-note {
  margin: 0.6em 0 0;
  color: #8d9c9c;
  font-size: 0.9em;
}

/* The sample cards are drawn trimmed, with square corners at the cut. */
.usecase .fan-card {
  border-radius: 3.5% / 2.5%;
  background: #fff;
}

.usecase .steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
  gap: 1.5em 3em;
  margin: 1.25em 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.usecase .steps li {
  counter-increment: step;
  padding-top: 0.5em;
  border-top: 4px solid var(--color-primary);
}

.usecase .steps h3 {
  margin: 0 0 0.4em;
  font-family: 'Rokkitt', serif;
  font-size: 1.4em;
  line-height: 1.2;
}

.usecase .steps h3::before {
  content: counter(step) '. ';
}

.usecase .steps p {
  margin: 0;
  color: #3b4246;
  line-height: 1.55;
}

.usecase .faq dl {
  max-width: 44em;
  margin: 1em 0 0;
}

.usecase .faq dt {
  margin-top: 1.25em;
  font-weight: 700;
}

.usecase .faq dd {
  margin: 0.25em 0 0;
  color: #3b4246;
  line-height: 1.55;
}

/* The closing call to action, on the black the page opened with. */
.usecase .closing {
  max-width: none;
  margin-top: 4em;
  padding: 2.5em 1.5em 3em;
  background-color: var(--color-dark);
  color: #fff;
  text-align: center;
}

.usecase .closing p {
  margin: 0 0 0.75em;
  font-family: 'Rokkitt', serif;
  font-size: 1.6em;
}

.signin {
  max-width: 28em;
  margin: 0 auto 2em;
  padding: 1em 1.5em;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.signin h2 {
  margin-block-start: 0.2em;
}

/* Editor shell ------------------------------------------------------------ */

#editor {
  min-height: 60vh;
}

/* The viewer of a shared project fills the window the way the editor does,
   down to a phone, where it is a page that scrolls instead. */
#viewer {
  min-height: 60vh;
}

@media only screen and (min-width: 701px) {
  body:has(#viewer) {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  body:has(#viewer) > nav,
  body:has(#viewer) > .sitefoot {
    flex: none;
  }

  body:has(#viewer) > .appbody {
    flex: 1;
    min-height: 0;
    padding: 0;
  }

  body:has(#viewer) #viewer {
    height: 100%;
    min-height: 0;
  }

  body:has(#viewer) > .sitefoot {
    margin: 0;
    padding: 0.25em 1em;
    font-size: 0.75em;
  }

  body:has(#viewer) .sitefoot p {
    display: inline;
    margin: 0 1em 0 0;
  }
}

@media only screen and (max-width: 700px) {
  body:has(#viewer) > .appbody {
    padding: 0;
  }
}

/* The editor is an application rather than a page: it fills the window under
   the site's header, and scrolls inside its own panels rather than as a
   whole. The footer stays, on one quiet line. */
body:has(#editor) {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

body:has(#editor) > nav,
body:has(#editor) > .sitefoot {
  flex: none;
}

body:has(#editor) > .appbody {
  flex: 1;
  min-height: 0;
  padding: 0;
}

body:has(#editor) #editor {
  height: 100%;
  min-height: 0;
}

body:has(#editor) > .sitefoot {
  margin: 0;
  padding: 0.25em 1em;
  font-size: 0.75em;
}

body:has(#editor) .sitefoot p {
  display: inline;
  margin: 0 1em 0 0;
}

@media only screen and (min-width: 701px) and (max-width: 900px) {
  body:has(#editor) {
    height: auto;
    overflow: visible;
  }

  body:has(#editor) #editor {
    height: 100dvh;
  }
}

/* A phone: the editor shows one panel at a time with tabs along the bottom,
   so it keeps to the window like an app, and the site around it gives up
   what room it can — one thin bar, the way back to the projects in it, and
   no footer. */
@media only screen and (max-width: 700px) {
  body:has(#editor) .topbar {
    min-height: 2.5rem;
  }

  body:has(#editor) > .sitefoot {
    display: none;
  }
}

/* Confirmation -------------------------------------------------------------- */

/* static/confirm.js: the question hx-confirm asks, asked in the page. */
dialog.confirm {
  width: min(28em, calc(100vw - 2em));
  padding: 1.25em 1.5em;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: var(--color-dark);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

dialog.confirm::backdrop {
  background: rgba(20, 22, 24, 0.45);
}

.confirm-message {
  margin: 0 0 1.25em;
}

.confirm-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.5em;
}

.confirm-buttons button {
  padding: 0.4em 1em;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.confirm-buttons button:hover {
  background: #f0f1ec;
}

.confirm-buttons .confirm-ok {
  border-color: var(--color-error);
  background: var(--color-error);
  color: #fff;
}

.confirm-buttons .confirm-ok:hover {
  background: #b33636;
}

/* Footer ------------------------------------------------------------------ */

.sitefoot {
  margin-top: 2em;
  padding: 1em;
  text-align: center;
  font-size: 0.9em;
  color: #555;
}

.sitefoot p {
  margin: 0 0 0.35em;
}

.sitefoot p:last-child {
  margin-bottom: 0;
}

.sitefoot a {
  color: inherit;
}

/* The separators divide, they are not read, so they are faded rather than set
   in the same ink as the links they stand between. */
.sitefoot .sep {
  padding: 0 0.5em;
  opacity: 0.5;
}

/* New project ------------------------------------------------------------- */

.new-project {
  max-width: 48em;
}

.new-project fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.new-project legend {
  font-weight: 600;
  margin-block-end: 0.25em;
}

.new-project .hint {
  margin-top: 0;
  font-size: 0.9em;
  color: #555;
}

/* Each printer is a box that opens onto its card sizes once it is picked. */
.new-project .printer {
  position: relative;
  margin-block-end: 0.75em;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.new-project .printer:has(.printer-choice:checked) {
  border-color: var(--color-dark);
}

.new-project .printer-choice {
  position: absolute;
  top: 1.05em;
  left: 1em;
  margin: 0;
}

.new-project .printer > label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.75em;
  padding: 0.6em 1em 0.6em 2.6em;
  font-size: 1em;
  color: var(--color-dark);
  cursor: pointer;
}

.new-project .printer > label span,
.new-project .size span {
  font-size: 0.85em;
  color: #666;
}

.new-project .sizes {
  padding: 0 1em 0.75em 2.6em;
}

.new-project .sizes > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.new-project .printer-choice:not(:checked) ~ .sizes {
  display: none;
}

.new-project .size {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6em;
  padding: 0.15em 0;
  font-size: 1em;
  color: var(--color-dark);
  cursor: pointer;
}

.new-project .size input {
  margin: 0;
}

.new-project .custom-size {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1em;
}

.new-project .custom-size label {
  flex: 1 1 8em;
}

.new-project input[type='number'] {
  display: block;
  width: 100%;
  padding: 0.5em;
  margin: 0.25em 0 0.25em;
  font: inherit;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
}

/* Templates are a grid of cards to pick from, each with a picture of what it
   lays out. */
.new-project .templates {
  margin-block: 1.25em;
}

.new-project .template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
  gap: 0.75em;
}

.new-project .template {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  padding: 0.75em;
  border: 1px solid #ddd;
  border-radius: 8px;
  color: var(--color-dark);
  cursor: pointer;
}

.new-project .template:has(input:checked) {
  border-color: var(--color-dark);
  box-shadow: 0 0 0 1px var(--color-dark);
}

.new-project .template input {
  position: absolute;
  opacity: 0;
}

.new-project .template:has(input:focus-visible) {
  outline: 2px solid var(--color-dark);
  outline-offset: 2px;
}

.new-project .template-preview {
  display: block;
  width: 60%;
  aspect-ratio: 63.5 / 88.9;
  margin: 0 auto 0.4em;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
  background: #fff;
}

.new-project .template-blank {
  border: 1px dashed #bbb;
  box-shadow: none;
}

/* No back: nothing to print, so not even a card's outline. */
.new-project .template-none {
  background: repeating-linear-gradient(135deg, transparent 0 6px, #eee 6px 7px);
  border: 1px dashed #ddd;
  box-shadow: none;
}

.new-project .template span {
  font-size: 0.85em;
  color: #666;
}

.new-project .template .template-fits {
  color: #888;
}

.new-project .accent {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.75em;
}

.new-project .accent input {
  width: 3em;
  height: 2em;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
}

.new-project .form-actions {
  display: flex;
  align-items: baseline;
  gap: 1.5em;
}

/* The errors the editor reported, on the admin page. */
.errors.prose {
  max-width: 60em;
}

.errorlist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.errorlist li {
  padding: 0.6em 0;
  border-bottom: 1px solid #eee;
}

.errorlist .error-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
}

.errorlist .error-head strong {
  overflow-wrap: anywhere;
}

.errorlist .hint {
  margin: 0.2em 0;
}

.errorlist dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.2em 1em;
  font-size: 0.9em;
}

.errorlist dt {
  color: #666;
}

.errorlist dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.errorlist pre {
  font-size: 0.8em;
}

/* Another template a use-case page offers: one card beside what it is for. */
.usecase .alternative {
  display: grid;
  grid-template-columns: minmax(0, 14em) minmax(0, 1fr);
  align-items: center;
  gap: 2em 3em;
}

.usecase .alt-card {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3.5% / 2.5%;
  box-shadow: 0 2px 4px rgba(11, 13, 15, 0.08), 0 24px 44px -20px rgba(11, 13, 15, 0.45);
  transform: rotate(-3deg);
}

@media only screen and (max-width: 800px) {
  .usecase .alternative {
    grid-template-columns: minmax(0, 1fr);
  }

  .usecase .alt-card {
    max-width: 12em;
    margin: 0 auto;
  }
}

/* What else the editor makes, on the landing page: a card from each kind,
   each leading to the page about it. */
.landing .use-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13em, 1fr));
  gap: 1.5em 2em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing .use-tiles a {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.landing .use-tiles img {
  display: block;
  width: 60%;
  height: auto;
  margin: 0 auto 0.75em;
  border-radius: 3.5% / 2.5%;
  box-shadow: 0 2px 4px rgba(11, 13, 15, 0.08), 0 18px 32px -18px rgba(11, 13, 15, 0.45);
  transition: transform 0.2s ease;
}

.landing .use-tiles a:hover img,
.landing .use-tiles a:focus-visible img {
  transform: translateY(-4px) rotate(-2deg);
}

.landing .use-tiles strong {
  padding-top: 0.5em;
  border-top: 4px solid var(--color-primary);
  font-family: 'Rokkitt', serif;
  font-size: 1.4em;
  line-height: 1.2;
}

.landing .use-tiles span {
  color: #3b4246;
  font-size: 0.95em;
  line-height: 1.5;
}

.landing .use-tiles a:hover strong {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .landing .use-tiles img {
    transition: none;
  }
}