/* Time Converter product page — page-specific styles, layered on ink.css.
 *
 * Was a 197-line inline <style>. Moved out so the page carries no inline CSS,
 * which is what let 'unsafe-inline' come out of style-src for the whole site.
 *
 * The old block opened with a :root shim aliasing Ink's tokens under the
 * pre-Ink names -- --text for --ink, --border for --rule, --bg-card for
 * --paper and so on. That is gone: every rule below uses Ink's own names, so
 * there is one vocabulary rather than two spellings of the same colour.
 * --tc-accent-hover went with it, having never been referenced.
 */

:root {
  /* A genuine value rather than an alias: the red at 8%, used as a wash behind
     detected times so the highlight reads without competing with the text. */
  --tc-tint: rgba(158, 43, 37, .08);
}

/* ---- Hero ------------------------------------------------------------ */

.tc-hero { text-align: center; padding: 54px 0 6px }
.tc-hero-icon { display: block; width: 64px; height: 64px; margin: 0 auto 2rem }
.tc-hero h1 {
  margin-bottom: .5rem;
  font: 700 clamp(1.6rem, 4.2vw, 2.15rem)/1.3 var(--serif); letter-spacing: -.01em;
}
.tc-hero .tc-tagline {
  margin-bottom: 1.5rem; color: var(--red);
  font: 400 .76rem var(--mono); text-transform: uppercase; letter-spacing: .08em;
}
.tc-hero p {
  max-width: 520px; margin: 0 auto;
  color: var(--ink); font-size: .95rem; line-height: 1.75;
}

/* ---- Demo boxes ------------------------------------------------------ */

.tc-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 2.5rem 0 }
.tc-demo-box { padding: 1.5rem; background: var(--paper); border: 1px solid var(--rule) }
.tc-demo-box h3 { margin-bottom: .8rem; font-size: .9rem; color: var(--ink) }
.tc-demo-box p { margin: 0; font-size: .85rem; color: var(--dim); line-height: 1.6 }

.tc-demo-example {
  margin-top: 1rem; padding: .8rem;
  background: var(--paper); border: 1px solid var(--rule);
  font-size: .85rem; color: var(--ink);
}

/* The tooltip example needs room underneath for the tooltip it renders, or the
   tooltip overhangs the box border. */
.tc-demo-example.has-tip { padding-bottom: 3.2rem }

.tc-demo-example .tc-hl-tooltip {
  position: relative;
  padding: 0 3px; background: var(--tc-tint);
  border-bottom: 2px dotted var(--red); cursor: help;
}
.tc-demo-example .tc-hl-inline {
  padding: 1px 4px; background: var(--tc-tint);
  border: 1px solid var(--rule); font-weight: 500;
}

/* A depiction of the extension's own tooltip, not a tooltip belonging to this
   page. It is drawn to match what the extension actually renders — dark pill,
   light text, small radius — rather than to match Ink, because its job is to
   show the reader what they will see on their own pages.
 *
 * Shown always rather than on hover: the Inline Mode box beside it displays its
 * result outright, and a demo that only appears on hover shows nothing at a
 * glance, nothing in a screenshot, and nothing at all on a touchscreen. */
.tc-tip {
  position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  padding: 5px 10px; border-radius: 5px;
  background: #1C1C1A; color: #F5F5F2;
  font: 400 .78rem var(--mono); white-space: nowrap;
}
/* The little pointer up to the highlighted time. */
.tc-tip::before {
  content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -4px;
  border: 4px solid transparent; border-bottom-color: #1C1C1A;
}

/* ---- Features grid --------------------------------------------------- */

.tc-features { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule) }
.tc-feature { padding: 1.5rem; border-bottom: 1px solid var(--rule) }
.tc-feature:nth-child(odd) { border-right: 1px solid var(--rule) }
.tc-feature:nth-last-child(-n+2) { border-bottom: none }
.tc-feature h3 { margin-bottom: .5rem; font-size: .9rem }
.tc-feature p { margin: 0; color: var(--dim); font-size: .85rem; line-height: 1.6 }

/* ---- Feature tags ---------------------------------------------------- */

.tc-tags { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: 2.5rem 0 }
.tc-tag {
  padding: .4rem .9rem; border: 1px solid var(--rule);
  font: 400 .72rem var(--mono); color: var(--dim); white-space: nowrap;
}

/* ---- Install --------------------------------------------------------- */

.tc-install {
  margin: 2.5rem 0; padding: 2rem;
  background: var(--paper); border: 1px solid var(--rule);
}
.tc-install h3 { margin-bottom: 1rem }
.tc-install ol { margin: 0; padding-left: 1.2rem }
.tc-install ol li { margin-bottom: .3rem; font-size: .9rem; color: var(--ink); line-height: 1.8 }
.tc-install p { font-size: .9rem; color: var(--ink); line-height: 1.8 }
.tc-install code { font-size: .8rem }

/* ---- Source link ----------------------------------------------------- */

.tc-source { text-align: center; margin: 2rem 0 }
.tc-source a {
  display: inline-block; padding: .7rem 1.8rem;
  border: 1px solid var(--rule); color: var(--red);
  font: 400 .85rem var(--mono); text-decoration: none;
}
.tc-source a:hover { background: var(--tc-tint) }

/* ---- Privacy --------------------------------------------------------- */

.tc-privacy .tc-privacy-date { margin-bottom: 2rem; color: var(--dim); font: 400 .74rem var(--mono) }
.tc-privacy h3 { margin: 2rem 0 .5rem; font: 600 1rem var(--serif); color: var(--ink) }
.tc-privacy p { font-size: .98rem }

/* Closing note under the policy. */
.tc-summary { margin-top: 2rem; color: var(--dim); font-size: .85rem }

/* ---- Responsive ------------------------------------------------------ */

@media (max-width: 600px) {
  .tc-demo { grid-template-columns: 1fr }
  .tc-features { grid-template-columns: 1fr }
  .tc-feature:nth-child(odd) { border-right: none }
  .tc-feature:nth-last-child(2) { border-bottom: 1px solid var(--rule) }
}