* { box-sizing: border-box; }
body { margin: 0; font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
       color: #222; line-height: 1.6; }
main { padding: 1rem; max-width: 60rem; margin: 0 auto; }
.site-header { display: flex; justify-content: space-between; align-items: center;
               padding: .6rem 1rem; border-bottom: 1px solid #ddd; }
.site-header nav { display: flex; gap: .8rem; align-items: center; }
.brand { font-weight: 700; text-decoration: none; color: #222; }
.flash { background: #fff3cd; margin: 0; padding: .6rem 2rem; list-style: none; }
form.inline { display: inline; }
button.linklike { background: none; border: none; color: #06c;
                  cursor: pointer; padding: 0; font: inherit; }
label { display: block; margin: .6rem 0; }
input[type=email], input[type=password], input[type=text], input[type=url], select {
  width: 100%; max-width: 24rem; padding: .45rem; border: 1px solid #bbb;
  border-radius: 4px; }
button[type=submit], .cta { background: #2b7a4b; color: #fff; border: none;
  padding: .55rem 1.2rem; border-radius: 4px; cursor: pointer;
  text-decoration: none; display: inline-block; }
/* The cleaner grid needs ~67rem for 31 days + the property column, so the
   60rem page cap made it scroll even on a wide monitor. Let that one page use
   the window; the min-widths below still trigger .cal-wrap's scroller when the
   window genuinely is too narrow (phones). */
main.wide { max-width: none; }
table.cal { border-collapse: collapse; width: 100%; }
.cal-wrap { overflow-x: auto; }
table.cal th, table.cal td { border: 1px solid #ccc; min-width: 1.9rem;
  text-align: center; padding: .25rem .3rem; font-size: .9rem; }
table.cal td.prop, table.cal th.prop { position: sticky; left: 0; background: #fff;
  text-align: left; min-width: 8rem; font-weight: 600; }
/* One declaration per mark colour, shared with the legend swatches, so the
   legend can never drift from the cells it explains. */
table.cal td.mark-c, .sw.c { background: #cdeccd; }
table.cal td.mark-q, .sw.q { background: #fff5b8; }
.legend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; align-items: center;
  font-size: .85rem; }
/* Shared by the legend and the dashboard's "next cleaning" chip: the same
   mark, the same green, wherever it appears. */
.sw { display: inline-block; min-width: 1.6rem; margin-right: .35rem;
  border: 1px solid #ccc; text-align: center; font-style: normal; }
table.cal th.sat { color: #06c; } table.cal th.sun { color: #c33; }
.stale { color: #b00; font-size: .8rem; }
.tabs { display: flex; gap: .5rem; margin: .8rem 0; flex-wrap: wrap;
  align-items: center; }
.tabs select { width: auto; }
.tabs a { padding: .3rem .7rem; border: 1px solid #bbb; border-radius: 4px;
  text-decoration: none; color: #222; }
.tabs a.active { background: #2b7a4b; color: #fff; border-color: #2b7a4b; }
.sample { margin: 2rem 0; }
.sample h2 { margin-bottom: .1rem; font-size: 1.05rem; }
.sample .cal-wrap { margin: .6rem 0; }
.sample table.cal { width: 100%; }

/* ---- dashboard -------------------------------------------------------
   Health reads as a colour stripe down the left of each property, and the
   next cleaning is shown in the same ○ chip the calendar uses, so the two
   pages speak one language. Everything editable hides behind <details>:
   the resting state is a list you can scan, not a wall of inputs. */
.btn { display: inline-block; background: #2b7a4b; color: #fff; border: 1px solid #2b7a4b;
  padding: .4rem .9rem; border-radius: 4px; cursor: pointer; font: inherit;
  text-decoration: none; line-height: 1.4; }
.btn.quiet { background: #fff; color: #2b5140; border-color: #c3cfc6; }
/* Tinted, not white: deleting an account is the one irreversible action here
   and should not read as body text. */
.btn.danger { background: #fdeceb; color: #8c2018; border-color: #e3a49e; }
.btn:hover { filter: brightness(.96); }
.btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid #2b7a4b;
  outline-offset: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; }
.hint { color: #5a6560; font-size: .85rem; margin: .2rem 0 .5rem; }

.share-card, .add-card { background: #f4f7f5; border: 1px solid #e2e9e4;
  padding: .9rem 1rem; border-radius: 8px; margin: 1rem 0; }
.share-card h2, .add-card h2 { margin: 0 0 .1rem; font-size: 1rem; }
.share-url { display: block; word-break: break-all; margin: 0; }
.share-url code { user-select: all; font-size: .85rem; }

.toolbar { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin: 1.6rem 0 .6rem; }
.toolbar h2 { margin: 0; font-size: 1rem; }
.count { color: #5a6560; font-weight: 400; font-size: .85rem; }

.prop { border: 1px solid #e2e9e4; border-left: 4px solid #cdeccd; border-radius: 8px;
  padding: .7rem .9rem; margin: .5rem 0; }
.prop.is-stale { border-left-color: #f0c419; }
.prop.is-error { border-left-color: #b3261e; }
.prop-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.drag-handle { display: none; }
@media (pointer: fine) {
  .drag-handle { display: inline-block; cursor: grab; color: #9aa59e;
    user-select: none; }
  .drag-handle:active { cursor: grabbing; }
  .prop.dragging { opacity: .55; border-style: dashed; }
}
.prop-head h3 { margin: 0; font-size: 1.05rem; }
.badge { font-size: .72rem; padding: .1rem .45rem; border-radius: 999px;
  border: 1px solid transparent; }
.badge.ok { background: #edf6ed; color: #2b5140; border-color: #cdeccd; }
.badge.warn { background: #fff5b8; color: #6b5200; border-color: #ecd98a; }
.badge.error { background: #fdeceb; color: #b3261e; border-color: #f0c4c0; }
.prop-facts { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .35rem;
  font-size: .85rem; color: #5a6560; }
.prop-facts .next { color: #222; }
.prop-error { background: #fdeceb; color: #8c2018; font-size: .85rem;
  padding: .45rem .6rem; border-radius: 4px; margin: .5rem 0 0; }
.prop-edit { margin-top: .5rem; }
.prop-edit summary { cursor: pointer; font-size: .85rem; color: #2b5140; width: max-content; }
.prop-edit label { font-size: .85rem; }
.empty { background: #f4f7f5; border: 1px dashed #c3cfc6; border-radius: 8px;
  padding: 1rem; color: #5a6560; }

.verify-banner { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center;
  justify-content: space-between; background: #fff5b8; border: 1px solid #ecd98a;
  border-radius: 8px; padding: .7rem .9rem; margin: 1rem 0; }
.danger-card { border: 1px solid #f0c4c0; border-radius: 8px; padding: .9rem 1rem;
  margin: 1.5rem 0; }
.danger-card h2 { margin: 0 0 .3rem; font-size: 1rem; color: #b3261e; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .9rem; margin: .4rem 0; }
.kv dt { color: #5a6560; font-size: .85rem; }
.kv dd { margin: 0; }

.site-footer { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; align-items: center;
  border-top: 1px solid #ddd; margin-top: 2.5rem; padding: 1rem; font-size: .8rem; }
.site-footer a { color: #2b5140; }
.site-footer .muted { color: #7a857f; margin-left: auto; }

/* Legal documents: long-form reading, narrower than the app pages. */
.doc { max-width: 44rem; }
.doc h2 { font-size: 1rem; margin-top: 1.6rem; }
.doc li { margin: .25rem 0; }
.doc-table { border-collapse: collapse; width: 100%; margin: .8rem 0; }
.doc-table th, .doc-table td { border: 1px solid #ddd; padding: .5rem .6rem;
  text-align: left; vertical-align: top; font-size: .9rem; }
.doc-table th { background: #f4f7f5; width: 12rem; font-weight: 600; }

.props td, .props th { padding: .4rem; border-bottom: 1px solid #eee; }
.note { font-size: .85rem; color: #555; background: #f7f7f5; border-left: 3px solid #cfd8cf;
  padding: .5rem .7rem; margin: 1rem 0; }
.share-box { background: #f4f7f5; padding: .8rem; border-radius: 6px; margin: 1rem 0; }
.share-box code { user-select: all; word-break: break-all; }