Module:GameInfo/styles.css: Difference between revisions

Revision as of 21:56, 4 March 2026

/* Module:GameInfo/styles.css */
/* GameInfo Box v1 — TemplateStyles-safe (no CSS vars / no var()) */
/* Phase 4.1 — Unified + Reusable (Layout restored, scoped) */

/* NOTE:
   - Citizen theme overrides (day/night/os) are now in Citizen.css (sitewide).
   - Level slider component styling (track/fill/thumb/ticks/bubble) is now sitewide
     in Common.css + Citizen.css. This file keeps only the wrapper/layout + module-only tweaks.
*/

/* ----------------------------------------------------------------------------
   1) BASE CARD + SAFETY
---------------------------------------------------------------------------- */

.sv-gi-card,
.sv-skill-card{
  max-width:600px;
  margin:18px auto;

  border-radius:22px;
  border:1px solid rgba(75,99,136,0.55);

  background-color:#0f172a;
  background-image:
    radial-gradient(900px 360px at 40% -10%, rgba(106,166,255,0.18), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    linear-gradient(180deg, #0f172a, #0b1324);

  box-shadow:0 16px 38px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  overflow:visible;

  color:rgba(245,249,255,0.94);
  font-size:15px;
  line-height:1.35;
}

/* Locked split zones */
.sv-gi-top,
.sv-skill-top{
  padding:14px 18px 4px;
}

.sv-gi-bottom,
.sv-skill-bottom{
  padding:10px 18px 12px;
}

/* Predictable sizing */
.sv-gi-card,
.sv-gi-card *,
.sv-skill-card,
.sv-skill-card *{
  box-sizing:border-box;
}

.sv-gi-error{
  max-width:600px;
  margin:18px auto;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(75,99,136,0.55);
  background:#1f2937;
  color:rgba(245,249,255,0.92);
}

/* Ensure source popup nodes are hidden even without sitewide .sv-hidden */
.sv-gi-card .sv-hidden,
.sv-skill-card .sv-hidden{
  display:none;
}

/* Remove default details marker */
.sv-gi-card summary,
.sv-skill-card summary{
  list-style:none;
}

/* ----------------------------------------------------------------------------
   2) ICON-TEXT HARDENING (prevents clipped link/text inside icon squares)
---------------------------------------------------------------------------- */

.sv-skill-icon,
.sv-meta-icon,
.sv-ref-ico{
  font-size:0;
  line-height:0;
}

.sv-skill-icon a,
.sv-meta-icon a,
.sv-ref-ico a{
  text-decoration:none;
}

/* Size bumps for “?” badge inside icon boxes */
.sv-skill-icon .sv-miss{
  width:22px;
  height:22px;
  font-size:13px;
  line-height:1;
}

.sv-meta-icon .sv-miss,
.sv-ref-ico .sv-miss{
  width:18px;
  height:18px;
  font-size:12px;
  line-height:1;
}

/* Card image enhancement (global .sv-img handles rounding) */
.sv-gi-card .sv-img img,
.sv-skill-card .sv-img img{
  box-shadow:0 10px 18px rgba(0,0,0,0.30);
}

/* ----------------------------------------------------------------------------
   3) SKILL HEADER (ICON + TITLE + NOTES + DESCRIPTION)
---------------------------------------------------------------------------- */

.sv-skill-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:2px 0 10px;
}

.sv-skill-icon{
  flex:0 0 auto;
  width:64px;
  height:64px;
  border-radius:16px;
  border:1px solid rgba(75,99,136,0.55);
  background:#1f2937;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.sv-skill-headtext{
  min-width:0;
  flex:0 1 auto;
}

.sv-skill-title-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.sv-skill-title{
  font-weight:900;
  letter-spacing:0.2px;
  font-size:22px;
  line-height:1.10;
  color:rgba(245,249,255,0.98);
  min-width:0;
  word-wrap:break-word;
}

.sv-skill-desc{
  margin-top:6px;
  color:rgba(215,226,244,0.92);
  font-size:14px;
  line-height:1.35;
  word-wrap:break-word;
}

/* ----------------------------------------------------------------------------
   5) META ROW
---------------------------------------------------------------------------- */

.sv-skill-meta{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:6px;
  margin:8px 0 10px;
}

/* If meta row uses global .sv-pill */
.sv-skill-card .sv-skill-meta .sv-pill,
.sv-gi-card .sv-skill-meta .sv-pill{
  width:100%;
  justify-content:center;
  gap:6px;
  padding:0;
  min-height:34px;
  align-items:center;
  text-align:center;
  border-radius:999px;
  border:1px solid rgba(59,75,99,0.85);
  background:#273449;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);

  font-weight:900;
  font-size:12px;
  line-height:1.02;
  text-transform:none;
  letter-spacing:0.08px;
  color:rgba(245,249,255,0.96);
}

/* If meta row uses .sv-meta-card */
.sv-gi-card .sv-meta-card,
.sv-skill-card .sv-meta-card{
  position:relative; /* for full-pill def hitbox */
  display:flex;
  align-items:center;
  gap:6px;
  padding:0;
  min-height:34px;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(59,75,99,0.85);
  background:#273449;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}

.sv-gi-card .sv-meta-card:hover,
.sv-skill-card .sv-meta-card:hover{
  background:#2e3f59;
}

.sv-gi-card .sv-meta-icon,
.sv-skill-card .sv-meta-icon{
  flex:0 0 auto;
  width:20px;
  height:20px;
  border-radius:999px;
  border:1px solid rgba(75,99,136,0.55);
  background:#0f172a;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.sv-gi-card .sv-meta-textwrap,
.sv-skill-card .sv-meta-textwrap{
  min-width:0;
  flex:0 1 auto;
}

.sv-gi-card .sv-meta-text,
.sv-skill-card .sv-meta-text{
  font-weight:900;
  color:rgba(245,249,255,0.96);
  font-size:12px;
  line-height:1.02;
  letter-spacing:0.08px;
  min-width:0;
  word-wrap:break-word;
  text-align:center;
}

.sv-gi-card .sv-meta-lines span,
.sv-skill-card .sv-meta-lines span{
  display:block;
}

/* Visible meta text should look like plain label text (interaction is on pill hitbox) */
.sv-gi-card .sv-meta-text .sv-def,
.sv-skill-card .sv-meta-text .sv-def{
  cursor:default;
}

.sv-gi-card .sv-meta-text .sv-def-text,
.sv-skill-card .sv-meta-text .sv-def-text{
  color:inherit;
  border-bottom:none;
}

/* Second line (qualifier) smaller + softer */
.sv-gi-card .sv-meta-text .sv-meta-lines span + span,
.sv-skill-card .sv-meta-text .sv-meta-lines span + span{
  margin-top:1px;
  font-size:10px;
  font-weight:800;
  opacity:0.90;
  letter-spacing:0.12px;
}

/* Full-pill Definitions interaction overlay (rendered by Skills.lua) */
.sv-gi-card .sv-meta-hit,
.sv-skill-card .sv-meta-hit{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:5;
  opacity:0;
}

.sv-gi-card .sv-meta-hit .sv-def,
.sv-skill-card .sv-meta-hit .sv-def{
  display:block;
  width:100%;
  height:100%;
}

/* ----------------------------------------------------------------------------
   6) REQUIREMENTS / USERS ROW
---------------------------------------------------------------------------- */

.sv-gi-card .sv-reqrow,
.sv-skill-card .sv-reqrow{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin:6px 0 10px;
}

.sv-gi-card .sv-disclose,
.sv-skill-card .sv-disclose{
  flex:0 1 190px;
  max-width:205px;
}

/* Requirements / Users: keep the shared disclose component,
   but apply a pill-shaped layout in this row for a compact UI. */
.sv-gi-card .sv-reqrow .sv-disclose-btn,
.sv-skill-card .sv-reqrow .sv-disclose-btn{
  border-radius:999px;
  min-height:36px;
  padding:0 12px;
}

/* ----------------------------------------------------------------------------
   7) LEVEL SELECTOR (wrapper/layout; slider component is sitewide)
---------------------------------------------------------------------------- */

.sv-skill-level{
  margin:8px 0 10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(59,75,99,0.85);
  background:#1f2937;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);

  /* Place slider first, helper text under it, tick/check row under slider */
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Slider row: actual slider + end-of-bar value readout (added by JS) */
.sv-skill-level .sv-level-slider{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}

/* Make the slider element consume the row width */
.sv-skill-level .sv-level-slider input.sv-level-range[type="range"],
.sv-skill-level .sv-level-slider .sv-level-range--custom,
.sv-skill-level .sv-level-slider .sv-level-range[data-sv-slider="1"]{
  flex:1 1 auto;
  min-width:0;
}

/* End-of-bar value (appended by Common.js) */
.sv-skill-level .sv-level-endvalue{
  flex:0 0 auto;
  min-width:30px;

  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(245,249,255,0.16);
  background:rgba(255,255,255,0.04);

  font-weight:900;
  font-size:13px;
  line-height:1.25;
  letter-spacing:0.15px;
  color:rgba(245,249,255,0.94);

  text-align:center;
  white-space:nowrap;
}

/* Reorder siblings without changing Lua/JS markup */
.sv-skill-level .sv-level-range--custom,
.sv-skill-level .sv-level-range[data-sv-slider="1"]{
  order:1;
}

.sv-skill-level .sv-level-ui{
  order:2;

  /* Helper text + overcap pill on one line */
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  /* Allow graceful wrap on ultra-small screens */
  flex-wrap:wrap;

  text-align:center;
  margin:0;
}

/* Replace “Level X / Y” with helper text (keep markup for JS parsing) */
.sv-gi-card .sv-level-label,
.sv-skill-card .sv-level-label{
  font-size:0;      /* hides emitted text + numbers */
  line-height:0;
  margin:0;
  padding:0;

  display:inline-block;

  /* HARDEN: keep it in normal flow even if any global CSS touched it */
  position:static;
  left:auto;
  right:auto;
  top:auto;
  bottom:auto;
  transform:none;
}

/* Helper text */
.sv-gi-card .sv-level-label:after,
.sv-skill-card .sv-level-label:after{
  content:"Slide to set level";
  display:inline-block;

  font-weight:900;
  font-size:13px;
  line-height:1.25;
  letter-spacing:0.15px;

  color:rgba(245,249,255,0.94);
}

/* Overcap pill (Option A) */
.sv-skill-level .sv-overcap-tip{
  display:inline-flex;
  align-items:center;
  position:static;
}

/* Overcap badge pill — matched to helper text, overrides sv-tip-btn icon sizing */
.sv-skill-level .sv-overcap-btn{
  position:static;

  /* Override any global .sv-tip-btn "icon button" sizing */
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-weight:900;
  font-size:13px;
  line-height:1.25;
  letter-spacing:0.15px;
  color:rgba(245,249,255,0.94);

  padding:1px 8px !important;
  border-radius:999px;

  border:1px solid rgba(245,249,255,0.16);
  background:rgba(255,255,255,0.04);
  background-image:none !important;
  box-shadow:none !important;

  cursor:pointer;
  white-space:nowrap;
}

/* Kill any pseudo content from global tip button styling */
.sv-skill-level .sv-overcap-btn:before,
.sv-skill-level .sv-overcap-btn:after{
  content:none !important;
  display:none !important;
}

.sv-skill-level .sv-overcap-btn:hover{
  background:rgba(255,255,255,0.07);
  border-color:rgba(245,249,255,0.22);
}

.sv-skill-level .sv-overcap-btn:active{
  background:rgba(255,255,255,0.10);
  transform:translateY(1px);
}

/* Numbered checkmarks row (built by Common.js into .sv-level-ticklabels) */
.sv-skill-level .sv-level-ticklabels{
  margin:2px 0 0;
  padding:0 2px;

  display:flex;
  align-items:flex-start;
}

/* Full mode: distribute evenly */
.sv-skill-level .sv-level-ticklabels[data-sv-ticks$="/full"]{
  justify-content:space-between;
}
.sv-skill-level .sv-level-ticklabels[data-sv-ticks$="/full"] .sv-level-tick{
  flex:1 1 0;
  text-align:center;
}

/* Min/max mode: pin to edges */
.sv-skill-level .sv-level-ticklabels[data-sv-ticks$="/minmax"]{
  justify-content:space-between;
}
.sv-skill-level .sv-level-ticklabels[data-sv-ticks$="/minmax"] .sv-level-tick{
  flex:0 0 auto;
}
.sv-skill-level .sv-level-tick--min{ text-align:left; }
.sv-skill-level .sv-level-tick--max{ text-align:right; }

.sv-skill-level .sv-level-tick{
  min-width:0;
  font-weight:900;
  color:rgba(215,226,244,0.92);
}

.sv-skill-level .sv-level-tickmark{
  display:block;
  font-size:12px;
  line-height:1;
  opacity:0.18;
}

.sv-skill-level .sv-level-ticknum{
  display:block;
  margin-top:1px;
  font-size:10px;
  line-height:1;
  opacity:0.72;
}

/* Checked/current states */
.sv-skill-level .sv-level-tick--checked .sv-level-tickmark{ opacity:0.92; }
.sv-skill-level .sv-level-tick--checked .sv-level-ticknum{ opacity:0.95; }

.sv-skill-level .sv-level-tick--current .sv-level-tickmark,
.sv-skill-level .sv-level-tick--current .sv-level-ticknum{
  color:rgba(245,249,255,0.98);
  opacity:1;
}

@media (max-width:500px){
  .sv-skill-level{
    padding:9px 10px;
  }

  .sv-skill-level .sv-level-slider{
    gap:8px;
  }

  .sv-skill-level .sv-level-endvalue{
    padding:1px 7px;
    font-size:12px;
    line-height:1.25;
    min-width:28px;
  }

  .sv-skill-level .sv-level-label:after{
    font-size:12px;
  }

  .sv-skill-level .sv-level-range--custom,
  .sv-skill-level .sv-level-range[data-sv-slider="1"]{
    height:24px;
  }

  .sv-skill-level .sv-level-track{
    margin-top:-3px;
    height:6px;
    width:calc(100% - 16px);
  }

  .sv-skill-level .sv-level-thumb{
    margin-top:-8px;
    margin-left:-8px;
    width:16px;
    height:16px;
  }

  .sv-skill-level .sv-level-bubble{
    top:-28px;
    padding:5px 9px;
    font-size:11px;
  }

  .sv-skill-level .sv-overcap-btn{
    padding:1px 7px !important;
    font-size:12px;
    line-height:1.25;
    min-height:0 !important;
  }

  .sv-skill-level .sv-level-tickmark{ font-size:11px; }
  .sv-skill-level .sv-level-ticknum{ font-size:9px; }
}

/* ----------------------------------------------------------------------------
   8) SCALING TOP
---------------------------------------------------------------------------- */

.sv-skill-scaling{
  margin:10px 0 10px;
}

.sv-gi-card .sv-scaling-row,
.sv-skill-card .sv-scaling-row{
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(59,75,99,0.85);
  background:#1f2937;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}

.sv-gi-card .sv-scaling-grid,
.sv-skill-card .sv-scaling-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:start;
}

.sv-gi-card .sv-scaling-col--scaling,
.sv-skill-card .sv-scaling-col--scaling{
  grid-column:1 / -1;
}

.sv-gi-card .sv-scaling-value,
.sv-skill-card .sv-scaling-value{
  font-weight:900;
  font-size:18px;
  line-height:1.10;
  color:rgba(245,249,255,0.98);
  word-wrap:break-word;
}

.sv-gi-card .sv-scaling-label,
.sv-skill-card .sv-scaling-label{
  margin-top:3px;
  font-size:12px;
  font-weight:900;
  letter-spacing:0.25px;
  text-transform:uppercase;
  color:rgba(182,198,224,0.95);
}

.sv-gi-card .sv-scaling-list,
.sv-skill-card .sv-scaling-list{
  display:grid;
  gap:6px;
  margin-top:2px;
}

.sv-gi-card .sv-scaling-item,
.sv-skill-card .sv-scaling-item{
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(59,75,99,0.85);
  background:#273449;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  color:rgba(215,226,244,0.92);
  font-weight:800;
  font-size:13px;
}

/* ----------------------------------------------------------------------------
   9) CORE STATS GRID
---------------------------------------------------------------------------- */

.sv-skill-core{
  margin:10px 0 10px;
}

.sv-gi-card .sv-core-row,
.sv-skill-card .sv-core-row{
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(59,75,99,0.85);
  background:#1f2937;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}

.sv-gi-card .sv-core-grid,
.sv-skill-card .sv-core-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.sv-gi-card .sv-core-cell,
.sv-skill-card .sv-core-cell{
  padding:10px 10px 9px;
  border-radius:14px;
  border:1px solid rgba(59,75,99,0.85);
  background:#273449;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  min-width:0;
}

.sv-gi-card .sv-core-top,
.sv-skill-card .sv-core-top{
  display:flex;
  align-items:baseline;
  gap:6px;
  min-width:0;
}

.sv-gi-card .sv-core-num,
.sv-skill-card .sv-core-num{
  font-weight:900;
  font-size:17px;
  line-height:1.10;
  color:rgba(245,249,255,0.98);
  min-width:0;
  word-wrap:break-word;
}

.sv-gi-card .sv-core-unit,
.sv-skill-card .sv-core-unit{
  font-weight:900;
  font-size:12px;
  color:rgba(182,198,224,0.95);
}

.sv-gi-card .sv-core-label,
.sv-skill-card .sv-core-label{
  margin-top:6px;
  font-size:12px;
  font-weight:900;
  letter-spacing:0.25px;
  text-transform:uppercase;
  color:rgba(182,198,224,0.95);
}

.sv-gi-card .sv-core-label--tight,
.sv-skill-card .sv-core-label--tight{
  letter-spacing:0.12px;
}

/* ----------------------------------------------------------------------------
   10) TABS + PANELS (tabs component is global; content layouts are module-owned)
---------------------------------------------------------------------------- */

.sv-skill-tabs{
  margin:10px 0 0;
}

/* Mechanics grid (tabpanel content) */
.sv-gi-card .sv-kw-grid,
.sv-skill-card .sv-kw-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.sv-gi-card .sv-kw-cell,
.sv-skill-card .sv-kw-cell{
  padding:10px 10px 9px;
  border-radius:14px;
  border:1px solid rgba(59,75,99,0.85);
  background:#273449;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}

.sv-gi-card .sv-kw-label,
.sv-skill-card .sv-kw-label{
  font-size:12px;
  font-weight:900;
  letter-spacing:0.25px;
  text-transform:uppercase;
  color:rgba(182,198,224,0.95);
}

.sv-gi-card .sv-kw-value,
.sv-skill-card .sv-kw-value{
  margin-top:6px;
  font-size:15px;
  font-weight:900;
  color:rgba(245,249,255,0.96);
  word-wrap:break-word;
}

/* Keyword pills panel */
.sv-gi-card .sv-tab-pills,
.sv-skill-card .sv-tab-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* ----------------------------------------------------------------------------
   11) EFFECT / EVENT CARDS
---------------------------------------------------------------------------- */

.sv-gi-card .sv-ref-grid,
.sv-skill-card .sv-ref-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.sv-gi-card .sv-ref-card,
.sv-skill-card .sv-ref-card{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 10px;
  border-radius:16px;
  border:1px solid rgba(59,75,99,0.85);
  background:#1f2937;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  color:rgba(245,249,255,0.94);
  min-width:0;
}

.sv-gi-card .sv-ref-ico,
.sv-skill-card .sv-ref-ico{
  flex:0 0 auto;
  width:52px;
  height:52px;
  border-radius:16px;
  border:1px solid rgba(75,99,136,0.55);
  background:#273449;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.sv-gi-card .sv-ref-text,
.sv-skill-card .sv-ref-text{
  min-width:0;
  flex:1 1 auto;
}

.sv-gi-card .sv-ref-title,
.sv-skill-card .sv-ref-title{
  font-weight:900;
  font-size:15px;
  line-height:1.15;
  color:rgba(245,249,255,0.98);
  word-wrap:break-word;
}

.sv-gi-card .sv-ref-stats,
.sv-skill-card .sv-ref-stats{
  display:flex;
  gap:8px;
  margin-top:8px;
  flex-wrap:wrap;
}

.sv-gi-card .sv-ref-stat,
.sv-skill-card .sv-ref-stat{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(59,75,99,0.85);
  background:#273449;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  font-weight:900;
  font-size:12px;
  color:rgba(215,226,244,0.92);
}

.sv-gi-card .sv-ref-sub,
.sv-skill-card .sv-ref-sub{
  margin-top:6px;
  font-weight:900;
  font-size:13px;
  color:rgba(182,198,224,0.95);
}

/* ----------------------------------------------------------------------------
   13) RESPONSIVE (layout tightening)
---------------------------------------------------------------------------- */

@media (max-width:720px){
  .sv-gi-card,
  .sv-skill-card{
    margin:14px 10px;
    border-radius:20px;
  }

  .sv-gi-top,
  .sv-skill-top{
    padding:12px 16px 4px;
  }

  .sv-gi-bottom,
  .sv-skill-bottom{
    padding:10px 16px 12px;
  }

  .sv-skill-title{ font-size:20px; }

  .sv-skill-meta{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

  .sv-gi-card .sv-core-grid,
  .sv-skill-card .sv-core-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

  .sv-gi-card .sv-ref-grid,
  .sv-skill-card .sv-ref-grid{ grid-template-columns:1fr; }

  .sv-gi-card .sv-tip-pop,
  .sv-skill-card .sv-tip-pop{
    right:0;
    left:auto;
    width:92vw;
    max-width:520px;
  }
}

@media (max-width:520px){
  .sv-skill-head{ gap:10px; }

  .sv-skill-icon{
    width:56px;
    height:56px;
    border-radius:14px;
  }

  .sv-skill-title{ font-size:18px; }
  .sv-skill-desc{ font-size:13px; }

  .sv-gi-card .sv-scaling-grid,
  .sv-skill-card .sv-scaling-grid{ grid-template-columns:1fr; }

  .sv-gi-card .sv-kw-grid,
  .sv-skill-card .sv-kw-grid{ grid-template-columns:1fr; }

  /* Requirements/Users strict edge padding */
  .sv-gi-card .sv-reqrow,
  .sv-skill-card .sv-reqrow{
    padding-left:16px;
    padding-right:16px;
  }

  .sv-gi-card .sv-disclose,
  .sv-skill-card .sv-disclose{
    flex:1 1 170px;
    max-width:190px;
  }

  /* META ROW (mobile-tight) */
  .sv-skill-card .sv-skill-meta,
  .sv-gi-card .sv-skill-meta{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:6px;
    max-width:200px;
    margin-left:auto;
    margin-right:auto;
    justify-content:center;
  }

  .sv-skill-card .sv-meta-card,
  .sv-gi-card .sv-meta-card{
    min-height:32px;
    gap:7px;
  }

  .sv-skill-card .sv-meta-icon,
  .sv-gi-card .sv-meta-icon{
    width:16px;
    height:16px;
  }

  .sv-skill-card .sv-meta-text,
  .sv-gi-card .sv-meta-text{
    font-size:10px;
    line-height:1.05;
    letter-spacing:0;
  }

  .sv-skill-card .sv-meta-text .sv-meta-lines span + span,
  .sv-gi-card .sv-meta-text .sv-meta-lines span + span{
    font-size:9px;
    margin-top:1px;
  }

  /* If meta row ever renders the global .sv-pill variant */
  .sv-skill-card .sv-skill-meta .sv-pill,
  .sv-gi-card .sv-skill-meta .sv-pill{
    min-height:24px;
    font-size:10px;
    line-height:1.05;
    letter-spacing:0;
    gap:5px;
  }
}

@media (max-width:360px){
  .sv-gi-card .sv-disclose,
  .sv-skill-card .sv-disclose{
    flex:1 1 100%;
    max-width:100%;
  }
}