/* ============================================================
   fun.css — Fun page (Time › Fun) + the Fun tab on the Week plan.
   Board look: no card backgrounds, thin coloured line on the left,
   beige 1.5px separators. Fun's colour is fuchsia #a3306a.
   ============================================================ */

.fun { --fun: #a3306a; --fun-soft: #f6e4ee; --line: #dad2c3; container-type: inline-size; container-name: fun;
  max-width: 1180px; margin: 0 auto; padding: 8px 0 64px; display: flex; flex-direction: column; gap: 26px;
  font-family: 'Kalam', cursive; color: #23201b; font-size: 16.5px; }
.fun svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.fun-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fun-muted { color: #5a554c; margin: 0; }
.fun-small { font-size: 14.5px; }
.fun-coral { color: #a85338; }
.fun-blue { color: #2f5d8a; }
.fun-kicker { margin: 0; font-size: 14px; color: #5a554c; letter-spacing: .08em; text-transform: uppercase; }

/* header */
.fun-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.fun-title-lg { margin: 0; font-family: 'Caveat', cursive; font-size: 64px; line-height: 1; font-weight: 700; color: var(--fun); }
.fun-stats { display: flex; gap: 32px; }
.fun-stats div { display: flex; flex-direction: column; }
.fun-stats b { font-family: 'Caveat', cursive; font-size: 40px; line-height: 1; }
.fun-stats span { font-size: 14px; color: #5a554c; }

/* buttons + inputs */
.fun-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 6px;
  background: none; box-shadow: inset 0 0 0 1.5px var(--line); font: inherit; font-size: 15.5px; color: #23201b; cursor: pointer; white-space: nowrap; }
.fun-btn:hover { background: #ebe5da; }
.fun-btn--main { background: var(--fun); color: #fff; box-shadow: none; font-weight: 700; }
.fun-btn--main:hover { background: #8a2859; }
.fun-btn[disabled] { opacity: .5; cursor: default; }
.fun-btn--cal svg { color: var(--fun); }
.fun-input { font: inherit; font-size: 16px; color: #23201b; background: transparent; border: 0; border-bottom: 1.5px solid var(--line); border-radius: 0; padding: 8px 0; width: 100%; box-sizing: border-box; min-width: 0; }
.fun-input:focus { outline: none; border-bottom-color: var(--fun); }
textarea.fun-input { resize: vertical; }
.fun-x { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; background: none; color: #5a554c; border-radius: 6px; cursor: pointer; }
.fun-x:hover { background: #ebe5da; color: #23201b; }
.fun-link { border: 0; background: none; font: inherit; color: #a85338; cursor: pointer; padding: 8px 0; text-align: left; }
.fun-link--del { font-size: 14.5px; margin-top: 8px; }

/* Zuly's picks */
.fun-zuly { border-left: 1.5px solid var(--fun); padding: 4px 0 4px 18px; display: flex; flex-direction: column; gap: 6px; }
.fun-zuly__lead { margin: 0; }
.fun-zuly__lead b, .fun-tip b { color: var(--fun); }
.fun-zuly__list { list-style: none; margin: 0; padding: 0; }
.fun-zuly__row { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-top: 1.5px solid var(--line); }
.fun-zuly__row > span { flex: 1; min-width: 0; }
.fun-zuly__acts { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 4px; }

/* filters */
.fun-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fun-chip { min-height: 40px; padding: 6px 16px; border: 0; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1.5px var(--line);
  font: inherit; font-size: 15.5px; color: #34302a; cursor: pointer; }
.fun-chip:hover { background: #ebe5da; }
.fun-chip[aria-pressed="true"] { background: var(--fun); color: #fff; box-shadow: none; }

/* layout: list + details */
.fun-main { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: flex-start; }
.fun-list { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.fun-aside { flex: 1 1 300px; max-width: 420px; min-width: 0; border-left: 1.5px solid var(--fun); padding: 2px 0 2px 26px;
  display: flex; flex-direction: column; gap: 14px; }
.fun-aside > .fun-btn { align-self: flex-start; }
.fun-intro { font-size: 17px; }
.fun-groups { display: flex; flex-direction: column; gap: 30px; }

/* groups + rows */
.fun-group__h { margin: 0 0 4px; font-family: 'Caveat', cursive; font-size: 34px; font-weight: 700; display: flex; align-items: center; gap: 12px; }
.fun-group__h span { font-family: 'Kalam', cursive; font-size: 14px; font-weight: 400; color: #5a554c; }
.fun-row { display: flex; align-items: center; gap: 14px; padding: 8px 0 8px 14px; border-top: 1.5px solid var(--line); border-left: 3px solid transparent; }
.fun-row.is-sel { border-left-color: var(--fun); background: rgba(163, 48, 106, .06); }
.fun-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; background: none; border: 0; padding: 4px 0; font: inherit; color: inherit; cursor: pointer; }
.fun-row__name { font-size: 19px; font-weight: 700; }
.fun-row__meta { font-size: 14.5px; color: #5a554c; }
.fun-add { border-top: 1.5px solid var(--line); padding-left: 17px; }
.fun-add .fun-input { border-bottom: 0; }
.fun-add--group { border-top: 0; padding-left: 0; }
.fun-add--group .fun-input { border-bottom: 1.5px dashed var(--line); }

/* status pills */
.fun-pill { display: inline-block; flex: none; border-radius: 999px; padding: 3px 12px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.fun-pill--overdue { background: #f8e9e3; color: #a85338; }
.fun-pill--due { background: #f1e6c8; color: #6e5410; }
.fun-pill--ok { background: #e1ece3; color: #2c6342; }
.fun-pill--booked { background: #e1e9f2; color: #2f5d8a; }
.fun-pill--any { background: #ece4f1; color: #6b4a86; }
.fun-pill--new { background: #ebe5da; color: #5a554c; }

/* details */
.fun-back { display: none; align-self: flex-start; border: 0; background: none; font: inherit; color: #a85338; padding: 8px 0; cursor: pointer; }
.fun-back--always { display: inline-block; }
.fun-title { font-family: 'Caveat', cursive; font-size: 44px; line-height: 1.05; font-weight: 700; color: #23201b; background: transparent;
  border: 0; border-bottom: 1.5px solid transparent; padding: 0; width: 100%; min-width: 0; }
.fun-title:hover { border-bottom-color: var(--line); }
.fun-title:focus { outline: none; border-bottom-color: var(--fun); }
.fun-h { margin: 0; font-family: 'Caveat', cursive; font-size: 44px; line-height: 1.05; font-weight: 700; }
.fun-h3 { margin: 10px 0 0; font-family: 'Caveat', cursive; font-size: 30px; font-weight: 700; }
.fun-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fun-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.fun-facts { display: flex; flex-direction: column; }
.fun-fact { display: flex; align-items: center; gap: 14px; border-top: 1.5px solid var(--line); }
.fun-fact > span { width: 96px; flex: none; color: #5a554c; font-size: 15px; }
.fun-fact .fun-input { border-bottom: 0; }
.fun-fact--notes { align-items: flex-start; border-bottom: 1.5px solid var(--line); margin-top: 6px; }
.fun-fact--notes > span { padding-top: 9px; }
.fun-ul { list-style: none; margin: 0; padding: 0; }
.fun-li { display: flex; align-items: center; gap: 10px; border-top: 1.5px solid var(--line); padding: 4px 0; }
.fun-li input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--fun); flex: none; }
.fun-li label { flex: 1; min-width: 0; padding: 6px 0; }
.fun-li.is-done label { text-decoration: line-through; color: #5a554c; }
.fun-up { display: flex; gap: 14px; padding: 8px 0 8px 12px; border-top: 1.5px solid var(--line); border-left: 1.5px solid #2f5d8a; }
.fun-up b { width: 64px; flex: none; color: #2f5d8a; }
.fun-done { color: #2c6342; }
.fun-done svg { width: 44px; height: 44px; }

/* schedule */
.fun-tip { margin: 0; background: var(--fun-soft); border-radius: 6px; padding: 10px 14px; font-size: 15.5px; }
.fun-field { display: flex; flex-direction: column; gap: 8px; }
.fun-label { font-size: 14px; color: #5a554c; letter-spacing: .08em; text-transform: uppercase; }
.fun-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fun-day { display: flex; flex-direction: column; align-items: center; min-height: 52px; padding: 6px 2px; border: 0; border-radius: 6px; background: none;
  box-shadow: inset 0 0 0 1.5px var(--line); font: inherit; font-size: 15px; color: #23201b; cursor: pointer; }
.fun-day span { font-size: 12.5px; color: #5a554c; }
.fun-day:hover { background: #ebe5da; }
.fun-day[aria-pressed="true"] { background: var(--fun); color: #fff; box-shadow: none; }
.fun-day[aria-pressed="true"] span { color: #fff; }
.fun-inline { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: #5a554c; }
.fun-inline .fun-input { width: auto; flex: 1; }

/* phone: list first; tapping an item shows its details instead of the list */
@container fun (max-width: 760px) {
  .fun-title-lg { font-size: 52px; }
  .fun-stats { gap: 22px; }
  .fun-stats b { font-size: 32px; }
  .fun-aside { display: none; position: static; max-width: none; border-left: 0; padding-left: 0; }
  .fun--picked .fun-aside { display: flex; }
  .fun--picked .fun-list, .fun--picked .fun-zuly, .fun--picked .fun-head { display: none; }
  .fun-back { display: inline-block; }
  .fun-row { flex-wrap: wrap; gap: 6px 10px; padding-left: 10px; }
  .fun-row__main { flex-basis: 100%; }
  .fun-btn--cal { margin-left: auto; min-height: 40px; padding: 6px 12px; }
  .fun-zuly__row { flex-wrap: wrap; }
}

/* Week plan › My Board › Fun tab */
.dchip--fun .dchip__add { margin-left: 4px; border: 0; border-radius: 6px; padding: 2px 8px; background: none; box-shadow: inset 0 0 0 1.5px #dad2c3; font: inherit; font-size: 12.5px; color: #23201b; cursor: pointer; white-space: nowrap; }
.dchip--fun .dchip__add:hover { background: #ebe5da; }
.dchip__due--overdue { color: #a85338 !important; font-weight: 700; }
.dchip__due--booked { color: #2c6342 !important; }
.dash-funnote { margin: 4px 0 6px; font-size: 13.5px; color: #5a554c; }
.dash-funnote b { color: #a3306a; }