/* Shared-02 — semantic utility classes.
 * The names express visual intent; technical values remain centralized in tokens.css.
 */
.background-color-mellentaane-dark { background-color: var(--color-mellentaane-dark) !important; }
.background-color-mellentaane-normal { background-color: var(--color-mellentaane-normal) !important; }
.background-color-mellentaane-light { background-color: var(--color-mellentaane-light) !important; }
.background-color-mellentaane-pale { background-color: var(--color-mellentaane-pale) !important; }
.background-color-green-dark { background-color: var(--color-green-dark) !important; }
.background-color-green-normal { background-color: var(--color-green-normal) !important; }
.background-color-green-light { background-color: var(--color-green-light) !important; }
.background-color-green-pale { background-color: var(--color-green-pale) !important; }
.background-color-blue-dark { background-color: var(--color-blue-dark) !important; }
.background-color-blue-normal { background-color: var(--color-blue-normal) !important; }
.background-color-blue-light { background-color: var(--color-blue-light) !important; }
.background-color-blue-pale { background-color: var(--color-blue-pale) !important; }
.background-color-orange-dark { background-color: var(--color-orange-dark) !important; }
.background-color-orange-normal { background-color: var(--color-orange-normal) !important; }
.background-color-orange-light { background-color: var(--color-orange-light) !important; }
.background-color-orange-pale { background-color: var(--color-orange-pale) !important; }
.background-color-red-dark { background-color: var(--color-red-dark) !important; }
.background-color-red-normal { background-color: var(--color-red-normal) !important; }
.background-color-red-light { background-color: var(--color-red-light) !important; }
.background-color-red-pale { background-color: var(--color-red-pale) !important; }
.background-color-gray-dark { background-color: var(--color-gray-dark) !important; }
.background-color-gray-normal { background-color: var(--color-gray-normal) !important; }
.background-color-gray-light { background-color: var(--color-gray-light) !important; }
.background-color-gray-pale { background-color: var(--color-gray-pale) !important; }
.background-color-white { background-color: var(--color-white) !important; }
.background-color-transparent { background-color: transparent !important; }

/* e-Shared-31 — the only official branded gradient, with no directional variants. */
.background-gradient-mellentaane {
  background: var(--gradient-mellentaane) !important;
}

.text-color-mellentaane-dark { color: var(--color-mellentaane-dark) !important; }
.text-color-mellentaane-normal { color: var(--color-mellentaane-normal) !important; }
.text-color-mellentaane-light { color: var(--color-mellentaane-light) !important; }
.text-color-mellentaane-pale { color: var(--color-mellentaane-pale) !important; }
.text-color-green-dark { color: var(--color-green-dark) !important; }
.text-color-green-normal { color: var(--color-green-normal) !important; }
.text-color-green-light { color: var(--color-green-light) !important; }
.text-color-green-pale { color: var(--color-green-pale) !important; }
.text-color-blue-dark { color: var(--color-blue-dark) !important; }
.text-color-blue-normal { color: var(--color-blue-normal) !important; }
.text-color-blue-light { color: var(--color-blue-light) !important; }
.text-color-blue-pale { color: var(--color-blue-pale) !important; }
.text-color-orange-dark { color: var(--color-orange-dark) !important; }
.text-color-orange-normal { color: var(--color-orange-normal) !important; }
.text-color-orange-light { color: var(--color-orange-light) !important; }
.text-color-orange-pale { color: var(--color-orange-pale) !important; }
.text-color-red-dark { color: var(--color-red-dark) !important; }
.text-color-red-normal { color: var(--color-red-normal) !important; }
.text-color-red-light { color: var(--color-red-light) !important; }
.text-color-red-pale { color: var(--color-red-pale) !important; }
.text-color-gray-dark { color: var(--color-gray-dark) !important; }
.text-color-gray-normal { color: var(--color-gray-normal) !important; }
.text-color-gray-light { color: var(--color-gray-light) !important; }
.text-color-gray-pale { color: var(--color-gray-pale) !important; }
.text-color-white { color: var(--color-white) !important; }
.text-color-black { color: var(--color-black) !important; }

.border-none { border: none !important; }
.border-left { border-style: none !important; border-left-style: solid !important; }
.border-right { border-style: none !important; border-right-style: solid !important; }
.border-top { border-style: none !important; border-top-style: solid !important; }
.border-bottom { border-style: none !important; border-bottom-style: solid !important; }
.border-horizontal { border-style: none !important; border-left-style: solid !important; border-right-style: solid !important; }
.border-vertical { border-style: none !important; border-top-style: solid !important; border-bottom-style: solid !important; }
.border-all { border-style: solid !important; }
.border-small { border-width: var(--border-small) !important; }
.border-medium { border-width: var(--border-medium) !important; }
.border-large { border-width: var(--border-large) !important; }
.border-color-mellentaane-dark { border-color: var(--color-mellentaane-dark) !important; }
.border-color-mellentaane-normal { border-color: var(--color-mellentaane-normal) !important; }
.border-color-mellentaane-light { border-color: var(--color-mellentaane-light) !important; }
.border-color-mellentaane-pale { border-color: var(--color-mellentaane-pale) !important; }
.border-color-green-dark { border-color: var(--color-green-dark) !important; }
.border-color-green-normal { border-color: var(--color-green-normal) !important; }
.border-color-green-light { border-color: var(--color-green-light) !important; }
.border-color-green-pale { border-color: var(--color-green-pale) !important; }
.border-color-blue-dark { border-color: var(--color-blue-dark) !important; }
.border-color-blue-normal { border-color: var(--color-blue-normal) !important; }
.border-color-blue-light { border-color: var(--color-blue-light) !important; }
.border-color-blue-pale { border-color: var(--color-blue-pale) !important; }
.border-color-orange-dark { border-color: var(--color-orange-dark) !important; }
.border-color-orange-normal { border-color: var(--color-orange-normal) !important; }
.border-color-orange-light { border-color: var(--color-orange-light) !important; }
.border-color-orange-pale { border-color: var(--color-orange-pale) !important; }
.border-color-red-dark { border-color: var(--color-red-dark) !important; }
.border-color-red-normal { border-color: var(--color-red-normal) !important; }
.border-color-red-light { border-color: var(--color-red-light) !important; }
.border-color-red-pale { border-color: var(--color-red-pale) !important; }
.border-color-gray-dark { border-color: var(--color-gray-dark) !important; }
.border-color-gray-normal { border-color: var(--color-gray-normal) !important; }
.border-color-gray-light { border-color: var(--color-gray-light) !important; }
.border-color-gray-pale { border-color: var(--color-gray-pale) !important; }
.border-color-transparent { border-color: transparent !important; }

.radius-none { border-radius: 0 !important; }
.radius-small { border-radius: var(--radius-small) !important; }
.radius-medium { border-radius: var(--radius-medium) !important; }
.radius-large { border-radius: var(--radius-large) !important; }


/* e-Shared-31 — semantic spacing utilities. Direction and size are combined. */
.margin-none { margin: 0 !important; }
.margin-all.margin-small { margin: var(--margin-small) !important; }
.margin-all.margin-medium { margin: var(--margin-medium) !important; }
.margin-all.margin-large { margin: var(--margin-large) !important; }
.margin-left.margin-small { margin-left: var(--margin-small) !important; }
.margin-left.margin-medium { margin-left: var(--margin-medium) !important; }
.margin-left.margin-large { margin-left: var(--margin-large) !important; }
.margin-top.margin-small { margin-top: var(--margin-small) !important; }
.margin-top.margin-medium { margin-top: var(--margin-medium) !important; }
.margin-top.margin-large { margin-top: var(--margin-large) !important; }
.margin-right.margin-small { margin-right: var(--margin-small) !important; }
.margin-right.margin-medium { margin-right: var(--margin-medium) !important; }
.margin-right.margin-large { margin-right: var(--margin-large) !important; }
.margin-bottom.margin-small { margin-bottom: var(--margin-small) !important; }
.margin-bottom.margin-medium { margin-bottom: var(--margin-medium) !important; }
.margin-bottom.margin-large { margin-bottom: var(--margin-large) !important; }
.margin-horizontal.margin-small { margin-left: var(--margin-small) !important; margin-right: var(--margin-small) !important; }
.margin-horizontal.margin-medium { margin-left: var(--margin-medium) !important; margin-right: var(--margin-medium) !important; }
.margin-horizontal.margin-large { margin-left: var(--margin-large) !important; margin-right: var(--margin-large) !important; }
.margin-vertical.margin-small { margin-top: var(--margin-small) !important; margin-bottom: var(--margin-small) !important; }
.margin-vertical.margin-medium { margin-top: var(--margin-medium) !important; margin-bottom: var(--margin-medium) !important; }
.margin-vertical.margin-large { margin-top: var(--margin-large) !important; margin-bottom: var(--margin-large) !important; }

.padding-none { padding: 0 !important; }
.padding-all.padding-small { padding: var(--padding-small) !important; }
.padding-all.padding-medium { padding: var(--padding-medium) !important; }
.padding-all.padding-large { padding: var(--padding-large) !important; }
.padding-left.padding-small { padding-left: var(--padding-small) !important; }
.padding-left.padding-medium { padding-left: var(--padding-medium) !important; }
.padding-left.padding-large { padding-left: var(--padding-large) !important; }
.padding-top.padding-small { padding-top: var(--padding-small) !important; }
.padding-top.padding-medium { padding-top: var(--padding-medium) !important; }
.padding-top.padding-large { padding-top: var(--padding-large) !important; }
.padding-right.padding-small { padding-right: var(--padding-small) !important; }
.padding-right.padding-medium { padding-right: var(--padding-medium) !important; }
.padding-right.padding-large { padding-right: var(--padding-large) !important; }
.padding-bottom.padding-small { padding-bottom: var(--padding-small) !important; }
.padding-bottom.padding-medium { padding-bottom: var(--padding-medium) !important; }
.padding-bottom.padding-large { padding-bottom: var(--padding-large) !important; }
.padding-horizontal.padding-small { padding-left: var(--padding-small) !important; padding-right: var(--padding-small) !important; }
.padding-horizontal.padding-medium { padding-left: var(--padding-medium) !important; padding-right: var(--padding-medium) !important; }
.padding-horizontal.padding-large { padding-left: var(--padding-large) !important; padding-right: var(--padding-large) !important; }
.padding-vertical.padding-small { padding-top: var(--padding-small) !important; padding-bottom: var(--padding-small) !important; }
.padding-vertical.padding-medium { padding-top: var(--padding-medium) !important; padding-bottom: var(--padding-medium) !important; }
.padding-vertical.padding-large { padding-top: var(--padding-large) !important; padding-bottom: var(--padding-large) !important; }

/* Documentation helpers */
.shared-doc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--s4); }
.shared-token-swatch { min-height:92px; border-radius:var(--radius-medium); padding:var(--padding-medium); display:flex; align-items:flex-end; font-weight:800; }
.shared-code-output { display:block; width:100%; min-height:92px; padding:var(--padding-medium); border:var(--border-small) solid var(--color-gray-light); border-radius:var(--radius-medium); background:var(--color-gray-pale); white-space:pre-wrap; overflow-wrap:anywhere; }
.shared-configurator { display:grid; grid-template-columns:minmax(300px,1fr) minmax(300px,1fr); gap:var(--s5); align-items:start; }
.shared-configurator-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3); }
.shared-configurator-fields label { display:grid; gap:6px; font-weight:700; }
.shared-configurator-fields .full { grid-column:1/-1; }
.shared-preview-stage { min-height:360px; padding:var(--s6); border:var(--border-small) dashed var(--color-gray-light); border-radius:var(--radius-large); background:var(--color-white); overflow:auto; }
.shared-demo-section { border:var(--border-small) solid var(--color-gray-light); border-radius:var(--radius-medium); padding:var(--padding-medium); }
@media(max-width:900px){.shared-configurator{grid-template-columns:1fr}.shared-configurator-fields{grid-template-columns:1fr}}
.card-link-inner { display:block; color:inherit; text-decoration:none; }
.card-link-inner:hover { color:inherit; }


/* e-Shared-31 — semantic aliases and component defaults */
.margin-horizontal-none { margin-left: 0 !important; margin-right: 0 !important; }
.margin-vertical-medium { margin-top: var(--margin-medium) !important; margin-bottom: var(--margin-medium) !important; }
.padding-all-medium { padding: var(--padding-medium) !important; }

:is(.card, [data-component-id^="card-"]) {
  margin-top: var(--margin-medium);
  margin-right: 0;
  margin-bottom: var(--margin-medium);
  margin-left: 0;
  padding: var(--padding-medium);
  border-radius: var(--radius-medium);
}
header[data-component-id^="header-"] { margin-bottom:var(--margin-large); border-radius:var(--radius-large); }
/* e-Shared-31 — table defaults target the visual component container. */
:is(
  .table-component[data-component-id^="table-"],
  .table-wrap[data-component-id^="table-"],
  table[data-component-id^="table-"]
) {
  margin-top: var(--margin-medium);
  margin-right: 0;
  margin-bottom: var(--margin-medium);
  margin-left: 0;
  border-radius: var(--radius-medium);
}
.configurator-intro{display:flex;justify-content:space-between;gap:var(--s5);align-items:center;padding:var(--s5);margin-bottom:var(--s5);border-radius:var(--radius-large);background:linear-gradient(135deg,var(--color-mellentaane-pale),var(--color-white));border:var(--border-small) solid var(--color-mellentaane-light)}
.configurator-intro h2{margin:.2rem 0 .55rem}.configurator-intro p{margin:0;max-width:760px}.configurator-intro-badge{display:grid;gap:.15rem;min-width:190px;padding:var(--s3) var(--s4);border-radius:var(--radius-medium);background:var(--color-white);box-shadow:0 12px 30px rgba(75,16,25,.1)}.configurator-intro-badge strong{color:var(--color-mellentaane-normal);font-size:1.05rem}.configurator-intro-badge span{font-size:.82rem;color:var(--color-gray-dark)}
.shared-configurator-polished{grid-template-columns:minmax(360px,.92fr) minmax(420px,1.08fr);gap:var(--s5)}
.configurator-panel,.configurator-result-panel{border-radius:var(--radius-large);border:var(--border-small) solid var(--color-gray-light);background:var(--color-white);box-shadow:0 18px 44px rgba(55,32,36,.08)}
.configurator-panel{padding:var(--s4);display:grid;gap:var(--s4)}.configurator-group{margin:0;padding:var(--s4);border:0;border-radius:var(--radius-medium);background:var(--color-gray-pale)}.configurator-group legend{display:flex;align-items:center;gap:var(--s3);width:100%;padding:0 0 var(--s3)}.configurator-group legend>span:last-child{display:grid;gap:.05rem}.configurator-group legend small{font-weight:500;color:var(--color-gray-dark)}.configurator-step{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--color-mellentaane-normal);color:#fff;font-weight:900}
.configurator-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}.configurator-fields label{display:grid;gap:.45rem;font-weight:750;font-size:.88rem}.configurator-fields select,.configurator-fields input{width:100%;min-height:44px;padding:.65rem .75rem;border:1px solid var(--color-gray-light);border-radius:var(--radius-small);background:#fff;color:var(--color-gray-dark);font:inherit}.configurator-fields select:focus,.configurator-fields input:focus{outline:3px solid var(--color-mellentaane-pale);border-color:var(--color-mellentaane-normal)}
.component-reference-preview{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-top:var(--s3);padding:.7rem .85rem;border-radius:var(--radius-small);background:#fff}.component-reference-preview span{font-size:.78rem;color:var(--color-gray-dark)}.component-reference-preview strong{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--color-mellentaane-normal)}
.configurator-actions{display:flex;gap:var(--s3);flex-wrap:wrap;padding-top:var(--s1)}.configurator-result-panel{padding:var(--s4);position:sticky;top:calc(var(--header-height,72px) + var(--s3));display:grid;gap:var(--s4)}.configurator-result-header,.instruction-result-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}.configurator-result-header h3,.instruction-result-heading h3{margin:.2rem 0 0}.live-indicator{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .65rem;border-radius:999px;background:var(--color-green-pale);font-size:.78rem;font-weight:800}.live-indicator i{width:8px;height:8px;border-radius:50%;background:var(--color-green-normal);box-shadow:0 0 0 4px color-mix(in srgb,var(--color-green-normal) 18%,transparent)}
.configurator-preview-stage{position:relative;display:grid;place-items:center;min-height:390px;padding:var(--s6);overflow:hidden;background-color:#fff;background-image:linear-gradient(var(--color-gray-pale) 1px,transparent 1px),linear-gradient(90deg,var(--color-gray-pale) 1px,transparent 1px);background-size:22px 22px;border-style:solid}.configurator-preview-stage:before{content:"APERÇU";position:absolute;top:14px;left:16px;font-size:.7rem;letter-spacing:.14em;font-weight:900;color:var(--color-gray-normal)}.configurator-preview-card{width:min(100%,430px);padding:var(--padding-large);box-shadow:0 18px 38px rgba(55,32,36,.13);position:relative;z-index:2}.configurator-preview-card h3{margin:.3rem 0 .45rem}.configurator-preview-card p{margin:0 0 var(--s3)}.preview-kicker{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:900;color:var(--color-mellentaane-normal)}.preview-measure{position:absolute;font-size:.68rem;color:var(--color-gray-dark);opacity:.7}.preview-measure-horizontal{bottom:15px;left:50%;transform:translateX(-50%)}.preview-measure-vertical{right:12px;top:50%;transform:translateY(-50%) rotate(90deg)}
.active-choices{display:grid;gap:.65rem}.active-choices>span{font-size:.78rem;font-weight:850;color:var(--color-gray-dark)}.configurator-chips{display:flex;flex-wrap:wrap;gap:.45rem}.configurator-chips span{padding:.36rem .58rem;border-radius:999px;background:var(--color-mellentaane-pale);color:var(--color-mellentaane-dark);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.72rem;font-weight:750}
.instruction-result{padding:var(--s4);border-radius:var(--radius-medium);background:var(--color-mellentaane-dark);color:#fff}.instruction-result .eyebrow{color:var(--color-mellentaane-light)}.instruction-result h3{color:#fff}.instruction-result .shared-code-output{margin-top:var(--s3);min-height:76px;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff}.icon-copy-button{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:transparent;color:#fff;font-size:1.1rem;cursor:pointer}.icon-copy-button:hover{background:rgba(255,255,255,.12)}.copy-feedback{min-height:1.2em;margin:.55rem 0 0;font-size:.78rem;color:var(--color-mellentaane-light)}
@media(max-width:1080px){.shared-configurator-polished{grid-template-columns:1fr}.configurator-result-panel{position:static}}@media(max-width:700px){.configurator-intro{align-items:flex-start;flex-direction:column}.configurator-intro-badge{width:100%}.configurator-fields{grid-template-columns:1fr}.configurator-panel,.configurator-result-panel{padding:var(--s3)}.configurator-preview-stage{min-height:330px;padding:var(--s4)}}

/* e-Shared-31 — documentation swatch for the official gradient. */
.shared-gradient-swatch {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.shared-gradient-swatch :where(h3,p) { color: inherit !important; }