/* ce-net.com/foreman: your Foreman (/foreman/app/) and the sign-in messages. Colours, face and the lockup from brand.css
   (goal lead-10150253-242): surfaces part by a tone step, never a line; square corners like the landing. Type ceiling (ce-fleet standards/type-has-a-ceiling.md): title 48 px
   web, 32 px phone; Inter-like body, sentence case. foreman/asdfghj-1, goal lead-10150004-231. */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--pg-bg); color: var(--pg-ink); font: 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--pg-acc-ink); }
:focus-visible { outline: 3px solid var(--pg-acc-ink); outline-offset: 2px; }
.wrap { max-width: 720px; margin: 0 auto; padding: 24px 16px 96px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 24px; }
.top .lockup { font-size: 22px; }
h1 { font-size: 48px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; margin: 24px 0 12px; }
h2 { font-size: 22px; font-weight: 600; margin: 0 0 8px; }
p.lead { font-size: 19px; color: var(--mute); margin: 0 0 28px; max-width: 34em; }
@media (max-width: 600px) { h1 { font-size: 32px; } p.lead { font-size: 17px; } }
.card { background: var(--card); padding: 20px; margin: 0 0 8px; }
.narrow { max-width: 420px; margin: 12vh auto; }
.narrow .lockup { font-size: 22px; margin: 0 0 20px; }
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px 16px; border-radius: 0;
       border: 0; background: var(--bg2); color: var(--pg-ink); font: 500 16px var(--font); text-decoration: none;
       cursor: pointer; margin: 10px 0 0; }
.btn { transition: transform .15s cubic-bezier(.2,.7,.2,1), background .2s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--pg-acc); color: var(--on-acc); font-weight: 600; }
.btn.small { width: auto; display: inline-flex; padding: 8px 14px; font-size: 14px; margin: 0; }
.btn svg { width: 20px; height: 20px; flex: none; }
.mute { color: var(--mute); }
.fine { color: var(--mute); font-size: 13px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 32px 0; }
@media (max-width: 600px) { .grid3 { grid-template-columns: 1fr; } }
.grid3 .card { margin: 0; }
.grid3 h2 { font-size: 17px; }
.grid3 p { margin: 0; color: var(--mute); font-size: 15px; }
textarea, input[type=text], input[type=number], input[type=date] {
  width: 100%; font: 16px var(--font); color: var(--pg-ink); background: var(--pg-bg); border: 1px solid var(--pg-line); border-radius: 0;
  padding: 12px; margin: 6px 0 0; }
textarea { min-height: 96px; resize: vertical; }
label { display: block; font-size: 14px; color: var(--mute); margin: 12px 0 0; }
.tabs { display: flex; gap: 0; background: var(--bg2); margin: 0 0 8px; overflow-x: auto; }
.tabs button { background: none; border: 0; padding: 12px 16px; font: 500 15px var(--font); color: var(--soft); cursor: pointer;
               white-space: nowrap; }
.tabs button:hover { color: var(--pg-ink); }
.tabs button.on { color: var(--on-acc); background: var(--pg-acc); font-weight: 600; }
.msg { padding: 12px 0; }
.msg + .msg { margin-top: 4px; }
.msg .q { white-space: pre-wrap; }
.msg .a { white-space: pre-wrap; background: var(--bg2); border-radius: 0; padding: 10px 12px; margin: 8px 0 0; }
.tag { display: inline-block; font-size: 13px; padding: 2px 8px; background: var(--bg2); color: var(--soft); }
.tag.ok { color: var(--pg-ok); }
pre.code { font: 13px/1.5 var(--pg-mono); background: var(--bg2); border: 0; border-radius: 0; padding: 12px;
           overflow-x: auto; white-space: pre-wrap; word-break: break-all; margin: 8px 0 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.note { font-size: 15px; padding: 12px 14px; background: var(--soft-acc); margin: 0 0 8px; }
[hidden] { display: none !important; }