/* Toolbox: its own styles, after tokens.css and components.css (v0.4.0).

   App-specific tokens: Toolbox's signature colour, forest green, used only for
   its title block and mark, as the design system's data-app colours are. It
   lives here, not in tokens.css, because Toolbox isn't one of the five apps
   the system covers. This block is the only place a colour is written in this
   file; the test checks that. */
:root[data-app="toolbox"] { --title-bg: #1f4030; --title-text: #e6f5ea; --title-muted: #a9cdb4; }
@media (prefers-color-scheme: light) {
  :root[data-app="toolbox"]:not([data-theme="dark"]) { --title-bg: #dcefe2; --title-text: #12301f; --title-muted: #3c6a4c; }
}
:root[data-app="toolbox"][data-theme="light"] { --title-bg: #dcefe2; --title-text: #12301f; --title-muted: #3c6a4c; }
/* end of app-specific tokens */

body { min-height: 100vh; padding-bottom: env(safe-area-inset-bottom); }
#app { max-width: 920px; margin: 0 auto; padding-top: env(safe-area-inset-top); }

.tb-tiles { list-style: none; margin: 16px 0 0; padding: 0 12px; display: grid; gap: 10px; }
@media (min-width: 700px) { .tb-tiles { grid-template-columns: 1fr 1fr; } }

.tb-tile {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center;
  min-height: 84px; padding: 14px 16px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--text); text-decoration: none;
}
.tb-tile:active { background: var(--surface-2); }
.tb-tile__icon { width: 56px; height: 56px; border-radius: 14px; display: block; }
.tb-tile__text { min-width: 0; }
.tb-tile__name { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.tb-tile__blurb { display: block; font-size: var(--fs-small); color: var(--muted); margin-top: 3px; line-height: 1.3; }
.tb-tile__go { font-size: 28px; color: var(--faint); line-height: 1; }

.tb-foot { margin: 24px 20px 32px; font-size: var(--fs-tiny); color: var(--faint); text-align: center; }