/* Appearance modes page: color converter. */
.cc { margin: 1.4rem 0 2rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; }
.cc-in { padding: 18px 20px; display: grid; gap: 14px; align-content: start; border-right: 1px solid var(--line); }
.cc-in .input { font-family: var(--mono); }
.cc-alpha { display: flex; align-items: center; gap: 10px; }
.cc-alpha output { font: 600 12.5px var(--mono); min-width: 4.5ch; color: var(--ink-2); }
.cc-msg { margin: 0; min-height: 1.3em; font-size: 13.5px; color: var(--ink-3); }
.cc-msg.is-bad { color: var(--bad); } .cc-msg.is-warn { color: var(--warn); }
.cc-out { padding: 18px 20px; display: grid; gap: 10px; align-content: start; }
.cc-sw { height: 72px; border-radius: 8px; border: 1px solid var(--line-2); background-image: linear-gradient(var(--sw), var(--sw)), repeating-conic-gradient(#9aa0aa 0 25%, #e4e6ea 0 50%); background-size: auto, 16px 16px; }
.cc-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.cc-row > span:first-child { font: 600 11.5px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.cc-row code { justify-self: start; }
.cc-row .copy-sm { margin: 0; }
@media (max-width: 720px) { .cc { grid-template-columns: 1fr; } .cc-in { border-right: 0; border-bottom: 1px solid var(--line); } .cc-row { grid-template-columns: 96px minmax(0, 1fr) auto; } }
/* Local fixes (reported for style.css): five minis per row in the article column, no mid-word breaks in row headers. */
.page-article .minis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .page-article .minis-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.table-wrap th[scope="row"] code { overflow-wrap: normal; white-space: nowrap; }
.alpha-chips { list-style: none; padding: 0; margin: 1rem 0 1.8rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.alpha-chips li { margin: 0; display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font: 500 13px var(--mono); color: var(--ink-3); }
.alpha-chips code { border: 0; background: none; padding: 0; color: var(--ink); font-weight: 600; }