/* ===========================================================================
   AutoMail Reminder
   ---------------------------------------------------------------------------
   An internal tool used properly once a month. That shapes everything: the
   person opening it has forgotten how it works since last time, so nothing
   hides behind hover, labels say what they do, and the one consequential
   action is the only thing that looks like a primary button.

   Palette is ledger ink on recycled paper: deep petrol for anything you can
   press, ochre for "due soon", colour only where it carries meaning.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* ink */
  --ink:        #16202e;
  --ink-2:      #5a6676;
  --ink-3:      #8b95a3;
  --on-dark:    #e8ece7;
  --on-dark-2:  #9aa5ad;

  /* ground */
  --paper:      #f2f4f1;
  --surface:    #ffffff;
  --sunk:       #fafbf9;
  --line:       #e0e4dd;
  --line-2:     #c9d0c6;

  /* signal — each one means something specific */
  --action:     #0f5057;   /* you can press this */
  --action-h:   #0a3b41;
  --amber:      #a8620c;   /* due soon */
  --amber-bg:   #fbf1e2;
  --go:         #1a6b48;   /* sent */
  --go-bg:      #e6f2ea;
  --stop:       #9d2f26;   /* failed */
  --stop-bg:    #fbeae8;

  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --r: 7px;
  --sidebar: 236px;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}

/* numbers line up in columns everywhere they matter */
.num, td.num, .stat-value, .strip-legend b { font-variant-numeric: tabular-nums; }

a { color: var(--action); }

/* ---------------------------------------------------------------- shell -- */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar); flex: none;
  background: var(--ink); color: var(--on-dark);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.brand-mark {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  background: linear-gradient(150deg, #1d7a7a, #0f5057);
  display: grid; place-items: center; color: #fff;
}
.brand-text { line-height: 1.2; }
.brand-name {
  font-family: var(--display); font-weight: 700;
  font-size: 15px; letter-spacing: -0.015em; display: block;
}
.brand-sub { font-size: 11px; color: var(--on-dark-2); letter-spacing: 0.02em; }

.nav { padding: 12px; flex: 1; overflow-y: auto; }
.nav-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em;
  color: #6d7883; padding: 12px 8px 6px; font-weight: 600;
}
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 1px; border-radius: 6px;
  color: var(--on-dark-2); text-decoration: none;
  font-size: 14px; font-weight: 500;
}
.nav a:hover { background: rgba(255,255,255,0.06); color: var(--on-dark); }
.nav a.active { background: var(--action); color: #fff; }
.nav a svg { flex: none; opacity: 0.85; }
.nav a.active svg { opacity: 1; }
.nav .badge-count {
  margin-left: auto; font-size: 11px; font-weight: 600;
  background: var(--amber); color: #fff; padding: 1px 7px; border-radius: 10px;
}

.sidebar-foot {
  padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.09);
  font-size: 12px; color: var(--on-dark-2);
}
.sidebar-foot strong { color: var(--on-dark); font-weight: 600; display: block; }
.sidebar-foot a { color: var(--on-dark-2); }

.main { flex: 1; min-width: 0; }
.main-inner { max-width: 1080px; padding: 0 32px 80px; }

/* --------------------------------------------------------------- header -- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; padding: 34px 0 22px;
}
h1 {
  font-family: var(--display); font-weight: 700;
  font-size: 27px; letter-spacing: -0.02em; margin: 0; line-height: 1.15;
}
.page-sub { color: var(--ink-2); font-size: 14px; margin: 5px 0 0; }
h2 {
  font-family: var(--display); font-weight: 700;
  font-size: 15px; letter-spacing: -0.005em; margin: 0 0 14px;
}

/* --------------------------------------------------------------- panels -- */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px 22px; margin-bottom: 18px;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.panel-head h2 { margin: 0; }
.panel-flush { padding: 20px 0 0; }
.panel-flush > .panel-head, .panel-flush > p { padding-left: 22px; padding-right: 22px; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }

/* ---------------------------------------------------------------- stats -- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--line-2); border-radius: var(--r);
  padding: 16px 18px 15px; text-decoration: none; color: inherit; display: block;
}
a.stat:hover { border-color: var(--line-2); border-top-color: var(--action); }
.stat-value {
  font-family: var(--display); font-weight: 700;
  font-size: 30px; letter-spacing: -0.025em; line-height: 1;
  display: block; margin-bottom: 5px;
}
.stat-label { font-size: 12.5px; color: var(--ink-2); }
.stat-go   { border-top-color: var(--go); }    .stat-go .stat-value   { color: var(--go); }
.stat-warn { border-top-color: var(--amber); } .stat-warn .stat-value { color: var(--amber); }
.stat-stop { border-top-color: var(--stop); }  .stat-stop .stat-value { color: var(--stop); }

/* --------------------------------------------------------------- tables -- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3);
  padding: 9px 12px; border-bottom: 1px solid var(--line);
  background: var(--sunk); white-space: nowrap;
}
td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--sunk); }
td.num, th.num { text-align: right; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--ink-2); }
.tiny { font-size: 12px; }
.stack-sm { display: block; font-size: 12px; color: var(--ink-2); margin-top: 2px; }

/* urgency encoded on the row edge, not as decoration */
tr.row-over td:first-child { box-shadow: inset 3px 0 0 var(--stop); }
tr.row-soon td:first-child { box-shadow: inset 3px 0 0 var(--amber); }

.pill {
  display: inline-block; padding: 2px 9px; border-radius: 11px;
  font-size: 11.5px; font-weight: 600;
  background: #eceff0; color: #55606c; white-space: nowrap;
}
.pill-sent, .pill-completed { background: var(--go-bg); color: var(--go); }
.pill-failed, .pill-cancelled { background: var(--stop-bg); color: var(--stop); }
.pill-pending, .pill-sending, .pill-running { background: var(--amber-bg); color: var(--amber); }
.pill-paused { background: #e7ecf2; color: #3c5068; }
.due-over { color: var(--stop); font-weight: 500; }
.due-soon { color: var(--amber); font-weight: 500; }

/* ----------------------------------------------------------------- tags -- */
.tag {
  display: inline-block; padding: 1px 8px; margin: 0 3px 2px 0;
  border-radius: 4px; font-size: 11.5px; font-weight: 500;
  background: #e4ecec; color: #12525a; border: 1px solid #cfdedd;
  white-space: nowrap; vertical-align: 1px;
}
.tag-click { cursor: pointer; }
.tag-click:hover { background: #d3e3e2; }

.tag-picker { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-option {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 20px;
  border: 1px solid var(--line-2); background: var(--surface);
  font-size: 13.5px; font-weight: 500; cursor: pointer; margin-bottom: 0;
  user-select: none;
}
.tag-option:hover { border-color: #9aa89f; background: var(--sunk); }
.tag-option input { width: auto; margin: 0; accent-color: var(--action); }
.tag-option.is-on {
  border-color: var(--action); background: #e7f0f0; color: var(--action);
}
.tag-count {
  font-size: 11px; font-variant-numeric: tabular-nums;
  background: #e9ece8; color: var(--ink-2);
  padding: 0 6px; border-radius: 9px;
}
.tag-option.is-on .tag-count { background: #cfe2e2; color: var(--action); }

/* ---------------------------------------------------------------- forms -- */
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
/* Match every text-like input, including ones with no type attribute at all
   (an input without `type` defaults to text but does NOT match
   input[type=text], which silently left them unstyled). Checkboxes, radios
   and buttons are excluded so they keep their native size. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
select, textarea {
  width: 100%; padding: 9px 11px;
  font: 400 14px/1.4 var(--body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 6px;
}
input:hover, select:hover, textarea:hover { border-color: #adb6a9; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--action);
  box-shadow: 0 0 0 3px rgba(15,80,87,0.13);
}
:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
textarea { font-family: var(--mono); font-size: 13px; line-height: 1.65; resize: vertical; }
.hint { font-size: 12.5px; color: var(--ink-2); margin: 6px 0 0; }
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
.inline-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.inline-form label { margin-bottom: 0; align-self: center; white-space: nowrap; }
.inline-form input, .inline-form select { width: auto; min-width: 190px; }
.check { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; }
.check input { width: auto; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 17px; border-radius: 6px;
  font: 500 14px/1 var(--body); cursor: pointer; text-decoration: none;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-2);
}
.btn:hover { background: var(--sunk); border-color: #adb6a9; }
.btn-primary { background: var(--action); border-color: var(--action); color: #fff; }
.btn-primary:hover { background: var(--action-h); border-color: var(--action-h); }
.btn-lg { padding: 12px 24px; font-size: 15px; }
.btn-danger { color: var(--stop); border-color: #e0bab6; }
.btn-danger:hover { background: var(--stop-bg); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.sticky-bar {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 15px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  box-shadow: 0 -3px 14px rgba(22,32,46,0.07);
}

/* -------------------------------------------------------------- notices -- */
.note {
  padding: 12px 15px; border-radius: var(--r); margin-bottom: 16px;
  font-size: 14px; border: 1px solid; border-left-width: 3px;
}
.note-success { background: var(--go-bg);    border-color: #b9dcc7; border-left-color: var(--go);     color: #14513a; }
.note-error   { background: var(--stop-bg);  border-color: #edc3bf; border-left-color: var(--stop);   color: #7d251e; }
.note-info    { background: #e9eff1;         border-color: #c3d6da; border-left-color: var(--action); color: #143f45; }
.note-warn    { background: var(--amber-bg); border-color: #ecd4ac; border-left-color: var(--amber);  color: #7d4908; }
.empty { color: var(--ink-2); padding: 26px 22px; text-align: center; font-size: 14px; }
.empty strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }

/* ------------------------------------------------- the run strip (signature)
   One cell per email. You watch the run fill in and can see what it is made
   of at a glance, not just how far along it is. */
.strip-wrap { margin-bottom: 16px; }
.strip {
  display: flex; flex-wrap: wrap; gap: 2px; padding: 12px;
  background: var(--sunk); border: 1px solid var(--line);
  border-radius: var(--r); min-height: 54px; align-content: flex-start;
}
.cell { width: 11px; height: 11px; border-radius: 2px; background: #d7dcd4;
        transition: background-color 0.25s ease; }
.cell.is-sent    { background: var(--go); }
.cell.is-failed  { background: var(--stop); }
.cell.is-skipped { background: #b9c0b6; }
.cell.is-active  { background: var(--amber); animation: pulse 0.9s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.strip-legend {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 10px; font-size: 12.5px; color: var(--ink-2);
}
.strip-legend span { display: inline-flex; align-items: center; gap: 6px; }
.strip-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.strip-legend b { color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .cell { transition: none; }
  .cell.is-active { animation: none; }
}

/* ------------------------------------------------------------- settings -- */
.tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--line);
        margin-bottom: 22px; flex-wrap: wrap; }
.tabs a {
  padding: 9px 15px; font-size: 14px; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--action); border-bottom-color: var(--action); font-weight: 600; }

.kv { font-size: 13.5px; }
.kv td { padding: 7px 0; border-bottom: 1px dashed var(--line); }
.kv td:first-child { color: var(--ink-2); width: 45%; }

.copyable { cursor: pointer; font-family: var(--mono); font-size: 12.5px;
            background: #edf0ec; padding: 2px 6px; border-radius: 4px; word-break: break-all; }
.copyable:hover { background: #dfe4dd; }
code { font-family: var(--mono); font-size: 12.5px; background: #edf0ec;
       padding: 1px 5px; border-radius: 4px; }

/* -------------------------------------------------------------- preview -- */
.preview-subject { font-size: 14px; padding-bottom: 10px;
                   border-bottom: 1px solid var(--line); margin: 0 0 14px; }
.preview-body { border: 1px solid var(--line); border-radius: var(--r);
                padding: 18px; background: var(--sunk); font-size: 14px; }
.preview-body table { width: auto; font-size: 14px; }
.preview-body td { border: 0; padding: 3px 14px 3px 0; }
.preview-body p:first-child { margin-top: 0; }

/* --------------------------------------------------------------- sign in --
   Two panels: what the tool is on the left, the form on the right. The left
   half exists because this gets opened about once a month — whoever lands
   here has usually forgotten what it does. */
.signin { margin: 0; background: var(--surface); }

.signin-grid { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }

/* left panel */
.signin-side {
  background: var(--ink);
  color: var(--on-dark);
  display: flex; align-items: center;
  padding: 48px;
  background-image:
    radial-gradient(ellipse 75% 60% at 15% 0%, rgba(29,122,122,0.30), transparent 68%),
    radial-gradient(ellipse 65% 55% at 90% 100%, rgba(15,80,87,0.34), transparent 70%);
}
.signin-side-inner { max-width: 400px; }

.signin-logo { display: flex; align-items: center; gap: 11px; margin-bottom: 46px; }
.signin-logo .brand-mark { width: 34px; height: 34px; border-radius: 9px; }
.signin-logo-text {
  font-family: var(--display); font-weight: 700; font-size: 16px;
  letter-spacing: -0.015em; color: #fff;
}

.signin-lede {
  font-family: var(--display); font-weight: 700;
  font-size: 38px; line-height: 1.12; letter-spacing: -0.03em;
  color: #fff; margin: 0 0 30px;
}

.signin-points { list-style: none; margin: 0; padding: 0; }
.signin-points li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 15px; line-height: 1.5; color: var(--on-dark-2);
  margin-bottom: 15px;
}
.signin-tick {
  flex: none; width: 19px; height: 19px; margin-top: 2px;
  border-radius: 50%; background: rgba(29,122,122,0.35);
  position: relative;
}
.signin-tick::after {
  content: ''; position: absolute; left: 6px; top: 4px;
  width: 5px; height: 9px;
  border: solid #6fd3c6; border-width: 0 1.8px 1.8px 0;
  transform: rotate(42deg);
}

.signin-org {
  margin: 44px 0 0; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.11);
  font-size: 13px; color: #7d8892; letter-spacing: 0.01em;
}

/* right panel */
.signin-main { display: grid; place-items: center; padding: 48px 40px; }
.signin-form { width: 100%; max-width: 348px; }
.signin-form-head { margin-bottom: 26px; }
.signin-form-head h2 {
  font-family: var(--display); font-weight: 700;
  font-size: 25px; letter-spacing: -0.02em; margin: 0 0 6px;
}
.signin-form-head p { margin: 0; color: var(--ink-2); font-size: 14px; }

.signin-form .field { margin-bottom: 18px; }
.signin-form input { padding: 11px 13px; font-size: 15px; }
.signin-form .btn { width: 100%; justify-content: center; margin-top: 6px; }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 62px; }
.pw-toggle {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer;
  font: 600 12px/1 var(--body); color: var(--ink-2);
  padding: 7px 9px; border-radius: 5px;
}
.pw-toggle:hover { color: var(--action); background: var(--sunk); }

.signin-note {
  margin: 22px 0 0; padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-3); line-height: 1.6;
}
.signin-note strong { color: var(--ink-2); font-weight: 600; }

/* --------------------------------------------------------------- mobile -- */
@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; }
  .nav { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px; }
  .nav-label, .nav .badge-count { display: none; }
  .nav a { padding: 7px 11px; font-size: 13px; }
  .sidebar-foot { display: flex; justify-content: space-between; align-items: center; }
  .sidebar-foot strong { display: inline; }
  .main-inner { padding: 0 16px 60px; }
  .cols, .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .page-head { padding: 22px 0 16px; }
  h1 { font-size: 23px; }
  .table-scroll { overflow-x: auto; }
  .table-scroll table { min-width: 620px; }
  /* One column on a phone: the form first, the explanation folded away to a
     compact header so nothing pushes the fields below the fold. */
  .signin-grid { grid-template-columns: 1fr; min-height: 100vh; }
  .signin-side { padding: 26px 22px; }
  .signin-side-inner { max-width: none; }
  .signin-logo { margin-bottom: 0; }
  .signin-lede, .signin-points, .signin-org { display: none; }
  .signin-main { padding: 34px 22px 48px; place-items: start center; }
  .signin-form { max-width: 420px; }
}

@media print { .sidebar, .sticky-bar, .btn { display: none; } }