/* guide.css - the look of the figures of the guide to Unicode, on top
 * of ../../engine.css: the fields and the big chips, the code pages, the
 * glyph cards, normalization, the direction of text, look-alike letters,
 * case and order, and the inspector. The fonts of the glyph cards are in
 * fonts.css.
 */

/* ==========================================================================
   Unicode
   ========================================================================== */
/* campos de texto: fonte proporcional, com as do sistema para outras escritas */
.field input { font-family: var(--sans), "Segoe UI", "Noto Sans", system-ui; font-size: 1.1rem; }
.figure > .hero-in { max-width: 26rem; margin-top: 0.4rem; }
.figure > .sizes-in { max-width: 30rem; margin-top: 0.5rem; margin-bottom: 0.8rem; }
/* controles abaixo das figuras */
.figure > .fig-ctl { max-width: 38rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 1.2rem; margin-block: 0.6rem 0; }
.figure > .fig-ctl.rows { display: block; max-width: 34rem; margin-bottom: 0.6rem; }
.fig-ctl .field input { width: 9.5rem; }
.chip.big {
  font-family: var(--sans);
  font-size: 1.2rem; line-height: 1.25; min-width: 2.75rem; padding: 0.3rem 0.65rem; border-radius: 10px; text-align: center;
}
.ctl-row { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 0.55rem; }
.ctl-tag { flex: none; width: 3.2rem; padding-top: 0.6rem; font-size: 0.85rem; color: var(--muted); text-align: right; }
.fig-ctl.rows .btn-row { justify-content: center; margin: 0.3rem 0 0; }
@media (max-width: 480px) {
  .ctl-row { flex-direction: column; gap: 0.3rem; }
  .ctl-tag { width: auto; padding: 0; text-align: left; }
}
/* legenda interativa do espaço de códigos */
.legend button.lg {
  font: inherit; font-size: 0.9rem; color: var(--ink); background: transparent; border: 1px solid transparent;
  border-radius: 999px; padding: 0.22rem 0.6rem 0.22rem 0.5rem; cursor: pointer;
}
.legend button.lg:hover { background: var(--card2); }
.legend button.lg[aria-pressed="true"] { background: var(--card); border-color: var(--muted); color: var(--head); font-weight: 500; }
.figure > .legend { max-width: 46rem; gap: 0.15rem 0.3rem; }
/* tabelas de 8 bits */
.dec-step { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.8rem; margin-top: 1rem; }
.dec-lbl { font-size: 0.9rem; color: var(--muted); min-width: 6.4rem; }
.dec-bytes { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.7rem; padding: 0.55rem; background: var(--card2); border-radius: 10px; }
.dec-grp {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.05rem; min-width: 2.1rem; padding: 0.2rem 0.3rem 0.25rem;
  border-radius: 7px; background: var(--card); border: 1px solid var(--line);
}
.dec-grp.multi { border-color: color-mix(in srgb, var(--c-orange) 60%, var(--line)); }
.dec-grp.lost { border-color: var(--bad); border-style: dashed; }
.dec-ch { font-size: 1.1rem; line-height: 1.3; color: var(--head); }
.dec-hex { display: flex; gap: 0.2rem; font-family: var(--mono); font-size: 0.76rem; }
.dec-hex .hx { color: var(--muted); padding: 0; }
.dec-hex .hx.hi { color: var(--c-orange); font-weight: 600; }
.dec-out {
  margin-top: 0.7rem; min-height: 2.8rem; padding: 0.35rem 0.2rem; font-size: 1.65rem; line-height: 1.45; color: var(--head);
  overflow-wrap: anywhere;
}
.dec-out mark { background: color-mix(in srgb, var(--s-orange) 22%, transparent); color: inherit; border-radius: 4px; padding: 0 1px; }
.dec-out mark.bad { background: color-mix(in srgb, var(--s-red) 26%, transparent); }
#decoder .note { margin-top: 0.4rem; min-height: 3em; }
@media (max-width: 640px) { .dec-out { font-size: 1.35rem; } .dec-lbl { min-width: 0; width: 100%; } }
/* caracteres e glifos */
.figure > .gcards { max-width: 54rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin-block: 1.4rem 0.6rem; }
.gcard { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 0.9rem 0.8rem 0.75rem; display: flex; flex-direction: column; }
.gsamples { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.25rem; }
.gs { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-width: 0; }
.gglyph { font-size: 3.1rem; line-height: 1.3; color: var(--head); font-weight: 400; }
.glbl { font-size: 0.74rem; color: var(--muted); text-align: center; line-height: 1.2; }
.gcard figcaption { margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.1rem; }
.gsamples + figcaption { margin-top: 0.7rem; }
.gcard figcaption b { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; color: var(--head); letter-spacing: 0.01em; }
.gcard figcaption span { font-size: 0.9rem; color: var(--ink); line-height: 1.35; }
.f-serif { font-family: "Unicode Guide Serif", Georgia, "Times New Roman", serif; }
.f-sans { font-family: var(--sans); }
.f-mono { font-family: var(--mono); }
.f-hand { font-family: "Unicode Guide Hand", "Segoe Script", "Bradley Hand", cursive; font-weight: 500; }
.f-arab { font-family: "Geeza Pro", "Segoe UI", "Noto Naskh Arabic", "Noto Sans Arabic", Tahoma, sans-serif; }
.f-sc { font-family: "Unicode Guide SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", sans-serif; }
.f-jp { font-family: "Unicode Guide JP", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Source Han Sans JP", sans-serif; }
@media (max-width: 760px) { .figure > .gcards { grid-template-columns: minmax(0, 1fr); max-width: 30rem; } }
/* normalização */
.norm-rows { display: grid; gap: 0.45rem; margin-top: 0.8rem; }
.norm-row { display: grid; grid-template-columns: 6.8rem minmax(0, 1fr); gap: 0.6rem; align-items: start; border-top: 1px solid var(--line); padding-top: 0.5rem; }
.norm-lbl { display: flex; flex-direction: column; line-height: 1.3; }
.norm-lbl b { font-family: var(--mono); font-size: 0.95rem; color: var(--head); }
.norm-lbl span { font-size: 0.78rem; color: var(--muted); }
.norm-cps { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.ncp { display: inline-flex; flex-direction: column; align-items: center; min-width: 2.2rem; padding: 0.12rem 0.25rem 0.18rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.ncp.diff { background: color-mix(in srgb, var(--s-orange) 15%, var(--card)); border-color: var(--c-orange); }
.ng { font-size: 1.15rem; line-height: 1.35; color: var(--head); }
.nh { font-family: var(--mono); font-size: 0.64rem; color: var(--muted); }
.ncp.diff .nh { color: var(--c-orange); font-weight: 600; }
@media (max-width: 520px) {
  .norm-row { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .norm-lbl { flex-direction: row; gap: 0.5rem; align-items: baseline; }
}
/* texto bidirecional: a linha "na tela" é texto de verdade, sobre o canvas */
.bidi-line {
  position: absolute; top: 2.6rem; left: 12px; right: 12px; z-index: 1; pointer-events: none;
  font-family: var(--sans), "Noto Sans Arabic", "Noto Sans Hebrew", Tahoma;
  font-size: 1.75rem; line-height: 1.35; color: var(--head); text-align: start; white-space: nowrap;
}
@media (max-width: 640px) { .bidi-line { font-size: 1.3rem; top: 2.3rem; } }
/* letras parecidas */
.homo-letters { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.9rem; }
.hl { display: inline-flex; flex-direction: column; align-items: center; min-width: 2.7rem; padding: 0.2rem 0.3rem 0.25rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-weight: 400; }
.hl.k-blue { border-color: color-mix(in srgb, var(--c-blue) 55%, var(--line)); }
.hl.k-orange { border-color: color-mix(in srgb, var(--c-orange) 60%, var(--line)); background: color-mix(in srgb, var(--s-orange) 10%, var(--bg)); }
.hl.k-purple { border-color: color-mix(in srgb, var(--c-purple) 55%, var(--line)); }
.hg { font-size: 1.45rem; line-height: 1.3; font-weight: 500; color: inherit; }
.hl:not([class*="k-"]) .hg { color: var(--head); }
.hc { font-size: 0.66rem; font-weight: 600; }
.hs { font-size: 0.66rem; color: var(--muted); font-weight: 400; }
#homoglyph .note { margin-top: 0.8rem; }
.homo-dns { margin-top: 0.3rem; font-size: 0.95rem; overflow-wrap: anywhere; }
.homo-dns b { color: var(--head); font-weight: 600; }
/* maiúsculas */
.rt.case td:first-child, .rt.case td:nth-child(3) { font-size: 1.05rem; }
.rt.case td:nth-child(2) { white-space: normal; min-width: 8rem; }
.rt.case .cp-n { display: none; }
@media (max-width: 560px) {
  .rt.case th:nth-child(4), .rt.case td:nth-child(4) { display: none; }
  .rt.case .cp-n { display: block; font-size: 0.72rem; color: var(--muted); font-weight: 400; }
  .rt.case td:nth-child(2) { min-width: 6.5rem; }
  .rt.case th, .rt.case td { padding-inline: 0.4rem; }
}
@media (max-width: 380px) {
  .rt.case td:first-child, .rt.case td:nth-child(3) { font-size: 0.9rem; }
  .rt.case td:nth-child(2) { min-width: 5.2rem; font-size: 0.84rem; }
}
/* ordem alfabética */
.sort-list { position: relative; height: calc(12 * 2.25rem); }
.sort-item {
  position: absolute; left: 0; right: 0; top: calc(var(--i, 0) * 2.25rem); height: 2rem;
  display: flex; align-items: center; gap: 0.7rem; padding: 0 0.75rem; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--line); transition: top 0.6s cubic-bezier(0.45, 0, 0.2, 1);
}
.si-n { width: 1.8rem; flex: none; color: var(--muted); font-size: 0.85rem; }
.si-w { flex: 1; font-size: 1.1rem; color: var(--head); min-width: 0; }
.si-c { font-size: 0.8rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .sort-item { transition: none; } }
/* inspetor de caracteres */
#inspector .chips { margin-top: 0.7rem; }
.insp-list { display: grid; gap: 0.45rem; margin-top: 0.9rem; }
.insp-row {
  display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 0.85rem; align-items: center;
  padding: 0.5rem 0.65rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
}
.insp-g {
  display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 8px; background: var(--card);
  border: 1px solid var(--line); font-size: 2rem; line-height: 1; color: var(--head); overflow: hidden;
}
.insp-g.small { font-family: var(--mono); font-size: 0.9rem; font-weight: 600; }
.insp-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem; }
.insp-top b { font-size: 1.05rem; color: var(--head); }
.insp-top span { font-size: 0.85rem; }
.insp-name { margin-top: 0.1rem; font-size: 0.9rem; font-weight: 600; line-height: 1.35; color: var(--head); overflow-wrap: anywhere; }
.insp-name.none { font-family: inherit; font-weight: 400; font-style: italic; color: var(--muted); }
.insp-meta { margin-top: 0.15rem; font-size: 0.82rem; line-height: 1.4; color: var(--muted); }
.insp-meta .mono { color: var(--ink); }
@media (max-width: 480px) {
  .insp-row { grid-template-columns: 2.9rem minmax(0, 1fr); gap: 0.6rem; }
  .insp-g { width: 2.9rem; height: 2.9rem; font-size: 1.6rem; }
}