/* ===================================================================
   NATaLiA — "Win95 desktop chrome"
   Grey face, bevelled everything, navy title bars. Panels read as
   windows floating over a teal desktop.
   =================================================================== */

:root {
  --desktop: #008080;
  --face: #c0c0c0;
  --face-light: #dfdfdf;
  --edge-light: #ffffff;
  --edge-shadow: #808080;
  --edge-dark: #000000;
  --title: #000080;
  --title-glow: #1084d0;
  --ink: #000000;
  --field: #ffffff;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23000000'/%3E%3C/svg%3E");
  color-scheme: light;
}

body {
  background: var(--desktop);
  color: var(--ink);
  font-family: "MS Sans Serif", Tahoma, Verdana, Geneva, sans-serif;
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
  padding: 1.5rem;
}

/* The app window itself. Children stretch so the client area can fill it,
   and the gap matches the frame padding, which is what gives the white
   panel the same border on all four sides. */
.container {
  align-items: stretch;
  gap: 3px;
  height: calc(100vh - 3rem);
  width: 100%;
  background: var(--face);
  border: 2px solid;
  border-color: var(--edge-light) var(--edge-dark) var(--edge-dark) var(--edge-light);
  box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--edge-shadow);
  padding: 3px;
}

/* --- title bars ---------------------------------------------------- */

header,
dialog::before {
  background: linear-gradient(90deg, var(--title), var(--title-glow));
  color: #fff;
  display: block;
  font-weight: bold;
  letter-spacing: 0.02em;
  margin: 0;
  padding: 3px 6px;
  text-align: left;
  width: 100%;
}

header { align-items: center; display: flex; gap: 1rem; }
header::before { content: "NATaLiA"; }
header span { font-size: 11px; font-weight: normal; margin-left: auto; opacity: 0.75; }

/* `dialog > *` never matches ::before, so the bar stays flush while the
   content is inset. */
dialog::before { content: "NATaLiA"; flex: 0 0 auto; margin-bottom: 6px; }
dialog.list-area::before, dialog.list-area-portrait::before { content: "Task List"; }
dialog:has(button.create)::before { content: "New Task"; }
dialog:has(.task-item):not(:has(button.create))::before { content: "Edit Task"; }
dialog:has(h3)::before { content: "About"; }

/* --- the window body ----------------------------------------------- */

/* The window's client area: one sunken white panel filling the frame, the way
   a 90s app separates chrome from content. This used to be a box sized to the
   task itself, which left a white rectangle floating in the middle of the grey
   with a margin that changed width as the window did. */
main {
  align-items: center;
  background-color: var(--field);
  border: 2px solid;
  border-color: var(--edge-shadow) var(--edge-light) var(--edge-light) var(--edge-shadow);
  box-shadow: inset 1px 1px 0 var(--edge-dark), inset -1px -1px 0 var(--face-light);
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  min-height: 0;
  overflow: auto;
  padding: 16px;
  width: 100%;
}

.next-item {
  max-width: 34rem;
  text-align: center;
  width: 100%;
}

.next-item h2 { font-size: 17px; margin: 0 0 8px 0; }

main > p { text-align: center; }

footer {
  display: flex;
  gap: 4px;
  justify-content: center;
  padding: 6px 0 2px 0;
  width: 100%;
}

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

button,
input[type="button"] {
  background: var(--face);
  border: 2px solid;
  border-color: var(--edge-light) var(--edge-dark) var(--edge-dark) var(--edge-light);
  box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--edge-shadow);
  color: var(--ink);
  cursor: default;
  font: inherit;
  min-width: 80px;
  padding: 4px 12px;
}

button:active,
input[type="button"]:active,
.open-button {
  border-color: var(--edge-dark) var(--edge-light) var(--edge-light) var(--edge-dark);
  box-shadow: inset 1px 1px 0 var(--edge-shadow), inset -1px -1px 0 var(--face-light);
}

/* The pressed tab gets the classic 50% checkerboard. */
.open-button {
  background-image: repeating-conic-gradient(var(--edge-light) 0 25%, var(--face) 0 50%);
  background-size: 2px 2px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 1px dotted var(--edge-dark);
  outline-offset: -5px;
}

button:disabled { color: var(--edge-shadow); text-shadow: 1px 1px 0 var(--edge-light); }

/* Default action, marked the way a 90s dialog marks one. */
.create, .complete { font-weight: bold; outline: 1px solid var(--edge-dark); outline-offset: 1px; }
.complete { align-self: center; margin-top: 14px; min-width: 140px; }

input[type="text"],
input[type="date"],
select,
textarea {
  background-color: var(--field);
  border: 2px solid;
  border-color: var(--edge-shadow) var(--edge-light) var(--edge-light) var(--edge-shadow);
  box-shadow: inset 1px 1px 0 var(--edge-dark), inset -1px -1px 0 var(--face-light);
  color: var(--ink);
  font: inherit;
  padding: 3px 4px;
  width: 100%;
}

textarea { min-height: 5rem; resize: vertical; }

.theme-picker__label { font-size: 12px; }

label.column, .task-item > .column {
  align-items: stretch;
  gap: 3px;
  margin-bottom: 10px;
  text-align: left;
}

.task-item > .column > button { align-self: flex-start; }

/* --- panels -------------------------------------------------------- */

dialog {
  background: var(--face);
  border: 2px solid;
  border-color: var(--edge-light) var(--edge-dark) var(--edge-dark) var(--edge-light);
  box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--edge-shadow), 2px 2px 0 rgba(0, 0, 0, 0.35);
  color: var(--ink);
  left: 50%;
  max-height: 80%;
  overflow: hidden;
  padding: 3px;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(46rem, calc(100% - 2rem));
}

dialog > * { margin-left: 8px; margin-right: 8px; }
dialog > .row { margin-bottom: 8px; margin-top: 8px; }
dialog > .row > button + button { margin-left: 6px; }

dialog h3 { font-size: 14px; margin-block: 4px; }
dialog p { margin-block: 0 8px; }

/* The scrolling region is whatever sits between the title bar and the
   buttons, so the title bar never scrolls away. */
dialog > table,
dialog > .portrait-table-wrapper,
dialog > .task-item,
dialog > p { overflow-y: auto; }

/* --- the task table ------------------------------------------------ */

table {
  background-color: var(--field);
  border: 2px solid;
  border-color: var(--edge-shadow) var(--edge-light) var(--edge-light) var(--edge-shadow);
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  width: calc(100% - 16px);
}

th {
  background: var(--face);
  border: 2px solid;
  border-color: var(--edge-light) var(--edge-shadow) var(--edge-shadow) var(--edge-light);
  font-weight: normal;
  padding: 3px 6px;
  text-align: left;
  white-space: nowrap;
}

td { border-bottom: 1px solid #e6e6e6; padding: 4px 6px; vertical-align: middle; }

tbody tr:hover td { background: var(--title); color: #fff; }

/* --- row actions --------------------------------------------------- */

td .row { gap: 4px; justify-content: flex-start; }

button.edit, button.delete { min-width: 0; padding: 3px; }
button.edit:hover { background: #ffffcc; }
button.delete:hover { background: #ffdddd; }

.action-icon { display: block; height: 16px; width: 16px; }

/* Small screens: the desktop margin costs more than it gives. */
@media (max-width: 640px) {
  body { padding: 4px; }
  .container { height: calc(100vh - 8px); }
}