/* The Island home: mobile first, on Atoll's brand (brand.css: the palette, the faces, actions,
   focus and the logo). This file lays out the shell's pages with those tokens. Readability
   rules from the guide: body 16px, nothing under 14px, controls at least 44px tall, reflow
   rather than shrink, no horizontal scroll on a phone. */

:root {
  --gutter: 16px;
  --line: var(--atoll-line);
  --radius: var(--atoll-radius);
}

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

body {
  min-height: 100vh;
  min-height: 100dvh;
}

h1 { font-size: 2rem; line-height: 1.12; margin: .25rem 0 .75rem; overflow-wrap: anywhere; }
h2 { font-size: 1.375rem; line-height: 1.25; margin: 2rem 0 .5rem; }
h3 { font-size: 1.0625rem; line-height: 1.35; margin: 1.5rem 0 .25rem; }
p { margin: 0 0 .75rem; }

.note { color: var(--atoll-forest-soft); }
.lede { font-size: 1.125rem; line-height: 1.6; color: var(--atoll-forest-soft); max-width: 36rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus {
  left: var(--gutter); top: 8px; z-index: 10;
  display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1.125rem;
  border-radius: var(--atoll-pill); background: var(--atoll-forest); color: var(--atoll-paper);
  font-weight: 600; text-decoration: none;
}

input, select { width: 100%; }
label { font-weight: 600; }

.stack { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0; }
.stack button { align-self: flex-start; margin-top: .5rem; }

/* The bar along the top of every signed-in page: on a phone the Atoll symbol with the Island's
   name and Sign out, who is signed in on a line of its own, and the page links below, wrapping
   onto a second row rather than scrolling out of sight; wider, all on one row. The symbol keeps
   half its width clear on every side (the padding and gaps below). */
.bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand account" "nav nav";
  align-items: center;
  gap: .375rem 1rem;
  padding: .75rem var(--gutter) .5rem;
  padding-top: max(.75rem, env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
  background: var(--atoll-paper);
}
.brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -.01em;
  color: var(--atoll-forest);
  text-decoration: none;
  overflow-wrap: break-word;
  min-width: 0;
}
.brand span { min-width: 0; }
.brand:hover span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.brand [data-atoll-logo] { width: 28px; height: 28px; }
/* The account button (task 17e): the member's initial in a Forest circle, and their name beside it
   once there is room (on a phone the circle alone; the name stays for screen readers). A Clay dot
   on the circle while the member has no passkey. Its menu drops below it, Paper with a Forest edge
   like the cards, never covering the page as a dialog would. */
.account { grid-area: account; position: relative; justify-self: end; }
.account-button {
  min-height: 44px;
  min-width: 44px;
  padding: 0 .25rem;
  gap: .625rem;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  font-weight: 500;
  font-size: .9375rem;
}
.account-button:hover, .account-button[aria-expanded="true"] { background: var(--atoll-new-leaf-tint); border-color: var(--atoll-forest); box-shadow: none; }
.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--atoll-forest);
  color: var(--atoll-paper);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
}
.passkey-dot {
  position: absolute;
  top: -2px;
  right: -3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--atoll-clay);
  border: 2px solid var(--atoll-paper);
}
.who {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.account-popover {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 20;
  width: min(20rem, calc(100vw - 2 * var(--gutter)));
  padding: .5rem;
  border: 1.5px solid var(--atoll-forest);
  border-radius: 18px;
  background: var(--atoll-paper);
  box-shadow: 0 4px 0 var(--atoll-forest);
}
.account-popover[hidden] { display: none; }
.account-head { padding: .5rem .75rem .75rem; margin-bottom: .25rem; border-bottom: 1px solid var(--line); }
.account-head p { margin: 0; overflow-wrap: anywhere; }
.account-name { font-weight: 600; }
.account-email { color: var(--atoll-forest-soft); font-size: .875rem; }
.account-email:empty { display: none; }
.account-item, button.account-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: .5rem .75rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  color: var(--atoll-forest);
  font: inherit;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  justify-content: flex-start;
}
.account-item:hover, .account-item:focus-visible, button.account-item:hover { background: var(--atoll-new-leaf-tint); box-shadow: none; color: var(--atoll-forest); }
.account-item:focus-visible { outline: 3px solid var(--atoll-forest); outline-offset: -3px; }
/* The passkey item: a Clay-tinted block at the top of the menu while there is no passkey. */
.account-nudge { margin: .25rem 0 .375rem; }
/* The account-wide items (my.<domain>, signing out) apart from this Island's. */
.account-popover .account-link { margin-top: .375rem; position: relative; }
.account-popover .account-link::before { content: ""; position: absolute; left: .75rem; right: .75rem; top: -.25rem; border-top: 1px solid var(--line); }
button.nudge-item { flex-direction: column; align-items: flex-start; gap: .125rem; background: var(--atoll-clay-tint); }
button.nudge-item:hover { background: #FFC4AF; }
.nudge-title { font-weight: 600; }
.nudge-sub { font-size: .875rem; font-weight: 400; }
.nudge-problem { margin: .25rem .75rem 0; font-size: .875rem; color: var(--atoll-alert); font-weight: 600; }
.nudge-problem:empty { display: none; }

.site-nav {
  grid-area: nav;
  display: flex;
  flex-wrap: wrap;
  gap: .375rem .25rem;
  margin: .25rem 0 0;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .75rem;
  border-radius: var(--atoll-pill);
  color: var(--atoll-forest);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover { background: var(--atoll-new-leaf-tint); }
.site-nav a[aria-current="page"] { background: var(--atoll-new-leaf); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--atoll-forest); }

/* An app in its frame on a phone: the symbol alone, the page links and Sign out flow together
   in one wrapping run (two rows on a phone), leaving most of the screen to the app. The nav keeps
   its landmark; only its box gives way so its links can share rows with Sign out. The Island's
   name stays the home link's name for screen readers; "Signed in as" is on every other page. */
@media (max-width: 59.99rem) {
  body.framed .bar { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .25rem; padding-bottom: .5rem; }
  body.framed .brand { margin-right: .625rem; }
  body.framed .brand #island-name {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  body.framed .site-nav { display: contents; }
  body.framed .site-nav a { padding: 0 .625rem; }
  body.framed .account { margin-left: auto; }
}

@media (min-width: 48rem) {
  :root { --gutter: 32px; }
}
/* Wide enough for one row: the Island, the page links, who is signed in, Sign out. */
@media (min-width: 60rem) {
  .bar {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "brand nav . account";
    gap: 0 1.5rem;
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: 1rem;
  }
  .brand { font-size: 1.25rem; max-width: 18rem; }
  .brand [data-atoll-logo] { width: 32px; height: 32px; }
  .brand { gap: 16px; }
  .site-nav { margin: 0; flex-wrap: nowrap; }
  /* Room for the name beside the circle. */
  .account-button { padding: 0 1rem 0 .3125rem; }
  .who { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: nowrap; max-width: 14rem; text-overflow: ellipsis; overflow: hidden; color: var(--atoll-forest); }
}

main {
  display: block;
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.75rem var(--gutter) 3.5rem;
}
main:focus { outline: none; }

.card {
  margin-top: 2rem;
  padding: .5rem 1.25rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--atoll-surface);
}
.card > h2:first-child { margin-top: 1rem; }
.card > p:last-child { margin-bottom: 0; }
.card + section:not(.card) { margin-top: 2rem; }

/* The home page: the Island's name, then its apps as tiles on the accent colours. */
.home-head { margin-bottom: 1.5rem; }
.home-head h1 { font-size: 2.5rem; line-height: 1.05; margin-bottom: .5rem; }
.home-head .lede { max-width: 40rem; }
.apps { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .75rem; }
.app {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  min-height: 5.5rem;
  padding: 1rem 1.25rem;
  border: 1.5px solid var(--atoll-forest);
  border-radius: var(--radius);
  background: var(--atoll-new-leaf);
}
.app:nth-child(3n+2) { background: var(--atoll-daydream); }
.app:nth-child(3n) { background: var(--atoll-clay-tint); }
.app a {
  flex: 1 1 12rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  min-height: 44px;
  font-weight: 600;
  font-size: 1.1875rem;
  letter-spacing: -.01em;
  color: var(--atoll-forest);
  text-decoration: none;
  overflow-wrap: break-word;
}
/* The whole tile opens the app. */
.app a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* Focus: the link's own ring everywhere; where :has() is known, the ring goes round the whole tile. */
.app a:focus-visible { outline-offset: 6px; }
@supports selector(:has(*)) {
  .app a:focus-visible { outline: none; }
  .app:has(a:focus-visible) { outline: 3px solid var(--atoll-forest); outline-offset: 3px; }
}
.app a:hover .app-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.app .go { font-size: 1.375rem; line-height: 1; font-weight: 400; }
.app.paused { background: var(--atoll-paper); border-style: dashed; border-color: var(--atoll-edge); }
.app.paused a { color: var(--atoll-forest-soft); }
.app .badge { position: relative; }

.badge {
  display: inline-block;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4;
  padding: .125rem .625rem;
  border-radius: var(--atoll-pill);
  background: var(--atoll-clay-tint);
  color: var(--atoll-forest);
}

/* The home page with no app yet (task 17e): the brand's own workflow, three large steps on the
   accent surfaces (New leaf, Daydream, Clay) with forest text, as the page's main content. Wider,
   the page gives them room for three columns. */
main:has(.loop) { max-width: 74rem; }
.loop { margin-top: 2.25rem; }
.loop > h2 { margin: 0 0 1.25rem; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.step {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.25rem 1.25rem 1.5rem;
  border: 1.5px solid var(--atoll-forest);
  border-radius: 22px;
  color: var(--atoll-forest);
}
.step-ask { background: var(--atoll-new-leaf); }
.step-publish { background: var(--atoll-daydream); }
.step-use { background: var(--atoll-clay); }
.step-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.step-icon { width: 52px; height: 52px; flex: none; margin-top: .25rem; }
.step-num {
  font-family: var(--atoll-serif);
  font-style: italic;
  font-size: 3.5rem;
  line-height: 1;
  letter-spacing: -.03em;
}
.step h3 { font-size: 1.5rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.2; margin: .5rem 0 .625rem; overflow-wrap: anywhere; }
.step p { margin: 0 0 .75rem; }
.step p:last-child { margin-bottom: 0; }
.step a { color: var(--atoll-forest); font-weight: 600; }
.connector { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; margin: 0 0 .75rem; }
.connector-url {
  /* Its own width first, so the button moves to the next row before the address breaks. */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: .5rem .875rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .9375rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  border: 1.5px solid var(--atoll-forest);
  border-radius: 12px;
  background: var(--atoll-paper);
  -webkit-user-select: all;
  user-select: all;
}
/* The action on an accent surface: forest, so it stands off New leaf. */
button.on-accent { background: var(--atoll-forest); color: var(--atoll-paper); box-shadow: none; min-width: 6.5rem; }
button.on-accent:hover { background: #24483A; box-shadow: none; }
.step .where { font-size: .9375rem; }
.step .where .path { font-weight: 600; }
.example {
  font-family: var(--atoll-serif);
  font-style: italic;
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -.015em;
}
.copy-status { display: block; margin: -.25rem 0 .75rem; font-size: .9375rem; font-weight: 500; }
.copy-status:empty { display: none; }

/* With apps: the same steps behind a quiet link below the list. */
.make-app { margin-top: 1.25rem; }
.make-app > summary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.make-app > summary::-webkit-details-marker { display: none; }
.make-app > summary::before { content: "+"; display: inline-block; width: 1em; text-align: center; font-weight: 500; font-size: 1.25rem; line-height: 1; }
.make-app[open] > summary::before { content: "\2212"; }
.make-app > summary span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.make-app > summary:hover span { text-decoration-thickness: 2px; }
.make-app .steps { margin-top: .75rem; gap: .75rem; }
.make-app .step-num { font-size: 2.75rem; }
.make-app .step-icon { width: 40px; height: 40px; }
.make-app .step h3 { font-size: 1.3125rem; }

/* Pages with a heading and a lede (/you, /settings). */
.page-head { margin-bottom: .5rem; }
.page-head .lede { max-width: 40rem; }

/* /you: your name on this Island, your passkeys, connections and daily email. */
#my-name { margin-bottom: 0; }
#my-name .hint-line { font-size: .9375rem; margin: -.25rem 0 .25rem; }
#my-name-input, .passkeys-section #passkey-name { max-width: 26rem; }
#my-name-input[aria-invalid="true"] { border-color: var(--atoll-alert); border-width: 2px; }
.field-problem { margin: 0; color: var(--atoll-alert); font-weight: 600; }
.field-problem:empty { display: none; }
.passkeys-section > h2:first-child { margin-top: 1rem; }

/* /settings: the administrators. */
.admins { list-style: none; margin: .25rem 0 .75rem; padding: 0; }
.admins > li { padding: .625rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.approval-state { font-weight: 600; }

/* An action that removes something (a person, a passkey, an invite link, a connection): quiet,
   with forest text, but on a Clay edge so it does not read like a harmless one. */
button.danger { border-color: var(--atoll-clay-deep); border-width: 2px; }
button.danger:hover { background: var(--atoll-clay-tint); color: var(--atoll-forest); border-color: var(--atoll-clay-deep); }
button.danger:disabled { border-color: var(--atoll-edge); }

/* Passkeys. */
.passkeys { list-style: none; margin: 0 0 .5rem; padding: 0; }
.passkeys li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 .75rem;
  align-items: center;
  padding: .75rem 0;
  border-bottom: 1px solid var(--line);
}
.passkeys li .note { grid-column: 1; font-size: .875rem; margin: 0; }
.passkey-name { grid-column: 1; font-weight: 600; overflow-wrap: break-word; min-width: 0; }
.passkeys li button { grid-column: 2; grid-row: 1 / span 2; }

/* A refusal from the API, in the page's one role="alert" element; empty takes no room. */
.alert {
  color: var(--atoll-alert);
  font-weight: 600;
  padding: .75rem 1rem;
  border-left: 4px solid var(--atoll-clay);
  background: var(--atoll-surface);
  border-radius: 0 10px 10px 0;
}
.alert:empty, .note[role="status"]:empty, #people-status:empty, #settings-status:empty { display: none; }
.note[role="status"] { font-weight: 500; }

select {
  width: auto;
  padding-right: 2.25rem;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--atoll-forest) 50%), linear-gradient(135deg, var(--atoll-forest) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* People, invite links, connections: one row per item, the controls at the end. */
.people, .invites, .connections { list-style: none; margin: 0 0 .5rem; padding: 0; }
.people > li, .invites > li, .connections > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .125rem .75rem;
  align-items: center;
  padding: .875rem 0;
  border-bottom: 1px solid var(--line);
}
.people > li > :not(.person-controls), .invites > li > :not(button), .connections > li > :not(button) { grid-column: 1; }
.people > li .note, .invites > li .note, .connections > li .note { font-size: .875rem; margin: 0; }
.person-name, .connection-name { font-weight: 600; overflow-wrap: break-word; min-width: 0; }
.you { font-weight: 400; color: var(--atoll-forest-soft); }
.person-controls { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.invites > li > button, .connections > li > button { grid-column: 2; grid-row: 1 / span 3; }
@media (max-width: 29.99rem) {
  .person-controls { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; margin-top: .5rem; }
}
.scopes ul { margin: .125rem 0 0; padding-left: 1.25rem; font-size: .9375rem; }

.invite-made:not(:empty), .keep:not(:empty) {
  margin: 1rem 0;
  padding: 1rem;
  border: 1.5px solid var(--atoll-forest);
  border-radius: var(--radius);
  background: var(--atoll-new-leaf-tint);
}
.invite-made .note, .keep .note { font-size: .9375rem; margin: .25rem 0 .75rem; }
.copy-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.copy-row input { flex: 1 1 14rem; font-size: .9375rem; }

/* Daily email: one checkbox per collection. */
fieldset.digest { border: 0; margin: 0; padding: 0; }
fieldset.digest legend { font-weight: 600; padding: 0; margin-bottom: .25rem; }
fieldset.digest ul { list-style: none; margin: 0; padding: 0; }
fieldset.digest li { padding: .125rem 0; }
.check { display: flex; align-items: center; gap: .75rem; min-height: 44px; font-weight: 500; cursor: pointer; }
.check input { width: 1.375rem; height: 1.375rem; min-height: 0; margin: 0; flex: none; accent-color: var(--atoll-forest); }
.hint { display: block; font-size: .875rem; margin: -.25rem 0 .375rem 2.125rem; }

.message { padding-top: 1.5rem; }

/* An app in its frame: the bar, a slim app bar, and the frame filling the rest. */
body.framed { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
body.framed main { flex: 1; display: flex; flex-direction: column; max-width: none; width: 100%; padding: 0; min-height: 0; }
.app-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .75rem;
  padding: .375rem var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--atoll-new-leaf-tint);
}
.app-bar a { color: var(--atoll-forest); font-weight: 500; }
.app-bar .back {
  display: inline-flex; align-items: center; gap: .25rem;
  min-height: 44px; padding: 0 .875rem 0 .625rem;
  border: 1.5px solid var(--atoll-forest); border-radius: var(--atoll-pill);
  background: var(--atoll-paper);
  text-decoration: none; white-space: nowrap;
}
.app-bar .back:hover { background: var(--atoll-forest); color: var(--atoll-paper); }
.app-title { flex: 1 1 8rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; margin: 0; min-width: 0; overflow-wrap: break-word; }
.app-bar .about { margin-left: auto; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
#app-frame { flex: 1; width: 100%; min-height: 0; border: 0; background: #fff; }

/* A link that looks like a button (the export download): brand.css draws it. */
a.button:hover { text-decoration: none; }

/* The app page. */
.crumbs { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.controls { margin: 1rem 0; }
.controls .note { margin-top: .75rem; font-size: .9375rem; }
.summary-text { white-space: pre-line; overflow-wrap: anywhere; }
.versions { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.version { padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--atoll-surface); }
.version.current { border: 1.5px solid var(--atoll-forest); box-shadow: 0 3px 0 var(--atoll-forest); }
.version h3 { font-size: 1.0625rem; margin: 0 0 .25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.version .badge { background: var(--atoll-new-leaf); }
.version .note { font-size: .875rem; margin-bottom: .5rem; }
.version .changelog { overflow-wrap: anywhere; white-space: pre-line; }
.version details { margin: 0 0 .5rem; }
.version summary { cursor: pointer; font-weight: 500; min-height: 44px; display: flex; align-items: center; text-decoration: underline; text-underline-offset: .2em; }
.version details .summary-text { font-size: .9375rem; color: var(--atoll-forest-soft); }

/* The activity page. */
.events { list-style: none; margin: 1rem 0; padding: 0; }
.events li { display: flex; flex-direction: column; gap: .125rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.events li:focus, .versions li:focus { outline: 3px solid var(--atoll-forest); outline-offset: 3px; }
.event-summary { overflow-wrap: anywhere; }
.event-meta { font-size: .875rem; }

/* The collection pages. */
.collections, .fields, .records, .can-see { list-style: none; margin: 0 0 .5rem; padding: 0; }
.collections { margin-top: 1.5rem; }
.collection {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 .75rem;
  padding: .625rem 1.25rem .875rem; margin-bottom: .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--atoll-surface);
}
.collection a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 1.125rem; text-decoration: none; overflow-wrap: break-word; min-width: 0; }
.collection a:hover .collection-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.collection > .note { flex-basis: 100%; font-size: .9375rem; margin: 0; }
.collection .badge, h1 .badge { background: var(--atoll-daydream-tint); }
.fields > li, .can-see > li { padding: .5rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.field-name { font-weight: 600; }
.fields .note, .can-see .note { font-size: .875rem; }
.records > li { padding: .75rem 0; border-bottom: 1px solid var(--line); }
.records dl { display: grid; grid-template-columns: minmax(6rem, auto) minmax(0, 1fr); gap: .125rem .75rem; margin: 0; }
.records dt { color: var(--atoll-forest-soft); font-size: .875rem; padding-top: .125rem; }
.records dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.records .note { font-size: .875rem; }
h1 .badge { vertical-align: middle; font-size: .875rem; letter-spacing: 0; font-weight: 500; }

/* The sign-in page: the Atoll lockup, the passkey first, the email link below; wider, a quiet
   contour drawing of an Island beside it (decorative, never behind text). */
.signin {
  max-width: 64rem;
  padding-top: 2rem;
}
.signin-lockup { height: 52px; width: auto; margin: 0 0 2rem; }
.signin-form { max-width: 28rem; }
.signin h1 { font-size: 2.5rem; line-height: 1.08; margin-bottom: 1rem; }
.signin h1 em { white-space: nowrap; }
.signin .passkey { margin: 1.5rem 0 2rem; }
.signin .or {
  display: flex; align-items: center; gap: 1rem;
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.signin .or h2 { margin: 0 0 .25rem; }
.signin-art { display: none; }

@media (min-width: 48rem) {
  main { padding-top: 2.5rem; }
  h1 { font-size: 2.75rem; }
  h2 { font-size: 1.5rem; }
  .home-head h1 { font-size: 3.25rem; }
  .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step { padding: 1.5rem 1.75rem 1.75rem; }
  .step-num { font-size: 4rem; }
  .signin { padding-top: 3rem; }
  .signin h1 { font-size: 3.25rem; }
}

/* Wide: the first step (the address and the example) down the left, the other two beside it, so
   the reading order stays one, two, three. */
@media (min-width: 64rem) {
  .loop .steps { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.25rem; }
  .loop .step-ask { grid-row: span 2; }
  .loop .step { padding: 1.75rem 2rem 2rem; }
  .loop .step-num { font-size: 4.5rem; }
  .loop .step-icon { width: 60px; height: 60px; }
  .loop > h2 { font-size: 1.75rem; }
}

@media (min-width: 60rem) {
  .signin { display: grid; grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: start; }
  .signin-lockup { grid-column: 1 / -1; margin-bottom: .5rem; }
  .signin-art { display: block; width: 100%; height: auto; max-width: 30rem; justify-self: end; margin-top: 1rem; }
}

/* The requests page (task 15) and the home page's notice of waiting requests. */
.requests { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .75rem; }
.request { display: flex; flex-direction: column; gap: .25rem; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.request.pending { border-color: var(--accent); }
.request:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.request h2 { font-size: 1.0625rem; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; overflow-wrap: anywhere; }
.request h3 { font-size: .9375rem; margin: .5rem 0 0; }
.request .note { font-size: .875rem; margin: 0; }
.request .changelog, .request-note { overflow-wrap: anywhere; white-space: pre-line; margin: .25rem 0; }
.decline-form textarea { width: 100%; box-sizing: border-box; font: inherit; }
.notice { padding: .75rem 1rem; margin-top: 1rem; }