/* Daily Life Doc, round 27 (zone SK, part M); round 30 (zone IF): the Instructions editor of the knowledge base
   (js/kb/kb-skill.js): one tinted field for the steps, and under it the steps marked "Not possible yet". Tinted
   fields, no borders, the knowledge base's type scale (css/kb.css). */
.ksk { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.ksk-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: start; }
.ksk-l { font-size: var(--t-xs); font-weight: 600; color: var(--ink3); padding-top: 11px; }
.ksk-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ksk-text { background: var(--field); font-size: var(--t-sm); line-height: 1.6; min-height: 120px; resize: none; overflow: hidden; }
.ksk-marks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ksk-marks[hidden] { display: none; }
.ksk-marks li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 12px; border-radius: 12px; background: var(--field);
  box-shadow: inset 3px 0 0 var(--try); animation: dd-rise .22s var(--ease-out) both; }
.ksk-no { font-size: var(--t-2xs); font-weight: 600; color: var(--try-d); background: var(--try-bg); border-radius: 7px; padding: 2px 8px; }
.ksk-mw { font-size: var(--t-xs); line-height: 1.5; color: var(--ink2); overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .ksk-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ksk-l { padding-top: 0; }
}
.kbr .ub.kb-no { color: var(--try-d); font-weight: 500; }