/* Shared HTML authoring components. One semantic class per control variant.
   Adapted from the user-supplied Spirit-Beasts-UMGForge reference study.
   Text, values and input state remain native when converted by UMGForge. */

.skill-tag-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 3px 0;
}

.skill-chip-offensive, .skill-chip-defensive, .skill-chip-support,
.skill-chip-mobility, .skill-chip-control, .skill-chip-effect {
  min-width: 83px;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  color: #f8f0df;
}

.skill-chip-offensive { background-color: #89828a; }
.skill-chip-defensive { background-color: #668777; }
.skill-chip-support { background-color: #738d78; }
.skill-chip-mobility { background-color: #7d8494; }
.skill-chip-control { background-color: #97674f; }
.skill-chip-effect { background-color: #d2c5a7; color: #312c27; }

.skill-element {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  color: #307fa0;
  white-space: nowrap;
}
.skill-element svg { width: 19px; height: 19px; flex-shrink: 0; }

.priority-label { font-size: 17px; line-height: 1.15; }
.btn-priority, .btn-priority-high, .btn-priority-low {
  height: 27px;
  width: 100%;
  margin-top: 5px;
  padding: 1px 7px;
  border: 0;
  border-radius: 3px;
  background-color: #ded3b9;
  color: #312c27;
  font-family: RecordSerif;
  font-size: 18px;
  line-height: 1.15;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.btn-priority-high { background-color: #f4d690; }
.btn-priority-low { background-color: #d6d1bf; color: #555b50; }

.skill-switch {
  appearance: none;
  position: relative;
  width: 47px;
  height: 25px;
  padding: 2px;
  margin: 4px 0 0;
  flex-shrink: 0;
  border: 1px solid #89968b;
  border-radius: 14px;
  background-color: #81887d;
  cursor: pointer;
}
.skill-switch::after {
  content: '';
  display: block;
  width: 19px;
  height: 19px;
  margin-left: 0;
  border-radius: 50%;
  background-color: #f6f3e4;
}
.skill-switch:checked { background-color: #367b60; border-color: #90ad8d; }
.skill-switch:checked::after { margin-left: 21px; }
.skill-switch:focus-visible { outline: 2px solid #b59b60; outline-offset: 3px; }
.skill-switch:disabled { opacity: .5; cursor: default; }

.skill-mastery {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  font-size: 16px;
  line-height: 1.1;
  white-space: nowrap;
}
.mastery-track {
  flex: 1;
  min-width: 50px;
  max-width: 132px;
  height: 10px;
  overflow: hidden;
  border-radius: 5px;
  background-color: #46575b;
}
.mastery-fill { height: 100%; background-color: #3095d0; border-radius: 5px; }

.mood-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  color: #398565;
}
.mood-icon-hud { width: 24px; height: 24px; flex-shrink: 0; color: #54b67d; }

.age-symbol { width: 47px; height: 47px; flex-shrink: 0; }
.age-card, .age-card-current { flex-direction: row; align-items: center; gap: 8px; }

/* Linear ink-to-paper section ramps do not reveal a dark image at the light end. */
.section-strip {
  background-image: linear-gradient(90deg, #152427 0%, #47584c 38%, #b1b59d 72%, #efe2c2 100%);
  background-size: 100% 100%;
}

.skill-entry { align-items: center; }
.skill-info { min-width: 0; }
.skill-title { font-size: 24px; }
.skill-controls { width: 91px; flex-shrink: 0; padding: 0; }
.skill-cost { width: 56px; flex-shrink: 0; font-size: 17px; padding-top: 0; }
.skills-list { height: 610px; }
.food-art { padding: 0; object-fit: contain; }
.requirement-symbol { object-fit: contain; }
.commands-row { display: flex; align-items: center; gap: 8px; }
.commands-row .btn-small { font-size: 17px; width: 179px; flex-shrink: 0; }
.commands-row .commands { flex: 1; min-width: 0; margin-top: 0; }
.commands-row .btn-command { font-size: 17px; white-space: nowrap; }

/* Owned symbols keep controls consistent instead of depending on Unicode glyphs. */
.btn-tool svg { display: block; width: 25px; height: 25px; margin: 2px auto 0; }
.btn-command { display: flex; justify-content: center; align-items: center; gap: 5px; }
.btn-command svg { width: 18px; height: 18px; flex-shrink: 0; }
.roster-mark svg { width: 29px; height: 29px; flex-shrink: 0; }
.stage-tag { display: flex; align-items: center; gap: 5px; }
.stage-tag svg { width: 18px; height: 18px; flex-shrink: 0; }
.footer-currency span, .footer-calendar span { display: flex; align-items: center; gap: 10px; }
.footer-currency svg, .footer-calendar svg { width: 22px; height: 22px; flex-shrink: 0; }
.footer-calendar { position: relative; display: flex; align-items: center; gap: 22px; }
.footer-calendar span { border-left: 1px solid #b6a06188; padding-left: 18px; }

.btn-care:hover { border-color: #9c874b; box-shadow: inset 0 0 6px #c1a86477; }
.btn-priority:hover, .btn-priority-high:hover, .btn-priority-low:hover { outline: 1px solid #a38b52; }
.btn-care:focus-visible, .btn-tool:focus-visible, .btn-command:focus-visible,
.btn-tab:focus-visible, .btn-tab-active:focus-visible { outline: 2px solid #d1b66e; outline-offset: 2px; }

.skill-cost p { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin: 3px 0; }
.skill-cost p span:first-child { font-size: 15px; color: #575a4b; }
.btn-cultivation {
  display: block; position: relative; height: 30px; width: 100%;
  padding: 2px 17px; border: 1px solid #b29a61; border-radius: 3px;
  background: linear-gradient(180deg, #2a3836, #122224 55%, #20302c);
  box-shadow: inset 0 0 0 2px #d7b76422;
  font-family: RecordText, serif; font-size: 19px; line-height: 1.1;
  color: #e6d19b; text-align: center; white-space: nowrap; cursor: pointer;
}
.btn-cultivation:hover { border-color: #dbc385; background: linear-gradient(180deg, #355544, #1f3832); }
.btn-cultivation:focus-visible { outline: 2px solid #d1b66e; outline-offset: 2px; }
.btn-cultivation:disabled { opacity: .55; cursor: default; }
.cultivation-corner-left, .cultivation-corner-right { position: absolute; top: 6px; width: 14px; height: 14px; }
.cultivation-corner-left { left: 4px; }
.cultivation-corner-right { right: 4px; }

/* Framed priorities/settings action; separate from the profile selector. */
.btn-priorities { display: flex; align-items: center; justify-content: center; gap: 8px; width: 168px; height: 41px; flex-shrink: 0; border: 1px solid #c3a468; border-radius: 3px; background: linear-gradient(110deg, #27373b, #15252c); box-shadow: inset 0 0 0 2px #c3a46822; color: #f1e7ce; font-size: 19px; cursor: pointer; }
.btn-priorities:hover { background: #344a45; }
.btn-priorities .priorities-icon { width: 25px; height: 25px; flex-shrink: 0; }