/* Korax DS 1.31 — one geometry for action buttons, independent of theme or state. */
.button,.icon-button,.theme-trigger,.appearance-toggle,.segmented button,.account-avatar-trigger,.avatar-photo-panel input::file-selector-button,#company-logo::file-selector-button{
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;vertical-align:middle;height:var(--button-height);min-height:var(--button-height);
  gap:var(--button-gap);padding:0 var(--button-padding-x);
  border:var(--button-border-width) solid var(--border-control);border-radius:var(--button-radius);
  background-color:var(--surface-primary);color:var(--text-primary);
  font-family:var(--font-family-brand);font-size:var(--button-font-size);line-height:var(--button-line-height);
  font-weight:var(--button-font-weight);letter-spacing:normal;text-align:center;text-decoration:none;white-space:nowrap;
  cursor:pointer;transition:background-color var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast);
}
.button:not(:disabled):not([aria-disabled="true"]):hover,.icon-button:not(:disabled):hover,.theme-trigger:not(:disabled):hover,.appearance-toggle:not(:disabled):hover,.segmented button:not(:disabled):hover,.account-avatar-trigger:not(:disabled):hover{
  background-color:var(--surface-tertiary);border-color:var(--text-secondary);
}
.button:not(:disabled):not([aria-disabled="true"]):active,.icon-button:not(:disabled):active,.theme-trigger:not(:disabled):active,.appearance-toggle:not(:disabled):active,.segmented button:not(:disabled):active{
  background-color:var(--action-soft);border-color:var(--action-text);
}
.button.primary{background-color:var(--action-primary);color:var(--on-action);border-color:var(--action-border,var(--action-primary))}
.button.primary:not(:disabled):not([aria-disabled="true"]):hover{background-color:var(--action-primary-hover);border-color:var(--action-border,var(--action-primary-hover))}
.button.primary:not(:disabled):not([aria-disabled="true"]):active{background-color:var(--action-primary-active)}
.button.ghost{background-color:transparent;border-color:transparent;color:var(--action-text)}
.button.danger{background-color:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.button.danger:not(:disabled):not([aria-disabled="true"]):hover,.button.danger:not(:disabled):not([aria-disabled="true"]):active{background-color:var(--danger-soft);border-color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger)}
.segmented button[aria-pressed="true"],.theme-trigger[aria-expanded="true"],.button[aria-pressed="true"]{
  background-color:var(--action-soft);color:var(--action-text);border-color:var(--action-text);
}
.button:focus-visible,.icon-button:focus-visible,.theme-trigger:focus-visible,.appearance-toggle:focus-visible,.segmented button:focus-visible,.account-avatar-trigger:focus-visible{
  outline:var(--button-focus-width) solid var(--focus-ring);outline-offset:var(--button-focus-offset);position:relative;z-index:1;
}
.button:disabled,.icon-button:disabled,.theme-trigger:disabled,.appearance-toggle:disabled,.segmented button:disabled,.account-avatar-trigger:disabled,.button[aria-disabled="true"]{
  opacity:.5;cursor:not-allowed;box-shadow:none;background-image:none;
}
.button[aria-busy="true"]{cursor:progress;opacity:1}
.button>svg,.icon-button>svg,.theme-trigger>svg,.appearance-toggle>svg,.segmented button>svg{width:var(--button-icon-size);height:var(--button-icon-size);flex:none}
.theme-trigger>svg:last-child,.apps-trigger>svg:last-child,.apps-chevron>svg{width:var(--button-chevron-size);height:var(--button-chevron-size)}
.icon-button,.topbar-theme,.segmented [data-device],.account-avatar-trigger{
  width:var(--button-height);min-width:var(--button-height);padding:0;
}
.topbar-theme>svg:first-child{width:var(--button-icon-size);height:var(--button-icon-size)}
.appearance-control,.segmented{display:inline-flex;align-items:center;gap:var(--button-group-gap);padding:0;border:0;background:transparent;flex:none}
.appearance-control{border-radius:0}
/* One switch, two visual positions; preserve the previous 96 × 44 px footprint. */
.appearance-toggle{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:200px;gap:4px;padding:3px;isolation:isolate}
/* Include the indicator border in its width so both positions retain the same inset. */
.appearance-toggle::before{content:"";box-sizing:border-box;position:absolute;inset-block:3px;left:3px;width:calc((100% - 10px) / 2);border:1px solid var(--action-text);border-radius:calc(var(--button-radius) - 3px);background:var(--action-soft);transition:transform var(--motion-standard);z-index:0}
.appearance-toggle[aria-checked="true"]::before{transform:translateX(calc(100% + 4px))}
.appearance-mode{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:var(--button-gap);min-width:0;color:var(--text-secondary);pointer-events:none}
.appearance-mode>svg{width:var(--button-icon-size);height:var(--button-icon-size);flex:none}
.appearance-toggle[aria-checked="false"] [data-appearance-mode="light"],.appearance-toggle[aria-checked="true"] [data-appearance-mode="dark"]{color:var(--action-text)}
.appearance-toggle[aria-checked="false"] [data-appearance-mode="light"]>svg,.appearance-toggle[aria-checked="true"] [data-appearance-mode="dark"]>svg{stroke-width:2.5}
.topbar-appearance .appearance-toggle{width:calc(var(--button-height) * 2 + var(--button-group-gap))}
@media(prefers-reduced-motion:reduce){.appearance-toggle::before{transition:none}}
@media(forced-colors:active){.appearance-toggle::before{background:Highlight;border-color:Highlight}.appearance-toggle[aria-checked="false"] [data-appearance-mode="light"],.appearance-toggle[aria-checked="true"] [data-appearance-mode="dark"]{color:HighlightText}}


.button-row{gap:var(--button-group-gap)}
.account-avatar-trigger .account-avatar{border:0}
.avatar-photo-panel input::file-selector-button,#company-logo::file-selector-button{margin-right:var(--button-group-gap)}
.button-toolbar-demo,.topbar-tools{display:flex;align-items:center;gap:var(--button-group-gap)}
.button-toolbar-demo{flex-wrap:wrap;padding:var(--space-4);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background-image:var(--ambient-chrome-image)}
.button-system{margin-bottom:var(--space-8)}
.button-system-intro{margin-bottom:var(--space-6)}
.button-system-intro p,.button-example p{margin-top:var(--space-2);color:var(--text-secondary);font-size:var(--font-body-sm-size);line-height:var(--font-body-sm-line)}
.button-contract{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);margin:var(--space-6) 0}
.button-contract div{padding:var(--space-4);background:var(--surface-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}
.button-contract dt{font-size:var(--font-caption-size);color:var(--text-secondary)}
.button-contract dd{font-size:var(--font-h4-size);font-weight:600;margin:var(--space-1) 0 0}
.button-example-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);margin:var(--space-6) 0}
.button-example{min-width:0}
.button-example h3{margin-bottom:var(--space-3)}
.button-example-grid .button-row{align-items:center}
.button-system details{margin-top:var(--space-4)}
.button-system summary{cursor:pointer;color:var(--action-text);font-weight:600;padding-block:var(--space-3)}
.button-system .codebox{margin-top:var(--space-2)}
.button-state-samples{display:flex;align-items:flex-start;flex-wrap:wrap;gap:var(--space-4)}
.button-state-samples>div{display:grid;justify-items:start;gap:var(--space-2)}
.button-state-samples small{color:var(--text-secondary)}
/* Static state examples use the same tokens as their corresponding native states. */
.button[data-button-state="hover"]{background-color:var(--surface-tertiary);border-color:var(--text-secondary)}
.button[data-button-state="pressed"]{background-color:var(--action-soft);border-color:var(--action-text)}
.button[data-button-state="focus"]{outline:var(--button-focus-width) solid var(--focus-ring);outline-offset:var(--button-focus-offset)}
.button-leading{display:inline-flex;align-items:center;justify-content:center;width:var(--button-icon-size);height:var(--button-icon-size);flex:none}
.button-leading>svg{width:var(--button-icon-size);height:var(--button-icon-size)}
.button-spinner{display:inline-block;width:var(--button-icon-size);height:var(--button-icon-size);border:2px solid currentColor;border-right-color:transparent;border-radius:50%;flex:none;animation:button-spin 800ms linear infinite}
@keyframes button-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.button-spinner{animation:none}}
@media(forced-colors:active){.button,.icon-button,.theme-trigger,.appearance-toggle,.segmented button{border-color:ButtonText}.segmented button[aria-pressed="true"]{outline:2px solid Highlight;outline-offset:-4px}}
@media(max-width:767px){.button-contract{grid-template-columns:repeat(2,minmax(0,1fr))}.button-example-grid{grid-template-columns:1fr}.topbar-actions{gap:var(--space-2)}}
@media(max-width:560px){.topbar .apps-chevron{display:none}}
/* At narrow widths, reorganize the header instead of shrinking its buttons. */
@media(max-width:400px){
  :root{--layout-topbar:112px}
  .topbar{height:var(--layout-topbar);display:grid;grid-template-columns:var(--button-height) minmax(0,1fr) var(--button-height);grid-template-rows:var(--button-height) var(--button-height);gap:var(--space-2);padding:var(--space-2);border-bottom:0;box-shadow:inset 0 -1px 0 var(--border-subtle)}
  .topbar-actions{display:contents}
  .topbar-tools{grid-row:2;grid-column:1/-1;justify-content:flex-end}
  .topbar>[id="menu-toggle"]{grid-row:1;grid-column:1}
  .topbar [data-avatar-trigger-mount]{grid-row:1;grid-column:3}
  .topbar .breadcrumbs{display:flex;grid-row:1;grid-column:2;min-width:0}
}