Template:Machine Child/SkillCalculator/styles.css

/*
Machine Child - Skill Learning Calculator (SkillTable) styles.

Recommended usage:
  
  

Notes:
- No wrapper class is required. Rules intentionally target #skill-controls and #skill-table.
- All custom class names are prefixed with .mc- to reduce collision risk.
*/

/* Controls layout */
#skill-controls { margin: 1em 0; font-size: 90%; line-height: 1.4em; }
#skill-controls strong { display: block; margin: 0.6em 0 0.3em 0; }
#skill-controls .mc-row { display: flex; flex-wrap: wrap; gap: 0.8em 1.2em; align-items: center; }
#skill-controls label { white-space: nowrap; font-weight: normal; }
#skill-controls input[type="radio"],
#skill-controls input[type="checkbox"] { margin-right: 0.3em; vertical-align: middle; transform: scale(1.05); cursor: pointer; }
#skill-controls label:hover { text-decoration: underline; cursor: pointer; }
#skill-controls input[type="number"] { width: 5em; padding: 2px 4px; }
#skill-controls input[type="range"] { width: 12em; vertical-align: middle; }

/* Hidden stats row safety (some skins override [hidden]) */
#row-stats[hidden] { display: none !important; }

/* Small gap between stat label and input */
#skill-controls #row-stats label input[type="number"] { margin-left: 0.25em; }

/* A reusable underline helper that JS toggles */
#skill-controls .mc-label-underline { text-decoration: underline !important; cursor: pointer; }

/* Table basics: keep the old "border=1" look, but move collapse/margin into CSS */
#skill-table { margin-top: 1em; border-collapse: collapse; }
#skill-table td,
#skill-table th { vertical-align: middle; }

/* Numeric columns */
#skill-table td.mc-book-cost,
#skill-table td.mc-num,
#skill-table th.mc-num {
  text-align: right;
  font-family: monospace;
  font-size: 125%;
  padding-right: 0.4em;
}

/* Alternate text colors for numeric columns */
#skill-table .mc-num-a { color: #111; }
#skill-table .mc-num-b { color: #666; }

/* Column visibility toggles */
#skill-table.mc-no-codes th.mc-code,
#skill-table.mc-no-codes td.mc-code,
#skill-table.mc-no-codes th.mc-baselearn,
#skill-table.mc-no-codes td.mc-baselearn { display: none; }

#skill-table.mc-hide-req th.mc-req,
#skill-table.mc-hide-req td.mc-req { display: none; }

#skill-table.mc-hide-turns th.mc-turns,
#skill-table.mc-hide-turns td.mc-turns { display: none; }

/* Good-skill and impossible markers */
#skill-table .mc-good-skill { font-weight: bold; color: #008000; }
#skill-table .mc-impossible { color: #b00; font-style: italic; opacity: 0.85; }

/* Stat row shading */
#skill-table .mc-stat-CHA      { background-color: #ffe5ec; }
#skill-table .mc-stat-CHA-alt  { background-color: #fff2f6; }
#skill-table .mc-stat-VIT      { background-color: #fff0e0; }
#skill-table .mc-stat-VIT-alt  { background-color: #fff8ee; }
#skill-table .mc-stat-SENS     { background-color: #e5f1ff; }
#skill-table .mc-stat-SENS-alt { background-color: #f2f8ff; }
#skill-table .mc-stat-INT      { background-color: #e5ffe5; }
#skill-table .mc-stat-INT-alt  { background-color: #f2fff2; }
#skill-table .mc-stat-MOR      { background-color: #f0e5ff; }
#skill-table .mc-stat-MOR-alt  { background-color: #f9f4ff; }