/* ============================================================================
   FRANKLIN YARD — AUTHENTICATED-APP LAYER (v20)
   Load AFTER fy-core.css and fy-utility.css.

   USE THIS FOR
   - The authenticated surface only: /login, /, /preview, /done, /services,
     /schema-check. NOT loaded by the public calendar landings.

   DESIGN RULES
   - Page field = bone. Cards / tables / header strip / filter toolbar = white.
     NEVER put a table or filter card on the bone field — the page-vs-card
     color difference carries the readability.
   - Navy is the working color: primary buttons, active nav, focus rings.
     NO magenta anywhere on this surface. NO Caveat font anywhere.
   - Sharp corners on containers, buttons, inputs. Small chips may stay
     pill-rounded.
   - Tool-scale type — fy-utility's marketing H1/H2 (88px/52px) are dialed
     down here to ~22px/~18px.
   - Status dots use a semantic palette (green/amber/red/ink/grey); the
     category chip is the one tinted fill per row. Flashes do NOT use the
     semantic palette — they stay navy/cream/bone.
   ============================================================================ */

/* ---------- Page field & body ---------- */
body {
  background: var(--fy-bone);
  color: var(--fy-ink);
  font-family: var(--fy-font-sans);
  font-size: 15px;
  line-height: 1.55;
}

/* No magenta on the auth surface — override fy-core's default link color. */
a {
  color: var(--fy-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }

p { margin: 0 0 1em; }

/* ---------- Tool-scale typography ---------- */
/* Override fy-utility's marketing sizes; keep Instrument Sans + tight tracking. */
h1, .fy-h1 {
  font-family: var(--fy-font-sans);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 0.4em;
}
h2, .fy-h2 {
  font-family: var(--fy-font-sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin: 0 0 0.5em;
}
h3, .fy-h3 {
  font-family: var(--fy-font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0 0 0.5em;
}

/* ---------- Layout aliases (so existing template markup doesn't churn) ---------- */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}
.container-narrow { max-width: 720px; }

/* ---------- Header strip + nav ---------- */
header.top {
  background: var(--fy-white);
  border-bottom: 1px solid rgba(22, 33, 68, 0.12);
}
header.top .top-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header.top .brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
header.top .brand:hover { text-decoration: none; }
header.top .brand img {
  height: 24px;
  width: auto;
  display: block;
}

nav.primary {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
nav.primary a {
  color: rgba(22, 33, 68, 0.7);
  font-size: 14px;
  font-weight: 500;
  padding: 0.3rem 0;
  border-bottom: 1.5px solid transparent;
  text-decoration: none;
}
nav.primary a:hover {
  color: var(--fy-ink);
  text-decoration: none;
}
nav.primary a.active {
  color: var(--fy-ink);
  border-bottom-color: var(--fy-ink);
}
nav.primary .logout {
  color: rgba(22, 33, 68, 0.5);
  font-size: 13px;
}

/* Calendar dropdown (structure preserved from base.html JS) */
nav.primary .nav-dropdown { position: relative; }
nav.primary .nav-dropdown-trigger {
  color: rgba(22, 33, 68, 0.7);
  font-size: 14px;
  font-weight: 500;
  padding: 0.3rem 0;
  border-bottom: 1.5px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  user-select: none;
}
nav.primary .nav-dropdown.open .nav-dropdown-trigger,
nav.primary .nav-dropdown-trigger.active {
  color: var(--fy-ink);
  border-bottom-color: var(--fy-ink);
}
nav.primary .nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  min-width: 10rem;
  background: var(--fy-white);
  border: 1px solid rgba(22, 33, 68, 0.18);
  padding: 0.4rem 0;
  margin-top: 0.4rem;
  box-shadow: 0 4px 14px rgba(22, 33, 68, 0.08);
  z-index: 100;
}
nav.primary .nav-dropdown.open .nav-dropdown-menu { display: block; }
nav.primary .nav-dropdown-menu a {
  display: block;
  padding: 0.45rem 0.9rem;
  border-bottom: none;
  color: rgba(22, 33, 68, 0.78);
  font-size: 14px;
  text-decoration: none;
}
nav.primary .nav-dropdown-menu a:hover {
  color: var(--fy-ink);
  background: var(--fy-cream);
}
nav.primary .nav-dropdown-menu a.active {
  color: var(--fy-ink);
  background: var(--fy-cream);
  border-left: 2px solid var(--fy-ink);
}

/* ---------- Page title block ---------- */
.page-intro { margin-bottom: 1.5rem; }
.page-intro p {
  color: rgba(22, 33, 68, 0.7);
  max-width: 60ch;
  margin: 0;
}

/* ---------- Card surface ---------- */
.card {
  background: var(--fy-white);
  border: 1px solid rgba(22, 33, 68, 0.12);
  border-radius: 0;
  padding: 1.5rem;
}
.card + .card { margin-top: 1rem; }
.card-tight { padding: 1rem; }

/* ---------- Tabs ---------- */
.view-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid rgba(22, 33, 68, 0.12);
  margin-bottom: 1rem;
}
.view-tabs a {
  padding: 0.55rem 1rem;
  color: rgba(22, 33, 68, 0.6);
  font-weight: 500;
  font-size: 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
  transition: color 100ms;
}
.view-tabs a:hover { color: var(--fy-ink); text-decoration: none; }
.view-tabs a.active {
  color: var(--fy-ink);
  border-bottom-color: var(--fy-ink);
}

/* ---------- Filter toolbar ---------- */
.filter-bar {
  background: var(--fy-white);
  border: 1px solid rgba(22, 33, 68, 0.12);
  border-radius: 0;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
}
.filter-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}
.filter-row + .filter-row { margin-top: 0.6rem; }
.filter-row label.inline {
  font-size: 11px;
  color: rgba(22, 33, 68, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin: 0 0.25rem 0 0;
}
.filter-bar input[type="search"],
.filter-bar input[type="date"],
.filter-bar select {
  padding: 0.45rem 0.65rem;
  font-size: 14px;
  border: 1px solid rgba(22, 33, 68, 0.25);
  border-radius: 0;
  background: var(--fy-white);
  color: var(--fy-ink);
  font-family: inherit;
}
.filter-bar input[type="search"] { flex: 1 1 240px; min-width: 200px; }
.filter-bar select { min-width: 140px; }
.filter-bar button {
  padding: 0.45rem 0.95rem;
  font-size: 14px;
}
.filter-bar a.clear {
  font-size: 13px;
  color: rgba(22, 33, 68, 0.55);
  margin-left: 0.5rem;
  text-decoration: none;
}
.filter-bar a.clear:hover { color: var(--fy-ink); text-decoration: underline; }
.results-meta {
  font-size: 13px;
  color: rgba(22, 33, 68, 0.6);
  margin-bottom: 0.5rem;
}

/* ---------- Category-filter checkbox chips (v20) ----------
   Each chip is a <label> that wraps a hidden checkbox. The label gets the
   outline-tint look unchecked, and the filled tint when its checkbox is
   checked. No JS — pure CSS sibling selectors.
*/
.fy-checkchip-group {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.fy-checkchip {
  display: inline-block;
  font-family: var(--fy-font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.fy-checkchip input { position: absolute; opacity: 0; pointer-events: none; }
/* Unchecked = outline in the category's tint */
.fy-checkchip--cat-classes  { color: #473765; border-color: #C3B2DC; background: var(--fy-white); }
.fy-checkchip--cat-tests    { color: #2f4a31; border-color: #B6CCB0; background: var(--fy-white); }
.fy-checkchip--cat-webinars { color: #6a5212; border-color: #DEC78B; background: var(--fy-white); }
/* Checked = filled tint */
.fy-checkchip--cat-classes:has(input:checked)  { background: #E2D8F0; border-color: #E2D8F0; }
.fy-checkchip--cat-tests:has(input:checked)    { background: #D5E3CE; border-color: #D5E3CE; }
.fy-checkchip--cat-webinars:has(input:checked) { background: #F2E4BE; border-color: #F2E4BE; }

/* ---------- Services table ---------- */
table.services {
  width: 100%;
  border-collapse: collapse;
  background: var(--fy-white);
  font-family: var(--fy-font-sans);
  font-size: 14px;
  border: 1px solid rgba(22, 33, 68, 0.12);
}
table.services th {
  background: var(--fy-ink);
  color: var(--fy-bone);
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  border: none;
}
table.services td {
  padding: 12px 14px;
  border-top: 1px solid rgba(22, 33, 68, 0.08);
  vertical-align: top;
  color: var(--fy-ink);
}
table.services tbody tr:hover td { background: var(--fy-cream); }
table.services .svc-name {
  font-weight: 600;
  color: var(--fy-ink);
  text-decoration: none;
}
table.services .svc-name:hover { text-decoration: underline; }
table.services .svc-cell-meta { margin-top: 4px; }

table.services th.sortable a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
table.services th.sortable a:hover {
  color: var(--fy-white);
  text-decoration: none;
}
.sort-indicator { font-size: 10px; opacity: 0.55; line-height: 1; }
.sort-indicator.active { opacity: 1; color: var(--fy-bone); }

/* ---------- Category chip (small filled pill, sits under service name) ---------- */
.fy-chip--cat-classes,
.fy-chip--cat-tests,
.fy-chip--cat-webinars {
  display: inline-block;
  font-family: var(--fy-font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.fy-chip--cat-classes  { background: #E2D8F0; color: #473765; border-color: #E2D8F0; }
.fy-chip--cat-tests    { background: #D5E3CE; color: #2f4a31; border-color: #D5E3CE; }
.fy-chip--cat-webinars { background: #F2E4BE; color: #6a5212; border-color: #F2E4BE; }

/* ---------- Status dot + label ---------- */
.fy-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--fy-ink);
}
.fy-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(22, 33, 68, 0.3);   /* default = muted grey */
}
.fy-status-dot--ready-to-go,
.fy-status-dot--done            { background: #4f9e63; }
.fy-status-dot--in-progress,
.fy-status-dot--in-development  { background: #cf9526; }
.fy-status-dot--confirmed       { background: var(--fy-ink); }
.fy-status-dot--cancelled       { background: #c2453f; }
.fy-status-dot--unconfirmed,
.fy-status-dot--post-service    { background: rgba(22, 33, 68, 0.35); }

/* ---------- Writer cells ---------- */
.writer-cell { white-space: nowrap; }
.writer-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  font-size: 13px;
  font-weight: 500;
  border-radius: 0;
  font-family: var(--fy-font-sans);
}
/* Done — sage chip (v20 polish). Linked variants keep the href but render
   in the same chip style; no underline, just a hover wash. */
.ws-done {
  background: #DCE7D5;
  color: #355538;
  border: 1px solid #DCE7D5;
  text-decoration: none;
}
a.ws-done { color: #355538; text-decoration: none; }
a.ws-done:hover { background: #C8D9BE; text-decoration: none; }

/* Fire (Ready to fire) — white chip with ink outline + ink text (v20 polish). */
.ws-ready {
  background: var(--fy-white);
  color: var(--fy-ink);
  border: 1px solid var(--fy-ink);
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ws-ready:hover { background: var(--fy-cream); }
.ws-not-built {
  background: transparent;
  color: rgba(22, 33, 68, 0.45);
  border: none;
}
.ws-not-configured {
  background: transparent;
  color: rgba(22, 33, 68, 0.55);
  border: 1px solid rgba(22, 33, 68, 0.25);
}

.ws-done-group {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.resync-btn {
  background: transparent;
  border: 1px solid transparent;
  color: rgba(22, 33, 68, 0.45);
  padding: 0.15rem 0.35rem;
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
  border-radius: 0;
}
.resync-btn:hover {
  background: var(--fy-cream);
  color: var(--fy-ink);
  border-color: rgba(22, 33, 68, 0.35);
}

/* ---------- Forms ---------- */
label {
  display: block;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  color: rgba(22, 33, 68, 0.7);
}
input[type="text"],
input[type="password"],
textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(22, 33, 68, 0.25);
  border-radius: 0;
  font-family: var(--fy-font-sans);
  font-size: 14px;
  color: var(--fy-ink);
  background: var(--fy-white);
  transition: border-color 120ms, box-shadow 120ms;
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--fy-ink);
  box-shadow: 0 0 0 3px rgba(22, 33, 68, 0.15);
}
textarea {
  resize: vertical;
  min-height: 220px;
  font-family: var(--fy-font-mono, ui-monospace, monospace);
  line-height: 1.5;
}

/* ---------- Buttons ----------
   Override fy-core's magenta .fy-btn-primary AND style bare <button>.
   Both are navy fill / white text, sharp corners, tool-scale.
*/
button,
.btn,
.fy-btn-primary {
  display: inline-block;
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--fy-ink);
  background: var(--fy-ink);
  color: var(--fy-white);
  border-radius: 0;
  font-family: var(--fy-font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: opacity 120ms;
  text-decoration: none;
}
button:hover, .btn:hover, .fy-btn-primary:hover {
  opacity: 0.88;
  text-decoration: none;
  color: var(--fy-white);
}
.btn-secondary, .fy-btn-secondary {
  background: transparent;
  color: var(--fy-ink);
  border: 1px solid var(--fy-ink);
  border-radius: 0;
  padding: 0.55rem 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}
.btn-secondary:hover, .fy-btn-secondary:hover {
  background: var(--fy-ink);
  color: var(--fy-bone);
  opacity: 1;
}
.btn-small { padding: 0.35rem 0.7rem; font-size: 13px; }
.btn-link {
  background: transparent;
  color: rgba(22, 33, 68, 0.7);
  border: none;
  padding: 0.4rem 0;
  cursor: pointer;
  font-size: 13px;
}
.btn-link:hover { color: var(--fy-ink); text-decoration: underline; }
button:disabled, .btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* ---------- Flash messages ----------
   navy/cream/bone only — the semantic palette is reserved for status dots.
*/
.flash {
  padding: 0.75rem 1rem;
  border-radius: 0;
  margin-bottom: 1rem;
  font-size: 14px;
  background: var(--fy-cream);
  color: var(--fy-ink);
  border: 1px solid rgba(22, 33, 68, 0.18);
}
.flash.error {
  background: var(--fy-cream);
  color: var(--fy-ink);
  border: 1px solid var(--fy-ink);
  border-left-width: 3px;
}
.flash.info {
  background: var(--fy-cream);
  color: var(--fy-ink);
  border: 1px solid rgba(22, 33, 68, 0.18);
}

/* ---------- Preview cards ---------- */
.svc-preview {
  border: 1px solid rgba(22, 33, 68, 0.12);
  background: var(--fy-white);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
}
.svc-preview h3 {
  margin: 0 0 0.5rem;
  font-family: var(--fy-font-sans);
  font-size: 15px;
  font-weight: 700;
}
.svc-meta {
  font-size: 13px;
  color: rgba(22, 33, 68, 0.75);
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 1rem;
}
.svc-meta dt {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  color: rgba(22, 33, 68, 0.55);
  align-self: center;
}
.svc-meta dd { margin: 0; color: var(--fy-ink); }

/* Generic status pills used in preview meta (Next Comms / Next Admin / Status text) */
.pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--fy-cream);
  color: var(--fy-ink);
  border: 1px solid rgba(22, 33, 68, 0.15);
}
.pill-cat-classes  { background: #E2D8F0; color: #473765; border-color: #E2D8F0; }
.pill-cat-tests    { background: #D5E3CE; color: #2f4a31; border-color: #D5E3CE; }
.pill-cat-webinars { background: #F2E4BE; color: #6a5212; border-color: #F2E4BE; }
.pill-status            { background: var(--fy-cream); color: var(--fy-ink); }
.pill-status-tentative  { background: var(--fy-cream); color: var(--fy-ink); border-color: rgba(22, 33, 68, 0.3); }
.pill-status-ready      { background: #DDEEE0; color: #2f4a31; border-color: #DDEEE0; }
.pill-status-progress   { background: #F1E2C2; color: #6a5212; border-color: #F1E2C2; }

/* Duplicate warning */
.dup-warning {
  background: var(--fy-cream);
  border: 1px solid rgba(22, 33, 68, 0.22);
  border-left: 3px solid var(--fy-ink);
  padding: 0.75rem 1rem;
  margin-top: 0.75rem;
  font-size: 13px;
}
.dup-warning .dup-title {
  font-weight: 700;
  color: var(--fy-ink);
  margin-bottom: 0.4rem;
  font-size: 13px;
}
.dup-options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.dup-options label {
  margin: 0;
  color: var(--fy-ink);
  font-weight: 400;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.dup-options label input[type="radio"] { margin: 0; }
.dup-options .match-name  { font-weight: 600; }
.dup-options .match-score { color: rgba(22, 33, 68, 0.55); font-size: 12px; }
.dup-options .match-link  {
  margin-left: 0.4rem;
  font-size: 12px;
  color: rgba(22, 33, 68, 0.55);
}

/* ---------- Login ----------
   Login is the only authenticated page with a non-bone background — a
   photographic field tinted with a navy overlay over an ink base. All
   other auth pages stay on the bone field defined at the top of this file.
   The 0.72 alpha values are the single tunable contrast knob; raise them
   to push the photo darker, lower to let it through. */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background:
    linear-gradient(rgba(22, 33, 68, 0.72), rgba(22, 33, 68, 0.72)),
    url("login-bg.png") center / cover no-repeat,
    #162144;
}
.login-card {
  max-width: 480px;
  width: 100%;
  background: var(--fy-white);
  border: 1px solid rgba(22, 33, 68, 0.15);
  /* Match the public schedule table's rounded corners (.fy-table radius). */
  border-radius: 8px;
  padding: 2.75rem 2.75rem 2rem;
}
.login-card .login-logo {
  display: block;
  height: 32px;
  width: auto;
  margin: 0 auto 1.5rem;
}
/* "Services Manager" heading — Instrument Serif at tool scale, full-strength
   navy. Smaller than the marketing serif on the public landing; reads as
   the editorial counterpart to the navy band logo above it. */
.login-card h1 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 1.75rem;
  color: var(--fy-ink);
}
.login-tagline {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(22, 33, 68, 0.5);
  text-align: center;
  margin: 1.25rem 0 0;
}

/* ---------- Page actions ---------- */
.actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1.5rem;
}

/* ---------- Utility ---------- */
.muted { color: rgba(22, 33, 68, 0.55); }
.small { font-size: 13px; }
.fy-text-ok  { color: #2f4a31; }
.fy-text-bad { color: #8a2a26; }

/* Pre blocks (used by /schema-check) */
pre {
  background: var(--fy-cream);
  padding: 1rem;
  border-radius: 0;
  font-size: 13px;
  font-family: var(--fy-font-mono, ui-monospace, monospace);
  overflow-x: auto;
  color: var(--fy-ink);
}