/* Fieldnotes — synthetic pilot styles */
:root{
  --bg: #F7F3E9;          /* quiet cream */
  --text: #2F2F2F;        /* charcoal */
  --muted: #666;
  --primary: #2F6D3F;     /* moss-green */
  --primary-contrast: #ffffff;
  --danger: #8B2E2E;
  --card: #FFFFFF;
  --border: #E2DED6;
  --focus: #1B5E20;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}
.container{ width: 100%; max-width: 820px; margin: 0 auto; padding: 1rem; }

.app-header{ background: #F2EDE1; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1; }
.header-content{ display: flex; align-items: center; justify-content: space-between; }
.brand{ font-weight: 700; letter-spacing: 0.5px; }

.card{ background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; margin: 1rem 0; box-shadow: 0 1px 0 rgba(0,0,0,0.02); }

.field{ display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.8rem; }
label{ font-size: 0.95rem; color: var(--muted); }
input[type="text"], input[type="email"], input[type="password"]{
  padding: 0.6rem 0.7rem; border-radius: 6px; border: 1px solid var(--border); background: #fff; color: var(--text);
}
input:focus, button:focus{ outline: 2px solid var(--focus); outline-offset: 2px; }

.actions{ display: flex; gap: 0.5rem; }
.btn{ display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.55rem 0.9rem; border-radius: 6px; border: 1px solid transparent; cursor: pointer; font-weight: 600; }
.btn-primary{ background: var(--primary); color: var(--primary-contrast); }
.btn-primary:hover{ filter: brightness(0.95); }
.btn-secondary{ background: transparent; border-color: var(--border); }
.btn-danger{ background: var(--danger); color: #fff; }
.btn-small{ padding: 0.35rem 0.6rem; font-size: 0.9rem; }

.tabs{ display:flex; gap: 0.5rem; margin-top: 0.5rem; }
.tab{ background: transparent; border: 1px solid var(--border); border-bottom: none; border-radius: 6px 6px 0 0; padding: 0.4rem 0.8rem; cursor: pointer; }
.tab.active{ background: var(--card); }

.error{ color: #7D1111; background: #FBE9E9; border: 1px solid #F0CCCC; padding: 0.5rem 0.75rem; border-radius: 6px; margin-top: 0.25rem; }
.empty{ color: var(--muted); margin: 1rem 0; }

.tasks{ list-style: none; padding: 0; margin: 0; }
.task{ display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px dashed var(--border); }
.task .check{ display: flex; align-items: center; flex-shrink: 0; }
.task > .btn{ flex-shrink: 0; }
.title{ flex: 1; min-width: 0; overflow-wrap: anywhere; }
.title.done{ text-decoration: line-through; color: var(--muted); }

/* Visually hidden utility for headings used by screen readers */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.hidden{ display: none !important; }

@media (min-width: 768px){ .actions{ justify-content: flex-start; } }