/* Mode Atlas component primitives.
   Semantic UI components live here; page styles consume these instead of
   redefining control states independently. */

.ma-button{
  --ma-button-bg:var(--ma-control);
  --ma-button-bg-hover:var(--ma-control-hover);
  --ma-button-border:var(--ma-border-strong);
  --ma-button-color:var(--ma-control-text);
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--ma-space-2);
  min-height:var(--ma-button-min-height,var(--ma-control-height));
  padding:var(--ma-button-padding,0 var(--ma-space-4));
  border:1px solid var(--ma-button-border);
  border-radius:var(--ma-button-radius,var(--ma-radius-control));
  background:var(--ma-button-bg);
  color:var(--ma-button-color);
  box-shadow:var(--ma-shadow-control);
  font:inherit;
  font-size:.9rem;
  font-weight:var(--ma-button-font-weight,800);
  line-height:1.15;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  transition:
    background var(--ma-motion-fast) ease,
    border-color var(--ma-motion-fast) ease,
    color var(--ma-motion-fast) ease,
    transform var(--ma-motion-fast) ease,
    box-shadow var(--ma-motion-fast) ease,
    opacity var(--ma-motion-fast) ease;
}
.ma-button:hover:not(:disabled):not([aria-disabled="true"]){
  background:var(--ma-button-bg-hover);
  border-color:var(--ma-button-border-hover,var(--ma-control-active-border));
  transform:var(--ma-button-hover-transform,translateY(-1px));
}
.ma-button:active:not(:disabled):not([aria-disabled="true"]){transform:translateY(0);}
.ma-button:focus-visible{outline:3px solid var(--ma-focus-ring);outline-offset:2px;}
.ma-button:disabled, .ma-button[aria-disabled="true"]{opacity:.48;cursor:not-allowed;transform:none;box-shadow:none;}
.ma-button--primary{
  --ma-button-bg:linear-gradient(180deg,color-mix(in srgb,var(--ma-writing) 30%,var(--ma-card-2)),color-mix(in srgb,var(--ma-writing) 18%,var(--ma-card-3)));
  --ma-button-bg-hover:linear-gradient(180deg,color-mix(in srgb,var(--ma-writing) 38%,var(--ma-card-2)),color-mix(in srgb,var(--ma-writing) 24%,var(--ma-card-3)));
  --ma-button-border:color-mix(in srgb,var(--ma-writing) 52%,var(--ma-border));
}
.ma-button--danger{
  --ma-button-bg:linear-gradient(180deg,color-mix(in srgb,var(--ma-danger) 28%,var(--ma-card-2)),color-mix(in srgb,var(--ma-danger) 18%,var(--ma-card-3)));
  --ma-button-bg-hover:linear-gradient(180deg,color-mix(in srgb,var(--ma-danger) 38%,var(--ma-card-2)),color-mix(in srgb,var(--ma-danger) 24%,var(--ma-card-3)));
  --ma-button-border:color-mix(in srgb,var(--ma-danger) 55%,var(--ma-border));
}
.ma-button--ghost{background:transparent;box-shadow:none;}
.ma-button--small{--ma-button-min-height:var(--ma-control-height-sm);--ma-button-padding:0 var(--ma-space-3);font-size:.82rem;}
.ma-button--wide{width:100%;}
.ma-button.is-active, .ma-button.active, .ma-button[data-active="true"]{
  background:var(--ma-control-active);
  border-color:var(--ma-control-active-border);
  box-shadow:0 0 0 3px var(--ma-focus-ring),inset 0 1px 0 color-mix(in srgb,var(--ma-text) 10%,transparent);
}

.ma-status{
  display:flex;
  align-items:flex-start;
  gap:var(--ma-space-2);
  min-height:1.35em;
  color:var(--ma-muted);
  font-size:.84rem;
  font-weight:700;
  line-height:1.45;
}
.ma-status--info{color:var(--ma-info);}
.ma-status--success{color:var(--ma-success);}
.ma-status--warning{color:var(--ma-warning);}
.ma-status--error{color:var(--ma-danger);}


.ma-card{
  --ma-card-border:var(--ma-border);
  --ma-card-radius:var(--ma-radius-card);
  --ma-card-bg:var(--ma-surface);
  --ma-card-shadow:var(--ma-shadow-soft);
  border:1px solid var(--ma-card-border);
  border-radius:var(--ma-card-radius);
  background:var(--ma-card-bg);
  box-shadow:var(--ma-card-shadow);
  color:var(--ma-text);
}
.ma-card--soft{--ma-card-bg:var(--ma-surface-soft);}
.ma-card--flat{--ma-card-shadow:none;}
.ma-card--interactive{
  transition:transform var(--ma-motion-fast) ease,border-color var(--ma-motion-fast) ease,box-shadow var(--ma-motion-fast) ease,background var(--ma-motion-fast) ease;
}
.ma-card--interactive:hover{transform:translateY(-1px);}

/* Shared page composition primitives. These provide a consistent vocabulary for
   outer page rhythm without taking ownership of page-specific internal layouts. */
.ma-page-frame{
  width:min(var(--ma-page-max,var(--ma-content-max)),calc(100% - (var(--ma-page-gutter) * 2)));
  margin-inline:auto;
  position:relative;
  z-index:1;
}
.ma-page-stack{display:grid;gap:var(--ma-page-stack-gap,var(--ma-space-5));}
.ma-page-section{min-width:0;}
.ma-page-hero{min-width:0;}
.ma-page-section--spaced{margin-top:var(--ma-space-5);}
.ma-card--padded{padding:var(--ma-card-padding,var(--ma-page-card-padding));}

.ma-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--ma-section-head-gap,18px);
}
.ma-action-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--ma-action-gap,10px);
}
.ma-kicker{
  color:var(--ma-kicker-color,var(--ma-muted));
  font-size:var(--ma-kicker-size,.74rem);
  font-weight:var(--ma-kicker-weight,900);
  letter-spacing:var(--ma-kicker-spacing,.12em);
  line-height:1.2;
  text-transform:uppercase;
}
.ma-stat-grid{
  display:grid;
  grid-template-columns:repeat(var(--ma-stat-columns,4),minmax(0,1fr));
  gap:var(--ma-stat-gap,12px);
}
.ma-stat{
  --ma-card-radius:var(--ma-stat-radius,var(--ma-radius-control));
  --ma-card-bg:var(--ma-stat-bg,var(--ma-surface-soft));
  --ma-card-shadow:var(--ma-stat-shadow,none);
  padding:var(--ma-stat-padding,12px);
  min-width:0;
}
.ma-stat__label{
  color:var(--ma-stat-label-color,var(--ma-muted));
  font-size:var(--ma-stat-label-size,.78rem);
  font-weight:var(--ma-stat-label-weight,700);
  line-height:1.3;
  margin-bottom:var(--ma-stat-label-gap,7px);
}
.ma-stat__value{
  color:var(--ma-stat-value-color,var(--ma-text));
  font-size:var(--ma-stat-value-size,1.5rem);
  font-weight:var(--ma-stat-value-weight,800);
  line-height:var(--ma-stat-value-line,1);
  letter-spacing:var(--ma-stat-value-tracking,-.02em);
}
.ma-empty-state{
  --ma-card-border:var(--ma-empty-border,var(--ma-border));
  --ma-card-bg:var(--ma-empty-bg,var(--ma-surface-soft));
  --ma-card-shadow:none;
  border-style:dashed;
  padding:var(--ma-empty-padding,24px 18px);
  text-align:center;
  color:var(--ma-muted);
  line-height:1.5;
}

.ma-field{
  display:grid;
  gap:var(--ma-space-2);
  min-width:0;
}
.ma-field__label{
  color:var(--ma-text);
  font-size:.86rem;
  font-weight:800;
  line-height:1.25;
}
.ma-field__hint{
  color:var(--ma-muted);
  font-size:.8rem;
  font-weight:650;
  line-height:1.4;
}
.ma-input,.ma-select,.ma-textarea{
  width:100%;
  min-height:var(--ma-control-height);
  box-sizing:border-box;
  border:1px solid var(--ma-border-strong);
  border-radius:var(--ma-radius-control);
  background:var(--ma-card-3);
  color:var(--ma-text);
  padding:10px 13px;
  font:inherit;
  line-height:1.35;
  outline:none;
  transition:border-color var(--ma-motion-fast) ease,box-shadow var(--ma-motion-fast) ease,background var(--ma-motion-fast) ease;
}
.ma-input::placeholder,.ma-textarea::placeholder{color:color-mix(in srgb,var(--ma-muted) 80%,transparent);}
.ma-input:focus,.ma-select:focus,.ma-textarea:focus{
  border-color:var(--ma-control-active-border);
  box-shadow:0 0 0 3px var(--ma-focus-ring);
  background:var(--ma-card-2);
}
.ma-input:disabled,.ma-select:disabled,.ma-textarea:disabled{opacity:.58;cursor:not-allowed;}
.ma-textarea{min-height:96px;resize:vertical;}
.ma-select{appearance:auto;}
.ma-check{
  display:flex;
  align-items:flex-start;
  gap:var(--ma-space-3);
  padding:var(--ma-space-3);
  border:1px solid var(--ma-border);
  border-radius:var(--ma-radius-control);
  background:var(--ma-surface-soft);
  color:var(--ma-muted);
  font-size:.84rem;
  line-height:1.4;
}
.ma-check input{width:19px;height:19px;flex:0 0 auto;margin:0;accent-color:var(--ma-writing);}

.ma-surface{
  border:1px solid var(--ma-border);
  border-radius:var(--ma-radius-card);
  background:var(--ma-surface);
  box-shadow:var(--ma-shadow-soft);
}
.ma-surface--soft{background:var(--ma-surface-soft);}

.ma-pill{
  --ma-pill-bg:var(--ma-card-2);
  --ma-pill-border:var(--ma-border);
  --ma-pill-color:var(--ma-muted);
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 var(--ma-space-3);
  border:1px solid var(--ma-pill-border);
  border-radius:var(--ma-radius-pill);
  background:var(--ma-pill-bg);
  color:var(--ma-pill-color);
  font-size:.78rem;
  font-weight:800;
  line-height:1;
}
.ma-pill--small{min-height:26px;padding:0 10px;font-size:.74rem;}

html[data-ma-theme="light"] .ma-button{
  background:var(--ma-button-bg);
  color:var(--ma-button-color);
  -webkit-text-fill-color:var(--ma-button-color);
  border-color:var(--ma-button-border);
}
html[data-ma-theme="light"] .ma-button:hover:not(:disabled):not([aria-disabled="true"]){background:var(--ma-button-bg-hover);}


/* Transient notifications. Legacy tone names are normalized in mode-atlas-toast.js. */
.ma-toast-wrap{
  position:fixed;
  right:max(18px,env(safe-area-inset-right));
  bottom:max(18px,env(safe-area-inset-bottom));
  z-index:100000;
  display:grid;
  gap:10px;
  width:min(380px,calc(100vw - 32px));
  pointer-events:none;
}
.ma-toast{
  pointer-events:auto;
  padding:13px 15px;
  border:1px solid var(--ma-border);
  border-radius:18px;
  background:var(--ma-surface-strong);
  box-shadow:var(--ma-shadow-soft);
  color:var(--ma-text);
  font-size:13px;
  font-weight:800;
  line-height:1.35;
  transform:translateY(10px);
  opacity:0;
  animation:maToastIn var(--ma-motion-fast) ease forwards;
  transition:opacity var(--ma-motion-fast) ease,transform var(--ma-motion-fast) ease;
}
.ma-toast--success{border-color:color-mix(in srgb,var(--ma-success) 52%,var(--ma-border));}
.ma-toast--info{border-color:color-mix(in srgb,var(--ma-info) 52%,var(--ma-border));}
.ma-toast--warning{border-color:color-mix(in srgb,var(--ma-warning) 52%,var(--ma-border));}
.ma-toast--error{border-color:color-mix(in srgb,var(--ma-danger) 52%,var(--ma-border));}
.ma-toast.is-leaving{opacity:0;transform:translateY(8px);}
@keyframes maToastIn{to{opacity:1;transform:translateY(0);}}

@media(max-width:760px){.ma-toast-wrap{left:16px;right:16px;width:auto;}}

@media (prefers-reduced-motion:reduce){
  .ma-button,.ma-toast{transition:none;animation:none;}
  .ma-toast{opacity:1;transform:none;}
}

/* Shared decision / information dialog. Feature-specific modals may supply content,
   but backdrop, focus, actions and destructive styling are owned here. */
.ma-dialog-layer{
  position:fixed;
  inset:0;
  z-index:110000;
  display:grid;
  place-items:center;
  padding:clamp(16px,3vw,34px);
  opacity:0;
  transition:opacity var(--ma-motion-fast) ease;
}
.ma-dialog-layer[hidden]{display:none;}
.ma-dialog-layer.is-open{opacity:1;}
.ma-dialog-backdrop{
  position:absolute;
  inset:0;
  background:var(--ma-backdrop);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.ma-dialog{
  position:relative;
  z-index:1;
  width:min(520px,100%);
  max-height:min(86vh,760px);
  overflow:auto;
  border:1px solid var(--ma-border);
  border-radius:var(--ma-radius-card);
  background:var(--ma-surface-strong);
  box-shadow:var(--ma-shadow);
  color:var(--ma-text);
  padding:clamp(18px,3vw,26px);
  transform:translateY(8px) scale(.99);
  transition:transform var(--ma-motion-fast) ease;
}
.ma-dialog-layer.is-open .ma-dialog{transform:translateY(0) scale(1);}
.ma-dialog--wide{width:min(760px,100%);}
.ma-dialog--large{width:min(980px,100%);}
.ma-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:12px;}
.ma-dialog__heading{min-width:0;}
.ma-dialog__kicker{font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--ma-muted);}
.ma-dialog__title{margin:3px 0 0;font-size:clamp(1.35rem,3vw,1.75rem);line-height:1.08;letter-spacing:-.02em;}
.ma-dialog__close{flex:0 0 auto;}
.ma-dialog__close--icon{--ma-button-padding:0;width:var(--ma-control-height-sm);min-width:var(--ma-control-height-sm);height:var(--ma-control-height-sm);font-size:1.25rem;line-height:1;}
.ma-dialog__message{margin:0;color:var(--ma-muted);line-height:1.55;}
.ma-dialog__content{margin-top:16px;}
.ma-dialog__content[hidden]{display:none;}
.ma-dialog__actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;}
.ma-dialog__actions .ma-button{min-width:120px;}
.ma-dialog-layer[data-tone="warning"] .ma-dialog{border-color:color-mix(in srgb,var(--ma-warning) 48%,var(--ma-border));}
.ma-dialog-layer[data-tone="error"] .ma-dialog,
.ma-dialog-layer[data-tone="danger"] .ma-dialog{border-color:color-mix(in srgb,var(--ma-danger) 54%,var(--ma-border));}
.ma-dialog-layer[data-tone="success"] .ma-dialog{border-color:color-mix(in srgb,var(--ma-success) 48%,var(--ma-border));}

@media(max-width:560px){
  .ma-dialog-layer{align-items:end;padding:12px max(12px,env(safe-area-inset-right)) max(12px,calc(env(safe-area-inset-bottom) + 8px)) max(12px,env(safe-area-inset-left));}
  .ma-dialog{width:100%;max-height:82vh;border-radius:24px;}
  .ma-dialog__actions{display:grid;grid-template-columns:1fr;}
  .ma-dialog__actions .ma-button{width:100%;}
}

@media (prefers-reduced-motion:reduce){
  .ma-dialog-layer,.ma-dialog{transition:none;}
}

/* Contextual primary action. Pages set --ma-accent; the component owns the control mechanics. */
.ma-button--accent{
  --ma-button-bg:linear-gradient(180deg,color-mix(in srgb,var(--ma-accent,var(--ma-writing)) 30%,var(--ma-card-2)),color-mix(in srgb,var(--ma-accent,var(--ma-writing)) 18%,var(--ma-card-3)));
  --ma-button-bg-hover:linear-gradient(180deg,color-mix(in srgb,var(--ma-accent,var(--ma-writing)) 40%,var(--ma-card-2)),color-mix(in srgb,var(--ma-accent,var(--ma-writing)) 24%,var(--ma-card-3)));
  --ma-button-border:color-mix(in srgb,var(--ma-accent,var(--ma-writing)) 58%,var(--ma-border));
}

/* === 2.31 shared visual vocabulary === */
.ma-icon{
  width:var(--ma-icon-size);
  height:var(--ma-icon-size);
  display:inline-block;
  flex:0 0 auto;
  color:currentColor;
  fill:none;
  vertical-align:middle;
  pointer-events:none;
}
.ma-icon--sm{width:16px;height:16px;}
.ma-icon--lg{width:24px;height:24px;}

.ma-icon-button{
  appearance:none;
  -webkit-appearance:none;
  width:var(--ma-control-height);
  min-width:var(--ma-control-height);
  height:var(--ma-control-height);
  padding:0;
  display:inline-grid;
  place-items:center;
  border:1px solid var(--ma-border);
  border-radius:var(--ma-radius-pill);
  background:var(--ma-surface-inset);
  color:var(--ma-text-soft);
  box-shadow:none;
  font:inherit;
  cursor:pointer;
  transition:background var(--ma-motion-fast) ease,border-color var(--ma-motion-fast) ease,color var(--ma-motion-fast) ease,transform var(--ma-motion-fast) ease;
}
.ma-icon-button:hover:not(:disabled){background:var(--ma-control-hover);border-color:var(--ma-border-strong);color:var(--ma-text);transform:translateY(-1px);}
.ma-icon-button:focus-visible{outline:3px solid var(--ma-focus-ring);outline-offset:2px;}
.ma-icon-button:disabled{opacity:.48;cursor:not-allowed;transform:none;}

.ma-page-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(var(--ma-space-4),3vw,var(--ma-space-8));
  align-items:end;
}
.ma-page-intro__copy{min-width:0;}
.ma-page-intro__kicker{margin-bottom:var(--ma-space-3);}
.ma-page-intro__title{
  margin:0;
  color:var(--ma-text-strong);
  font-family:var(--ma-font-display);
  font-size:clamp(2.15rem,5vw,4.6rem);
  line-height:.96;
  letter-spacing:-.055em;
  text-wrap:balance;
}
.ma-page-intro__description{
  max-width:760px;
  margin:var(--ma-space-3) 0 0;
  color:var(--ma-text-soft);
  font-size:clamp(.98rem,1.6vw,1.12rem);
  line-height:1.6;
}
.ma-page-intro__aside{min-width:min(320px,32vw);}
.ma-page-intro__actions{margin-top:var(--ma-space-5);}

.ma-section-block{
  display:grid;
  gap:var(--ma-section-gap);
}
.ma-section-block__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--ma-space-4);
}
.ma-section-block__head h2{margin:0;color:var(--ma-text-strong);}
.ma-section-block__head p{margin:5px 0 0;color:var(--ma-muted);line-height:1.5;}

.ma-inset{
  border:1px solid var(--ma-border);
  border-radius:var(--ma-radius-md);
  background:var(--ma-surface-inset);
  box-shadow:none;
}
.ma-divider{
  border:0;
  height:1px;
  margin:var(--ma-space-4) 0;
  background:var(--ma-border);
}

.ma-toolbar-shared{
  display:flex;
  align-items:center;
  gap:var(--ma-space-3);
  flex-wrap:wrap;
}
.ma-toolbar-shared--sticky{
  position:sticky;
  top:calc(var(--ma-nav-sticky-offset,10px) + env(safe-area-inset-top,0px));
  z-index:15;
  padding:var(--ma-space-3);
  border:1px solid var(--ma-border);
  border-radius:var(--ma-radius-md);
  background:var(--ma-surface-strong);
  box-shadow:var(--ma-shadow-soft);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.ma-segmented{
  display:grid;
  grid-template-columns:repeat(var(--ma-segment-count,3),minmax(0,1fr));
  gap:4px;
  padding:4px;
  border:1px solid var(--ma-border);
  border-radius:calc(var(--ma-radius-control) + 4px);
  background:var(--ma-surface-inset);
}
.ma-segmented .ma-button{
  min-height:40px;
  border:0;
  box-shadow:none;
  background:transparent;
  border-radius:var(--ma-radius-control);
}
.ma-segmented .ma-button:hover:not(:disabled){background:var(--ma-control-hover);transform:none;}
.ma-segmented .ma-button.active,
.ma-segmented .ma-button[aria-pressed="true"]{
  background:var(--ma-control-active);
  color:var(--ma-control-text);
  box-shadow:var(--ma-shadow-control);
}

.ma-setting-list{
  overflow:hidden;
  border:1px solid var(--ma-border);
  border-radius:var(--ma-radius-card);
  background:var(--ma-surface-soft);
}
.ma-setting-row{
  display:grid;
  grid-template-columns:var(--ma-setting-row-columns,minmax(0,1fr) minmax(180px,auto));
  gap:var(--ma-space-4);
  align-items:center;
  padding:var(--ma-space-4);
  border-bottom:1px solid var(--ma-border);
}
.ma-setting-row:last-child{border-bottom:0;}
.ma-setting-row__copy{min-width:0;}
.ma-setting-row__label{color:var(--ma-text-strong);font-weight:var(--ma-weight-bold);line-height:1.25;}
.ma-setting-row__description{margin-top:4px;color:var(--ma-muted);font-size:var(--ma-text-sm);line-height:1.45;}
.ma-setting-row__control{justify-self:var(--ma-setting-control-justify,end);width:var(--ma-setting-control-width,auto);min-width:0;}
.ma-setting-row--stack{grid-template-columns:1fr;align-items:start;}
.ma-setting-row--stack .ma-setting-row__control{justify-self:stretch;width:100%;}
.ma-setting-row--danger .ma-setting-row__label{color:var(--ma-danger);}

.ma-status-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:30px;
  padding:0 10px;
  border:1px solid var(--ma-border);
  border-radius:var(--ma-radius-pill);
  background:var(--ma-surface-inset);
  color:var(--ma-muted);
  font-size:var(--ma-text-xs);
  font-weight:var(--ma-weight-bold);
}
.ma-status-chip::before{
  content:"";
  width:8px;height:8px;border-radius:var(--ma-radius-pill);
  background:currentColor;
  box-shadow:0 0 0 3px color-mix(in srgb,currentColor 14%,transparent);
}
.ma-status-chip--success{color:var(--ma-success);background:var(--ma-status-success-bg);}
.ma-status-chip--warning{color:var(--ma-warning);background:var(--ma-status-warning-bg);}
.ma-status-chip--danger{color:var(--ma-danger);background:var(--ma-status-danger-bg);}
.ma-status-chip--info{color:var(--ma-info);background:var(--ma-status-info-bg);}

.ma-progress{
  height:8px;
  overflow:hidden;
  border-radius:var(--ma-radius-pill);
  background:color-mix(in srgb,var(--ma-border) 72%,transparent);
}
.ma-progress__fill{
  display:block;
  height:100%;
  width:var(--ma-progress,0%);
  border-radius:inherit;
  background:var(--ma-progress-color,var(--ma-info));
  transition:width var(--ma-motion-medium) ease;
}

.ma-skeleton-block,
.ma-skeleton-text{
  position:relative;
  overflow:hidden;
  color:transparent!important;
  background:color-mix(in srgb,var(--ma-card-2) 72%,var(--ma-border));
  border-radius:var(--ma-radius-control);
}
.ma-skeleton-text{display:inline-block;min-width:4ch;min-height:1em;}
.ma-skeleton-block::after,
.ma-skeleton-text::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ma-text) 9%,transparent),transparent);
  animation:maSkeletonSweep 1.35s ease-in-out infinite;
}
@keyframes maSkeletonSweep{to{transform:translateX(100%);}}

.ma-trend{
  display:grid;
  grid-template-columns:repeat(var(--ma-trend-count,8),minmax(0,1fr));
  align-items:end;
  gap:5px;
  min-height:78px;
  padding:12px;
  border:1px solid var(--ma-border);
  border-radius:var(--ma-radius-md);
  background:var(--ma-surface-inset);
}
.ma-trend__bar{
  min-height:8px;
  height:var(--ma-trend-height,30%);
  border-radius:var(--ma-radius-pill) var(--ma-radius-pill) 4px 4px;
  background:var(--ma-trend-color,var(--ma-info));
  opacity:.78;
  transition:height var(--ma-motion-medium) ease,opacity var(--ma-motion-fast) ease;
}
.ma-trend__bar:hover{opacity:1;}

body[data-effective-display-mode="tablet"] .ma-setting-row,
body[data-effective-display-mode="phone"] .ma-setting-row{grid-template-columns:1fr;gap:var(--ma-space-3);align-items:start;}
body[data-effective-display-mode="tablet"] .ma-setting-row__control,
body[data-effective-display-mode="phone"] .ma-setting-row__control{justify-self:stretch;width:100%;}

@media(max-width:760px){
  .ma-page-intro{grid-template-columns:1fr;align-items:start;}
  .ma-page-intro__aside{min-width:0;width:100%;}
  .ma-section-block__head{align-items:flex-start;flex-direction:column;}
  .ma-setting-row{grid-template-columns:1fr;gap:var(--ma-space-3);}
  .ma-setting-row__control{justify-self:stretch;width:100%;}
  .ma-segmented{width:100%;}
  .ma-toolbar-shared--sticky{top:calc(6px + env(safe-area-inset-top,0px));}
}

@media(prefers-reduced-motion:reduce){
  .ma-progress__fill,.ma-trend__bar{transition:none;}
  .ma-skeleton-block::after,.ma-skeleton-text::after{animation:none;display:none;}
}


@media(pointer:coarse){
  .ma-button--small{--ma-button-min-height:44px;}
  .ma-icon-button,.ma-dialog__close--icon{min-width:44px;min-height:44px;}
}