:root {
  color-scheme: light dark;
  font-family: system-ui, sans-serif;
  background: var(--color-bg-page);
  color: #17202a;

  --color-primary: #3a6ea8;
  --color-border: #dce3ea;
  --color-border-input: #b9c6d3;
  --color-muted: #52616f;
  --color-bg-page: #f4f6f8;
  --color-warn-bg: #fff3cd;
  --color-warn-border: #ffe69c;
  --color-warn-text: #664d03;
  --color-warn-amber: #856404;
  --color-danger: #dc2626;
  --color-danger-bg: #fef2f2;
  --shadow-card: 0 8px 30px rgb(23 32 42 / 8%);
  --font-size-label: .8rem;
  --radius-sm: .65rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
}

body { margin: 0; }

.shell {
  box-sizing: border-box;
  display: grid;
  gap: 1rem;
  margin: 0 auto;
  max-width: 480px;
  padding:
    max(1.5rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
}

.shell__title {
  font-size: 2rem;
  font-weight: 800;
  margin: 0 0 .25rem;
}

.connection { color: var(--color-warn-amber); font-size: .9rem; margin: 0; }

.connection::before {
  animation: spin .8s linear infinite;
  border: 2px solid currentcolor;
  border-top-color: transparent;
  border-radius: 50%;
  content: '';
  display: inline-block;
  height: .75em;
  margin-right: .4em;
  vertical-align: middle;
  width: .75em;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse-opacity {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.loading { animation: pulse-opacity 1.4s ease-in-out infinite; }

.status {
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn-border);
  border-radius: var(--radius-md);
  color: var(--color-warn-text);
  font-size: .9rem;
  padding: .85rem 1rem;
}

.status[data-level="error"] {
  background: #f8d7da;
  border-color: #f5c2c7;
  color: #58151c;
}

.status__link { color: inherit; font-weight: 600; }

.status__diag { margin: .4rem 0 0; font-size: .85em; }
.status__diag code { font-family: monospace; background: rgb(0 0 0 / 8%); border-radius: 3px; padding: .1em .35em; }

.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
}

.card__heading {
  color: var(--color-muted);
  font-size: var(--font-size-label);
  font-weight: 700;
  letter-spacing: .06em;
  margin: 0;
  text-transform: uppercase;
}

.card__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

/* Stepper */
.stepper {
  align-items: center;
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  position: relative;
}

.stepper__button {
  align-items: center;
  background: transparent;
  border: 2px solid currentcolor;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 1.25rem;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.stepper__value {
  font-size: 2.5rem;
  font-weight: 700;
  min-width: 5rem;
  text-align: center;
}

.stepper__clear {
  align-items: center;
  background: transparent;
  border: 1.5px solid var(--color-muted);
  border-radius: 50%;
  color: var(--color-muted);
  cursor: pointer;
  display: flex;
  height: 20px;
  justify-content: center;
  left: calc(50% + 2.5rem + 0.375rem);
  padding: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  visibility: hidden;
  width: 20px;
}

.stepper__clear--visible {
  pointer-events: auto;
  visibility: visible;
}

.stepper__clear:hover {
  background: var(--color-muted);
  color: #fff;
}

/* Action buttons */
.actions {
  display: grid;
  gap: .75rem;
  grid-template-columns: 1fr 1fr;
}

.actions__button {
  border-radius: var(--radius-md);
  cursor: pointer;
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  padding: .75rem;
}

.btn-ajasta {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-aseta {
  background: var(--color-primary);
  border: 2px solid var(--color-primary);
  color: #fff;
}

/* Reading row */
.reading {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr auto;
  margin: 0;
  row-gap: .35rem;
}

.reading__label {
  color: var(--color-muted);
  font-size: var(--font-size-label);
}

.reading__value {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  text-align: right;
}

/* Editable setpoint */
.stepper__value[contenteditable]:not(.loading) { cursor: text; }

.stepper__value:not(.loading)::after { content: "°"; }

.stepper__value:focus::after,
.stepper__value.loading::after { content: ""; }

.stepper__value[contenteditable]:focus {
  border-radius: var(--radius-sm);
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

.ajastin-section { display: none; }

.ajastin-section--visible {
  display: grid;
  gap: 1rem;
}

/* Ajastin card */
.ajastin-card {
  background: var(--color-bg-page);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .6rem .75rem;
}

.ajastin-card__row {
  align-items: center;
  display: flex;
  gap: .5rem;
  justify-content: space-between;
}

.ajastin-card__actions {
  display: flex;
  flex-shrink: 0;
  gap: .15rem;
}

.ajastin-card--muted { color: var(--color-muted); }

.ajastin-card__toggle {
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  padding: .25rem .45rem;
  transition: transform .15s ease;
}

.ajastin-card__toggle:disabled {
  cursor: default;
  opacity: .35;
}

.ajastin-card--expanded .ajastin-card__toggle { transform: rotate(90deg); }

.ajastin-card__toggle:hover:not(:disabled) { background: rgb(0 0 0 / 5%); }

.ajastin-card__delete {
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-danger);
  cursor: pointer;
  flex-shrink: 0;
  font: inherit;
  font-size: .9rem;
  padding: .25rem .5rem;
}

.ajastin-card__delete:disabled {
  cursor: default;
  opacity: .35;
}

.ajastin-card__delete:hover:not(:disabled) { background: var(--color-danger-bg); }

.ajastin-card__schedule {
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: .5rem;
  padding-top: .5rem;
}

.ajastin-card__schedule[hidden] { display: none; }

.ajastin-card__schedule-start {
  font-size: .9rem;
  margin: 0;
}

.ajastin-card__schedule-note {
  color: var(--color-muted);
  font-size: .85rem;
  margin: 0;
}

.feasibility-warning {
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn-border);
  border-radius: var(--radius-md);
  color: var(--color-warn-text);
  font-size: .85rem;
  margin: 0;
  padding: .65rem .75rem;
}

.feasibility-warning[hidden] { display: none; }

.ajastin-card__steps {
  display: grid;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ajastin-card__step {
  align-items: baseline;
  display: grid;
  font-size: .9rem;
  gap: .35rem .75rem;
  grid-template-columns: 3.5rem 2.5rem 1fr;
}

.ajastin-card__step--past {
  color: var(--color-muted);
  text-decoration: line-through;
}

.ajastin-card__step--next { font-weight: 600; }

.ajastin-card__step--arrival {
  border-top: 1px dashed var(--color-border);
  margin-top: .25rem;
  padding-top: .5rem;
}

.ajastin-card__step-badge {
  color: var(--color-muted);
  font-size: .8rem;
  font-weight: 500;
}

.ajastin-card__step--next .ajastin-card__step-badge { color: inherit; }

.muted { color: var(--color-muted); }

/* Modal */
.ajasta-modal {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 40px rgb(0 0 0 / 20%);
  max-height: 90dvh;
  max-width: 480px;
  overflow-y: auto;
  padding: 0;
  width: calc(100svw - 2rem);
}

.ajasta-modal__form {
  box-sizing: border-box;
  display: grid;
  gap: .75rem;
  padding: 1.5rem;
}

.ajasta-modal__heading {
  font-size: 1.1rem;
  margin-top: 0;
}

.ajasta-modal__fields {
  display: grid;
  gap: .5rem;
}

.ajasta-modal__input {
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  font: inherit;
  min-width: 0;
  padding: 1rem;
}

.ajasta-modal__actions {
  display: grid;
  gap: .75rem;
  grid-template-columns: 1fr 1fr;
}

.ajasta-modal__cancel {
  background: transparent;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 1rem;
}

.ajasta-modal__ok {
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 1rem;
}

.ajasta-modal::backdrop { background: rgb(0 0 0 / 50%); }

/* Login form */
.login-form {
  display: grid;
  gap: .75rem;
}

.login-form__field {
  display: grid;
  font-size: var(--font-size-label);
  font-weight: 700;
  gap: .4rem;
  letter-spacing: .04em;
}

.login-form__input {
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  padding: 1rem;
  width: 100%;
}

.login-form__submit {
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 1rem;
  width: 100%;
}

.stepper__button:disabled,
.btn-ajasta:disabled,
.btn-aseta:disabled {
  cursor: default;
  opacity: .45;
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  :root { background: #111827; color: #f9fafb; --color-muted: #b6c2cf; }
  .card { background: #1f2937; border-color: #374151; }
  .card__divider { border-top-color: #374151; }
  .stepper__button { color: #f9fafb; }
  .btn-ajasta { border-color: #7aa7d4; color: #7aa7d4; }
  .ajastin-card { background: #111827; border-color: #374151; }
  .ajastin-card__delete:hover:not(:disabled) { background: #2d1515; }
  .ajasta-modal { background: #1f2937; color: #f9fafb; }
  .ajasta-modal__input { background: #111827; border-color: #374151; color: #f9fafb; }
  .ajasta-modal__cancel { border-color: #374151; }
  .login-form__input { background: #111827; border-color: #374151; color: #f9fafb; }
  .status[data-level="error"] { background: #2c0b0e; border-color: #842029; color: #f8d7da; }
}