/* Palette: slate blue and paper, one amber for the single action that matters on each screen.
   The four alert levels are the only other colors that carry meaning. */
:root {
  --ms-ink: #1f2d3b;
  --ms-slate: #2f4a63;
  --ms-blue: #3b6ea5;
  --ms-muted: #6b7784;
  --ms-paper: #f3f5f7;
  --ms-card: #ffffff;
  --ms-line: #d8dee5;
  --ms-amber: #e0952f;
  --ms-amber-dark: #c07a19;
  --ms-green: #3f8a5c;
  --ms-red: #bd4a3c;
  --ms-lvl-0: #8a96a3;
  --ms-lvl-1: #3b6ea5;
  --ms-lvl-2: #d98324;
  --ms-lvl-3: #bd2f2f;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ms-ink);
  background: var(--ms-paper);
}

main { max-width: 680px; margin: 0 auto; padding: 1em 0.8em 3em; }

h1, h2 { color: var(--ms-slate); }
h1 { font-size: 1.25em; margin: 0 0 0.6em; }
h2 { font-size: 1.05em; margin: 1.2em 0 0.5em; }
.card > h1:first-child, .card > h2:first-child { margin-top: 0; }

a { color: var(--ms-blue); }
.hint { color: var(--ms-muted); font-size: 0.85em; margin-top: -0.2em; }
.hint.ok { color: var(--ms-green); font-weight: 600; margin-top: 0; }
.error { color: var(--ms-red); font-weight: 600; }
.error.small { font-size: 0.85em; margin-top: 0.3em; }
.warn { margin-top: 0.4em; padding: 0.4em 0.6em; font-size: 0.85em; background: #fdf3e1; border-left: 3px solid var(--ms-amber); border-radius: 4px; }
[hidden] { display: none; }

/* ---- controls ---- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  background: var(--ms-amber); color: #fff; border: none; padding: 0.7em 1.3em;
  border-radius: 8px; font-size: 1em; font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--ms-amber-dark); }
.btn-secondary { background: var(--ms-slate); }
.btn-secondary:hover { background: #223648; }
.btn-danger { background: var(--ms-red); }
.btn-small { padding: 0.45em 0.9em; font-size: 0.9em; }
.btn-link { background: none; border: none; padding: 0; color: var(--ms-red); font-size: 0.9em; cursor: pointer; text-decoration: underline; }
.btn-icon {
  width: 2.2em; height: 2.2em; border: 1px solid var(--ms-line); border-radius: 6px;
  background: #fff; color: var(--ms-slate); cursor: pointer; font-size: 0.95em;
}
.btn-icon:disabled { opacity: 0.35; cursor: default; }

input[type=text], input[type=number], input[type=email], input[type=time], select {
  padding: 0.6em; border: 1px solid var(--ms-line); border-radius: 8px; font-size: 1.05em;
  width: 100%; background: #fff; color: var(--ms-ink);
}
label { display: block; margin-bottom: 0.7em; }
label.inline { display: inline-flex; align-items: center; gap: 0.4em; margin-right: 1em; }
label.inline input { width: auto; }

.card {
  background: var(--ms-card); border: 1px solid var(--ms-line); border-radius: 12px;
  padding: 1.1em; margin-bottom: 1em;
}
.back-link { margin-top: 1.5em; font-size: 0.9em; }
.chip {
  display: inline-block; padding: 0.1em 0.6em; margin: 0 0.25em 0.2em 0;
  font-size: 0.78em; border-radius: 999px; background: #e8edf2; color: var(--ms-slate);
}
.chip-sent { background: #dff0e5; color: #2d6b45; }
.chip-failed { background: #f6dfdb; color: #9c3326; }
.chip-pending { background: #fdf0d8; color: #8a5a10; }
.code { word-break: break-all; padding: 0.6em; background: #eef1f4; border-radius: 8px; font-family: ui-monospace, Consolas, monospace; font-size: 0.82em; white-space: pre-wrap; }
pre.code { overflow-x: auto; }
.fields { padding-left: 1.1em; font-size: 0.9em; }

/* ---- tabs ---- */

.tabs { display: flex; gap: 0.4em; margin-bottom: 1em; }
.tabs a {
  flex: 1; text-align: center; padding: 0.6em 0.4em; border-radius: 8px; text-decoration: none;
  color: var(--ms-slate); background: #e4eaf0; font-weight: 600;
}
.tabs a.is-active { background: var(--ms-slate); color: #fff; }

/* ---- landing ---- */

.hero { text-align: center; padding: 1.5em 0 0.5em; }
.hero-mark img { width: 150px; height: auto; max-width: 60%; }
.hero h1 { font-size: 1.8em; margin: 0.2em 0 0.1em; }
.hero-tagline { color: var(--ms-muted); margin: 0 auto 1.2em; max-width: 30em; }
.steps { padding-left: 1.2em; margin: 0; }
.steps li { margin-bottom: 0.6em; }
.card-privacy { border-left: 4px solid var(--ms-green); }
.card-cta { text-align: center; }

/* ---- log ---- */

.filters { display: flex; gap: 0.5em; margin-bottom: 1em; }
.filters select { flex: 1; min-width: 0; }
.note { border-left: 5px solid var(--ms-lvl-1); padding: 0.8em 1em; }
.lvl-border-0 { border-left-color: var(--ms-lvl-0); }
.lvl-border-1 { border-left-color: var(--ms-lvl-1); }
.lvl-border-2 { border-left-color: var(--ms-lvl-2); }
.lvl-border-3 { border-left-color: var(--ms-lvl-3); }
.note-head { display: flex; align-items: center; gap: 0.6em; font-size: 0.85em; }
.note-app { font-weight: 700; text-decoration: none; }
.note-time { margin-left: auto; color: var(--ms-muted); }
.note-title { font-weight: 600; margin: 0.35em 0; }
.note-body { color: #3d4b59; margin-bottom: 0.3em; word-break: break-word; }
.note-foot { margin-top: 0.5em; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2em 0.4em; }
.note-make-rule { margin-left: auto; font-size: 0.85em; }
.lvl {
  display: inline-block; padding: 0.05em 0.55em; border-radius: 4px; color: #fff;
  font-size: 0.78em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
}
.lvl-0 { background: var(--ms-lvl-0); }
.lvl-1 { background: var(--ms-lvl-1); }
.lvl-2 { background: var(--ms-lvl-2); }
.lvl-3 { background: var(--ms-lvl-3); }
.pager { display: flex; justify-content: space-between; gap: 0.5em; }

/* ---- rules and outlets ---- */

.rule, .outlet { display: flex; gap: 0.8em; align-items: flex-start; justify-content: space-between; }
.rule.is-off { opacity: 0.55; }
.rule-default { border-style: dashed; background: transparent; }
.rule-main, .outlet-main { min-width: 0; flex: 1; }
.rule-name, .outlet-name { font-weight: 600; margin-bottom: 0.2em; }
.rule-num {
  display: inline-block; width: 1.6em; height: 1.6em; line-height: 1.6em; text-align: center;
  margin-right: 0.4em; border-radius: 50%; background: #e4eaf0; color: var(--ms-slate); font-size: 0.8em;
}
.rule-then { margin-top: 0.25em; }
.rule-actions { display: flex; gap: 0.3em; }
.outlet-test { display: flex; gap: 0.4em; align-items: center; }
.outlet-test select { width: auto; font-size: 0.9em; padding: 0.4em; }
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.6em; }
.type-tile {
  display: flex; flex-direction: column; gap: 0.2em; padding: 0.7em; border: 1px solid var(--ms-line);
  border-radius: 10px; text-decoration: none; color: var(--ms-ink);
}
.type-tile:hover { border-color: var(--ms-blue); }
.level-row { display: flex; gap: 0.5em; }
.time-row { display: flex; gap: 0.5em; align-items: center; margin-bottom: 0.6em; }
.time-row input { max-width: 9em; }
.day-picker { display: flex; gap: 0.3em; flex-wrap: wrap; margin-bottom: 1em; }
.day-picker label { margin: 0; }
.day-picker input { position: absolute; opacity: 0; pointer-events: none; }
.day-picker span {
  display: inline-block; min-width: 2.6em; padding: 0.45em 0.4em; text-align: center;
  border: 1px solid var(--ms-line); border-radius: 8px; cursor: pointer; font-size: 0.9em;
}
.day-picker label.is-selected span { background: var(--ms-slate); border-color: var(--ms-slate); color: #fff; }
.outlet-pick { margin-bottom: 0.5em; }
.outlet-pick label.inline { display: flex; margin: 0 0 0.4em; }

@media (max-width: 520px) {
  .rule, .outlet { flex-direction: column; }
  .rule-actions { align-self: flex-end; }
}