/* Science & Math — the home dashboard. Nine tiles, nothing else. */

body {
  background:
    radial-gradient(ellipse 90% 50% at 50% -10%, rgba(212,162,76,0.10), transparent 60%),
    radial-gradient(ellipse 70% 40% at 15% 30%, rgba(95,176,168,0.06), transparent 60%),
    radial-gradient(ellipse 70% 40% at 85% 70%, rgba(124,176,208,0.05), transparent 60%),
    var(--bg);
}

.board-title {
  font-size: 1.7rem; font-weight: 600; letter-spacing: 0.01em;
  margin: 0 0 0.85rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gold);
}

/* The dashboard is one screenful, so it does not need the tall gutters the
   scrolling room pages use. The search box costs about 60px that the board
   did not previously have to find, so the chrome around the tiles gives it
   back — the tiles themselves are untouched at 9.75rem, since shrinking
   those is what would actually be noticed. Board page only. */
.page:has(.board) { padding-top: 1.8rem; padding-bottom: 1.2rem; }
.page:has(.board) .board-title { margin-bottom: 0.6rem; }
.page:has(.board) .sbox { margin-bottom: 1rem; }

.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

/* Each grid position is a cell, not a bare tile, so a tile with a second
   destination can hold two sibling anchors. The secondary link used to be a
   <span role="link"> inside the tile's own anchor — invalid, and it broke
   middle-click and open-in-new-tab on the one room reachable only there. */
.cell { display: flex; flex-direction: column; min-width: 0; }
.cell > .tile { flex: 1; }
/* Same specificity as the rule above, and after it, so the round tile keeps
   its own size instead of being stretched to fill the row. */
.cell > .tile-center { flex: 0 0 auto; margin: auto; }

.tile {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  text-decoration: none; color: inherit; text-align: center;
  min-height: 9.75rem; padding: 0.85rem 0.9rem;
  background: linear-gradient(155deg, color-mix(in srgb, var(--c) 15%, var(--panel)), var(--panel));
  border: 1px solid var(--border); border-top: 3px solid var(--c);
  border-radius: 5px;
  transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
}
.tile:hover, .tile:focus-visible {
  transform: translateY(-2px); border-color: var(--c);
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--c) 70%, transparent);
  outline: none;
}

/* The periodic table is what every other room reaches for, so it is the one
   round thing on the board — a different shape reads faster than a different
   colour. Sized to the row height and centred, with a ring of its own accent
   so it sits forward of the eight tiles around it. */
.tile-center {
  aspect-ratio: 1 / 1;
  width: 100%; max-width: 9.75rem; min-height: 0;
  /* It is a flex child of its cell now, so it centres with auto margins
     rather than the grid's justify-self, and must not stretch to fill. */
  flex: 0 0 auto; margin: auto;
  border-radius: 50%;
  padding: 0.8rem;
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--c) 34%, var(--panel)), var(--panel) 72%);
  border: 2px solid var(--c);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 10%, transparent),
              0 12px 34px -14px color-mix(in srgb, var(--c) 80%, transparent);
}
.tile-center:hover, .tile-center:focus-visible {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--c) 16%, transparent),
              0 16px 40px -12px color-mix(in srgb, var(--c) 90%, transparent);
}

.t-glyph { font-size: 1.5rem; opacity: 0.65; margin-bottom: 0.28rem; }
.t-name { font-size: 1.05rem; font-weight: 600; line-height: 1.2; }
.t-sub {
  font-family: -apple-system, "Segoe UI", sans-serif; font-size: 0.7rem;
  color: var(--muted); margin-top: 0.22rem;
}
/* Inside a circle the usable width narrows towards the top and bottom, so
   the type steps down and the label is allowed to wrap onto two lines. */
.tile-center .t-glyph { font-size: 1.75rem; opacity: 0.85; margin-bottom: 0.18rem; }
.tile-center .t-name { font-size: 1rem; line-height: 1.14; padding: 0 0.3rem; }
.tile-center .t-sub { font-size: 0.64rem; margin-top: 0.18rem; }

/* Second destination — a real anchor sitting under its tile. */
.t-also {
  font-family: -apple-system, "Segoe UI", sans-serif; font-size: 0.66rem; font-weight: 600;
  color: var(--c); text-decoration: none; cursor: pointer; margin-top: 0.4rem;
  padding: 0.16rem 0.5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--c) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
  align-self: center; text-align: center;
}
.t-also:hover, .t-also:focus-visible {
  color: var(--fg); background: color-mix(in srgb, var(--c) 26%, transparent);
  outline: none;
}

@media (max-width: 760px) {
  .board { grid-template-columns: repeat(2, 1fr); }
  .tile-center { max-width: 9.5rem; }
}
@media (max-width: 480px) {
  .board { grid-template-columns: 1fr; }
  .tile { min-height: 6.5rem; }
  /* One column: a full-width circle would be enormous, so cap it. */
  .tile-center { max-width: 9.5rem; }
}