/* IZUNAWORKS help site (help.izunaworks.com), 2026-09-25.
 *
 * THE LAYOUT IS "05 TOPICS", picked by the owner from five patterns on a design
 * canvas the same day (the first version -- a HELP title over a plain list -- was
 * "too basic"): a centred question with a search box, every product's pages as
 * white tiles each carrying an icon, and an article as one centred reading column
 * that ends in tiles for the rest of its product.
 *
 * Loaded after site.css and routes.css, which still give a help page its header,
 * footer, route shell (.page), crumb, reading type (.doc, 680px at 15.5/31 -- see the
 * measure note in routes.css; the article column is that width on purpose) and 404
 * (.nf). Everything here uses the site's own tokens. Hover lives in the type, as
 * everywhere on the site (owner, 2026-09-22): a tile's title turns red, nothing moves.
 * No rules between list entries; the one rule is the divider before the Japanese text,
 * which is a change of language rather than a list. */

/* The header's HELP is the section you are in. */
.help-here { color: var(--red); }

/* ---------- help home ---------- */

.help-home {
  align-items: center;
  gap: 0;
  padding-top: 96px;
  padding-bottom: 120px;
}

.help-mast {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

.help-mast__label {
  font-family: var(--en);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.18em;
  color: var(--red);
}

.help-mast__title {
  margin-top: 18px;
  font-family: var(--en);
  font-weight: 700;
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.help-mast__sub {
  margin-top: 16px;
  font-family: var(--jp);
  font-size: 17px;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.66);
}

/* ----- search ----- */

.help-search { width: 720px; max-width: 100%; margin-top: 44px; }
.help-search[hidden] { display: none; }

/* Read by screen readers, not drawn: the box's icon and placeholder say what it is. */
.help-search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.help-search__box {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 64px;
  padding: 0 24px;
  background: var(--surface);
  border: 2px solid var(--ink);
  transition: border-color 160ms ease;
}

.help-search__box:focus-within { border-color: var(--red); }

.help-search__icon { width: 22px; height: 22px; flex: none; }

.help-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--en);
  font-size: 18px;
  color: var(--ink);
}

.help-search__input::placeholder { color: rgba(0, 0, 0, 0.45); }

/* ----- products and tiles ----- */

.help-product {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 1240px;
  max-width: 100%;
  margin-top: 80px;
}

.help-product[hidden] { display: none; }

.help-product + .help-product { margin-top: 64px; }

.help-product__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 24px;
}

.help-product__name {
  font-family: var(--en);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.help-product__tagline {
  font-family: var(--en);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.6);
}

.help-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.help-tiles__item[hidden] { display: none; }

.help-tile {
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: 100%;
  min-height: 230px;
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid #e3e3e3;
  color: var(--ink);
}

.help-tile__icon { width: 40px; height: 40px; flex: none; }

.help-tile__title {
  font-family: var(--en);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  transition: color 160ms ease;
}

/* The description is written for search engines and can run long; a tile shows
   its first four lines. */
.help-tile__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  font-family: var(--en);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.64);
}

.help-tile:hover .help-tile__title { color: var(--red); }

.help-empty { margin-top: 64px; text-align: center; }
.help-empty[hidden] { display: none; }

@media (max-width: 680px) {
  .help-home { padding-top: 48px; padding-bottom: 72px; }
  .help-mast__title { font-size: 34px; line-height: 1.15; }
  .help-mast__sub { font-size: 15px; }
  .help-search { margin-top: 28px; }
  .help-search__box { height: 56px; padding: 0 16px; }
  .help-search__input { font-size: 16px; }
  .help-product { margin-top: 48px; gap: 16px; }
  .help-product__name { font-size: 24px; }
  .help-tiles { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* One tile per row on a phone: the icon beside the words, not above them. */
  .help-tile {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 4px;
    align-items: start;
    min-height: 0;
    padding: 18px 18px;
  }
  .help-tile__icon { grid-row: 1 / span 2; width: 32px; height: 32px; }
  .help-tile__title { font-size: 17px; }
  .help-tile__desc { -webkit-line-clamp: 2; font-size: 13.5px; }
}

/* ---------- one help page ---------- */

.help-page { align-items: center; padding-bottom: 120px; }

.help-article {
  display: flex;
  flex-direction: column;
  width: 680px;
  max-width: 100%;
}

.help-article .crumb { margin-bottom: 40px; }

.help-kicker {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--en);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.6);
}

.help-kicker__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex: none;
  background: var(--surface);
  border: 1px solid #e3e3e3;
}

.help-kicker__img { width: 34px; height: 34px; }

.help-title {
  margin-top: 24px;
  font-family: var(--en);
  font-weight: 700;
  font-size: 50px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.help-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 28px;
}

/* English / 日本語: English is where the page starts; 日本語 jumps to the Japanese
   half. Only drawn when the page has one. */
.help-langs {
  display: flex;
  padding: 4px;
  border-radius: 999px;
  background: #ececec;
}

.help-langs[hidden] { display: none; }

.help-langs__opt {
  padding: 7px 18px;
  border-radius: 999px;
  font-family: var(--en);
  font-weight: 700;
  font-size: 13px;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.72);
  transition: color 160ms ease;
}

.help-langs__opt[lang='ja'] { font-family: var(--jp); }
.help-langs__opt--on { background: var(--surface); color: var(--ink); }
.help-langs__opt:hover { color: var(--red); }

.help-updated {
  margin-left: auto;
  font-family: var(--en);
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.5);
}

/* A help page is English first; its English text is set in Satoshi (with Zen Kaku
   behind it for any Japanese inside), not in the Japanese stack .doc defaults to. */
.help-doc[lang='en'],
.help-doc[lang='en'] h2,
.help-doc[lang='en'] h3,
.help-doc[lang='en'] h4,
.help-doc[lang='en'] h5,
.help-doc[lang='en'] h6 { font-family: var(--en); }

.help-doc { margin-top: 52px; scroll-margin-top: 24px; }
.help-doc[hidden] { display: none; }

.help-ja {
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 24px;
}

.help-ja[hidden] { display: none; }
.help-ja .help-doc { margin-top: 20px; }

.help-ja__label {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.5);
}

/* ----- the rest of the product ----- */

.help-more { display: flex; flex-direction: column; gap: 18px; margin-top: 88px; }

.help-more__title {
  font-family: var(--en);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink);
}

.help-more__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.help-more__item {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid #e3e3e3;
  font-family: var(--en);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink);
  transition: color 160ms ease;
}

.help-more__item:hover { color: var(--red); }
.help-more__icon { width: 26px; height: 26px; flex: none; }

.help-back { margin-top: 48px; }

/* What a browser without JavaScript sees in place of the painted text. */
.help-raw {
  margin: 0;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 680px) {
  .help-page { padding-bottom: 72px; }
  .help-article .crumb { margin-bottom: 28px; }
  .help-kicker__icon { width: 52px; height: 52px; }
  .help-kicker__img { width: 28px; height: 28px; }
  .help-title { font-size: 32px; line-height: 1.15; }
  .help-doc { margin-top: 36px; }
  .help-ja { margin-top: 56px; padding-top: 32px; }
  .help-more { margin-top: 64px; }
  .help-more__list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* ---------- the console's draft preview ---------- */

.help-preview {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 10px var(--shell-pad);
  background: var(--ink);
  color: var(--surface);
  font-family: var(--jp);
  font-size: 13px;
  line-height: 20px;
}

.help-preview strong {
  font-family: var(--en);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--red);
}

.help-preview__state { opacity: 0.7; }

/* Chrome, not copy -- the site's selection rule (see site.css). */
.help-mast__label,
.help-tile__icon,
.help-kicker,
.help-langs,
.help-updated,
.help-ja__label,
.help-more__icon,
.help-preview {
  -webkit-user-select: none;
  user-select: none;
}