/* Global Horizon — components. Lifted from the approved canvas. */

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 11px 17px;
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; text-align: center;
  transition: background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.btn--primary   { background: var(--navy); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--navy-700); color: #fff; }
.btn--secondary { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.btn--secondary:hover:not(:disabled) { border-color: var(--navy); color: var(--navy); }
.btn--ghost     { color: var(--ink-600); min-height: 36px; padding: 8px 10px; }
.btn--ghost:hover:not(:disabled) { color: var(--navy); }
.btn--danger    { background: var(--ember); color: #fff; }
.btn--sm        { min-height: 36px; padding: 8px 14px; font-size: 12.5px; }
.btn--block     { width: 100%; }
.btn:disabled   { background: #E8EBF0; color: var(--ink-300); border-color: transparent; cursor: default; }
.btn.is-busy    { opacity: 0.7; cursor: progress; }

.iconbtn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-600);
}
.iconbtn:hover { color: var(--navy); border-color: var(--navy); }
.iconbtn--ghost { border: 0; background: none; width: 36px; height: 36px; }
.iconbtn__badge {
  position: absolute; top: 3px; right: 3px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--ember); color: #fff; font-size: 9.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface);
}

/* ---------------------------------------------------------------- surfaces */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.card--list { display: flex; flex-direction: column; }

.stack { display: flex; flex-direction: column; gap: 9px; }

.section { display: flex; flex-direction: column; gap: 9px; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.section__meta { font-size: 11.5px; color: var(--ink-400); }

.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--sky); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; flex-shrink: 0;
}
.avatar--sm { width: 28px; height: 28px; font-size: 10.5px; }

/* ---------------------------------------------------------------- pills */

.pill {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: var(--radius-sm);
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.pill--sm { padding: 3px 8px; font-size: 10.5px; }
.pill--neutral  { color: var(--status-neutral-fg);  background: var(--status-neutral-bg); }
.pill--progress { color: var(--status-progress-fg); background: var(--status-progress-bg); }
.pill--done     { color: var(--status-done-fg);     background: var(--status-done-bg); }
.pill--info     { color: var(--status-info-fg);     background: var(--status-info-bg); }
.pill--alert    { color: var(--status-alert-fg);    background: var(--status-alert-bg); }

/* ---------------------------------------------------------------- rows */

.row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; min-height: 44px;
  border-bottom: 1px solid var(--line-faint);
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease);
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--surface-alt); color: var(--ink); }
.row--muted { opacity: 0.55; pointer-events: none; }
.row__icon {
  width: 36px; height: 36px; border-radius: var(--radius);
  background: #EDF3FA; color: var(--navy);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.row__main { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.row__title { font-size: 14px; font-weight: 600; }
.row__sub {
  font-size: 11.5px; color: var(--ink-400);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row__chev { color: #B4BCCB; display: flex; flex-shrink: 0; }

/* ---------------------------------------------------------------- home */

.home__hero {
  background: linear-gradient(118deg, var(--navy) 0%, var(--navy-700) 46%, var(--blue-500) 100%);
  padding: 20px var(--gutter) 34px;
  display: flex; flex-direction: column; gap: 3px;
}
.home__date {
  font-size: 11px; font-weight: 500; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--blue-200);
}
.home__greeting { font-size: 22px; color: #fff; }
.home__summary { font-size: 13px; color: var(--sky-deep); }

.home__body {
  padding: 0 var(--gutter) 24px;
  margin-top: -20px;
  display: flex; flex-direction: column; gap: 16px;
}

@media (min-width: 1024px) {
  .home__hero {
    background: none; padding: 24px 28px 0;
  }
  .home__date { color: var(--ink-400); }
  .home__greeting { font-size: 26px; color: var(--ink); }
  .home__summary { color: var(--ink-600); }
  .home__body { padding: 20px 28px 32px; margin-top: 0; gap: 20px; }
  .section--alerts { grid-column: 2; }
}

.askbar {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 13px 14px; min-height: 48px;
  box-shadow: var(--shadow-card);
  color: var(--ink);
}
.askbar:hover { border-color: var(--navy); color: var(--ink); }
.askbar__icon { color: var(--ember); display: flex; flex-shrink: 0; }
.askbar__text { flex-grow: 1; font-size: 13.5px; color: var(--ink-400); }
.askbar__badge {
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--navy); background: var(--sky);
  padding: 4px 7px; border-radius: var(--radius-sm);
}

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 1024px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }

.kpi {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 15px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.kpi__head { display: flex; align-items: center; gap: 8px; }
.kpi__dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.kpi__dot--ember { background: var(--ember); }
.kpi__dot--navy  { background: var(--navy); }
.kpi__dot--green { background: var(--green-dot); }
.kpi__dot--amber { background: var(--amber); }
.kpi__label { font-size: 12px; font-weight: 500; color: var(--ink-600); }
.kpi__value {
  font-family: var(--font-display); font-size: 28px; font-weight: 600;
  letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 8px;
}
.kpi__unit { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--ink-400); }

/* ---------------------------------------------------------------- tasks */

.task {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 13px;
  display: flex; align-items: flex-start; gap: 10px;
  transition: opacity var(--dur) var(--ease);
}
.task.is-done { opacity: 0.5; }
.task__check {
  width: 22px; height: 22px; border-radius: var(--radius-sm);
  border: 1.8px solid var(--grey); background: var(--surface);
  flex-shrink: 0; margin-top: 1px;
}
.task__check:hover { border-color: var(--green); }
.task.is-done .task__check { background: var(--green); border-color: var(--green); }
.task__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex-grow: 1; }
.task__title { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.task.is-done .task__title { text-decoration: line-through; color: var(--ink-300); }
.task__meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.task__module { font-size: 11.5px; color: var(--ink-400); }
.task__due { font-size: 11.5px; font-weight: 500; color: var(--ink-600); }
.task__due.is-due { color: var(--ember); }

/* ---------------------------------------------------------------- alerts */

.alert {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 14px; border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}
.alert:last-child { border-bottom: 0; }
.alert:hover { background: var(--surface-alt); color: var(--ink); }
.alert__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--grey); flex-shrink: 0; margin-top: 6px;
}
.alert__dot.is-unread { background: var(--ember); }
.alert__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alert__title { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.alert__body { font-size: 11.5px; color: var(--ink-600); line-height: 1.45; }
.alert__time { font-size: 10.5px; color: var(--ink-300); margin-top: 2px; }

/* ---------------------------------------------------------------- states */

.state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; padding: 46px 24px; text-align: center;
}
.state__icon { color: var(--grey); }
.state__icon--alert { color: var(--ember); }
.state__title { font-size: 14px; font-weight: 600; color: var(--ink-600); }
.state__body { font-size: 12.5px; color: var(--ink-400); line-height: 1.5; max-width: 34ch; }

.skel-stack { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.skel-row { display: flex; flex-direction: column; gap: 6px; }
.skel {
  height: 11px; border-radius: 5px;
  background: linear-gradient(90deg, #EDF0F5 25%, #F6F8FB 50%, #EDF0F5 75%);
  background-size: 280px 100%;
  animation: ghshimmer 1.3s linear infinite;
}
.skel--wide   { width: 78%; }
.skel--narrow { width: 46%; height: 9px; }
@keyframes ghshimmer {
  0%   { background-position: -280px 0; }
  100% { background-position:  280px 0; }
}
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* ---------------------------------------------------------------- sync + toasts */

.syncchip {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 500;
  color: var(--green-fg); background: var(--green-bg);
  border: 1px solid var(--green-line);
  padding: 6px 11px; border-radius: var(--radius-sm);
}
.syncchip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-dot); }
.syncchip.is-offline {
  color: var(--amber-fg); background: var(--amber-bg); border-color: var(--amber-line);
}
.syncchip.is-offline .syncchip__dot { background: var(--amber); }

.toast-host {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + 12px);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 8px;
  width: min(calc(100vw - 32px), 420px);
}
@media (min-width: 1024px) {
  .toast-host { left: auto; right: 24px; bottom: 24px; transform: none; }
}
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--navy); color: #fff;
  padding: 12px 14px; border-radius: var(--radius);
  box-shadow: var(--shadow-sheet);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast.is-in { opacity: 1; transform: translateY(0); }
.toast__icon { display: flex; flex-shrink: 0; color: var(--blue-200); }
.toast--success .toast__icon { color: #7FD3A5; }
.toast--error   .toast__icon { color: #FFB59A; }
.toast__msg { flex-grow: 1; font-size: 12.5px; font-weight: 500; }
.toast__undo {
  font-size: 12px; font-weight: 600; color: var(--blue-200);
  padding: 4px 6px; flex-shrink: 0;
}
.toast__undo:hover { color: #fff; }

.updatebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 12px calc(var(--gutter) + var(--safe-right)) calc(12px + var(--safe-bottom))
           calc(var(--gutter) + var(--safe-left));
  background: var(--navy); color: #fff; font-size: 13px;
}
.updatebar button {
  background: #fff; color: var(--navy); font-weight: 600;
  padding: 8px 14px; border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------- login */

.login {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--safe-top) + 24px) var(--gutter) calc(var(--safe-bottom) + 24px);
  background: var(--canvas);
}
.login__card {
  width: min(100%, 400px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px 24px 20px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 16px;
}
.login__logo { margin: 0 auto 4px; }
.login__title { font-size: 21px; text-align: center; }
.login__sub { font-size: 13px; color: var(--ink-600); text-align: center; }
.login__form { display: flex; flex-direction: column; gap: 12px; }
.login__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.login__version { font-size: 11px; color: var(--ink-300); text-align: center; }

.field { display: flex; flex-direction: column; gap: 5px; }
.field__label { font-size: 11.5px; font-weight: 600; color: var(--ink-600); }
.field__input {
  min-height: 46px; padding: 12px 13px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); font-size: 15px;   /* 16px-ish stops iOS zoom */
}
.field__input:focus { outline: none; border-color: var(--navy); box-shadow: var(--shadow-focus); }
.field__error { font-size: 12px; color: var(--ember-dark); }

.otp { display: flex; gap: 8px; justify-content: space-between; }
.otp__box {
  width: 100%; aspect-ratio: 3 / 4; min-height: 52px;
  text-align: center; font-size: 22px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface);
}
.otp__box:focus { outline: none; border-color: var(--navy); box-shadow: var(--shadow-focus); }