/*
* Freesuite — Home button
* Shared navigation component linked by every tool. Edit here to change the
* button everywhere it appears. Pairs with the markup added by the
* `add-home-button` skill (.claude/skills/add-home-button/).
*
* In a tool's (as the last stylesheet link):
*
* Immediately before the tool's :
*
*
* Tools
*
*
* Pill style/colours match the original platform "Back to tools" button. Its
* metrics were rem against the home page's 62.5% root font-size (1rem = 10px);
* they are written here in equivalent px so the button is identical in every
* tool, whatever root font-size the tool uses.
*
* Mobile-first: by default the button is an icon-only circle (the label is
* hidden) to save space on small screens. At the platform tablet breakpoint
* (550px) the "Tools" label appears and the button becomes a pill. The 550px
* breakpoint matches the home page's own (css/style.css).
*/
.home-button {
position: fixed;
top: 16px;
right: 16px;
z-index: 2147483000;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px;
border-radius: 50%;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
font-weight: 500;
text-decoration: none;
color: #fff;
background-color: #9F9F9F;
}
.home-button:focus-visible { outline: 2px solid #1A1816; outline-offset: 3px; }
/* The apps glyph. icon-tools.svg is filled white so it shows on the grey
background — no mask/filter, so it works over file:// and offline. The path is
relative to THIS file, so it resolves the same for every tool. */
.home-button__icon {
width: 20px;
height: 20px;
background: url(../images/icon-tools.svg) center / contain no-repeat;
}
/* Label hidden on mobile (icon-only circle); shown at tablet+ below. */
.home-button__label { display: none; }
@media (min-width: 550px) {
.home-button {
padding: 10px 16px;
border-radius: 40px;
}
.home-button__icon { margin-right: 8px; }
.home-button__label { display: inline; }
}