/* Mobile density and WebView typography refinements. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  line-height: 1.68;
  word-break: normal;
  overflow-wrap: break-word;
}

.setting-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 17px 0 6px;
}

.setting-chips span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 3px 10px;
  color: var(--green-dark);
  background: var(--soft);
  border: 1px solid #d6eadf;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 550;
  line-height: 1.35;
  white-space: nowrap;
}

.setting-chips .icon {
  width: 14px;
  height: 14px;
}

.path p > span {
  white-space: nowrap;
}

.expected > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
}

.expected strong {
  white-space: nowrap;
}

@media (max-width: 520px) {
  .top-inner,
  main,
  footer {
    margin-left: 14px;
    margin-right: 14px;
  }

  .top-inner {
    padding: 13px 0;
  }

  main {
    padding-top: 21px;
  }

  .wordmark {
    font-size: .9375rem;
  }

  .top-link,
  .top-tag {
    font-size: .75rem;
  }

  .mark {
    width: 29px;
    height: 29px;
  }

  .intro {
    margin-bottom: 23px;
  }

  .intro h1 {
    font-size: 1.95rem;
    line-height: 1.25;
  }

  .intro-flow {
    margin-top: 17px;
    gap: 10px;
  }

  .intro-flow > div {
    white-space: nowrap;
  }

  .brand {
    grid-template-columns: 72px minmax(0, 1fr) 18px;
    gap: 10px;
    padding: 16px 14px;
  }

  .brand-en {
    font-size: 1rem;
  }

  .brand-honor .brand-en {
    font-size: .9375rem;
  }

  .brand h3 {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    align-items: baseline;
    min-width: 0;
  }

  .brand h3 > span {
    display: inline;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brand p {
    margin-top: 2px;
    line-height: 1.5;
  }

  .help,
  .before {
    padding: 15px 16px;
  }

  .breadcrumbs {
    margin-bottom: 18px;
  }

  .detail-heading h1 {
    font-size: 1.62rem;
    line-height: 1.28;
  }

  .detail-heading h1 span {
    display: inline;
    margin-left: .25em;
  }

  .detail-heading .lead {
    margin-top: 8px;
  }

  .notice {
    margin: 16px 0 18px;
    padding: 11px 12px;
    line-height: 1.6;
  }

  .side {
    margin-bottom: 16px;
  }

  .toc {
    gap: 5px;
  }

  .toc a {
    padding: 7px 3px;
  }

  .step {
    margin-bottom: 14px;
    border-radius: 12px;
  }

  .step-header {
    gap: 10px;
    padding: 13px 14px;
  }

  .step-header > div {
    min-width: 0;
  }

  .number {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  .number .icon {
    width: 18px;
    height: 18px;
  }

  .step-kicker {
    display: none;
  }

  .step-header h2 {
    font-size: 1rem;
    line-height: 1.35;
  }

  .step-counter {
    font-size: .6875rem;
  }

  .step-content {
    padding: 14px;
  }

  .step-desc {
    font-size: .8125rem;
    line-height: 1.55;
  }

  .path {
    margin: 12px 0 14px;
    padding: 10px 11px;
  }

  .path-caption {
    margin-bottom: 3px;
  }

  .path p {
    gap: 2px 7px;
    font-size: .8125rem;
    line-height: 1.55;
  }

  .instructions {
    margin-top: 13px;
  }

  .instructions li {
    gap: 9px;
    margin: 9px 0;
    font-size: 1rem;
    line-height: 1.62;
  }

  .instructions li::before {
    align-self: flex-start;
    margin-top: .22em;
  }

  .setting-chips {
    gap: 6px;
    margin: 13px 0 4px;
  }

  .setting-chips span {
    min-height: 27px;
    padding: 2px 8px;
    font-size: .75rem;
  }

  .expected {
    margin-top: 15px;
    padding: 10px 11px;
  }

  .expected > div {
    gap: 8px;
    padding: 7px 0;
    font-size: .8125rem;
  }

  .tip,
  .inline-help {
    margin-top: 14px;
  }

  .verify,
  .troubleshoot {
    padding: 15px 14px;
  }

  .verify {
    margin-top: 18px;
  }

  .troubleshoot {
    margin-top: 20px;
  }

  .troubleshoot details {
    padding: 14px 0;
  }

  footer {
    margin-top: 28px;
  }
}

@media (max-width: 350px) {
  .brand {
    grid-template-columns: minmax(0, 1fr) 18px;
  }

  .brand-top,
  .brand-copy {
    grid-column: 1;
  }

  .brand-top {
    margin-bottom: 2px;
  }

  .entry {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .step-counter {
    display: none;
  }
}

/* Stronger reading hierarchy for the guide cards. */
:root {
  --ink: #10271f;
  --muted: #4f625a;
  --line: #d5e1db;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.home-intro {
  margin: 0 0 32px;
  padding: 18px 22px;
  background: #eef6f2;
  border: 1px solid #d9e7df;
  border-radius: 14px;
}

.home-intro .lead {
  margin-top: 0;
  color: #2d493f;
  font-weight: 500;
  line-height: 1.72;
}

.step-header h2 {
  color: #102b22;
}

.step-content {
  color: #243c34;
}

.step-desc {
  color: #4c6259;
}

.path {
  background: #eaf6f0;
  border-color: #d5e9de;
}

.path-caption {
  color: #536d61;
  font-weight: 550;
}

.path p {
  color: #105b43;
}

.instructions li {
  align-items: flex-start;
  margin: 0;
  padding: 14px 0;
  color: #203a31;
  line-height: 1.78;
}

.instructions li + li {
  border-top: 1px solid #e8eeea;
}

.instructions li::before {
  margin-top: .35em;
  color: #1e6b51;
  background: #edf7f1;
  border-color: #cfe5d9;
}

.inline-help {
  color: #465e54;
}

.inline-help summary,
.troubleshoot summary {
  color: #234f3e;
  font-weight: 600;
}

.tip {
  color: #4b6158;
  line-height: 1.7;
}

.expected > div,
.checklist label {
  color: #263f36;
}

.verify p,
.troubleshoot p {
  color: #425b50;
  line-height: 1.75;
}

@media (max-width: 520px) {
  .home-intro {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding: 14px;
  }

  .home-intro .intro-copy {
    min-width: 0;
  }

  .home-intro .lead {
    font-size: .875rem;
    line-height: 1.62;
  }

  .home-intro .intro-flow {
    display: none;
  }

  .instructions li {
    padding: 12px 0;
    line-height: 1.72;
  }
}

.step-kicker {
  display: block;
  color: #087052;
  font-size: .8125rem;
  font-weight: 650;
  letter-spacing: .04em;
}

.step-counter {
  min-width: 2.25rem;
  color: #203f34;
  font-size: .9375rem;
  font-weight: 750;
  letter-spacing: .01em;
  text-align: right;
}

@media (max-width: 520px) {
  .step-kicker {
    display: block;
    margin-bottom: 1px;
    font-size: .75rem;
  }

  .step-counter {
    display: inline;
    font-size: .875rem;
  }
}

/* Give guide copy a more comfortable reading rhythm on phones. */
@media (max-width: 520px) {
  #step-1,
  #step-2 {
    margin-bottom: 56px;
  }

  .detail-heading .lead,
  .notice,
  .step-desc {
    font-size: 1rem;
    line-height: 1.72;
  }

  .path p {
    font-size: .9375rem;
    line-height: 1.72;
  }

  .instructions {
    margin-top: 16px;
  }

  .instructions li {
    padding: 16px 0;
    font-size: 1.0625rem;
    line-height: 1.82;
  }

  .setting-chips span {
    font-size: .8125rem;
  }

  .expected {
    margin-top: 20px;
  }

  .expected > div {
    padding: 10px 0;
    font-size: .9375rem;
    line-height: 1.65;
  }

  .tip,
  .inline-help {
    margin-top: 20px;
    font-size: 1rem;
    line-height: 1.78;
  }

  .inline-help {
    padding-top: 18px;
  }

  .inline-help p + p,
  .troubleshoot p + p {
    margin-top: 14px;
  }

  .verify {
    margin-top: 24px;
  }

  .verify p,
  .troubleshoot summary,
  .troubleshoot p {
    font-size: 1rem;
  }

  .checklist {
    gap: 10px;
  }

  .checklist label {
    padding: 14px 12px;
    font-size: 1rem;
    line-height: 1.7;
  }

  .troubleshoot details {
    padding: 18px 0;
  }
}