/* Content below the timer on /pomodoro-timer/. Reuses the blog article styles (blog.css: .post-*)
   and adds only what the article layout does not have. Colours and type follow STYLES.md. */

.tpage{ padding-top:clamp(28px, 4vw, 48px); }

.tpage-head{
  max-width:760px;
  margin:0 auto clamp(20px, 3vw, 32px);
  text-align:center;
}

.tpage-head h1{
  margin:0;
  font-family:var(--display);
  font-size:clamp(2.3rem, 4.6vw, 3.6rem);
  font-weight:400;
  line-height:1;
  letter-spacing:-.01em;
}

.tpage-head .post-lede{ margin-top:14px; }

.tpage-tool{
  width:100%;
  max-width:1120px;
  margin:0 auto clamp(40px, 5vw, 64px);
}

.tpage-layout{ margin-top:0; }

.tpage-meta{ margin-top:14px; }

.tpage-steps{
  display:grid;
  gap:10px;
  margin:16px 0 0;
  padding:0;
  list-style:none;
  counter-reset:tstep;
}

.tpage-steps li{
  position:relative;
  padding-left:44px;
  color:#29313b;
  line-height:1.6;
  counter-increment:tstep;
}

.tpage-steps li::before{
  content:counter(tstep);
  position:absolute;
  top:.05em;
  left:0;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--pick);
  border:1px solid var(--pick-line);
  color:var(--accent);
  font-size:.82rem;
  font-weight:650;
  font-variant-numeric:tabular-nums;
}

.tpage-steps li strong{ font-weight:650; }

.tpage-table{
  margin-top:18px;
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:16px;
}

.tpage-table table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  font-size:.94rem;
}

.tpage-table th,
.tpage-table td{
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
  line-height:1.45;
}

.tpage-table thead th{
  background:var(--soft);
  color:var(--ink-3);
  font-size:.74rem;
  font-weight:650;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.tpage-table tbody th{ font-weight:650; white-space:nowrap; }
.tpage-table tbody td{ color:var(--ink-2); }
.tpage-table tbody tr:last-child > *{ border-bottom:0; }

.tpage-keys{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:18px;
}

.tpage-keys > div{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  color:var(--ink-2);
  font-size:.92rem;
  line-height:1.4;
}

.tpage-keys kbd{
  display:inline-grid;
  place-items:center;
  min-width:34px;
  height:30px;
  padding:0 9px;
  border:1px solid var(--line);
  border-bottom-width:2px;
  border-radius:8px;
  background:var(--soft);
  color:var(--ink);
  font:600 .82rem/1 var(--body);
}

.tpage-figure{
  margin:20px 0 0;
  overflow:hidden;
  border-radius:20px;
  background:#dcebf7;
  box-shadow:0 18px 48px rgba(15, 40, 80, .1);
}

.tpage-figure img{
  display:block;
  width:100%;
  height:auto;
}

.post-prose a:not(.posts-button){
  color:var(--accent);
  text-underline-offset:3px;
}

.tpage-nudge .posts-button{ display:inline-flex; margin-top:6px; }

@media (max-width:720px){
  .tpage{ padding-top:24px; }
  .tpage-keys{ grid-template-columns:1fr; }
  .tpage-figure{ border-radius:16px; }
}