/* Globals */
:root {
  /* Solarized dark */
  --input-bg: #003847;
  --input-fg: #93A1A1; 
  --dropdown-bg: #00212B;   
  --dropdown-fg: #2AA19899; 
  --button-bg: #2AA19860; 
  --comment: #586E75;
  --tab-act-bg: #002B37;
  --tab-act-fg: #d6dbdb; 
  --tab-ina-bg: #004052;
  --tab-ina-fg: #93A1A1;
  --bq-bg: #004b5f; 
  --bq-fg: #afbabb;
  --bq-left: #006c88;
  --bg: #002b36;
  --fg: #839496;
  --h: #afbabb;
  --a: #08c;                
  --a-hov: #00a3f5;
  --accent: #1ebcc5;
  --code-bg: #004b5f; 
  --code-fg: #dbe0e1;
  --pad: 8px; 
  --radius: 8px;
  --mono: monofur; 
  font-family: Josefin Sans; 
}
body {
  background: var(--bg); 
  color: var(--fg); 
  margin: 0; 
}

/* Top bar */
header { 
  position: sticky; 
  top: 0;
  z-index: 1000; 
}
.topbar {
  background: var(--tab-ina-bg); 
  color: var(--tab-act-fg);
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  gap: 12px;
  padding: calc(env(safe-area-inset-top) + 10px) 12px 10px 12px;
}
.today { 
  background: var(--tab-ina-bg); 
  color: var(--tab-act-fg); 
  padding: 0 12px 8px 12px; 
}
.brand { 
  font-weight: 650; 
}
.nav a {
  background-color: var(--tab-ina-bg);
  color: var(--tab-ina-fg); 
  text-decoration: none; 
  padding: var(--pad) calc(var(--pad) + 2px); 
  border-radius: var(--radius);
}
.nav a.active { 
  background: var(--tab-act-bg); 
  color: var(--tab-act-fg); 
}
#nav-save.clean { 
  opacity: 0.45; cursor: default; 
}
#nav-save.dirty {
  opacity: 1;
}
#nav-save:disabled {
  pointer-events: none;
}

/* Main canvas */
.main { 
  padding: var(--pad); 
  padding-bottom: calc(env(safe-area-inset-bottom) + 18px);
}
.panel {
  background: var(--editor-bg); 
  color: var(editor-fg);
  padding: var(--pad); 
  margin-bottom: var(--pad);
  border-radius: var(--radius); 
}

/* Add new task */
.addbar { 
  display: flex; 
  gap: 10px; 
  align-items: center; 
  margin: 12px auto; 
}
.addinput { 
  font-family: Inherit; 
  font-size: 12px;
  flex: 1; 
  background: var(--input-bg); 
  color: var(--input-fg); 
  padding: var(--pad); 
  border: none; 
  border-radius: var(--radius); 
}

/* Task lists */
.tasklist { 
  list-style: none; 
  padding: 0; 
  margin: 8px 0 0 0; 
}
.tasklist a { 
  text-decoration: none; 
  color: var(--a)
}
.tasklist a:hover { 
  color: var(--a-hov) 
}

/* Tasks */
.task { 
  display: flex; 
  gap: 6px; 
  align-items: center; 
  padding: 2px 4px; 
  border: none; 
}
.task.done .tasktext { 
  text-decoration: line-through; 
  opacity: 0.55; 
}
.tasktext { 
  font-size: 13px; 
  color: var(--tab-ina-fg); 
  opacity: .9; 
  cursor: pointer; 
}
.handle { 
  cursor: grab; 
  user-select: none; 
  padding: 4px;
}
.cb { 
  filter: brightness(60%); 
  accent-color: var(--accent); 
  width: 20px; 
  height: 20px; 
  border: none; 
}
.task.p1 { 
  background-color: var(--bq-bg); 
  color: var(--bq-fg); 
  border-left: 4px solid var(--bq-left); 
  padding-left: 0; 
}

/* Elements */
select { 
  appearance: none; 
  font-family: inherit; 
  font-size: 12px;
  background-color: var(--dropdown-bg); 
  color: var(--input-fg); 
  min-width:140px; 
  height: 30px; 
  padding-left: var(--pad);
  border: none; 
  border-radius: var(--radius); 
}
.btn, .nav .btn {
  font-family: var(--font); 
  font-size: 13px;
  font-weight: 600; 
  text-decoration: none; 
  background: var(--button-bg); 
  color: var(--input-fg); 
  min-width: 60px; 
  padding: var(--pad); 
  border: none; 
  border-radius: var(--radius); 
}
.toggle-upnext {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 6px 4px;
}
.toggle-upnext .switch {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--tab-ina-bg);
  position: relative;
}
.toggle-upnext .switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transition: transform 0.15s ease;
}
.toggle-upnext.on .switch {
  background: var(--accent);
}
.toggle-upnext.on .switch::after {
  transform: translateX(16px);
  background: var(--bg);
}
textarea { 
  font-family: var(--mono); 
  font-size: 14px;
  background: var(--dropdown-bg); 
  color: var(--dropdown-fg);
  width: 100%; 
  height: 65vh; 
  border: 1px solid var(--border); 
  border-radius: var(--radius); 
  padding: 12px;
}

/* Text styles */
.h { 
  font-size: 18px; 
  color: var(--h); 
  margin: 0; 
}
.muted { 
  font-size: 13px; 
  color: var(--comment); 
  margin: auto; 
}
.code {
  font-family: var(--mono);
  color: var(--code-fg);
  padding-left: 10px;
}

/* Birds on a wire */
hr {  
  height: 30px; 
  margin: 0px; 
  border: none;
  background: url("data:image/svg+xml; charset=UTF-8, \
      %3Csvg viewBox='0 -80 3600 150' xmlns='http://www.w3.org/2000/svg'%3E \
          %3Cpath d='M0 0 H 3600' stroke='%23616831' stroke-width='2'/%3E \
          %3Cpath transform='translate(850, -220) scale(4, 4)' fill='%23616831' \
              d='M177.695104,46.218 C179.252104,47.12 180.579104,51.973 180.214104,56.075 C179.708104,61.772 \
              180.593104,64.226 180.581104,64.709 C180.567104,64.962 180.224104,63.94 180.126104,64.119 \
              C180.028104,64.3 179.377104,66.022 179.377104,66.022 C178.314104,65.897 177.788104,64.477 \
              177.788104,64.477 C177.788104,64.477 177.614104,65.198 177.439104,65.022 C176.716104,64.271 \
              177.416104,61.669 177.165104,60.689 C176.433104,57.829 174.939104,58.128 173.502104,55.834 \
              C171.625104,52.839 171.708104,49.822 172.127104,48.584 C172.433104,47.644 172.922104,46.91 \
              172.226104,45.906 C171.746104,45.206 171.072104,45.652 170.403104,45.709 C170.714104,45.484  \
              171.124104,45.445 171.434104,45.219 C171.788104,44.971 175.734104,39.39 177.695104,46.218' \
          /%3E\
          %3Cpath transform='translate(850, -230) scale(4, 4)' fill='%23616831' \
              d='M204.690104,47.32 C206.259104,42.729 211.015104,44.247 211.564104,45.397 C212.744104,47.867 \
              213.564104,47.459 213.564104,47.459 C213.564104,47.459 211.475104,47.412 210.596104,49.717 \
              C210.211104,50.727 208.816104,56.337 204.832104,58.949 C202.997104,60.153 200.700104,60.071 \
              198.966104,61.194 C197.487104,62.163 196.569104,65.733 194.477104,65.784 C194.528104,65.733 \
              194.579104,65.58 194.630104,65.479 C194.069104,65.835 193.355104,65.632 192.743104,65.632 \
              C192.845104,65.376 192.590104,65.58 192.743104,65.325 C192.641104,65.428 192.641104,65.172 \
              192.539104,65.223 C192.488104,64.764 192.284104,64.458 192.590104,64.101 C192.437104,64.254 \
              192.590104,64.101 192.437104,64.203 C192.131104,63.285 196.633104,60.39 197.092104,57.891 \
              C198.220104,51.746 202.522104,48.379 204.690104,47.32' \
          /%3E \
          %3Cpath transform='translate(850, -250) scale(4, 4)' fill='%233e8684' \
              d='M237.461104,48.48 C240.188104,44.985 244.713104,48.584 244.314104,51.397 C248.502104,52.923 \
              251.137104,63.152 251.621104,65.056 C251.621104,65.056 254.867104,70.497 254.733104,74.267 \
              C254.250104,72.998 254.242104,74.368 253.553104,73.169 C253.483104,73.311 252.586104,72.323 \
              252.517104,72.464 C251.439104,71.459 250.904104,67.897 250.103104,67.455 C249.301104,67.012 \
              244.307104,65.92 241.012104,62.94 C237.824104,60.056 237.482104,56.195 237.693104,54.727 \
              C238.377104,49.959 234.689104,50.147 234.689104,50.147 C234.689104,50.147 236.502104,49.709 \
              237.461104,48.48' \
          /%3E \
          %3Cpath transform='translate(850, -260) scale(4, 4)' fill='%23616831' \
              d='M302.845104,52.885 C302.750104,52.573 302.523104,47.483 298.347104,48.334 C296.386104,48.734 \
              295.575104,51.737 296.049104,53.353 C295.437104,55.595 294.345104,56.846 294.877104,61.459 \
              C295.470104,66.599 298.846104,68.692 298.732104,70.277 C298.630104,71.533 298.642104,73.546 \
              298.598104,74.85 L298.535104,75.183 C298.632104,75.116 298.744104,75.156 298.841104,75.089 \
              C298.980104,75.342 299.019104,76.129 299.210104,76.376 C299.248104,76.262 299.903104,75.988 \
              299.529104,75.487 C299.785104,75.832 300.989104,77.493 301.170104,77.254 C301.146104,77.474 \
              301.582104,76.552 301.603104,76.712 C301.582104,76.552 301.681104,76.558 301.906104,75.826 \
              C302.110104,76.178 302.440104,76.195 302.585104,76.501 C303.798104,75.019 302.642104,71.989 \
              302.793104,70.834 C303.120104,68.033 304.624104,64.088 305.002104,61.334 C305.529104,57.506 \
              302.845104,52.885 302.845104,52.885' \
              /%3E \
              %3C/svg%3E"
  ) no-repeat center;
  background-size: auto 100%;
}