/* Homebuilder frame — the company calendar (office Home, and the office items
   on the Schedule). The month grid reuses the Schedule's .hm-sch-* layout;
   this file adds tone colors, the type label on every row, the filter chips
   and the Today strip. Tone is always paired with a word label. */

body.homes-app {
  --hm-tone-accent: #2563eb;
  --hm-tone-info: #0891b2;
  --hm-tone-ok: #059669;
  --hm-tone-warn: #c2410c;
  --hm-tone-danger: #dc2626;
  --hm-tone-muted: #64748b;
}
.hm-tone-accent { --c: var(--hm-tone-accent); }
.hm-tone-info { --c: var(--hm-tone-info); }
.hm-tone-ok { --c: var(--hm-tone-ok); }
.hm-tone-warn { --c: var(--hm-tone-warn); }
.hm-tone-danger { --c: var(--hm-tone-danger); }
.hm-tone-muted { --c: var(--hm-tone-muted); }
.hm-sch-dots i[class^="hm-tone-"] { background: var(--c); }

.hm-cal-mark { flex: none; align-self: stretch; width: 5px; min-height: 34px; background: var(--c, var(--hm-tone-muted)); border-radius: 3px; }
.hm-filterbtn .hm-cal-mark { align-self: center; width: 10px; height: 10px; min-height: 0; border-radius: 50%; }
.hm-cal-kind { display: block; margin-bottom: 1px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--hm-muted); }
.hm-cal-row { min-height: 60px; align-items: center; }
.hm-cal-row .hm-row-main b { font-size: 15.5px; }
.hm-cal-row .hm-row-main small { font-size: 13.5px; }
.hm-cal-by { color: var(--hm-faint) !important; }
.hm-cal-go { font-size: 13px; font-weight: 600; color: var(--app-accent); }
.hm-cal-rows { gap: 6px; padding-top: 10px; }
.hm-cal-dayadd { display: flex; justify-content: flex-end; padding-top: 10px; }
.hm-sch-ev.is-office { font-style: normal; border-left-style: dashed; }

/* Filter chips: large, plain words. */
.hm-cal-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.hm-filterbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; font: inherit; font-size: 15px; font-weight: 600; color: var(--hm-muted); background: var(--app-surface); border: 1px solid var(--hm-line-strong); border-radius: var(--radius-pill); cursor: pointer; }
.hm-filterbtn.is-on { color: var(--app-navy); background: var(--app-accent-soft); border-color: color-mix(in srgb, var(--app-accent) 40%, white); }
.hm-filterbtn:not(.is-on) .hm-cal-mark { opacity: .35; }
.hm-cal-build .hm-select { min-height: 44px; font-size: 15px; }

/* Today strip. */
.hm-today { margin-bottom: 18px; }
.hm-today .hm-section-title { margin-top: 4px; }
.hm-today-calm { margin: 0 0 8px; font-size: 16px; color: var(--hm-muted); }
.hm-today-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.hm-today-tile { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px 18px; color: var(--hm-text); text-decoration: none; background: var(--app-surface); border: 1px solid var(--hm-line); border-radius: 14px; box-shadow: var(--shadow-1); }
.hm-today-tile b { font-size: 28px; font-weight: 700; line-height: 1; color: var(--hm-muted); font-variant-numeric: tabular-nums; }
.hm-today-tile span { flex: 1; font-size: 16px; font-weight: 600; line-height: 1.3; }
.hm-today-tile .hm-ic { color: var(--hm-faint); }
.hm-today-tile.is-due { border-color: #fdba74; background: #fff7ed; }
.hm-today-tile.is-due b { color: #c2410c; }
.hm-today-tile:hover { background: var(--app-surface-2); }

.hm-btn-lg { min-height: 48px; padding: 10px 20px; font-size: 16px; }
.hm-btn-lg .hm-ic { width: 18px; height: 18px; }

@media (min-width: 1024px) {
  .hm-cal-layout { grid-template-columns: minmax(0, 1fr) 400px; }
  .hm-cal-page .hm-sch-ev { font-size: 12px; }
}