/* The one look for every page but the board itself: green felt, warm paper, rounded
   buttons. It is the app's TabletopStyle (DownAcross/Views/TabletopHomeStyle.swift), and
   like the app's lobby it is always light. The board keeps play.css, the plain board,
   and follows dark mode as the app's board screen does; join.html drops this class the
   moment the board opens.

   A page opts in with <body class="tabletop">. Its content sits on .paper sheets; what
   sits straight on the felt (the brand, the footer, a heading above the sheets) is paper
   coloured through .on-felt. --danger is the site's one red for error text and
   destructive buttons, the light value of `danger` in fixtures/board_colors.json, which
   checks it against both paper tones. */

.tabletop {
  --felt: #174c3c;
  --ink: #133c38;
  --muted: #475c54;
  --paper: #faf2de;
  --paper-shade: #e8dbbf;
  --bg: var(--paper);
  --panel: #fff8e7;
  --rule: #133c3826;
  --line: #133c3850;
  --danger: #a22a20;
  --paper-fill: linear-gradient(125deg, var(--paper), var(--paper-shade));
  --paper-shadow: 0 6px 22px #082d2830;
  --felt-rule: #faf2de40;
  --felt-muted: #faf2dedb;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  background: var(--felt);
  color: var(--ink);
  color-scheme: light;
  isolation: isolate;
}

/* The tabletop photograph behind the top of the page. It is the app's backdrop cut
   into three by tools/tabletop_web_assets.py: the notebook on the left edge, the plant
   and the cup on the right, and a strip of the empty felt between them that repeats
   without a seam. A window can be any width, so the two edges stay at the size they
   were photographed and the felt fills whatever is between them; narrower than the
   1086px photograph, all three scale down together and the page reads as the one
   picture it came from. The images live only in a rule with a min-width: a
   background-image inside a media query that does not match is never fetched, so at
   500px and below the felt alone paints and nothing loads. */
.tabletop::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 0 0 auto;
  height: 1080px;
  mask-image: linear-gradient(#000 40%, transparent);
}
@media (min-width: 501px) {
  .tabletop::before {
    --edge: min(420px, 38.674vw);
    background:
      url('/tabletop-left.webp') left top / var(--edge) auto no-repeat,
      url('/tabletop-right.webp') right top / var(--edge) auto no-repeat,
      url('/tabletop-felt.webp') center top / min(1000px, 92.081vw) auto repeat-x;
  }
}

/* A sheet of paper on the felt. */
.tabletop .paper {
  background: var(--paper-fill);
  border: 1px solid #ffffff73;
  border-radius: 22px;
  box-shadow: var(--paper-shadow);
  color: var(--ink);
}

/* Straight on the felt: the brand, the footer and anything else not on a sheet. */
.tabletop .on-felt { color: var(--paper); border-color: var(--felt-rule); }
.tabletop .on-felt a { color: inherit; }
.tabletop footer.on-felt, .tabletop .on-felt .muted { color: var(--felt-muted); }

/* Buttons: the felt pill for the thing to do, an outlined pill for everything else. */
.tabletop .button-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px; border-radius: 28px; border: 1px solid var(--felt);
  background: var(--felt); color: var(--paper); font: inherit; font-weight: 650;
  text-decoration: none; cursor: pointer;
}
.tabletop .button-primary:hover { background: var(--ink); border-color: var(--ink); }
.tabletop .button-quiet {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 10px 20px; border-radius: 24px; border: 1px solid var(--line);
  background: #ffffff40; color: var(--ink); font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.tabletop .button-quiet:hover { background: #ffffff70; }
.tabletop .button-primary:disabled, .tabletop .button-quiet:disabled { opacity: .5; cursor: default; }

.tabletop .danger-text, .tabletop .error { color: var(--danger); }

.tabletop input[type="text"], .tabletop input:not([type]) {
  background: #fffdf6; color: var(--ink); border: 1px solid var(--line); border-radius: 9px;
}

.tabletop a:focus-visible, .tabletop button:focus-visible, .tabletop summary:focus-visible,
.tabletop input:focus-visible { outline: 3px solid #3382ed; outline-offset: 4px; }

/* The brand above a sheet on every page but the homepage, which sets its own larger
   masthead: the serif name in paper on the felt, the mark beside it. */
.tabletop .on-felt .brand, .tabletop .brand.on-felt, .tabletop .on-felt .account-brand {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  font: 700 1.55rem/1.15 var(--serif); letter-spacing: -.02em; text-transform: none;
}

/* A conventional gear at the trailing edge of the page header. */
.settings-link { display: inline-flex; flex: none; width: 44px; height: 44px; align-items: center; justify-content: center; color: inherit; border: 1px solid currentColor; border-radius: 8px; text-decoration: none; }
.settings-link:hover { background: #ffffff18; }
.settings-link svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }