/* The pages of my.<domain>, the account's own host (task 17b), on Atoll's brand: web/assets/brand.css
   gives the palette, the faces, actions, focus and the logo; this file lays the pages out with
   those tokens. Mobile first; body 16px, nothing under 14px, controls at least 44px tall, no
   horizontal scroll at 390px. */

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

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

h1 { font-size: 2.25rem; line-height: 1.1; margin: 0 0 .75rem; overflow-wrap: anywhere; }
h2 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 .375rem; overflow-wrap: anywhere; }
p { margin: 0 0 .75rem; }
.note { color: var(--atoll-forest-soft); font-size: .9375rem; }
.lede { font-size: 1.125rem; color: var(--atoll-forest-soft); max-width: 34rem; }

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

.my-narrow, .my-wide { padding: 2rem 16px 4rem; margin: 0 auto; }
.my-narrow { max-width: 30rem; }
.my-wide { max-width: 46rem; }

/* The lockup keeps half the symbol's width clear around it. */
.my-lockup { height: 40px; width: auto; margin: 0 0 2rem; }

.my-section { margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--atoll-line); }
.my-section:first-of-type { border-top: 0; padding-top: 0; }

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

.my-alert {
  color: var(--atoll-alert);
  background: var(--atoll-clay-tint);
  border-radius: 12px;
  padding: .75rem 1rem;
  font-weight: 500;
}

/* The bar of the signed-in pages: the lockup, who is signed in, and Sign out.
   On a phone the lockup and Sign out share a row and who is signed in goes below; wider, one row. */
.my-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand signout" "who who";
  align-items: center;
  gap: .25rem 1rem;
  padding: .75rem 16px;
  padding-top: max(.75rem, env(safe-area-inset-top));
  border-bottom: 1px solid var(--atoll-line);
}
.my-brand { grid-area: brand; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px 0 0; }
.my-brand img { height: 32px; width: auto; }
.my-who { grid-area: who; min-width: 0; color: var(--atoll-forest-soft); font-size: .9375rem; overflow-wrap: anywhere; }
.my-bar form { grid-area: signout; margin: 0; }
.my-bar button { min-height: 44px; padding: .25rem 1rem; font-size: .9375rem; }

/* The account's Islands: one card each, with its Open button. */
.my-islands { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .875rem; }
.my-island {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  padding: 1.125rem 1.25rem;
  border: 1.5px solid var(--atoll-forest);
  border-radius: var(--atoll-radius);
  background: var(--atoll-surface);
}
.my-island-text { min-width: 0; flex: 1 1 12rem; }
.my-island .note { margin: 0; overflow-wrap: anywhere; }
.my-island form { margin: 0; }

.my-empty {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border-radius: var(--atoll-radius);
  background: var(--atoll-daydream-tint);
  max-width: 34rem;
}

/* `hidden` wins over the brand's display on buttons and forms. */
[hidden] { display: none !important; }

/* My Islands (task 17c1): create, setup, the Island's page. */
.my-create { margin-top: 1.5rem; }
.my-island a.button.quiet-link { background: var(--atoll-paper); box-shadow: none; }
.my-island a.button.quiet-link:hover { background: var(--atoll-forest); color: var(--atoll-paper); }
.my-address { display: flex; align-items: stretch; min-width: 0; }
.my-address input { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.my-domain {
  display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0;
  padding: 0 .75rem; border: 1.5px solid var(--atoll-edge); border-left: 0;
  border-radius: 0 12px 12px 0; background: var(--atoll-new-leaf-tint);
  color: var(--atoll-forest-soft); overflow-wrap: anywhere; font-size: .9375rem;
}
.my-setup { margin: 1.5rem 0; padding: 1.25rem; border-radius: var(--atoll-radius); background: var(--atoll-daydream-tint); }
.my-setup-status { font-size: 1.25rem; font-weight: 600; margin-bottom: .5rem; }
.my-setup form, .my-setup p:last-child { margin-bottom: 0; }

/* The operator console (task 17d1). Wide tables scroll inside their own region, never the page. */
.my-operator { margin-top: 1rem; }
.op-main h1 { margin-bottom: 1rem; }
.op-nav ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.op-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .25rem 1rem;
  border: 1.5px solid var(--atoll-forest); border-radius: var(--atoll-pill); text-decoration: none; font-weight: 600;
}
.op-nav a[aria-current="page"] { background: var(--atoll-forest); color: var(--atoll-paper); }
.op-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: .75rem; margin: 0 0 1.25rem; }
.op-stat { margin: 0; padding: 1rem 1.125rem; border-radius: var(--atoll-radius); background: var(--atoll-surface); border: 1.5px solid var(--atoll-line); min-width: 0; }
.op-stat dt { font-weight: 600; font-size: .9375rem; }
.op-stat dd { margin: .25rem 0 0; display: flex; flex-direction: column; }
.op-value { font-size: 2rem; font-weight: 600; line-height: 1.15; }
.op-scroll { max-width: 100%; overflow-x: auto; margin: .75rem 0 1rem; border: 1.5px solid var(--atoll-line); border-radius: var(--atoll-radius); }
.op-table { border-collapse: collapse; width: 100%; font-size: 1rem; }
.op-table th, .op-table td { text-align: left; padding: .625rem .875rem; border-bottom: 1px solid var(--atoll-line); vertical-align: top; white-space: nowrap; }
.op-table th { font-size: .9375rem; background: var(--atoll-new-leaf-tint); }
.op-table tbody tr:last-child td { border-bottom: 0; }
.op-table .op-num { text-align: right; font-variant-numeric: tabular-nums; }
.op-meter { width: 5rem; height: .875rem; vertical-align: middle; margin-left: .5rem; }
.op-codes { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .75rem; }
.op-code { padding: 1rem 1.125rem; border: 1.5px solid var(--atoll-forest); border-radius: var(--atoll-radius); background: var(--atoll-surface); overflow-wrap: anywhere; }
.op-code p:last-child { margin-bottom: 0; }
.op-redemptions { margin: 0 0 .75rem; padding-left: 1.25rem; }
.op-made { margin: 1rem 0; padding: 1.25rem; border-radius: var(--atoll-radius); background: var(--atoll-new-leaf-tint); }
.op-made-code { font-size: 1.75rem; font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; user-select: all; }
/* The write side (task 17d2): an Island's facts, and the Island limit's form in the accounts table. */
.op-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .75rem 1.25rem; margin: 0 0 1.25rem; }
.op-facts div { min-width: 0; }
.op-facts dt { font-weight: 600; font-size: .9375rem; }
.op-facts dd { margin: .125rem 0 0; overflow-wrap: anywhere; }
.limit-form { display: flex; align-items: center; gap: .5rem; margin: 0; }
.limit-form input { width: 5.5rem; }
.limit-form button { margin: 0; }

/* The terms and deleting the account (task 22b). The checkbox's label is its touch target. */
.my-check { display: flex; align-items: flex-start; gap: .75rem; margin: .5rem 0; }
.my-check input[type="checkbox"] { flex: none; width: 1.5rem; height: 1.5rem; margin: .125rem 0 0; accent-color: var(--atoll-forest); }
.my-check label { font-weight: 500; min-height: 44px; overflow-wrap: anywhere; }
.my-list { margin: 0 0 1rem; padding-left: 1.25rem; }
.my-list li { margin: 0 0 .375rem; }
.my-legal { margin-top: 2rem; }
.my-account-links { margin-top: 2.5rem; }
.my-alert ul { margin: .25rem 0 0; padding-left: 1.25rem; }

@media (min-width: 720px) {
  .my-narrow { padding-top: 4rem; }
  .my-wide { padding-top: 3rem; }
  h1 { font-size: 3rem; }
  .my-bar { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand who signout"; padding-left: 32px; padding-right: 32px; }
}