:root {
  --ink: #2b2620;
  --ink-soft: #6b6257;
  --cream: #faf6ef;
  --cream-deep: #f1e9db;
  --navy: #1f3a5f;
  --navy-deep: #16293f;
  --accent: #8a6d3b;
  --line: #e2d8c6;
  --white: #fffdf9;
  --danger: #a33c3c;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.55;
}
a { color: var(--navy); }

.topbar {
  background: var(--navy);
  color: var(--white);
  border-bottom: 3px solid var(--accent);
}
.topbar-inner {
  max-width: 960px; margin: 0 auto; padding: 0.8rem 1.2rem;
  display: flex; align-items: center; gap: 1.2rem;
}
.brand {
  color: var(--white); text-decoration: none;
  font-size: 1.25rem; font-weight: bold; letter-spacing: 0.02em;
}
.brand span { color: #d9c08f; }
.church-name { color: #c9d4e2; font-style: italic; }
.topnav { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.topnav .who { color: #c9d4e2; }
.topnav .gear { font-size: 1.25rem; line-height: 1; text-decoration: none; }
.topnav .gear:hover { text-decoration: none; color: var(--white); }
@media (max-width: 700px) {
  .topbar-inner { gap: 0.6rem; padding: 0.7rem 0.8rem; font-size: 0.85rem; }
  .brand { font-size: 1.05rem; }
  .topnav { gap: 0.6rem; }
  .topnav .who, .church-name { overflow: hidden; text-overflow: ellipsis;
                               white-space: nowrap; min-width: 0; }
  .church-name { flex: 1; }
  .topnav .who { max-width: 7rem; }
}
.topnav a { color: #dbe4ef; text-decoration: none; }
.topnav a:hover { text-decoration: underline; }
.inline-form { display: inline; }
.linklike {
  background: none; border: none; color: #dbe4ef; cursor: pointer;
  font: inherit; padding: 0;
}
.linklike:hover { text-decoration: underline; }

.content { max-width: 960px; margin: 0 auto; padding: 2rem 1.2rem; min-height: 60vh; }

.hero { text-align: center; padding: 3rem 0 2rem; }
.hero h1 { font-size: 2.3rem; margin-bottom: 0.6rem; color: var(--navy-deep); }
.lede { max-width: 620px; margin: 0 auto 1.6rem; color: var(--ink-soft); font-size: 1.1rem; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; margin: 2.5rem 0; }
.feature {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 8px; padding: 1.2rem 1.4rem;
}
.feature h3 { margin-top: 0; color: var(--navy); }

.cta-band {
  text-align: center; background: var(--cream-deep);
  border-radius: 8px; padding: 1.2rem; margin-top: 1rem;
}

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 8px; padding: 1.6rem 1.8rem; margin: 1rem auto;
}
.card.narrow { max-width: 460px; }
.card.center { text-align: center; }

label { display: block; margin: 0.9rem 0 0.25rem; font-weight: bold; }
input[type=email], input[type=password], input[type=text], select, textarea {
  width: 100%; padding: 0.55rem 0.7rem; font: inherit;
  border: 1px solid var(--line); border-radius: 5px; background: var(--cream);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--navy); background: var(--white);
}

.btn {
  display: inline-block; margin-top: 1.1rem; padding: 0.6rem 1.4rem;
  border-radius: 5px; border: 1px solid var(--navy);
  background: var(--white); color: var(--navy);
  font: inherit; text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: var(--navy-deep); }

.flash-wrap { margin-bottom: 1rem; }
.flash {
  background: #f6e7e7; border: 1px solid var(--danger); color: var(--danger);
  border-radius: 5px; padding: 0.6rem 0.9rem; margin-bottom: 0.5rem;
}

.muted { color: var(--ink-soft); }
.small { font-size: 0.9rem; }

.church-list { list-style: none; padding: 0; }
.church-list li { border-bottom: 1px solid var(--line); }
.church-list a {
  display: block; padding: 0.8rem 0.4rem; text-decoration: none; font-size: 1.1rem;
}
.church-list a:hover { background: var(--cream-deep); }

.module-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.2rem; margin-top: 1.6rem;
}
.module-card {
  display: block; background: var(--white); border: 1px solid var(--line);
  border-radius: 8px; padding: 1.1rem 1.3rem; text-decoration: none; color: var(--ink);
}
a.module-card:hover { border-color: var(--navy); box-shadow: 0 2px 8px rgba(31,58,95,0.12); }
.module-card h3 { margin: 0 0 0.4rem; color: var(--navy); }
.module-card p { margin: 0 0 0.8rem; color: var(--ink-soft); font-size: 0.95rem; }
.module-card.disabled { opacity: 0.55; }
.badge {
  display: inline-block; font-size: 0.78rem; padding: 0.15rem 0.6rem;
  border-radius: 999px; background: var(--cream-deep); color: var(--ink-soft);
}
.badge-live { background: #e3edda; color: #3c6127; }

.footer {
  text-align: center; color: var(--ink-soft); font-size: 0.85rem;
  padding: 1.5rem; border-top: 1px solid var(--line);
}

/* --- Ticket system (Phase 3) --- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-head h2 { margin: 0.5rem 0; }

.filter-bar { display: flex; gap: 1.2rem; margin: 1rem 0; flex-wrap: wrap; }
.filter-bar label { font-weight: bold; margin: 0; }
.filter-bar select { width: auto; margin-left: 0.4rem; }

.ticket-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: 8px; }
.ticket-table th, .ticket-table td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line); }
.ticket-table th { background: var(--cream-deep); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.ticket-table tr:hover td { background: var(--cream); }

/* Big directory tables (Team, People): the table is locked at 900px on every
   screen; the wrapper scrolls it sideways on its own when the viewport is
   narrower, so the page itself never pans. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > .ticket-table { width: 900px; min-width: 900px; }

/* First + last name inputs side by side in forms. */
.name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.8rem; }

.pri, .st { display: inline-block; font-size: 0.78rem; padding: 0.1rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.pri-low { background: #eee; color: #666; }
.pri-normal { background: var(--cream-deep); color: var(--ink-soft); }
.pri-high { background: #f3e3c3; color: #7a5c1e; }
.pri-urgent { background: #f2d2d2; color: var(--danger); font-weight: bold; }
.st { background: #e6ebf2; color: var(--navy); }
.st-completed, .st-closed { background: #e3edda; color: #3c6127; }
.st-declined { background: #eee; color: #666; }
.st-in_progress, .st-assigned { background: #ddeaf5; color: #1f5c8a; }

.lock { margin-left: 0.3rem; }

.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }

.meta dt { font-weight: bold; margin-top: 0.6rem; }
.meta dd { margin: 0.1rem 0 0; color: var(--ink-soft); }
.pre { white-space: pre-wrap; }

.timeline { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.timeline li { border-left: 3px solid var(--line); padding: 0.5rem 0 0.7rem 1rem; margin-left: 0.3rem; }
.timeline li.tl-status_change { border-left-color: var(--navy); }
.timeline li.tl-notification_sent { border-left-color: var(--accent); }
.timeline li.tl-created { border-left-color: #3c6127; }
.tl-when { font-size: 0.8rem; color: var(--ink-soft); margin-right: 0.6rem; }
.tl-who { font-size: 0.85rem; font-weight: bold; color: var(--navy); }
.tl-body { margin-top: 0.2rem; }

.check-label { display: block; margin-top: 1rem; font-weight: normal; }
.check-label input { width: auto; margin-right: 0.5rem; }

.hp { position: absolute; left: -9999px; top: -9999px; }

/* --- Duty calendar --- */
.cal-nav { display: flex; align-items: center; gap: 1rem; margin: 0.6rem 0; }
.cal-nav h3 { margin: 0; min-width: 11rem; text-align: center; }
.cal-nav .btn { margin-top: 0; padding: 0.3rem 0.9rem; }
.cal { width: 100%; border-collapse: collapse; background: var(--white);
       border: 1px solid var(--line); table-layout: fixed; }
.cal th { background: var(--cream-deep); font-size: 0.8rem; text-transform: uppercase;
          letter-spacing: 0.04em; padding: 0.4rem; border: 1px solid var(--line); }
.cal td { border: 1px solid var(--line); vertical-align: top; height: 5.2rem;
          padding: 0.25rem 0.3rem; font-size: 0.85rem; }
.cal-daynum { color: var(--ink-soft); font-size: 0.8rem; }
.cal-out { background: var(--cream); }
.cal-out .cal-daynum { opacity: 0.4; }
.cal-today { outline: 2px solid var(--navy); outline-offset: -2px; }
.cal-event { background: #e6ebf2; color: var(--navy); border-radius: 4px;
             padding: 0.1rem 0.35rem; margin-top: 0.2rem; font-size: 0.75rem;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-event.cal-done { background: #e3edda; color: #3c6127; }
@media (max-width: 700px) {
  .cal td { height: 3.6rem; padding: 0.15rem; font-size: 0.7rem; }
  .cal-event { font-size: 0.62rem; padding: 0.05rem 0.2rem; }
}

/* --- People & skills (Phase 2) --- */
.skill-group { margin-bottom: 0.4rem; }
.skill-tag-wrap { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 1rem; }
.badge-disabled { opacity: 0.45; text-decoration: line-through; }

.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
a.cal-event { display: block; text-decoration: none; }
a.cal-event:hover { outline: 1px solid var(--navy); }

/* --- Dashboard: future development board --- */
.dash-section { margin-top: 2rem; }
.dev-item { display: flex; gap: 0.8rem; align-items: flex-start;
            padding: 0.6rem 0; border-bottom: 1px solid #e4ded2; }
.vote-btn { display: flex; flex-direction: column; align-items: center;
            min-width: 2.6rem; padding: 0.3rem 0.4rem; cursor: pointer;
            border: 1px solid var(--navy); border-radius: 6px;
            background: #fff; color: var(--navy); font-size: 0.8rem; }
.vote-btn .vote-count { font-weight: 700; font-size: 0.95rem; }
.vote-btn.voted { background: var(--navy); color: #fff; }
.dev-body { flex: 1; }
.dev-desc { margin: 0.25rem 0 0.3rem; font-size: 0.92rem; }
.dev-suggest { margin-top: 1.4rem; }

/* --- Team links --- */
.link-item { padding: 0.7rem 1rem; margin-bottom: 0.6rem; }
.link-item.link-pinned { border-color: var(--navy); background: #f6f8fb; }
.link-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.link-pin { flex: 0 0 auto; }
.link-title { font-weight: 600; word-break: break-all; }
.link-note { margin: 0.35rem 0 0; font-size: 0.92rem; }
.link-meta { margin-top: 0.35rem; }

/* --- Dashboard v2: personalized 70/30 layout --- */
.dash-grid { display: grid; grid-template-columns: 7fr 3fr; gap: 1.5rem; align-items: start; }
@media (max-width: 820px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-greeting { margin: 0 0 0.2rem; color: var(--navy-deep); font-size: 1.7rem; }
.dash-date { margin: 0 0 1.2rem; }
.dash-card { background: var(--white); border: 1px solid var(--line);
             border-radius: 8px; padding: 1rem 1.3rem; margin-bottom: 1.2rem; }
.dash-card > h3 { margin: 0 0 0.6rem; color: var(--navy);
                  display: flex; justify-content: space-between;
                  align-items: baseline; gap: 1rem; }
.dash-more { font-size: 0.85rem; font-weight: normal; white-space: nowrap; }
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li { padding: 0.35rem 0.3rem; border-bottom: 1px solid var(--cream-deep); }
.dash-list li:last-child { border-bottom: none; }
.dash-when { display: inline-block; min-width: 5.5rem;
             color: var(--ink-soft); font-size: 0.85rem; }
.dash-mine { background: #f6f8fb; border-radius: 4px; }
.dash-flag { display: inline-block; font-size: 0.72rem; text-transform: uppercase;
             letter-spacing: 0.05em; padding: 0.1rem 0.5rem; border-radius: 999px;
             background: #f3e3c3; color: #7a5c1e; margin-right: 0.4rem; }
.dash-flag-soft { background: var(--cream-deep); color: var(--ink-soft); }
.dash-role { margin: 0.5rem 0; }
.module-grid-mini { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
                    gap: 0.8rem; margin-top: 0.4rem; }
.module-grid-mini .module-card { padding: 0.7rem 1rem; }
.module-grid-mini .module-card h3 { margin: 0; font-size: 1rem; }

.dash-side { background: var(--cream-deep); border: 1px solid var(--line);
             border-radius: 8px; padding: 1rem 1.1rem; }
.dash-side > h3 { margin: 0 0 0.7rem; color: var(--navy);
                  display: flex; justify-content: space-between; align-items: baseline; }
.dash-post textarea { resize: vertical; }
.btn-sm { margin-top: 0.4rem; padding: 0.35rem 1rem; font-size: 0.9rem; }
.side-item { background: var(--white); border: 1px solid var(--line);
             border-radius: 6px; padding: 0.55rem 0.75rem; margin-bottom: 0.6rem;
             font-size: 0.92rem; overflow-wrap: break-word; }
.side-item.side-pinned { border-color: var(--navy); }
.side-note { margin: 0.2rem 0; white-space: pre-wrap; }

/* --- Team: new-role confirm box --- */
.new-role-box { max-width: 560px; margin-bottom: 1.5rem;
                border: 2px solid var(--danger); background: #fdf6f6; }

/* --- Ticket attachments --- */
.attach-list { list-style: none; padding: 0; margin: 0 0 0.8rem; }
.attach-list li { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
                  padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.attach-list li:last-child { border-bottom: none; }
.attach-list a { overflow-wrap: anywhere; }
.attach-list form .btn { margin-top: 0; }

/* --- Ticket queue: sortable headers + checkbox filter dropdowns --- */
.queue-section h3 { margin: 1.5rem 0 0.6rem; }
.th-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit;
           text-transform: inherit; letter-spacing: inherit; cursor: pointer;
           white-space: nowrap; }
.th-sort::after { content: '↕'; opacity: 0.35; margin-left: 0.3rem; font-size: 0.8em; }
.th-sort.sort-asc::after { content: '▲'; opacity: 1; }
.th-sort.sort-desc::after { content: '▼'; opacity: 1; }
details.dd-filter { position: relative; display: inline-block; }
details.dd-filter summary { list-style: none; cursor: pointer; user-select: none;
                            background: var(--white); border: 1px solid var(--line);
                            border-radius: 6px; padding: 0.45rem 0.9rem;
                            font-weight: bold; white-space: nowrap; }
details.dd-filter summary::-webkit-details-marker { display: none; }
details.dd-filter summary::after { content: '▾'; margin-left: 0.45rem; opacity: 0.6; }
details.dd-filter[open] summary { border-color: var(--navy); }
.dd-menu { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0;
           min-width: 220px; max-height: 280px; overflow-y: auto;
           background: var(--white); border: 1px solid var(--line); border-radius: 8px;
           box-shadow: 0 4px 14px rgba(0,0,0,0.1); padding: 0.5rem 0.8rem; }
.dd-menu label { display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0;
                 font-weight: normal; white-space: nowrap; cursor: pointer; }
.dd-menu input[type=checkbox] { width: auto; margin: 0; }