/* Everything on the site that is not the home page: the install walkthroughs,
   support, the Pencil page, and the legal texts.

   Loaded after css/site.css, which holds the shell (paper, ink, vermilion, the
   masthead, the footer and the shared type) and whose `h2` rule is sized for a
   home-page section headline. Every heading below therefore states its own
   size, or it inherits a 46px one.

   The class names here are the ones the pages already carry, and three groups
   of them are written by JavaScript, not by hand: `.faq-*` by renderFAQ(),
   `.privacy-section*` by renderPrivacy()/renderTerms() and their two siblings,
   and `.os-card--detected` by the operating-system sniff. Renaming any of
   those three needs js/main.js changed in the same commit. */

/* ---------------------------------------------------------------------------
   Page shell
   --------------------------------------------------------------------------- */

/* Every page here is one column of prose, so the shell narrows with it: the
   masthead rule, the headline, the text and the footer sit on the same two
   vertical lines. `.wrap` is the home page's full-bleed grid; this file is
   loaded only where that is not wanted. */
.wrap,
.container {
  max-width: 940px;
}

.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 56px;
}

.page-hero {
  padding-top: 62px;
  padding-bottom: 34px;
}

.page-hero h1 {
  font-size: clamp(33px, 3.6vw, 50px);
  letter-spacing: -2.2px;
  line-height: 1.1;
  margin-top: 26px;
}

.page-hero h1 em {
  color: var(--red);
}

.page-lede {
  font-size: 14px;
  line-height: 1.85;
  color: #616863;
  margin-top: 20px;
  max-width: 62ch;
}

.page-content {
  padding-top: 14px;
  padding-bottom: 92px;
}

.page-content h2,
.page-content h3 {
  letter-spacing: -.4px;
}

.page-content p {
  line-height: 1.85;
}

/* Georgia italic is the display voice: a headline's last word, and the
   annotations around the illustration. Inside a sentence an <em> is a quoted
   UI label -- "click <em>Install</em>" -- and a second typeface there reads as
   a mistake. Italic in the page's own face instead. */
.page-content em {
  font-family: inherit;
  font-style: italic;
}

/* A file name or a command inside a sentence. It breaks rather than overflows:
   `tinypad-server-<version>.fedora.x86_64.rpm` is wider than a phone. */
.page-content code {
  font: 12px var(--mono);
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  padding: 1px 5px;
  overflow-wrap: anywhere;
}

/* A link inside a sentence. Anything that is already a control -- a card, a
   button, a back link -- carries its own treatment below. */
.page-content p a,
.page-content li a,
.install-note a,
.faq-answer__inner a,
.privacy-section__body a {
  color: var(--red);
  border-bottom: 1px solid #e0c3bd;
  padding-bottom: 1px;
}

.page-content p a:hover,
.page-content li a:hover,
.install-note a:hover,
.faq-answer__inner a:hover,
.privacy-section__body a:hover {
  border-bottom-color: var(--red);
}

/* A rule across the page, the way a manual separates two procedures. */
.section {
  border-top: 1px solid var(--rule);
  padding-block: 54px;
}

.section--alt {
  background: #e9ebe1;
  border-bottom: 1px solid #dce0d4;
}

.section__header {
  margin-bottom: 34px;
}

.section__header .eyebrow {
  margin-bottom: 14px;
}

.section__title {
  font-size: 26px;
  letter-spacing: -.8px;
  line-height: 1.2;
}

.section__description {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.85;
  margin-top: 9px;
}

/* ---------------------------------------------------------------------------
   Back links and buttons
   --------------------------------------------------------------------------- */

.install-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 4px;
  margin-bottom: 30px;
}

.install-back svg {
  width: 13px;
  height: 13px;
}

.install-back:hover {
  color: var(--red);
  border-bottom-color: var(--red);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 37px;
  padding: 15px 21px;
  font-size: 12px;
  transition: background .18s, transform .18s;
}

.btn--primary {
  background: var(--ink);
  color: var(--paper);
}

.btn--primary:hover {
  background: #3c4749;
  transform: translateY(-2px);
}

/* The link colour for page content is a more specific selector than
   .btn--primary, so a button placed inside a paragraph came out dark red on
   dark ink -- a contrast ratio of 2.5:1. A button keeps its own colour
   wherever it sits. */
.page-content p a.btn--primary,
.page-content li a.btn--primary {
  color: var(--paper);
}

/* A control carries its own treatment, so inline code inside one drops the
   pale block it wears in a sentence. Without this, a <code> in a dark button
   is light text on a light background. */
.btn code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
}

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

.install-method + .install-method {
  margin-top: 58px;
}

.install-method-title {
  font-size: 23px;
  letter-spacing: -.6px;
  line-height: 1.25;
  border-top: 1px solid var(--rule);
  padding-top: 26px;
}

.install-method__intro {
  font-size: 13px;
  color: #606b5c;
  line-height: 1.85;
  margin-top: 12px;
  margin-bottom: 34px;
}

.install-steps {
  display: flex;
  flex-direction: column;
}

/* The numbers run down a hairline, so a long procedure reads as one thread
   rather than as a stack of cards. The last step stops the line. */
.install-step {
  position: relative;
  padding-left: 58px;
  padding-bottom: 38px;
}

.install-step:before {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: 0;
  border-left: 1px dashed #c9cdc0;
}

.install-step:last-child {
  padding-bottom: 0;
}

.install-step:last-child:before {
  display: none;
}

.install-step__number {
  position: absolute;
  left: 0;
  top: 0;
  width: 31px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1px solid #c6cebd;
  font: 11px var(--mono);
  color: var(--red);
}

.install-step__title {
  font-size: 17px;
  letter-spacing: -.3px;
  line-height: 1.35;
  padding-top: 5px;
}

.install-step__desc {
  font-size: 13px;
  color: #5c635e;
  line-height: 1.85;
  margin-top: 9px;
}

/* What you type. Ink on paper is the page; this is the one place the page
   turns over, because a command is a thing you copy, not a thing you read. */
.install-code {
  margin-top: 16px;
  padding: 15px 18px;
  background: var(--ink);
  color: #e2e6dd;
  font: 12px/1.75 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  border-left: 2px solid var(--red);
}

.install-code + .install-code {
  margin-top: 8px;
}

/* An aside, labelled the way a manual labels one. The label is drawn by CSS so
   it does not have to be written into twenty pages of markup. */
.install-note {
  display: flex;
  gap: 13px;
  margin-top: 16px;
  padding: 14px 17px;
  background: #e9ebe1;
  border: 1px solid #dce0d4;
  font-size: 12px;
  color: #5c635e;
  line-height: 1.8;
}

.install-note:before {
  content: "NOTE";
  font: 9px var(--mono);
  letter-spacing: 1px;
  color: var(--red);
  padding-top: 4px;
  flex-shrink: 0;
}

.install-shot {
  margin-top: 18px;
  border: 1px solid var(--rule);
  background: var(--paper-deep);
  box-shadow: 0 18px 30px -22px rgba(28, 40, 37, .45);
}

/* ---------------------------------------------------------------------------
   Operating-system and distribution choosers
   --------------------------------------------------------------------------- */

.os-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.distro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}

.os-card,
.distro-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 18px;
  border: 1px solid #c6cebd;
  background: var(--paper-deep);
  text-align: center;
  transition: border-color .18s, color .18s, transform .18s;
}

.distro-card {
  padding: 20px 14px;
  gap: 10px;
}

.os-card:hover,
.distro-card:hover {
  border-color: var(--red);
  color: var(--red);
  transform: translateY(-2px);
}

.os-card__icon,
.distro-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
}

.os-card__icon svg,
.os-card__icon img {
  width: 42px;
  height: 42px;
}

.distro-card__icon svg,
.distro-card__icon img {
  width: 34px;
  height: 34px;
}

/* The three platform marks in icons/ are line drawings made for a dark page, so
   they are re-inked here exactly as the home page's download rows re-ink them.
   The distribution logos in assets/logos/ are NOT treated: several of them are a
   coloured disc with a white glyph cut out of it, and flattening one to ink
   turns the mark into a solid black circle. They keep their own colours. */
.os-card__icon img {
  filter: brightness(0);
  opacity: .62;
  transition: opacity .18s;
}

.os-card:hover .os-card__icon img,
.os-card:focus-visible .os-card__icon img,
.os-card--detected .os-card__icon img {
  opacity: 1;
}

.os-card__name,
.distro-card__name {
  font-size: 14px;
  font-weight: 500;
}

.os-card__badge {
  display: none;
  font: 9px var(--mono);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--red);
}

/* Written at run time by the sniff in support.html and install-linux.html. */
.os-card--detected {
  border-color: var(--red);
  background: var(--paper);
}

.os-card--detected .os-card__badge {
  display: block;
}

/* ---------------------------------------------------------------------------
   Support: the contact block and the questions
   --------------------------------------------------------------------------- */

.contact-card {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: 30px;
  margin-bottom: 58px;
}

.contact-card__desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.85;
}

.contact-card__email {
  display: inline-block;
  margin-top: 10px;
  font-size: 23px;
  letter-spacing: -.6px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
}

.contact-card__email:hover {
  color: var(--red);
  border-bottom-color: var(--red);
}

.section__title + .faq-list {
  margin-top: 26px;
}

/* Markup from renderFAQ() in js/main.js. The answer opens on a grid row rather
   than on a guessed max-height, so a long answer cannot be clipped. */
.faq-list {
  border-top: 1px solid var(--rule);
}

.faq-item {
  border-bottom: 1px solid var(--rule);
}

/* A <summary>, not a button, so a question opens with no script running. The
   two lines that hide the marker are the whole cost of that: Chrome and Firefox
   drop it for display:flex, Safari needs the pseudo-element. */
.faq-question {
  width: 100%;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 2px;
  background: none;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  transition: color .18s;
}

.faq-question:hover {
  color: var(--red);
}

.faq-question__chevron {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--muted);
  transition: transform .25s;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-item[open] .faq-question {
  color: var(--red);
}

.faq-item[open] .faq-question__chevron {
  transform: rotate(180deg);
  color: var(--red);
}

.faq-answer__inner {
  font-size: 13px;
  color: #5c635e;
  line-height: 1.85;
  padding-bottom: 22px;
}

/* ---------------------------------------------------------------------------
   Legal texts: privacy, terms, licenses
   --------------------------------------------------------------------------- */

/* Markup written into privacy.html, privacy-server.html, privacy-app.html,
   terms.html and licenses.html. It used to be built at run time from
   js/i18n.js, which meant a reader with no JavaScript got a heading and
   nothing else on four legal pages. */
.privacy-section + .privacy-section {
  margin-top: 40px;
  border-top: 1px solid var(--rule);
  padding-top: 34px;
}

.privacy-section__title {
  font-size: 19px;
  letter-spacing: -.4px;
  line-height: 1.3;
}

/* pre-line, because the licenses are reproduced verbatim and their line breaks
   are part of the text. */
.privacy-section__body {
  font-size: 13px;
  color: #5c635e;
  line-height: 1.85;
  margin-top: 11px;
  white-space: pre-line;
}

/* ---------------------------------------------------------------------------
   Responsive. The gutters follow css/site-responsive.css so the masthead rule,
   the page text and the footer stay on the same two vertical lines.
   --------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .container {
    padding-inline: 38px;
  }
}

@media (max-width: 1000px) {
  .page-hero {
    padding-top: 48px;
  }
}

@media (max-width: 650px) {
  .container {
    padding-inline: 23px;
  }

  .page-hero {
    padding-top: 38px;
    padding-bottom: 26px;
  }

  .page-hero h1 {
    margin-top: 20px;
    letter-spacing: -1.6px;
  }

  .page-lede {
    font-size: 13px;
    margin-top: 16px;
  }

  .page-content {
    padding-bottom: 62px;
  }

  .install-back {
    margin-bottom: 28px;
  }

  .install-step {
    padding-left: 44px;
    padding-bottom: 32px;
  }

  .install-step:before {
    left: 13px;
    top: 30px;
  }

  .install-step__number {
    width: 27px;
    height: 27px;
    font-size: 10px;
  }

  .install-step__title {
    font-size: 16px;
    padding-top: 3px;
  }

  .install-code {
    padding: 13px 15px;
    font-size: 11px;
  }

  .install-method + .install-method {
    margin-top: 44px;
  }

  .install-method-title {
    font-size: 20px;
  }

  .os-grid {
    grid-template-columns: 1fr;
  }

  .distro-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .section {
    padding-block: 40px;
  }

  .contact-card {
    margin-bottom: 44px;
  }

  .contact-card__email {
    font-size: 19px;
  }
}

@media (max-width: 360px) {
  .container {
    padding-inline: 18px;
  }

  .distro-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .os-card,
  .distro-card,
  .btn,
  .faq-answer,
  .faq-question__chevron {
    transition: none;
  }

  .os-card:hover,
  .distro-card:hover,
  .btn--primary:hover {
    transform: none;
  }
}