/* 602 detail page (pages/602.html), loaded after style.css. */
.six-field { --lit: 118, 140, 182; --lit-a: .24; }
.six-type { color: rgba(235, 229, 218, .032); letter-spacing: .04em; margin-right: -.04em; }

.slide .kicker { font-weight: 650; font-size: 11px; line-height: 1.4; letter-spacing: .2em; color: var(--dim); }
.slide .kicker + p { margin-top: .55em; }
.slide .aside { margin-top: 1.5em; padding-top: 1.1em; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.7; color: var(--dim); }
@media (max-width: 760px) {
  .slide .kicker { font-size: 10px; }
  .slide .aside { margin-top: 1em; padding-top: .8em; font-size: 12px; line-height: 1.6; }
}

.feat .xl { font-size: 17px; font-weight: 700; letter-spacing: .12em; fill: var(--ember); }
.feat .xn { font-size: 23px; font-weight: 650; fill: var(--bone); }
.feat .xn.dark { fill: var(--void); font-weight: 750; }
.feat .xm { font-size: 19px; font-weight: 500; fill: rgba(235, 229, 218, .74); }
.feat .xm.em { fill: var(--bone); font-weight: 600; }
.feat .xm.sm2 { font-size: 15.5px; }
.feat .xe { font-size: 27px; font-weight: 750; fill: var(--ember); }
.feat .st.two { stroke: rgba(235, 229, 218, .55); stroke-dasharray: 6 6; }

.feat .xe.sm3 { font-size: 19px; }
.feat .ar { fill: var(--ember); }
.feat .tn { fill: var(--bone); opacity: .7; }
.feat .errb { fill: rgba(217, 163, 98, .1); stroke: var(--ember); stroke-width: 2.5; }

/* the cat (drawn, reused) */
.feat .cat { fill: #d6cdbd; }
.feat .cat-tail { fill: none; stroke: #d6cdbd; stroke-width: 9; stroke-linecap: round; }
.feat .cat-eye { fill: var(--ember); }

/* the approve / reject drawing */
.prod .vis.ai602.is-on .pick { pointer-events: auto; cursor: pointer; }
.ai602 .pk { fill: rgba(235, 229, 218, .04); stroke: rgba(235, 229, 218, .45); stroke-width: 1.5; transition: fill .2s, stroke .2s; }
.ai602 .pick:hover .pk, .ai602 .pick:focus-visible .pk { fill: rgba(217, 163, 98, .16); stroke: var(--ember); }
.ai602 .pick:focus { outline: none; }
.ai602 .pick:focus-visible .pk { stroke-width: 3; }
.ai602 .diff { transition: opacity .45s ease; }
.ai602[data-ai="no"] .diff { opacity: .28; }
/* status and controls per state: hidden parts take no clicks or focus */
.ai602 .stt, .ai602 .asks, .ai602 .after, .ai602 .a-ok, .ai602 .a-no { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.ai602[data-ai="ask"] .s-ask, .ai602[data-ai="ask"] .asks,
.ai602[data-ai="ok"] .s-ok, .ai602[data-ai="ok"] .after, .ai602[data-ai="ok"] .a-ok,
.ai602[data-ai="no"] .s-no, .ai602[data-ai="no"] .after, .ai602[data-ai="no"] .a-no { opacity: 1; visibility: visible; transition: opacity .35s ease .15s, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .ai602 * { transition: none !important; } }