/* ============================================================
tool.css — frame for interactive tools under /interactive/*
------------------------------------------------------------
A tool page needs only two lines in :
and one wrapper around its own markup:
…plain tool markup…
shell.js builds the page frame (background, title, footer) around
that element. Everything below styles the frame and
gives the inside of the panel sane plain-HTML defaults, so a tool
copied in from elsewhere looks right without carrying its own CSS.
============================================================ */
@import url("base.css");
/* ============================================================
Tool page layout
============================================================ */
/* Generous top padding: tool pages carry no profile bar, so the title
would otherwise sit flush against the top of the viewport. */
.tool-main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 4rem 0 3rem;
}
.tool-title {
font-family: var(--font-body); /* Roboto */
font-size: clamp(1.9rem, 4vw, 2.8rem);
font-weight: 500;
letter-spacing: -0.01em;
color: var(--text);
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
margin-bottom: 0.35rem;
text-align: center;
}
.tool-subtitle {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 400;
color: var(--text-muted);
margin-bottom: 2rem;
text-align: center;
}
/* Back link under the panel */
.tool-back {
display: inline-block;
margin-top: 1.75rem;
font-size: 0.85rem;
color: var(--text-muted);
transition: color var(--transition);
}
.tool-back:hover { color: var(--text); }
/* ============================================================
The panel — centred, max 800px, light working surface
------------------------------------------------------------
Deliberately a light card: tools imported from elsewhere assume
dark-on-light and would be unreadable on the dark green shell.
============================================================ */
.tool {
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 2rem;
background: var(--surface);
color: var(--ink);
border: 1px solid var(--surface-border);
border-radius: var(--radius);
box-shadow: var(--shadow);
line-height: 1.6;
/* Wide tools scroll inside the panel instead of stretching the page */
overflow-x: auto;
}
/* ============================================================
Plain-HTML defaults inside the panel
------------------------------------------------------------
Scoped to .tool so they can never leak into the site chrome.
============================================================ */
.tool h1, .tool h2, .tool h3, .tool h4 {
font-family: var(--font-body); /* Roboto */
font-weight: 500;
line-height: 1.25;
color: var(--ink);
margin: 1.75rem 0 0.6rem;
}
.tool > :first-child { margin-top: 0; }
.tool h1 { font-size: 1.7rem; }
.tool h2 { font-size: 1.35rem; }
.tool h3 { font-size: 1.15rem; }
.tool h4 { font-size: 1rem; }
.tool p { margin: 0.75rem 0; }
.tool ul, .tool ol { margin: 0.75rem 0 0.75rem 1.4rem; }
.tool li { margin-top: 5pt; }
.tool a { color: var(--primary); text-decoration: underline; }
.tool a:hover { color: #2f8069; }
.tool strong { font-weight: 700; }
.tool hr { border: 0; border-top: 1px solid var(--surface-border); margin: 1.5rem 0; }
/* Canvases, images and SVGs shrink to fit rather than overflowing.
Tools that hit-test a canvas must map pointer coordinates through
getBoundingClientRect() so clicks stay accurate when scaled down. */
.tool canvas, .tool img, .tool svg {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
/* Form controls */
.tool button, .tool input, .tool select, .tool textarea {
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--ink);
}
.tool button {
padding: 0.45rem 1.1rem;
border: 1px solid var(--surface-border);
border-radius: var(--radius-sm);
background: var(--primary);
color: #fff;
cursor: pointer;
transition: background var(--transition);
}
.tool button:hover { background: #4dbfa0; }
.tool input, .tool select, .tool textarea {
padding: 0.4rem 0.6rem;
border: 1px solid var(--surface-border);
border-radius: var(--radius-sm);
background: #fff;
}
/* Tables */
.tool table { border-collapse: collapse; margin: 1rem 0; }
.tool th, .tool td {
border: 1px solid var(--surface-border);
padding: 0.4rem 0.7rem;
text-align: left;
}
.tool th { font-weight: 700; background: rgba(0, 0, 0, 0.03); }
/* Code */
.tool code, .tool pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.9em;
}
.tool code { background: rgba(0, 0, 0, 0.05); padding: 0.1em 0.35em; border-radius: 4px; }
.tool pre {
background: rgba(0, 0, 0, 0.05);
padding: 0.9rem 1.1rem;
border-radius: var(--radius-sm);
overflow-x: auto;
margin: 1rem 0;
}
.tool pre code { background: none; padding: 0; }
/* Text helpers */
.tool .weak { color: var(--ink-muted); }
.tool .underline { text-decoration: underline; }
.tool .quote {
border-left: 6px solid #ccc;
padding-left: 10px;
color: var(--ink-muted);
}
/* ============================================================
Responsive
============================================================ */
@media (max-width: 600px) {
.tool { padding: 1.25rem; }
.tool-main { padding: 2.5rem 0 2.5rem; }
}