/* ================= Family calendar ================= */
:root {
  --fam-bg: #0e1014;
  --fam-card: #1a1c22;
  --fam-card-2: #21242c;
  --fam-text: #faf9f5;
  --fam-muted: #c2c0b6;
  --fam-dim: #8a877d;
  --fam-accent: #ffb700;
  --fam-line: rgba(250, 249, 245, 0.08);
  --fam-line-2: rgba(250, 249, 245, 0.14);
}

body.fam-body {
  background: var(--fam-bg);
  color: var(--fam-text);
  font-family: "Montserrat", sans-serif;
  margin: 0;
}
body.fam-body a { color: inherit; }

/* ===== Topbar ===== */
.fam-topbar {
  align-items: center;
  border-bottom: 1px solid var(--fam-line);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 auto;
  max-width: 100%;
  padding: 16px 20px;
}
.fam-brand {
  align-items: center;
  display: flex;
  font-family: "Oswald", sans-serif;
  font-size: 18px;
  gap: 12px;
  letter-spacing: 0.6px;
  text-decoration: none;
  text-transform: uppercase;
}
.fam-brand img { height: 30px; width: auto; }
.fam-eyebrow {
  border-left: 1px solid var(--fam-line-2);
  color: var(--fam-muted);
  font-family: "Oswald", sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  padding-left: 12px;
}
.fam-nav { align-items: center; display: flex; flex: 1; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.fam-nav a {
  border-radius: 6px;
  color: var(--fam-muted);
  font-size: 13px;
  padding: 8px 14px;
  text-decoration: none;
}
.fam-nav a:hover { background: rgba(250, 249, 245, 0.06); color: var(--fam-text); }
.fam-nav a.is-active { background: rgba(255, 183, 0, 0.12); color: var(--fam-accent); }

.fam-shell { margin: 0 auto; max-width: 100%; padding: 18px 20px 80px; }

/* ===== Buttons ===== */
.fam-btn {
  background: rgba(250, 249, 245, 0.06);
  border: 1px solid var(--fam-line-2);
  border-radius: 6px;
  color: var(--fam-text);
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  padding: 8px 14px;
  text-decoration: none;
}
.fam-btn:hover { background: rgba(250, 249, 245, 0.12); }
.fam-btn-primary { background: var(--fam-accent); border-color: var(--fam-accent); color: #1d1f24; font-weight: 600; }
.fam-btn-primary:hover { filter: brightness(1.07); background: var(--fam-accent); }
.fam-btn-danger { color: #ff8a89; border-color: rgba(255, 138, 137, 0.4); }
.fam-btn-danger:hover { background: rgba(226, 75, 74, 0.12); }
.fam-btn-ghost { background: transparent; }
.fam-btn-sm { font-size: 12px; padding: 5px 10px; }

/* ===== Toolbar ===== */
.fam-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 12px;
}
.fam-tb-group { align-items: center; display: flex; gap: 6px; }
.fam-tb-label { color: var(--fam-muted); font-size: 12px; letter-spacing: 0.4px; }
.fam-nav-btn {
  background: rgba(250, 249, 245, 0.06);
  border: 1px solid var(--fam-line-2);
  border-radius: 6px;
  color: var(--fam-text);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  min-width: 34px;
  padding: 7px 10px;
}
.fam-nav-btn:hover { background: rgba(250, 249, 245, 0.12); }
.fam-title { color: var(--fam-text); font-family: "Oswald", sans-serif; font-size: 18px; letter-spacing: 0.4px; margin-right: auto; min-width: 180px; }
.fam-zoom { background: rgba(250, 249, 245, 0.04); border: 1px solid var(--fam-line); border-radius: 8px; padding: 2px; }
.fam-zoom-btn {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--fam-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 6px 12px;
}
.fam-zoom-btn:hover { color: var(--fam-text); }
.fam-zoom-btn.is-active { background: var(--fam-accent); color: #1d1f24; font-weight: 600; }
.fam-select {
  background: var(--fam-bg);
  border: 1px solid var(--fam-line-2);
  border-radius: 6px;
  color: var(--fam-text);
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  padding: 7px 9px;
}
.fam-select:focus { border-color: var(--fam-accent); outline: none; }

/* ===== Chips ===== */
.fam-chips { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.fam-chip-set { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.fam-chip {
  background: transparent;
  border: 1px solid var(--fam-line-2);
  border-radius: 999px;
  color: var(--fam-dim);
  cursor: pointer;
  font-size: 12px;
  padding: 5px 12px;
}
.fam-chip .fam-chip-dot { border-radius: 50%; display: inline-block; height: 8px; margin-right: 6px; width: 8px; }
.fam-chip.is-on { background: rgba(250, 249, 245, 0.1); color: var(--fam-text); }
.fam-chip:not(.is-on) { opacity: 0.55; text-decoration: line-through; }
.fam-chip-sep { background: var(--fam-line-2); height: 18px; width: 1px; }

/* ===== Timeline grid ===== */
.cal-scroll { -webkit-overflow-scrolling: touch; border: 1px solid var(--fam-line); border-radius: 10px; overflow-x: auto; }
.cal-root { min-width: 100%; }
.cal-grid {
  display: grid;
  grid-template-columns: var(--lane-w, 160px) repeat(var(--cal-cols, 7), minmax(var(--col-min, 90px), 1fr));
  width: 100%;
}
.cal-corner { background: var(--fam-card); border-bottom: 1px solid var(--fam-line); border-right: 1px solid var(--fam-line); position: sticky; left: 0; z-index: 3; }
.cal-colhead {
  background: var(--fam-card);
  border-bottom: 1px solid var(--fam-line);
  border-left: 1px solid var(--fam-line);
  color: var(--fam-muted);
  font-size: 11px;
  padding: 8px 6px;
  text-align: center;
  white-space: nowrap;
}
.cal-colhead.is-today { background: rgba(255, 183, 0, 0.1); color: var(--fam-accent); }
.cal-colhead-sub { color: var(--fam-dim); display: block; font-size: 10px; }

.cal-lane-head {
  align-items: center;
  background: var(--fam-card);
  border-bottom: 1px solid var(--fam-line);
  border-right: 1px solid var(--fam-line);
  display: flex;
  gap: 8px;
  left: 0;
  padding: 10px 12px;
  position: sticky;
  z-index: 2;
}
.cal-lane-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-lane-track {
  background:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(100% / var(--cal-cols) - 1px),
      var(--fam-line) calc(100% / var(--cal-cols) - 1px),
      var(--fam-line) calc(100% / var(--cal-cols))
    );
  border-bottom: 1px solid var(--fam-line);
  position: relative;
}

/* ===== Bars ===== */
.cal-bar {
  align-items: center;
  border-radius: 5px;
  box-sizing: border-box;
  color: #11131a;
  cursor: grab;
  display: flex;
  font-size: 12px;
  font-weight: 600;
  height: 22px;
  overflow: hidden;
  padding: 0 8px 0 10px;
  position: absolute;
  touch-action: none;
  white-space: nowrap;
}
.cal-bar.is-dragging { cursor: grabbing; opacity: 0.85; z-index: 5; }
.cal-bar-label { overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.cal-bar-moment { border-radius: 11px; }
.cal-bar-routine::before { background: rgba(17, 19, 26, 0.55); border-radius: 2px; content: ""; height: 12px; left: 4px; position: absolute; width: 3px; }
.cal-bar.prio-high { box-shadow: inset 3px 0 0 #e24b4a; }
.cal-bar.prio-low { opacity: 0.78; }
.cal-bar-handle { bottom: 0; cursor: ew-resize; position: absolute; top: 0; width: 9px; z-index: 2; }
.cal-bar-handle.left { left: 0; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.cal-bar-handle.right { right: 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
/* Discoverable grips: a translucent grab-zone + grip line appears on hover. */
.cal-bar:hover .cal-bar-handle { background: rgba(0, 0, 0, 0.14); }
.cal-bar-handle:hover { background: rgba(0, 0, 0, 0.26); }
.cal-bar:hover .cal-bar-handle::before {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  content: "";
  height: 11px;
  left: 50%;
  margin-left: -1px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
}

/* ===== Banners (day view all-day) ===== */
.cal-banner {
  align-items: center;
  border-radius: 4px;
  box-sizing: border-box;
  color: #11131a;
  display: flex;
  font-size: 11px;
  font-weight: 600;
  height: 18px;
  left: 4px;
  overflow: hidden;
  padding: 0 8px;
  position: absolute;
  right: 4px;
  white-space: nowrap;
}

/* ===== Markers: moments (dot) + milestones (diamond) ===== */
.cal-marker { align-items: center; display: flex; gap: 6px; height: 20px; position: absolute; transform: translateX(-6px); white-space: nowrap; }
.cal-marker-moment { cursor: pointer; }
.cal-mk-dot { border-radius: 50%; box-shadow: 0 0 0 2px var(--fam-bg); flex: none; height: 11px; width: 11px; }
.cal-mk-diamond { border-radius: 2px; box-shadow: 0 0 0 2px var(--fam-bg); flex: none; height: 10px; transform: rotate(45deg); width: 10px; }
.cal-mk-star { flex: none; font-size: 14px; line-height: 1; text-shadow: 0 0 2px rgba(0, 0, 0, 0.6); }
.cal-mk-label { font-size: 11px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.cal-marker-moment .cal-mk-label { color: var(--fam-text); }
.cal-marker-ms .cal-mk-label { color: var(--fam-muted); font-style: italic; }
.cal-marker-moment:hover .cal-mk-label { text-decoration: underline; }
.cal-marker-routine { cursor: pointer; }
.cal-mk-label-light { color: var(--fam-dim); font-weight: 400; }
.cal-marker-routine:hover .cal-mk-label { color: var(--fam-text); }

.cal-empty { color: var(--fam-dim); font-size: 13px; padding: 40px; text-align: center; }

/* ===== Modal ===== */
.fam-modal-backdrop { align-items: flex-start; background: rgba(0, 0, 0, 0.55); display: flex; inset: 0; justify-content: center; overflow-y: auto; padding: 24px 16px; position: fixed; z-index: 2000; }
.fam-modal-backdrop[hidden] { display: none; }
.fam-modal { background: var(--fam-card); border: 1px solid var(--fam-line-2); border-radius: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 48px); max-width: 540px; width: 100%; }
.fam-modal-head { align-items: center; border-bottom: 1px solid var(--fam-line); display: flex; flex: none; justify-content: space-between; padding: 16px 18px; }
.fam-modal-head h3 { font-family: "Oswald", sans-serif; font-size: 18px; margin: 0; }
.fam-modal-x { background: none; border: 0; color: var(--fam-muted); cursor: pointer; font-size: 24px; line-height: 1; }
.fam-modal-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 14px; overflow-y: auto; padding: 18px; }
.fam-modal-foot { align-items: center; border-top: 1px solid var(--fam-line); display: flex; flex: none; gap: 8px; padding: 14px 18px; }
.fam-spacer { flex: 1; }
.fam-modal-err { background: rgba(226, 75, 74, 0.12); border: 1px solid rgba(226, 75, 74, 0.3); border-radius: 6px; color: #ffb3b3; font-size: 13px; padding: 8px 12px; }

.fam-field { display: flex; flex-direction: column; gap: 6px; }
.fam-field > label { color: var(--fam-muted); font-size: 12px; letter-spacing: 0.4px; }
.fam-row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.fam-input, .fam-textarea {
  background: var(--fam-bg);
  border: 1px solid var(--fam-line-2);
  border-radius: 6px;
  color: var(--fam-text);
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  padding: 9px 11px;
  width: 100%;
}
.fam-input:focus, .fam-textarea:focus { border-color: var(--fam-accent); outline: none; }
.fam-textarea { min-height: 70px; resize: vertical; }
.fam-color { height: 40px; padding: 4px; }
.fam-checks { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.fam-check-inline { align-items: center; color: var(--fam-text); display: inline-flex; font-size: 13px; gap: 6px; }

/* ===== Projects page ===== */
.fam-page-head { margin-bottom: 18px; }
.fam-page-title { font-family: "Oswald", sans-serif; font-size: 26px; margin: 0; }
.fam-card { background: var(--fam-card); border: 1px solid var(--fam-line); border-radius: 12px; margin-bottom: 16px; padding: 20px; }
.fam-card h3 { font-family: "Oswald", sans-serif; font-size: 14px; letter-spacing: 1.2px; margin: 0 0 14px; text-transform: uppercase; color: var(--fam-muted); }
.fam-card-head { align-items: center; display: flex; gap: 10px; margin-bottom: 12px; }
.fam-card-head h3 { margin: 0; }
.fam-dot { border-radius: 50%; display: inline-block; flex: none; height: 12px; width: 12px; }
.fam-tag { background: rgba(250, 249, 245, 0.1); border-radius: 4px; color: var(--fam-dim); font-size: 10px; padding: 2px 6px; }
.fam-subhead { color: var(--fam-muted); font-size: 12px; letter-spacing: 1px; margin: 18px 0 10px; text-transform: uppercase; }
.fam-form-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.fam-field-full { grid-column: 1 / -1; }
.fam-actions { align-items: flex-end; display: flex; gap: 8px; margin-top: 12px; }
.fam-help { color: var(--fam-dim); font-size: 12px; }
.fam-mlist { list-style: none; margin: 0 0 12px; padding: 0; }
.fam-mlist li { align-items: center; border-bottom: 1px solid var(--fam-line); display: flex; gap: 10px; padding: 8px 0; }
.fam-m-name { flex: 1; font-size: 14px; }
.fam-mnew { margin-top: 12px; }
.fam-mnew .fam-actions { margin-top: 0; }

/* Projects list */
.fam-list { list-style: none; margin: 0; padding: 0; }
.fam-list-row { align-items: center; border-bottom: 1px solid var(--fam-line); display: flex; gap: 12px; padding: 10px 0; }
.fam-list-link { align-items: center; color: var(--fam-text); display: flex; flex: 1; gap: 10px; text-decoration: none; }
.fam-list-link:hover .fam-list-name { text-decoration: underline; }
.fam-list-name { font-size: 15px; font-weight: 500; }
.fam-ms-row { border-bottom: 1px solid var(--fam-line); padding: 14px 0; }
.fam-ms-row:last-child { border-bottom: 0; }

/* ===== Toast ===== */
.fam-toast { background: #21242c; border: 1px solid var(--fam-line-2); border-radius: 8px; bottom: 22px; color: var(--fam-text); font-size: 13px; left: 50%; padding: 10px 16px; position: fixed; transform: translateX(-50%); z-index: 2200; }
.fam-toast[hidden] { display: none; }
.fam-toast.error { background: rgba(226, 75, 74, 0.18); border-color: rgba(226, 75, 74, 0.4); }

/* ===== Hover tooltip ===== */
.fam-tip {
  background: #1a1c22;
  border: 1px solid var(--fam-line-2);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  color: var(--fam-text);
  font-size: 12px;
  max-width: 290px;
  padding: 10px 12px;
  pointer-events: none;
  position: fixed;
  z-index: 2200;
}
.fam-tip[hidden] { display: none; }
.fam-tip-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.fam-tip-meta { color: var(--fam-muted); margin-bottom: 6px; }
.fam-tip-row { display: flex; gap: 8px; line-height: 1.5; }
.fam-tip-k { color: var(--fam-dim); flex: none; min-width: 52px; }
.fam-tip-v { color: var(--fam-text); }
.fam-tip-notes { color: var(--fam-muted); margin-top: 6px; white-space: pre-wrap; }

@media (max-width: 720px) {
  .fam-row, .fam-form-grid { grid-template-columns: 1fr; }
  .fam-title { margin-right: 0; width: 100%; }
}

/* =================================================================
   Mobile / touch (≤ 640px). Reclaim horizontal space (the fixed lane
   column ate ~half a phone screen), compress the toolbar, and let the
   timeline pan under a finger. Interaction changes live in cadence.js.
   ================================================================= */
@media (max-width: 640px) {
  .fam-topbar { gap: 10px; padding: 12px 14px; }
  .fam-shell { padding: 12px 10px 60px; }

  /* Toolbar: tighter, smaller controls so the calendar appears higher. */
  .fam-toolbar { gap: 8px 10px; margin-bottom: 10px; }
  .fam-title { font-size: 16px; min-width: 0; order: -1; width: 100%; }
  .fam-nav-btn { font-size: 14px; min-width: 30px; padding: 6px 8px; }
  .fam-zoom-btn { padding: 6px 10px; }
  .fam-tb-label { font-size: 11px; }

  /* Chips wrap without a huge gap; a bit of breathing room per row. */
  .fam-chips { gap: 6px; margin-bottom: 10px; }

  /* The big win: a much slimmer lane column leaves room for real content. */
  .cal-grid { --lane-w: 92px; }
  .cal-lane-head { gap: 6px; padding: 8px 8px; }
  .cal-lane-name { font-size: 12px; }
  .cal-corner { min-width: 92px; }
  .cal-colhead { font-size: 10px; padding: 7px 4px; }

  /* Give the timeline room to breathe and keep pan gestures contained
     (no accidental browser back-swipe). */
  .cal-scroll { min-height: 55vh; overscroll-behavior-x: contain; }

  /* 16px inputs stop iOS from zooming the page on focus. */
  .fam-input, .fam-textarea, .fam-select { font-size: 16px; }
  .fam-modal-body { padding: 16px; gap: 12px; }
}

/* Touch / coarse-pointer devices: drag-to-move and hover grips are a
   mouse affordance. On touch, prioritise scrolling the timeline and
   tap-to-open (wired up in cadence.js) instead. */
@media (hover: none) and (pointer: coarse) {
  .cal-bar { touch-action: pan-x pan-y; }
  .cal-bar-handle { display: none; }        /* resizing is edit-via-modal on touch */
  .cal-marker-ms { cursor: pointer; }        /* milestones become tappable for info */
}