/* ==========================================================================
   Writing samples: article pages only

   Loaded after styles.css and /work/poppycal/theme.css by the pages under
   /writing/. The theme supplies the page, type and accent tokens; this sheet
   only adds the parts a help article needs that a case study doesn't: steps,
   tables, callouts and screenshot placeholders. Text colours come only from
   tokens theme.css has already audited for contrast on cream.
   ========================================================================== */

.pc .art-hero { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.pc .art-hero .hero-id { margin-bottom: clamp(2rem, 6vw, 3.5rem); }

.pc .art-h1 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  max-width: 22ch;
  margin: 0 0 1rem;
}

.pc .art-note { color: var(--bone-dim); max-width: 62ch; }

.pc .art {
  padding-top: clamp(2rem, 5vw, 3rem);
  padding-bottom: clamp(4rem, 9vw, 7rem);
  border-top: 1px solid var(--rule);
}
.pc .art .narrow > * + * { margin-top: 1.05em; }

/* Child selectors so these outrank the sibling spacing rule above. */
.pc .art .narrow > h2 {
  font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem);
  line-height: 1.2;
  margin: 2.6rem 0 .9rem;
}
.pc .art .narrow > h3 {
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 1.8rem 0 .6rem;
}
.pc .art ul:not([class]) { padding-left: 1.2rem; }
.pc .art ul:not([class]) li + li { margin-top: .4rem; }

/* Links inside an article have to look like links. The theme's link-plain is
   type-coloured with a sage underline that nearly vanishes on cream, which is
   right for a case study and wrong for a help article. Orange-700 is 4.85:1 on
   cream and above 4.8:1 on every callout tint used here. */
.pc .art .link-plain { color: var(--amber); border-bottom-color: currentColor; }
.pc .art .link-plain:hover { color: var(--amber-soft); }

/* Inline UI labels: the words on a button or a field, exactly as the app
   prints them. Bold, the way the in-app help center marks them. */
.pc .ui { font-weight: 700; color: var(--bone); }

.pc .art-before,
.pc .art-callout {
  background: var(--pc-sage-tint);
  border: 1px solid var(--pc-sage-edge);
  border-radius: var(--pc-r);
  padding: 1.1rem 1.3rem;
}
.pc .art .art-before h2 { margin-top: 0; font-size: 1.15rem; }
.pc .art-callout.warn {
  background: #FFF7ED;            /* orange-50 */
  border-color: #FED7AA;          /* orange-200 */
}

.pc .art-steps { counter-reset: step; list-style: none; padding: 0; }
.pc .art-steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: .7rem;
}
.pc .art-steps > li + li { margin-top: .8rem; }
.pc .art-steps > li::before {
  content: counter(step) ".";
  font-family: var(--serif);
  font-weight: 800;
  color: var(--amber);
  text-align: right;
}

/* Tables scroll inside their own box on a phone, so the page never does. */
.pc .art-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pc .art-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  background: var(--ink-2);
  border: 1px solid var(--rule);
}
.pc .art-table th,
.pc .art-table td {
  text-align: left;
  vertical-align: top;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--rule);
}
.pc .art-table th { background: var(--pc-sage-tint); font-weight: 700; color: var(--bone); }
.pc .art-table tr:last-child td { border-bottom: 0; }
/* Three columns of sentences are unreadable squeezed into a phone, so a wide
   table keeps its width and scrolls inside its wrapper instead. */
.pc .art-table.wide { min-width: 34rem; }
@media (max-width: 480px) {
  .pc .art-table th, .pc .art-table td { padding: .6rem .65rem; }
}

/* Screenshots. Exported at twice their display width so UI text stays sharp
   on a retina screen. A dialog is narrow, so it gets a narrow frame instead of
   being blown up to the column; a full-width screen gets to break out of the
   column, because at 668px its text would be too small to read. */
.pc .art-fig img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--pc-shadow-sm);
}
.pc .art-fig figcaption {
  margin-top: .6rem;
  font-size: .85rem;
  color: var(--bone-faint);
}
.pc .art .narrow > .art-fig { margin-block: 1.8rem; }
/* Dialogs are cropped to their own edges, so the frame here is the dialog's
   own rounded corner rather than a border round a slice of dimmed page. */
.pc .art .narrow > .art-fig.dialog { max-width: 400px; }
.pc .art-fig.dialog img { border: 0; border-radius: 26px; box-shadow: var(--pc-shadow-lg); }
.pc .art .narrow > .art-fig.wide { width: min(1100px, calc(100vw - 2 * var(--gut))); max-width: none; }

.pc .art-related { list-style: none; padding: 0; }
.pc .art-related li + li { margin-top: .5rem; }