/* Ordia canonical Controls source
   This file contains canonical implementation CSS only.
   It must not redefine shared foundation tokens in :root.
*/

/* Buttons */
.bt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    opacity 120ms ease,
    transform 120ms ease;
}

.bt-btn:disabled,
.bt-btn.is-disabled {
  cursor: default;
  transform: none;
}

.bt-btn__icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.bt-btn__icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.bt-btn__icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bt-btn--primary {
  background: var(--tab-active-underline, #FFC000);
  color: #111111;
  border-color: var(--tab-active-underline, #FFC000);
}

.bt-btn--primary:hover,
.bt-btn--primary.is-hover {
  background: #ffd333;
  color: #111111;
  border-color: #ffd333;
  transform: translateY(-1px);
}

.bt-btn--primary:active,
.bt-btn--primary.is-pressed {
  background: #e2b100;
  color: #111111;
  border-color: #e2b100;
  transform: translateY(0);
}

.bt-btn--primary:disabled,
.bt-btn--primary.is-disabled {
  background: rgba(255,192,0,0.24);
  color: rgba(17,17,17,0.52);
  border-color: rgba(255,192,0,0.22);
  opacity: 1;
}

.bt-btn--secondary {
  background: transparent;
  color: var(--ds-text-muted, rgba(255,255,255,0.68));
  border-color: rgba(255,255,255,0.16);
}

.bt-btn--secondary:hover,
.bt-btn--secondary.is-hover {
  background: rgba(255,255,255,0.04);
  color: var(--ds-text-primary, #f2eee8);
  border-color: rgba(255,255,255,0.28);
}

.bt-btn--secondary:active,
.bt-btn--secondary.is-pressed {
  background: rgba(255,255,255,0.07);
  color: var(--ds-text-primary, #f2eee8);
  border-color: rgba(255,255,255,0.34);
}

.bt-btn--secondary:disabled,
.bt-btn--secondary.is-disabled {
  background: transparent;
  color: rgba(255,255,255,0.34);
  border-color: rgba(255,255,255,0.10);
  opacity: 1;
}

.bt-btn--tertiary {
  background: rgba(255,255,255,0.035);
  color: var(--ds-text-muted, rgba(255,255,255,0.68));
  border-color: rgba(255,255,255,0.10);
}

.bt-btn--tertiary:hover,
.bt-btn--tertiary.is-hover {
  background: rgba(255,255,255,0.05);
  color: var(--ds-text-primary, #f2eee8);
  border-color: rgba(255,255,255,0.18);
}

.bt-btn--tertiary:active,
.bt-btn--tertiary.is-pressed {
  background: rgba(255,255,255,0.08);
  color: var(--ds-text-primary, #f2eee8);
  border-color: rgba(255,255,255,0.22);
}

.bt-btn--tertiary:disabled,
.bt-btn--tertiary.is-disabled {
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.30);
  border-color: rgba(255,255,255,0.08);
  opacity: 1;
}

.bt-btn--text,
.bt-btn--text-danger {
  min-height: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 12px;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bt-btn--text {
  color: #c7d0d6;
}

.bt-btn--text:hover,
.bt-btn--text.is-hover {
  color: var(--ds-text-primary, #f2eee8);
}

.bt-btn--text:active,
.bt-btn--text.is-pressed {
  color: #eef3f5;
}

.bt-btn--text:disabled,
.bt-btn--text.is-disabled {
  color: rgba(199,208,214,0.42);
  opacity: 1;
}

.bt-btn--text-danger {
  color: #d09a9a;
}

.bt-btn--text-danger:hover,
.bt-btn--text-danger.is-hover {
  color: #f0b3b3;
}

.bt-btn--text-danger:active,
.bt-btn--text-danger.is-pressed {
  color: #ffd0d0;
}

.bt-btn--text-danger:disabled,
.bt-btn--text-danger.is-disabled {
  color: rgba(208,154,154,0.42);
  opacity: 1;
}

.bt-btn--compact {
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
}

/* Action bar */
.ct-ab-shell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.024);
}

.ct-ab-zone {
  display: flex;
  align-items: center;
  min-width: 0;
}

.ct-ab-zone--primary {
  margin-left: auto;
  justify-content: flex-end;
}

.ct-ab-cluster {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ct-ab-placeholder {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 999px;
  color: #8f9ba2;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  background: rgba(255,255,255,0.02);
}

.ct-ab-shell.is-stacked {
  flex-direction: column;
  align-items: stretch;
}

.ct-ab-shell.is-stacked .ct-ab-zone,
.ct-ab-shell.is-stacked .ct-ab-zone--primary,
.ct-ab-shell.is-stacked .ct-ab-cluster {
  width: 100%;
  margin-left: 0;
}

.ct-ab-shell.is-stacked .ct-ab-cluster {
  flex-direction: column;
}

.ct-ab-shell.is-stacked .ct-ab-cluster > * {
  width: 100%;
}

/* Controls dropdown/date candidate cluster
   Owns reusable dropdown and date/calendar primitives consumed by Questions.
*/

.ct-affordance-chip{
  width:22px;
  height:22px;
  border-radius:var(--radius-pill);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--affordance-fill, rgba(255,255,255,.055));
  color:var(--affordance-icon, #b6c1c8);
  transform-origin:50% 50%;
  transition:background var(--motion-base,160ms) ease, color var(--motion-base,160ms) ease, transform var(--motion-base,160ms) var(--motion-curve,cubic-bezier(0.22,1,0.36,1));
}
.ct-affordance-chip svg{
  width:14px;
  height:14px;
  display:block;
}
.ct-affordance-chip path{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ct-affordance-chip.is-hover,
.ct-affordance-chip.is-open{
  background:var(--affordance-fill-active, rgba(136,167,183,.12));
  color:var(--affordance-icon-active, #bdcbd1);
}
.ct-affordance-chip.is-open{ transform:rotate(180deg); }
.ct-affordance-chip.is-disabled{ opacity:.42; }

.ct-value-trigger{
  appearance:none;
  -webkit-appearance:none;
  min-height:46px;
  width:min(100%, 32rem);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:0;
  border-radius:var(--radius-control);
  background:var(--surface-01);
  color:var(--text-muted);
  font:inherit;
  box-shadow:none;
  text-align:left;
}
.ct-value-trigger.is-open{
  background:var(--surface-02, rgba(255,255,255,.04));
  color:var(--text);
}

.ct-menu-shell{
  display:grid;
  gap:4px;
  width:min(100%, 32rem);
  padding:6px;
  border-radius:var(--radius-menu, 12px);
  border:1px solid rgba(255,255,255,.1);
  background:var(--surface-menu, rgba(22,22,22,.98));
  box-shadow:var(--shadow-menu, 0 18px 40px rgba(0,0,0,.34));
}
.ct-menu-shell.is-scroll{
  max-height:150px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-color:rgba(255,255,255,.22) rgba(255,255,255,.04);
  scrollbar-width:thin;
}
.ct-menu-shell.is-scroll::-webkit-scrollbar{ width:10px; }
.ct-menu-shell.is-scroll::-webkit-scrollbar-track{ background:rgba(255,255,255,.04); border-radius:var(--radius-pill); }
.ct-menu-shell.is-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.22); border-radius:var(--radius-pill); border:2px solid rgba(22,22,22,.98); }
.ct-menu-shell.is-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.34); }

.ct-option-row{
  min-height:34px;
  display:flex;
  align-items:center;
  width:100%;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:var(--radius-row, 8px);
  background:transparent;
  color:#cdd5db;
  font-size:13px;
  line-height:1.4;
  text-align:left;
}
.ct-option-row.is-hover,
.ct-option-row.is-focus{
  background:rgba(255,255,255,.055);
  color:#f0f0f0;
}
.ct-option-row.is-selected{
  background:var(--selection);
  border-color:var(--selection-line);
  color:var(--text);
  box-shadow:inset 0 0 0 1px var(--selection-line);
}
.ct-option-row.is-disabled{
  opacity:.42;
  cursor:default;
}
.ct-option-text{
  color:inherit;
  min-width:0;
  overflow-wrap:anywhere;
}

.ct-date-shell{
  width:min(100%, 32rem);
  display:grid;
  gap:10px;
}
.ct-date-trigger{
  appearance:none;
  -webkit-appearance:none;
  min-height:46px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:0;
  border-radius:var(--radius-control);
  background:var(--surface-01);
  color:var(--text-muted);
  font:inherit;
  box-shadow:none;
  text-align:left;
}
.ct-date-trigger.is-open{
  background:var(--surface-02, rgba(255,255,255,.04));
  color:var(--text);
}
.ct-date-value{
  display:block;
  min-width:0;
  text-align:left;
}
.ct-date-icon{
  width:22px;
  height:22px;
  border-radius:var(--radius-pill);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.055);
  color:#b6c1c8;
  flex:0 0 auto;
}
.ct-date-icon svg{
  width:14px;
  height:14px;
  display:block;
  stroke:currentColor;
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ct-calendar-surface{
  width:280px;
  max-width:100%;
  display:grid;
  gap:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.1);
  background:var(--surface-menu, rgba(22,22,22,.98));
  box-shadow:var(--shadow-menu, 0 18px 40px rgba(0,0,0,.34));
  align-self:start;
}
.ct-calendar-header{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 34px;
  align-items:center;
  gap:8px;
}
.ct-calendar-month-label{
  color:var(--text);
  font-size:13px;
  font-weight:600;
  text-align:center;
}
.ct-calendar-nav{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:10px;
  background:rgba(255,255,255,.035);
  color:var(--text-muted);
}
.ct-calendar-nav.is-hover{
  background:rgba(255,255,255,.055);
  color:var(--text);
}
.ct-calendar-nav.is-disabled{
  opacity:.42;
}

.ct-calendar-weekdays,
.ct-calendar-grid{
  display:grid;
  grid-template-columns:repeat(7, minmax(0,1fr));
  gap:4px;
}
.ct-calendar-weekday{
  min-height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--text-faint);
  font-size:10px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.ct-calendar-day{
  width:32px;
  height:32px;
  justify-self:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#cdd5db;
  font:600 12px/1 "DM Sans", sans-serif;
}
.ct-calendar-day.is-hover,
.ct-calendar-day.is-focus{
  background:rgba(255,255,255,.055);
  color:var(--text);
}
.ct-calendar-day.is-today{
  color:var(--eyebrow);
  box-shadow:inset 0 0 0 1px rgba(215,208,187,.38);
}
.ct-calendar-day.is-selected{
  background:var(--selection);
  color:var(--text);
  box-shadow:inset 0 0 0 1px var(--selection-line);
}
.ct-calendar-day.is-outside{
  color:rgba(255,255,255,.28);
}
.ct-calendar-day.is-disabled{
  color:rgba(152,165,173,.34);
  cursor:default;
}

@media (prefers-reduced-motion: reduce){
  .ct-affordance-chip,
  .ct-calendar-nav,
  .ct-option-row{
    transition:none;
  }
}

/* Tabs
   Compound Controls-owned tab pattern.
   Questions and feature pages may consume this; they must not restyle tabs locally.
*/

.ct-tabs {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.ct-tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.08));
}

.ct-tab {
  appearance: none;
  -webkit-appearance: none;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 2px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted, rgba(255,255,255,0.68));
  font: 600 13px/1 "DM Sans", sans-serif;
  text-align: left;
  cursor: pointer;
  transition:
    color 120ms ease,
    border-color 120ms ease,
    opacity 120ms ease;
}

.ct-tab:hover,
.ct-tab.is-hover {
  color: var(--text, #f2eee8);
}

.ct-tab:focus-visible,
.ct-tab.is-focus {
  color: var(--text, #f2eee8);
  outline: none;
  border-bottom-color: rgba(255,192,0,0.58);
  box-shadow: 0 2px 0 rgba(255,192,0,0.22);
}

.ct-tab[aria-selected="true"],
.ct-tab.is-selected {
  color: var(--text, #f2eee8);
  border-bottom-color: var(--tab-active-underline, #FFC000);
}

.ct-tab:disabled,
.ct-tab.is-disabled {
  color: rgba(152,165,173,0.34);
  cursor: default;
}

.ct-tab-panel {
  min-width: 0;
}

.ct-tab-panel[hidden] {
  display: none;
}

.ct-tab-panel-copy {
  margin: 0;
  color: var(--text-muted, rgba(255,255,255,0.68));
  font: 400 13px/1.55 "DM Sans", sans-serif;
}

/* ==========================================================================
   Controls — skeleton placeholders
   ========================================================================== */

.ct-skeleton{
  display:grid;
  gap:10px;
}

.ct-skeleton-row{
  display:grid;
  gap:8px;
}

.ct-skeleton-line,
.ct-skeleton-block{
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,0.07);
}

.ct-skeleton-line{
  height:10px;
  border-radius:999px;
}

.ct-skeleton-block{
  border-radius:10px;
}

.ct-skeleton-title{
  height:12px;
  width:38%;
}

.ct-skeleton-medium{
  width:68%;
}

.ct-skeleton-short{
  width:44%;
}

.ct-skeleton-card{
  height:112px;
  border-radius:8px;
}

.ct-skeleton-dot{
  width:22px;
  height:22px;
  border-radius:999px;
}

.ct-skeleton--shimmer::after{
  content:'';
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,0.18),
    rgba(255,255,255,0)
  );
  animation:ctSkeletonShimmer 1.35s ease-in-out infinite;
}

@keyframes ctSkeletonShimmer{
  100%{ transform:translateX(100%); }
}

@media (prefers-reduced-motion: reduce){
  .ct-skeleton--shimmer::after{
    animation:none;
  }
}

/* ==========================================================================
   Controls — async status
   ========================================================================== */

.ct-async-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:22px;
  min-width:0;
  color:var(--text-muted, rgba(255,255,255,0.68));
  font-size:12px;
  font-weight:600;
  line-height:1.2;
}

.ct-async-status__indicator{
  width:22px;
  height:22px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.ct-async-status__indicator svg{
  width:14px;
  height:14px;
  display:block;
}

.ct-async-status__indicator path{
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ct-async-status__text{
  min-width:0;
  color:inherit;
}

.ct-async-status--loading{
  color:var(--text-muted, rgba(255,255,255,0.68));
}

.ct-async-status--success{
  color:var(--success-note-accent, #00A388);
}

.ct-async-status--success .ct-async-status__indicator{
  border-radius:var(--radius-pill);
  background:var(--success-note-surface, rgba(0,163,136,0.055));
  border:1px solid var(--success-note-border, rgba(0,163,136,0.30));
}

.ct-async-status--error{
  color:var(--error-note-accent, #e24b4a);
}

.ct-async-status--error .ct-async-status__indicator{
  border-radius:var(--radius-pill);
  background:var(--error-note-surface, rgba(226,75,74,0.055));
  border:1px solid var(--error-note-border, rgba(226,75,74,0.30));
}

.ct-async-status-cluster{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.ct-retry-control{
  width:22px;
  height:22px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.055);
  color:#b6c1c8;
  cursor:pointer;
  transition:
    background 120ms ease,
    color 120ms ease,
    opacity 120ms ease,
    transform 120ms ease;
}

.ct-retry-control:hover,
.ct-retry-control.is-hover{
  background:rgba(136,167,183,.12);
  color:#bdcbd1;
}

.ct-retry-control:active,
.ct-retry-control.is-pressed{
  transform:scale(.96);
}

.ct-retry-control:focus-visible,
.ct-retry-control.is-focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(136,167,183,.20);
}

.ct-retry-control:disabled,
.ct-retry-control.is-disabled{
  opacity:.42;
  cursor:default;
  transform:none;
}

.ct-retry-control__icon{
  width:14px;
  height:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.ct-retry-control__icon svg{
  width:14px;
  height:14px;
  display:block;
}

.ct-retry-control__icon path{
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}