:root { color-scheme: light }
* { box-sizing: border-box }
body {
  margin: 0; background: #FBFAF8; color: #14161A;
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: #1F3A4D }

/* ---- shell: sidebar + content ---- */
.shell { display: flex; align-items: flex-start; min-height: 100vh }

/* A viewport-tall flex column: the wordmark pins to the top, the nav takes the
   space between and scrolls on its own if it ever outgrows it, and Sign out
   stays pinned to the bottom — visible wherever the page is scrolled. */
.side {
  width: 15rem; flex: 0 0 15rem;
  border-right: 1px solid #E0DBD2; background: #FBFAF8;
  padding: 1.5rem 0 0; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
}
.side nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 1rem }
.mark {
  display: block; padding: 0 1.25rem 1.25rem;
  font: 500 1.125rem/1.2 ui-serif, Georgia, serif; letter-spacing: -.01em;
  color: #14161A; text-decoration: none;
}
.side h2 {
  margin: 1.5rem 0 .5rem; padding: 0 1.25rem;
  font: 600 .6875rem/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .11em; text-transform: uppercase; color: #5C6068;
}
.side ul { list-style: none; margin: 0; padding: 0 }
.side li a {
  display: block; padding: .4rem 1.25rem; font-size: .9375rem;
  color: #5C6068; text-decoration: none; border-left: 2px solid transparent;
}
.side li a:hover { color: #1F3A4D; background: rgba(31,58,77,.04) }
.side li a[aria-current="page"] {
  color: #1F3A4D; font-weight: 500; border-left-color: #1F3A4D; background: rgba(31,58,77,.05);
}
.side .foot {
  flex: 0 0 auto; padding: .9rem 1.25rem; border-top: 1px solid #E0DBD2;
  background: #FBFAF8;
}
.signout { background: none; border: 0; padding: 0; font: inherit; font-size: .875rem;
           color: #5C6068; cursor: pointer; text-decoration: underline; text-underline-offset: 4px }
.signout:hover { color: #8C4A1E }

.main { flex: 1; min-width: 0 }
.wrap { max-width: 52rem; padding: 2.5rem 2.5rem 4rem }

@media (max-width: 46rem) {
  .shell { display: block }
  .side { width: auto; height: auto; position: static; display: block;
          border-right: 0; border-bottom: 1px solid #E0DBD2; padding-bottom: 1rem }
  .side nav { overflow: visible; padding-bottom: 0 }
  .side .foot { border-top: 0; padding-top: .5rem }
  .side ul { display: flex; flex-wrap: wrap; gap: 0 .25rem }
  .side li a { border-left: 0; padding: .3rem .6rem }
  .side li a[aria-current="page"] { background: none; text-decoration: underline;
                                    text-underline-offset: 5px }
  .side h2 { margin-top: 1rem }
  .wrap { padding: 1.75rem 1.25rem 3rem }
}

/* ---- page furniture ---- */
header.page { padding-bottom: 1.25rem; border-bottom: 1px solid #E0DBD2; margin-bottom: 1.5rem }
h1 { font: 500 1.5rem/1.2 ui-serif, Georgia, serif; margin: 0; letter-spacing: -.015em }
.sub { color: #5C6068; font-size: .875rem; margin-top: .4rem }
.count { font-variant-numeric: tabular-nums }

article { border-bottom: 1px solid #E0DBD2; padding: 1.5rem 0 }
.meta { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; font-size: .8125rem; color: #5C6068 }
.meta b { color: #14161A; font-weight: 600 }
.name { font: 500 1.125rem/1.3 ui-serif, Georgia, serif; margin: .5rem 0 .15rem }
.msg { margin: .85rem 0 0; padding-left: 1rem; border-left: 2px solid #E0DBD2;
       white-space: pre-wrap; word-break: break-word }
.warn { border-left: 2px solid #8C4A1E; padding-left: 1rem; color: #8C4A1E; font-size: .875rem }
.empty { color: #5C6068; padding: 3rem 0 }
footer { margin-top: 3rem; border-top: 1px solid #E0DBD2; padding-top: 1.25rem;
         font-size: .8125rem; color: #5C6068 }

/* ---- stub pages ---- */
.stub { border-left: 2px solid #E0DBD2; padding-left: 1rem; color: #5C6068; margin-top: 1.5rem }
.stub p + p { margin-top: .75rem }
.newart { display: flex; align-items: flex-end; gap: .75rem; margin-bottom: 2rem }
.newart .fld { flex: 1; margin: 0 }
.arts { width: 100%; border-collapse: collapse; font-size: .9375rem }
.arts th { text-align: left; font-weight: 600; padding: .5rem .75rem; border-bottom: 1px solid #d8d3cb }
.arts td { padding: .7rem .75rem; border-bottom: 1px solid #ece8e1; vertical-align: baseline }
.arts .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums }
.pill { display: inline-block; padding: .1rem .5rem; border-radius: 999px; background: #ece8e1;
        font-size: .8125rem }
.pill-live { background: #dce9dd }
.tag { margin-left: .5rem; font-size: .8125rem; color: #6b6560 }
textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9375rem;
                line-height: 1.6 }
.artbtns { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
           margin-top: 1.5rem }
/* Deleting an article cannot be undone from here, so the control is set apart
   from the one next to it rather than styled to match. */
.danger { background: none; border: 1px solid #a5342a; color: #a5342a; padding: .55rem 1rem;
          border-radius: 2px; cursor: pointer; font: inherit; font-size: .9375rem }
.danger:hover { background: #a5342a; color: #fff }
.viewlive { margin-top: 1.75rem; font-size: .9375rem; display: flex; flex-wrap: wrap; gap: 1.5rem }
/* The one thing on the page that must not be missed: saving no longer puts a
   change in front of the public, and someone who does not notice this box will
   think the site is broken. */
.staged { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 3px solid #1F3A4D;
          background: rgba(31,58,77,.06) }
.staged p { margin: 0 0 .85rem; max-width: 62ch; line-height: 1.6 }
.staged form { margin: 0 }

/* ---- forms ---- */
.fs { font: 600 .6875rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .11em;
      text-transform: uppercase; color: #5C6068; margin: 2rem 0 .75rem }
.hint { color: #5C6068; font-size: .875rem; margin: 0 0 1rem }
.tablewrap { overflow-x: auto }
table.hours { border-collapse: collapse; width: 100%; min-width: 30rem }
table.hours th { text-align: left; font: 600 .75rem/1 ui-sans-serif, system-ui, sans-serif;
                 letter-spacing: .06em; text-transform: uppercase; color: #5C6068;
                 padding: 0 .5rem .5rem 0; border-bottom: 1px solid #E0DBD2 }
table.hours td { padding: .4rem .5rem .4rem 0; border-bottom: 1px solid #E0DBD2 }
table.hours .d-day { white-space: nowrap }
input[type=time], input[type=number], input[type=text], select {
  padding: .4rem .5rem; font: inherit; font-size: .9375rem; color: #14161A;
  background: #FBFAF8; border: 1px solid #E0DBD2;
}
input[type=time]:focus, input[type=number]:focus, input[type=text]:focus, select:focus {
  outline: 2px solid #1F3A4D; outline-offset: 2px; border-color: #1F3A4D;
}
.grid2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)) }
.fld { display: block; font-size: .875rem; font-weight: 600 }
.fld input, .fld select { display: block; width: 100%; margin-top: .35rem; font-weight: 400 }
.chk { display: inline-flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 400 }
.chk.block { display: flex; margin-top: .5rem }
.chk input { width: 1rem; height: 1rem; accent-color: #1F3A4D }
button.wide { margin-top: 2rem; width: auto; padding: .65rem 1.5rem }
.ok { border-left: 2px solid #1F3A4D; padding-left: .9rem; color: #1F3A4D; font-size: .9375rem;
      margin-bottom: 1.25rem }
.error ul { margin: .4rem 0 0; padding-left: 1.1rem }
.pubstatus { font-size: .8125rem; color: #5C6068; margin: 0 0 1.25rem }
.pub-failed { color: #8C4A1E }

/* ---- block editor ---- */
.blk { border: 1px solid #E0DBD2; padding: .9rem 1rem 1.1rem; margin: 0 0 1rem; background: #FBFAF8 }
.blk legend { display: flex; align-items: center; gap: 1rem; padding: 0 .4rem; width: 100% }
.blk-type { font: 600 .6875rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .09em;
            text-transform: uppercase; color: #5C6068 }
.blk-ops { margin-left: auto; display: flex; gap: .25rem }
.op { font: inherit; font-size: .875rem; line-height: 1; padding: .2rem .5rem; cursor: pointer;
      background: transparent; border: 1px solid #E0DBD2; color: #5C6068 }
.op:hover:not(:disabled) { color: #1F3A4D; border-color: #1F3A4D }
.op:disabled { opacity: .35; cursor: default }
.op-del:hover { color: #8C4A1E; border-color: #8C4A1E }
.blk textarea, .blk input[type=text] { width: 100%; font: inherit; font-size: .9375rem;
  padding: .45rem .55rem; border: 1px solid #E0DBD2; background: #FBFAF8; color: #14161A }
.blk textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem;
                line-height: 1.55; resize: vertical }
.blk .fld { margin-top: .5rem }
.mt-2 { margin-top: .5rem }
.addrow { display: flex; align-items: flex-end; gap: .75rem; margin: 1.5rem 0 0 }
.addrow .fld { flex: 1; max-width: 22rem }
.rollback { display: flex; align-items: flex-end; gap: .75rem; margin-top: 1rem }
.rollback .fld { flex: 1; max-width: 22rem }

/* ---- appointments ---- */
.appt { border-bottom: 1px solid #E0DBD2; padding: 1.35rem 0 }
.appt .meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem }
.when { font-size: .8125rem; color: #5C6068; font-variant-numeric: tabular-nums }
.tag { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
       padding: .12rem .5rem; border-radius: 999px; border: 1px solid }
/* Amber for waiting, accent for settled, grey for closed — not a traffic light.
   Red would read as a fault, and a declined request is not a fault. */
.tag-pending  { color: #8C4A1E; background: rgba(140,74,30,.10); border-color: rgba(140,74,30,.30) }
.tag-approved { color: #1F3A4D; background: rgba(31,58,77,.10); border-color: rgba(31,58,77,.30) }
.tag-declined { color: #5C6068; background: rgba(92,96,104,.10); border-color: rgba(92,96,104,.26) }
.appt .name { font: 500 1.125rem/1.3 ui-serif, Georgia, serif; margin: .55rem 0 .1rem }
.appt .subject { font-size: .9375rem; margin: 0 0 .35rem }
.appt .contact { font-size: .875rem; margin: 0 }
.appt .msg { margin: .8rem 0 0; padding-left: 1rem; border-left: 2px solid #E0DBD2;
             white-space: pre-wrap; word-break: break-word; font-size: .9375rem }
.decide { display: flex; gap: .6rem; margin-top: 1rem }
.btn { font: inherit; font-size: .875rem; font-weight: 500; padding: .45rem 1.1rem;
       border: 1px solid; cursor: pointer; background: transparent }
.btn-approve { color: #FBFAF8; background: #1F3A4D; border-color: #1F3A4D }
.btn-approve:hover { background: #162b39 }
.btn-decline { color: #5C6068; border-color: #E0DBD2 }
.btn-decline:hover { color: #8C4A1E; border-color: #8C4A1E }
.decided { margin-top: .9rem; font-size: .8125rem; color: #5C6068; text-transform: capitalize }
.appt-declined .name, .appt-declined .subject { color: #5C6068 }

/* ---- login ---- */
.login { max-width: 22rem; margin: 0 auto; padding: 5rem 1.5rem }
.login p.hint { color: #5C6068; font-size: .875rem; margin: .5rem 0 1.75rem }
label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .4rem }
input[type=password] {
  width: 100%; padding: .6rem .7rem; font: inherit; color: #14161A;
  background: #FBFAF8; border: 1px solid #E0DBD2;
}
input[type=password]:focus { outline: 2px solid #1F3A4D; outline-offset: 2px; border-color: #1F3A4D }
button.primary {
  margin-top: 1.25rem; width: 100%; padding: .65rem 1rem; font: inherit; font-weight: 500;
  color: #FBFAF8; background: #1F3A4D; border: 1px solid #1F3A4D; cursor: pointer;
}
button.primary:hover { background: #162b39 }
.error { margin-top: 1.25rem; border-left: 2px solid #8C4A1E; padding-left: .9rem;
         color: #8C4A1E; font-size: .875rem }