/* Functimer — /timers/ tool pages. Extends site.css (GRID direction):
   same hairlines, monospace meta, flat accent inks. Phase colors match
   the app: work green, rest cyan, countdown red, done white. */

.tmr-hero { border-bottom: 1px solid var(--line); }
.tmr-hero .gwrap { padding-top: 48px; padding-bottom: 36px; }
.tmr-hero h1 { font-family: var(--gd); font-size: clamp(40px, 7vw, 72px);
               font-weight: 900; letter-spacing: -0.04em; line-height: 0.92;
               text-transform: uppercase; margin-top: 14px; }
.tmr-hero h1 .a { color: var(--accent); }
.tmr-hero .lede { margin-top: 18px; max-width: 620px; font-family: var(--gm);
                  font-size: 13.5px; font-weight: 500; line-height: 1.75;
                  color: var(--dim); }

/* ── the timer itself ────────────────────────────────────── */

#tmr { border-bottom: 1px solid var(--line); background: #000;
       --ph: var(--dim); }
#tmr[data-phase="count"]  { --ph: #FF2E2E; }
#tmr[data-phase="ending"] { --ph: #FF2E2E; }
#tmr[data-phase="work"]   { --ph: var(--n-work); }
#tmr[data-phase="rest"]   { --ph: var(--n-rest); }
#tmr[data-phase="pause"]  { --ph: #FFB020; }
#tmr[data-phase="done"]   { --ph: var(--ink); }
#tmr:fullscreen { display: flex; flex-direction: column; justify-content: center; }

.tmr-display { text-align: center; padding: 44px 16px 36px; position: relative; }
.tmr-phase { font-family: var(--gm); font-size: clamp(13px, 2vw, 18px);
             font-weight: 700; letter-spacing: 0.22em; color: var(--ph);
             text-transform: uppercase; min-height: 22px; }
.tmr-digits { font-family: var(--gm); font-weight: 800;
              font-size: clamp(88px, 24vw, 240px); line-height: 1;
              letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
              color: var(--ph); margin-top: 6px; }
#tmr[data-phase="ending"] .tmr-digits,
#tmr[data-phase="count"] .tmr-digits { animation: tmrpulse 1s steps(2) infinite; }
@keyframes tmrpulse { 50% { opacity: 0.55; } }
.tmr-round { font-family: var(--gm); font-size: clamp(12px, 1.6vw, 16px);
             font-weight: 700; letter-spacing: 0.18em; color: var(--dim);
             text-transform: uppercase; min-height: 20px; margin-top: 10px; }
.tmr-fs { position: absolute; top: 14px; right: 16px; background: none;
          border: 1px solid var(--line); color: var(--mute); cursor: pointer;
          font-family: var(--gm); font-size: 10px; font-weight: 700;
          letter-spacing: 0.14em; padding: 7px 10px; }
.tmr-fs:hover { color: var(--ink); border-color: var(--mute); }

.tmr-controls { display: flex; justify-content: center; gap: 12px;
                padding: 0 16px 40px; flex-wrap: wrap; }
.tmr-controls button { cursor: pointer; border: none;
                       font-family: var(--gm); font-size: 13px; font-weight: 800;
                       letter-spacing: 0.14em; padding: 16px 36px; }
#tmr-start { background: var(--accent); color: #000; min-width: 180px; }
#tmr-start:hover { filter: brightness(1.12); }
#tmr-reset { background: none; border: 1px solid var(--line); color: var(--dim); }
#tmr-reset:hover { color: var(--ink); border-color: var(--mute); }
#tmr-action { background: none; border: 1px solid var(--n-rest); color: var(--n-rest); }
#tmr-action:hover { filter: brightness(1.2); }

/* ── config row ──────────────────────────────────────────── */

.tmr-cfg { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap;
           padding: 26px 16px; border-bottom: 1px solid var(--line);
           background: var(--bg); }
.tmr-cfg label { display: flex; flex-direction: column; gap: 8px; }
.tmr-cfg .meta { text-align: left; }
.tmr-cfg input { width: 110px; background: var(--panel); color: var(--ink);
                 border: 1px solid var(--line); padding: 12px 12px;
                 font-family: var(--gm); font-size: 18px; font-weight: 700;
                 font-variant-numeric: tabular-nums; }
.tmr-cfg input:focus { outline: 2px solid var(--accent); outline-offset: 0; }

/* ── article / explainer ─────────────────────────────────── */

.tmr-article { border-bottom: 1px solid var(--line); }
.tmr-article .gwrap { padding: 56px 32px 64px; max-width: 860px; }
.tmr-article h2 { font-family: var(--gd); font-size: 28px; font-weight: 900;
                  letter-spacing: -0.02em; text-transform: uppercase;
                  margin-top: 44px; }
.tmr-article h2:first-child { margin-top: 0; }
.tmr-article p, .tmr-article li { font-family: var(--gm); font-size: 13.5px;
                  font-weight: 500; line-height: 1.85; color: var(--dim);
                  margin-top: 14px; }
.tmr-article li { margin-top: 8px; }
.tmr-article ul, .tmr-article ol { padding-left: 22px; margin-top: 6px; }
.tmr-article strong { color: var(--ink); font-weight: 700; }
.tmr-article a { color: var(--accent); }
.tmr-article .faq dt { font-family: var(--gd); font-size: 16px; font-weight: 900;
                       text-transform: uppercase; letter-spacing: 0.01em;
                       margin-top: 28px; color: var(--ink); }
.tmr-article .faq dd { margin: 8px 0 0; font-family: var(--gm); font-size: 13.5px;
                       font-weight: 500; line-height: 1.85; color: var(--dim); }

/* ── app cross-sell strip ────────────────────────────────── */

.tmr-app { border-bottom: 1px solid var(--line); }
.tmr-app .gwrap { display: grid; grid-template-columns: 1fr auto; gap: 32px;
                  align-items: center; padding-top: 44px; padding-bottom: 48px; }
.tmr-app h2 { font-family: var(--gd); font-size: 34px; font-weight: 900;
              letter-spacing: -0.03em; line-height: 0.95; text-transform: uppercase; }
.tmr-app h2 .a { color: var(--accent); }
.tmr-app p { margin-top: 12px; max-width: 520px; font-family: var(--gm);
             font-size: 12.5px; font-weight: 500; line-height: 1.75; color: var(--dim); }

/* ── /timers/ index table ────────────────────────────────── */

.tmr-index .gtable-row { text-decoration: none; }
.tmr-index .gtable-row .fmt { color: var(--dim); }

@media (max-width: 760px) {
  .tmr-app .gwrap { grid-template-columns: 1fr; }
  .tmr-cfg { gap: 14px; }
  .tmr-cfg input { width: 88px; }
}