/* The Help Center (app/help_center.py, HC1 "Bento library"): search, a bento of sections with the dock's own module
   tiles, then the articles. Works on the public shell and inside the app. */
.hc { width: 100%; max-width: 1080px; margin: 0 auto; display: grid; gap: 28px; }
.hc a:not(.btn) { color: inherit; text-decoration: none; }
/* the dock's plain sections (Approvals, Setup) are dark grey tiles there too */
.hc .mod-tile.tone-plain { background: linear-gradient(160deg, #6b6b78, #2a2a33); color: #fff; }

/* search head */
.hc-head { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 18px 0 4px; position: relative; }
.hc-kicker { font: 600 .74rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.hc-head h1 { margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
.hc-head > p { margin: 0; color: var(--text-2); max-width: 54ch; }
.hc-search { margin-top: 10px; width: min(680px, 100%); display: flex; align-items: center; gap: 12px; padding: 0 20px; height: 60px; border-radius: 999px;
  background: var(--surface-solid); border: 1px solid var(--line-strong); box-shadow: var(--shadow); color: var(--text-3); cursor: text; }
.hc-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow); }
.hc-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: 500 1.02rem var(--font-body); color: var(--text); outline: none; padding: 0; height: 100%; box-shadow: none; }
.hc-results { list-style: none; margin: 0; padding: 8px; width: min(680px, 100%); display: grid; gap: 2px; text-align: left;
  background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: 22px; box-shadow: var(--shadow-lg); }
.hc-results a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; }
.hc-results a:hover, .hc-results a:focus-visible { background: var(--accent-soft); }
.hc-results span { font-size: .8rem; color: var(--text-3); white-space: nowrap; }
.hc-none { margin: 0; color: var(--text-3); font-size: .92rem; }

/* the bento: Start here (2 x 2) and one cell per section, four across */
.hc-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; }
.hc-cell { display: grid; align-content: space-between; gap: 18px; min-height: 132px; padding: 18px; border-radius: 24px; background: var(--surface-solid);
  border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .18s ease, border-color .18s ease; }
.hc-cell:hover, .hc-cell:focus-visible { transform: translateY(-3px); border-color: var(--line-strong); }
.hc-cell b { font: 700 1.05rem/1.15 var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; hyphens: auto; }
.hc-cell span:last-child { font: 500 .78rem var(--font-mono); color: var(--text-3); }
.hc-cell .mod-tile + b { margin-top: -6px; }
.hc-start { grid-column: span 2; grid-row: span 2; display: grid; align-content: space-between; gap: 18px; padding: 26px; border-radius: 28px;
  background: var(--tone-ink); color: #fff; box-shadow: 0 30px 60px -34px rgba(10, 10, 40, .8); }
.hc-start h2 { margin: 12px 0 4px; font: 800 1.9rem/1 var(--font-display); letter-spacing: -.035em; color: #fff; }
.hc-start p { margin: 0; color: rgba(255, 255, 255, .72); }
.hc-start-mark { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--tone-violet); color: #fff; }
.hc-start ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hc-start a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .08); color: #fff; font-weight: 600; }
.hc-start a:hover, .hc-start a:focus-visible { background: rgba(255, 255, 255, .15); }
.hc-start em { margin-left: auto; font: 500 .74rem var(--font-mono); font-style: normal; opacity: .6; white-space: nowrap; }
.hc-n { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 700 .8rem var(--font-body); background: rgba(255, 255, 255, .16); }

/* every section's articles */
.hc-sections { columns: 3; column-gap: 14px; }
.hc-sec { break-inside: avoid; margin: 0 0 14px; padding: 20px; border-radius: 24px; background: var(--surface-solid); border: 1px solid var(--line); scroll-margin-top: 90px; display: grid; gap: 12px; align-content: start; }
.hc-sec:target { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.hc-sec header { display: flex; gap: 12px; align-items: center; }
.hc-sec h2 { margin: 0; font: 700 1.05rem var(--font-display); letter-spacing: -.02em; }
.hc-sec header p { margin: 2px 0 0; font-size: .84rem; color: var(--text-3); }
.hc-sec ul { list-style: none; margin: 0; padding: 0; display: grid; }
.hc-sec li + li { border-top: 1px solid var(--line); }
.hc-sec li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px; font-size: .94rem; font-weight: 500; }
.hc-sec li a svg { flex: none; color: var(--text-3); transition: transform .15s ease; }
.hc-sec li a:hover { color: var(--accent); } .hc-sec li a:hover svg { transform: translateX(3px); color: var(--accent); }

.hc-more { display: flex; align-items: center; gap: 18px; justify-content: space-between; padding: 22px 24px; border-radius: 24px; background: var(--surface-solid); border: 1px solid var(--line-strong); }
.hc-more p { margin: 2px 0 0; color: var(--text-2); font-size: .94rem; }

/* one article */
.hc-art { max-width: 820px; gap: 24px; }
.hc-crumbs { font-size: .86rem; color: var(--text-3); } .hc-crumbs a:hover { color: var(--accent); }
.hc-art-head { display: flex; gap: 18px; align-items: flex-start; }
.hc-art-head h1 { margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }
.hc-lead { margin: 0 0 8px; font-size: 1.1rem; line-height: 1.6; color: var(--text-2); max-width: 62ch; }
.hc-meta { font: 500 .78rem var(--font-mono); color: var(--text-3); }
.hc-shot { margin: 0; }
.hc-shot img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); }
.hc-steps h2, .hc-related h2 { margin: 0 0 14px; font: 750 1.35rem var(--font-display); letter-spacing: -.025em; }
.hc-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hc-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: var(--surface-solid); border: 1px solid var(--line); }
.hc-steps li p { margin: 2px 0 0; line-height: 1.55; }
.hc-steps .hc-n { background: var(--text); color: var(--surface-solid); }
.hc-tip { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 14px 16px; border-radius: 16px; background: var(--accent-soft); color: var(--text); font-size: .95rem; }
.hc-tip svg { flex: none; margin-top: 2px; color: var(--accent); }
.hc-do { display: flex; align-items: center; gap: 18px; justify-content: space-between; padding: 22px 24px; border-radius: 26px; background: var(--tone-blue); color: #fff; }
.hc-do b { font: 700 1.15rem var(--font-display); } .hc-do p { margin: 4px 0 0; color: rgba(255, 255, 255, .85); font-size: .94rem; max-width: 48ch; }
.hc-do-btns { display: flex; gap: 10px; flex-wrap: wrap; flex: none; }
.hc .hc-do .btn { background: #fff; color: #1e2bb8; border-color: transparent; display: inline-flex; align-items: center; gap: 8px; }
.hc .hc-do .btn.secondary { background: rgba(255, 255, 255, .14); color: #fff; }
.hc-related > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hc-related a { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--surface-solid); border: 1px solid var(--line); font-weight: 600; font-size: .92rem; line-height: 1.3; }
.hc-related a:hover { border-color: var(--line-strong); transform: translateY(-2px); }

@media (max-width: 900px) {
  .hc-sections { columns: 2; }
  .hc-related > div { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hc-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hc-start { grid-row: auto; padding: 20px; }
  .hc-cell { min-height: 112px; padding: 14px; border-radius: 20px; }
  .hc-sections { columns: 1; }
  .hc-bento { grid-auto-rows: auto; }
  .hc-more, .hc-do { flex-direction: column; align-items: stretch; }
  .hc-do-btns .btn { flex: 1; justify-content: center; }
  .hc-art-head { flex-direction: column; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .hc-cell, .hc-related a, .hc-sec li a svg { transition: none; } }