/* Dil's Command Deck — self-hosted edition.
   Deliberately old-Safari-safe: float-based layout only, no CSS Grid,
   no Flexbox, no CSS custom properties. Tested-pattern CSS only. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: #0D1614;
  color: #EEF3EF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}
h1, h2 { font-weight: bold; margin: 0; }
a { text-decoration: none; }

.deck { padding: 20px; max-width: 1024px; margin: 0 auto; }

.deck-head {
  overflow: hidden;
  border-bottom: 1px solid #263934;
  padding-bottom: 14px;
  margin-bottom: 16px;
}
.deck-title { float: left; }
.eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: #57C7BE; font-weight: bold; margin-bottom: 4px;
}
.deck-title h1 { font-size: 22px; }
.deck-clock { float: right; text-align: right; }
.deck-clock .time { font-size: 28px; font-weight: bold; color: #F5C97A; }
.deck-clock .date { font-size: 12px; color: #6B8079; margin-top: 4px; }

.panel {
  background: #142320;
  border: 1px solid #263934;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.panel-head { overflow: hidden; margin-bottom: 10px; }
.panel-head h2 {
  float: left; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #9FB6AE;
}
.panel-sub { float: right; font-size: 11px; color: #6B8079; }

.msg-line { font-size: 13px; color: #6B8079; padding: 6px 2px; clear: both; }

/* Two-column layout via float — works on every WebKit back to iOS 5 */
.deck-grid { overflow: hidden; }
.col-left { float: left; width: 58%; }
.col-right { float: right; width: 40%; }

.cal-month-label { font-size: 12px; font-weight: bold; text-transform: uppercase; color: #9FB6AE; margin-bottom: 8px; }
.cal-table { width: 100%; border-collapse: separate; border-spacing: 3px; margin-bottom: 4px; table-layout: fixed; }
.cal-table th { font-size: 10px; color: #6B8079; text-transform: uppercase; padding: 2px; font-weight: normal; }
.cal-table td {
  background: #1A2C28; border-radius: 6px; vertical-align: top; padding: 4px;
  height: 52px; font-size: 9.5px; overflow: hidden;
}
.cal-table td.cal-empty { background: transparent; }
.cal-table td.today { border: 1px solid #57C7BE; background: #163330; }
.cal-day-num { font-size: 11px; font-weight: bold; color: #9FB6AE; margin-bottom: 2px; }
.cal-chip {
  font-size: 8.5px; background: #33270F; color: #F5C97A; border-radius: 4px;
  padding: 1px 3px; margin-bottom: 1px; overflow: hidden; white-space: nowrap;
}
.cal-chip-more { background: #142320; color: #6B8079; }

.cal-upcoming-label {
  font-size: 11px; font-weight: bold; text-transform: uppercase; color: #6B8079;
  margin: 10px 0 8px; padding-top: 10px; border-top: 1px solid #263934; clear: both;
}
.cal-row { overflow: hidden; margin-bottom: 8px; }
.cal-badge {
  float: left; width: 44px; text-align: center; background: #163330; color: #A6E8E1;
  border-radius: 6px; padding: 4px 0; font-weight: bold; margin-right: 10px;
}
.cal-badge .mo { display: block; font-size: 9px; text-transform: uppercase; }
.cal-badge .day { display: block; font-size: 14px; }
.cal-body { margin-left: 54px; }
.cal-title { font-size: 13px; font-weight: bold; }
.cal-meta { font-size: 11px; color: #6B8079; }

.task-form { margin-bottom: 10px; overflow: hidden; }
.task-form input[type=text] {
  width: 65%; padding: 7px; background: #1A2C28; border: 1px solid #263934;
  color: #EEF3EF; border-radius: 6px; font-size: 13px;
}
.task-form button {
  padding: 7px 12px; background: #57C7BE; color: #08211E; border: none;
  border-radius: 6px; font-weight: bold; font-size: 13px;
}
.task-row { overflow: hidden; padding: 6px 0; border-bottom: 1px solid #1A2C28; }
.task-check {
  float: left; width: 16px; height: 16px; border: 1px solid #6B8079; border-radius: 4px;
  margin-right: 8px; text-align: center; line-height: 14px; font-size: 11px;
  color: #08211E; display: block;
}
.task-check.done { background: #57C7BE; border-color: #57C7BE; }
.task-text { display: block; margin-left: 26px; margin-right: 22px; font-size: 13px; }
.task-text.done { color: #6B8079; text-decoration: line-through; }
.task-del { float: right; color: #6B8079; font-size: 16px; }

.wx-now { overflow: hidden; margin-bottom: 4px; }
.wx-now .temp { font-size: 30px; font-weight: bold; float: left; }
.wx-now .cond { font-size: 12px; color: #9FB6AE; float: left; margin: 10px 0 0 10px; }
.wx-place { font-size: 11px; color: #6B8079; margin-bottom: 8px; clear: both; }
.wx-strip { overflow: hidden; }
.wx-day { float: left; width: 25%; text-align: center; }
.wx-day .d-label { font-size: 10px; color: #9FB6AE; text-transform: uppercase; }
.wx-day .d-hi { font-size: 12px; font-weight: bold; }
.wx-day .d-lo { font-size: 11px; color: #6B8079; }

.mk-row { overflow: hidden; padding: 4px 0; }
.mk-name { font-size: 12px; font-weight: bold; }
.mk-sym { font-size: 10px; color: #6B8079; }
.mk-right { float: right; text-align: right; }
.mk-value { font-size: 12px; font-weight: bold; display: block; }
.mk-delta { display: block; font-size: 11px; }
.mk-delta.up { color: #7ED897; }
.mk-delta.down { color: #F0857B; }
.mk-divider { border: none; border-top: 1px solid #263934; margin: 6px 0; clear: both; }

@media (max-width: 700px) {
  .col-left, .col-right { float: none; width: 100%; }
}