:root {
  --bg: #f4efe5;
  --card: #fffdf8;
  --ink: #1e2a2a;
  --muted: #6f7774;
  --line: #d9d4ca;
  --accent: #2f6f62;
  --accent-soft: #dfece7;
  --warn: #a76d2a;
  --bad: #9c4d44;
  --good: #4d7452;
  --shadow: 0 10px 30px rgba(30,42,42,.08);
}
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:var(--bg); color:var(--ink); }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
#app { min-height:100vh; }
.loading-shell { padding:40px; text-align:center; color:var(--muted); }
.shell { max-width:1500px; margin:0 auto; padding:18px; }
.topbar { display:flex; gap:14px; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.brand { display:flex; align-items:baseline; gap:10px; }
.brand h1 { font-size:22px; margin:0; }
.brand small { color:var(--muted); }
.identity { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pill { border:1px solid var(--line); background:var(--card); border-radius:999px; padding:7px 11px; }
.tabs { display:flex; gap:6px; overflow:auto; padding-bottom:8px; }
.tab { border:1px solid var(--line); background:transparent; padding:9px 13px; border-radius:10px; white-space:nowrap; }
.tab.active { background:var(--ink); color:white; border-color:var(--ink); }
.panel { display:none; }
.panel.active { display:block; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }
.section-head { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:12px; }
.section-head h2 { margin:0; font-size:18px; }
.muted { color:var(--muted); }
.small { font-size:12px; }
.btn { border:1px solid var(--line); background:var(--card); padding:9px 12px; border-radius:10px; color:var(--ink); }
.btn.primary { background:var(--accent); color:white; border-color:var(--accent); }
.btn.ghost { background:transparent; }
.btn.danger { color:var(--bad); }
.input, select, textarea { width:100%; border:1px solid var(--line); background:white; border-radius:9px; padding:9px 10px; color:var(--ink); }
label { display:block; font-size:12px; color:var(--muted); margin-bottom:5px; }
.grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.form-row { margin-bottom:10px; }
.list { display:grid; gap:8px; }
.item { border:1px solid var(--line); border-radius:11px; padding:10px; background:var(--card); }
.item-title { font-weight:650; }
.meta { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:6px; }
.tag { padding:3px 7px; border-radius:999px; background:#ece9e1; font-size:11px; color:#4d5552; }
.tag.good { background:#e3eee3; color:var(--good); }
.tag.warn { background:#f2e7d6; color:var(--warn); }
.tag.bad { background:#f1dfdc; color:var(--bad); }
.planning-layout { display:grid; grid-template-columns:270px minmax(0,1fr) 250px; gap:12px; align-items:start; }
.sidebar { padding:12px; position:sticky; top:10px; max-height:calc(100vh - 40px); overflow:auto; }
.daytabs { display:flex; gap:5px; overflow:auto; padding:0 0 8px; }
.daybtn { border:1px solid var(--line); background:var(--card); border-radius:9px; padding:8px 10px; min-width:58px; }
.daybtn.active { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:700; }
.calendar-wrap { overflow:auto; border:1px solid var(--line); border-radius:12px; background:var(--card); max-height:78vh; }
table.calendar { border-collapse:separate; border-spacing:0; min-width:760px; width:100%; font-size:13px; }
.calendar th,.calendar td { border-right:1px solid var(--line); border-bottom:1px solid var(--line); vertical-align:top; }
.calendar th { position:sticky; top:0; z-index:5; background:#f6f3ed; padding:8px; text-align:left; }
.calendar .time { position:sticky; left:0; z-index:4; background:#faf8f2; width:68px; padding:7px; white-space:nowrap; font-weight:650; }
.calendar th.time { z-index:8; }
.slot { min-height:47px; padding:4px; transition:background .12s, outline .12s; }
.slot.dragover { background:var(--accent-soft); outline:2px solid var(--accent); outline-offset:-2px; }
.drag-card { border:1px solid var(--line); border-radius:9px; background:white; padding:8px; margin:2px 0; cursor:grab; box-shadow:0 2px 7px rgba(0,0,0,.04); }
.drag-card:active { cursor:grabbing; }
.drag-card .title { font-weight:650; }
.drag-card .sub { font-size:11px; color:var(--muted); margin-top:3px; }
.need-card { border-left:4px solid var(--warn); }
.need-card.planned { border-left-color:var(--accent); }
.need-card.addressed { border-left-color:var(--good); opacity:.72; }
.activity-card { border-left:4px solid var(--accent); }
.activity-card.drop-target { outline:2px dashed var(--warn); }
.auth-screen { max-width:520px; margin:12vh auto 0; padding:22px; }
.auth-screen h1 { margin-top:0; }
.person-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
.person-btn { text-align:left; border:1px solid var(--line); background:white; padding:11px; border-radius:10px; }
.person-btn.suggested { border-color:var(--accent); background:var(--accent-soft); }
.statusbar { position:fixed; right:14px; bottom:14px; background:rgba(30,42,42,.92); color:white; border-radius:9px; padding:8px 11px; font-size:12px; opacity:0; pointer-events:none; transition:opacity .2s; }
.statusbar.show { opacity:1; }
.empty { padding:12px; border:1px dashed var(--line); border-radius:10px; color:var(--muted); text-align:center; }
.vote-row { display:flex; gap:5px; margin-top:8px; }
.vote { border:1px solid var(--line); background:white; border-radius:8px; padding:5px 8px; font-size:12px; }
.vote.active { background:var(--accent-soft); border-color:var(--accent); }
.checkbox-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.check { display:flex; gap:6px; align-items:center; font-size:12px; color:var(--ink); }
.check input { width:auto; }
.log { display:grid; gap:7px; }
.log-row { border-bottom:1px solid var(--line); padding:8px 0; }
@media (max-width:1050px){ .planning-layout{grid-template-columns:1fr;} .sidebar{position:static;max-height:none;} }
@media (max-width:650px){ .shell{padding:10px;} .grid2,.grid3{grid-template-columns:1fr;} .person-grid{grid-template-columns:1fr;} .checkbox-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
.shopping-item { display:grid; gap:10px; }
.shopping-item.shopping-done { opacity:.72; }
.shopping-head { display:flex; gap:10px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.shopping-title { margin:0; color:var(--ink); font-size:14px; }
.bringing-label { font-size:11px; color:var(--muted); font-weight:650; }
.bringing-grid { display:flex; gap:6px; flex-wrap:wrap; }
.bring-person { display:flex; align-items:center; gap:5px; margin:0; padding:6px 8px; border:1px solid var(--line); border-radius:999px; background:white; color:var(--ink); font-size:12px; cursor:pointer; }
.bring-person input { width:auto; margin:0; }
.bring-person.active { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }

/* Day titles */
.planning-layout > main { min-width:0; }
.daybtn { display:flex; flex-direction:column; align-items:flex-start; gap:2px; max-width:150px; }
.day-code { font-weight:700; }
.day-tab-title { max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:500; color:var(--muted); }
.daybtn.active .day-tab-title { color:var(--accent); }
.day-title-editor { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px; margin-bottom:8px; box-shadow:none; }
.day-title-copy { display:flex; flex-direction:column; gap:2px; min-width:max-content; }
.day-title-form { display:flex; gap:6px; flex:1; max-width:560px; }
.day-title-form .input { min-width:0; }

/* Phone-friendly planning width */
@media (max-width:650px){
  .planning-layout > main { order:1; }
  .planning-layout > aside:first-child { order:2; }
  .planning-layout > aside:last-child { order:3; }
  .daytabs { gap:4px; }
  .daybtn { min-width:64px; max-width:96px; padding:6px 7px; }
  .day-tab-title { max-width:80px; }
  .day-title-editor { align-items:stretch; flex-direction:column; gap:7px; }
  .day-title-copy { flex-direction:row; align-items:baseline; gap:8px; min-width:0; }
  .day-title-form { width:100%; max-width:none; }
  .calendar-wrap { width:100%; max-width:100%; overflow-x:auto; }
  table.calendar { min-width:0; width:100%; table-layout:fixed; font-size:11px; }
  .calendar .time { width:44px; min-width:44px; padding:5px 3px; font-size:10px; }
  .calendar th:not(.time) { width:calc((100% - 44px)/3); padding:6px 3px; text-align:center; }
  .calendar td { min-width:0; overflow:hidden; }
  .slot { min-height:42px; padding:2px; }
  .calendar .drag-card { min-width:0; padding:5px; border-radius:7px; font-size:10px; overflow-wrap:anywhere; word-break:break-word; }
  .calendar .drag-card .sub { font-size:9px; }
  .calendar .tag { font-size:9px; padding:2px 4px; white-space:normal; overflow-wrap:anywhere; }
  .calendar .meta { gap:3px; }
}
@media (max-width:440px){
  .shell { padding:7px; }
  .topbar { margin-bottom:8px; }
  .tabs { gap:4px; }
  .tab { padding:7px 9px; }
  .plan-long { display:none; }
  .calendar .activity-card .sub { display:none; }
  .calendar .time { width:38px; min-width:38px; }
  .calendar th:not(.time) { width:calc((100% - 38px)/3); }
}

/* Parallel-plan participation */
.activity-top { display:flex; align-items:flex-start; justify-content:space-between; gap:6px; }
.activity-top > div:first-child { min-width:0; }
.join-toggle { flex:0 0 auto; width:28px; height:28px; border:1px solid var(--line); background:white; border-radius:999px; display:grid; place-items:center; padding:0; font-weight:800; color:var(--muted); }
.join-toggle.active { background:var(--accent); color:white; border-color:var(--accent); }
.activity-join-row { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-top:6px; min-height:20px; }
.activity-people { display:flex; align-items:center; gap:3px; flex-wrap:wrap; }
.person-dot { width:22px; height:22px; border-radius:999px; display:grid; place-items:center; border:1px solid var(--line); background:var(--accent-soft); color:var(--accent); font-size:9px; font-weight:800; line-height:1; }
.no-one { font-size:10px; }

/* Touch drag + tap-to-place fallback */
.touch-ghost { position:fixed !important; inset:0 auto auto 0; z-index:9999; pointer-events:none; opacity:.88; margin:0 !important; box-shadow:0 12px 30px rgba(30,42,42,.24); transform-origin:top left; }
body.touch-dragging { user-select:none; -webkit-user-select:none; }
.slot.touch-over { background:var(--accent-soft); outline:2px solid var(--accent); outline-offset:-2px; }
.tap-place-active .slot.tap-target { outline:1px dashed rgba(47,111,98,.45); outline-offset:-2px; }
.tap-place-active .activity-card.tap-target { outline:1px dashed rgba(167,109,42,.55); }
.tap-place-bar { position:fixed; left:50%; bottom:12px; transform:translateX(-50%); z-index:10000; width:min(92vw,560px); display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:12px; background:rgba(30,42,42,.95); color:white; box-shadow:0 10px 30px rgba(0,0,0,.22); font-size:12px; }
.tap-place-bar .tap-cancel { border:0; border-radius:8px; background:white; color:var(--ink); padding:6px 9px; }

@media (pointer:coarse){
  .drag-card[draggable="true"] { cursor:default; -webkit-touch-callout:none; }
  .join-toggle { width:30px; height:30px; }
}

@media (max-width:650px){
  .calendar .activity-join-row { margin-top:4px; }
  .calendar .person-dot { width:18px; height:18px; font-size:8px; }
  .calendar .join-toggle { width:23px; height:23px; font-size:11px; }
  .calendar .no-one { display:none; }
}


/* v6: shopping status + deletion */
.drag-card { position:relative; padding-right:34px; }
.card-corner { position:absolute; top:5px; right:5px; z-index:3; }
.icon-btn { width:25px; height:25px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.92); color:var(--muted); padding:0; display:grid; place-items:center; font-size:16px; line-height:1; cursor:pointer; }
.icon-btn:hover { border-color:var(--bad); color:var(--bad); }
.activity-actions { display:flex; gap:4px; flex:0 0 auto; align-items:center; }
.activity-actions .icon-btn { position:static; }
.shopping-head-actions { display:flex; gap:6px; align-items:center; }
.shopping-status-row { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.shop-segment { display:inline-flex; gap:0; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:white; }
.shop-status { border:0; border-right:1px solid var(--line); background:white; color:var(--muted); padding:7px 10px; font-size:12px; }
.shop-status:last-child { border-right:0; }
.shop-status.active { background:var(--accent-soft); color:var(--accent); font-weight:700; }
.shop-status.active.bought { background:#e3eee3; color:var(--good); }
.shop-claim-summary { display:flex; gap:5px; flex-wrap:wrap; align-items:center; }
.shop-claim { display:inline-flex; align-items:center; padding:4px 7px; border-radius:999px; background:#f2e7d6; color:var(--warn); font-size:11px; }
.shop-claim.bought { background:#e3eee3; color:var(--good); }

@media (max-width:650px){
  .shopping-status-row { align-items:stretch; flex-direction:column; gap:6px; }
  .shop-segment { width:100%; }
  .shop-status { flex:1; padding:9px 6px; }
  .calendar .drag-card { padding-right:27px; }
  .calendar .icon-btn { width:21px; height:21px; font-size:13px; }
  .calendar .activity-actions { gap:2px; }
}

/* v7: Mac Calendar-style direct activity creation */
.calendar { --slot-h:48px; }
.calendar tbody tr { height:var(--slot-h); }
.calendar td { overflow:visible; }
.slot { position:relative; height:var(--slot-h); min-height:var(--slot-h); box-sizing:border-box; }
.calendar-event { position:absolute; z-index:5; top:2px; left:2px; right:2px; height:calc(var(--span-slots) * var(--slot-h) - 4px); margin:0; overflow:hidden; box-sizing:border-box; }
.calendar-event:hover { z-index:7; }
.calendar-hint { margin:0 0 8px; padding:8px 10px; border:1px dashed var(--line); border-radius:9px; color:var(--muted); font-size:12px; background:rgba(255,255,255,.45); }
.slot.create-selected { background:var(--accent-soft); box-shadow:inset 2px 0 var(--accent), inset -2px 0 var(--accent); }
.slot.create-first::after { content:attr(data-create-label); position:absolute; left:5px; top:5px; z-index:12; max-width:calc(100% - 10px); padding:3px 5px; border-radius:6px; background:var(--accent); color:white; font-size:10px; font-weight:750; pointer-events:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.calendar-creating { user-select:none; -webkit-user-select:none; }
.edit-btn { font-size:13px; }

.modal-backdrop { position:fixed; inset:0; z-index:20000; display:grid; place-items:center; padding:16px; background:rgba(24,31,30,.42); backdrop-filter:blur(3px); }
.activity-modal { width:min(560px,100%); max-height:calc(100vh - 32px); overflow:auto; padding:16px; }
.modal-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:12px; }
.modal-head h2 { margin:0 0 2px; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.activity-end-preview { margin:-3px 0 12px; padding:8px 10px; border-radius:8px; background:#f6f3ed; color:var(--muted); font-size:12px; }
.activity-self-join { display:flex; align-items:flex-start; gap:8px; padding:10px; border:1px solid var(--line); border-radius:9px; background:white; }
.activity-self-join input { width:auto; margin-top:2px; }

@media (max-width:650px){
  .calendar { --slot-h:44px; }
  .calendar td { overflow:visible; }
  .calendar-event { padding:5px 27px 5px 5px; }
  .calendar-hint { font-size:11px; }
  .modal-backdrop { place-items:end center; padding:8px; }
  .activity-modal { width:100%; max-height:calc(100vh - 16px); border-radius:16px 16px 10px 10px; padding:14px; }
  .modal-actions .btn { flex:1; min-height:44px; }
}

/* v8: mythic avatars — always secondary to the real name */
.identity-pill { display:inline-flex; align-items:center; gap:5px; max-width:min(72vw,320px); }
.identity-avatar { font-size:16px; line-height:1; }
.identity-nick { color:var(--muted); font-weight:600; }
.person-picker-avatar { margin-top:5px; display:flex; align-items:center; gap:5px; color:var(--accent); font-size:12px; font-weight:700; }

.person-chip { display:inline-flex; align-items:center; gap:4px; min-width:0; max-width:100%; padding:2px 6px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.78); color:var(--ink); font-size:11px; line-height:1.25; vertical-align:middle; }
.person-avatar-icon { flex:0 0 auto; font-size:12px; line-height:1; }
.person-real-name { min-width:0; overflow-wrap:anywhere; font-weight:750; }
.person-avatar-name { color:var(--muted); font-weight:600; }
.person-title { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.idea-authors { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.idea-authors > span:last-child { color:var(--muted); }
.requested-by { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.requested-by .person-chip { padding:1px 5px; font-size:10px; }
.shop-claim { gap:5px; }
.shop-claim .person-chip { border:0; background:transparent; padding:0; font-size:inherit; }

.activity-people { gap:4px; }
.activity-person { padding:2px 5px; font-size:10px; }
.activity-person .person-avatar-icon { font-size:11px; }

.avatar-modal { width:min(760px,100%); max-height:calc(100vh - 32px); overflow:auto; padding:16px; }
.avatar-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-bottom:10px; }
.avatar-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.avatar-option { min-width:0; display:grid; grid-template-columns:42px minmax(0,1fr); gap:10px; align-items:center; text-align:left; padding:10px; border:1px solid var(--line); border-radius:11px; background:white; color:var(--ink); cursor:pointer; }
.avatar-option:hover { border-color:var(--accent); }
.avatar-option.selected { border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); }
.avatar-option-icon { width:42px; height:42px; border-radius:999px; display:grid; place-items:center; background:#f6f3ed; font-size:24px; }
.avatar-option-copy { display:flex; min-width:0; flex-direction:column; gap:2px; }
.avatar-option-copy strong { font-size:13px; }
.avatar-option-copy small { color:var(--muted); line-height:1.25; overflow-wrap:anywhere; }
.avatar-footer { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.avatar-footer-right { display:flex; gap:8px; justify-content:flex-end; }

@media (max-width:650px){
  .identity-nick { display:none; }
  .person-chip { font-size:10px; padding:2px 4px; }
  .activity-person { max-width:100%; }
  .activity-person .person-real-name { white-space:normal; }
  .avatar-modal { width:100%; max-height:calc(100vh - 16px); padding:14px; border-radius:16px 16px 10px 10px; }
  .avatar-toolbar { grid-template-columns:1fr; }
  .avatar-grid { grid-template-columns:1fr; }
  .avatar-option { min-height:58px; }
  .avatar-footer { align-items:stretch; flex-direction:column; }
  .avatar-footer-right { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .avatar-footer > .btn, .avatar-footer-right .btn { min-height:44px; }
}

/* final: People page + exclusive mythic avatars */
.people-page { padding-top:2px; }
.people-head { align-items:flex-start; gap:12px; }
.people-head h2 { margin:0 0 3px; }
.people-head p { margin:0; max-width:620px; }
.people-profile-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.person-profile-card { min-width:0; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--card); display:flex; flex-direction:column; gap:8px; }
.person-profile-card.is-me { border-color:var(--accent); }
.person-profile-top { display:flex; align-items:center; gap:10px; min-width:0; }
.person-profile-avatar { width:52px; height:52px; flex:0 0 52px; display:grid; place-items:center; border-radius:50%; background:#f6f3ed; font-size:28px; border:1px solid var(--line); }
.person-profile-avatar.empty-avatar { font-size:18px; font-weight:800; color:var(--muted); }
.person-profile-copy { min-width:0; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.person-profile-copy h3 { margin:0; font-size:17px; overflow-wrap:anywhere; }
.you-label { padding:2px 6px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.persona-name { font-size:15px; font-weight:800; }
.persona-vibe { margin:0; color:var(--muted); font-size:12px; line-height:1.35; min-height:34px; }
.person-profile-card .btn { margin-top:auto; align-self:flex-start; }
.avatar-option.taken { opacity:.48; cursor:not-allowed; filter:saturate(.65); }
.avatar-option.taken:hover { border-color:var(--line); }
.avatar-taken-label { margin-top:3px; color:var(--bad); font-size:10px; font-weight:800; }

@media (max-width:900px){ .people-profile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){
  .people-head { flex-direction:column; }
  .people-head > .btn { width:100%; min-height:44px; }
  .people-profile-grid { grid-template-columns:1fr; }
  .person-profile-card { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"top top" "persona persona" "vibe vibe" "button button"; }
  .person-profile-top { grid-area:top; }
  .persona-name { grid-area:persona; }
  .persona-vibe { grid-area:vibe; min-height:0; }
  .person-profile-card .btn { grid-area:button; width:100%; min-height:44px; }
}

/* v10: edit ideas after creation */
.idea-card { padding-right:64px; }
.idea-card-actions { display:flex; gap:4px; align-items:center; }
.idea-card-actions .edit-btn:hover { border-color:var(--accent); color:var(--accent); }
@media (max-width:650px){
  .idea-card { padding-right:58px; }
}


/* v11: sortable, day-relevant Ideas page */
.idea-pool-section { min-width:0; }
.idea-toolbar { margin-bottom:10px; padding:10px; display:flex; gap:12px; align-items:flex-end; justify-content:space-between; }
.idea-filter-block { min-width:0; flex:1 1 auto; }
.idea-toolbar-label { display:block; margin-bottom:6px; font-weight:700; }
.idea-day-filter { display:flex; gap:6px; flex-wrap:wrap; }
.idea-day-chip { border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:10px; min-height:34px; padding:6px 9px; font:inherit; font-size:12px; font-weight:800; cursor:pointer; display:flex; align-items:center; gap:5px; }
.idea-day-chip span { max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-weight:600; }
.idea-day-chip.active { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.idea-sort-control { flex:0 0 180px; }
.idea-sort-control select { width:100%; }
.idea-group-head { margin:12px 2px 7px; padding:8px 2px 5px; border-bottom:1px solid var(--line); }
.idea-group-head:first-child { margin-top:0; }
.idea-group-head div { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.idea-group-head strong { font-size:13px; }
.idea-group-head span { color:var(--muted); font-size:11px; }
.idea-group-head.other { margin-top:18px; }
.idea-sorted-list .idea-card { margin-bottom:0; }

@media (max-width:700px){
  .idea-toolbar { align-items:stretch; flex-direction:column; }
  .idea-sort-control { flex:1 1 auto; width:100%; }
  .idea-day-filter { flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
  .idea-day-chip { flex:0 0 auto; min-height:40px; }
  .idea-day-chip span { max-width:84px; }
}


/* v12: proposed ideas surfaced in the planner */
.day-proposals { margin:0 0 8px; padding:10px; box-shadow:none; border-style:dashed; background:rgba(255,255,255,.5); }
.day-proposals-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px; }
.day-proposals-head > div { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.day-proposal-list { display:flex; gap:7px; flex-wrap:wrap; }
.day-proposal-card { min-width:210px; flex:1 1 240px; display:flex; align-items:center; justify-content:space-between; gap:9px; padding:8px 9px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.72); }
.day-proposal-copy { min-width:0; }
.day-proposal-copy .title { overflow-wrap:anywhere; }
.proposal-confirm-btn { flex:0 0 auto; position:relative; z-index:4; }
.proposal-ghost { position:absolute; z-index:2; top:3px; left:calc(var(--proposal-left,0%) + 3px); width:calc(var(--proposal-width,300%) - 6px); height:calc(var(--span-slots) * var(--slot-h) - 6px); min-height:36px; box-sizing:border-box; display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:7px 8px; border:1.5px dashed rgba(47,111,98,.66); border-radius:9px; background:rgba(214,235,228,.54); color:var(--ink); overflow:hidden; pointer-events:none; backdrop-filter:blur(.5px); }
.proposal-ghost-copy { min-width:0; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; line-height:1.2; }
.proposal-ghost-copy strong { font-size:12px; overflow-wrap:anywhere; }
.proposal-ghost-copy > span:last-child { font-size:10px; color:var(--muted); white-space:nowrap; }
.proposal-kicker { font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.055em; color:var(--accent); }
.proposal-ghost .proposal-confirm-btn { pointer-events:auto; background:rgba(255,255,255,.9); }
.timing-required-note { color:var(--accent); font-weight:700; margin-top:4px; }
.calendar-event { z-index:5; }

@media (max-width:650px){
  .day-proposal-list { display:grid; grid-template-columns:1fr; }
  .day-proposal-card { min-width:0; flex:none; }
  .day-proposal-card .btn { min-height:38px; }
  .proposal-ghost { padding:5px 6px; gap:4px; }
  .calendar td.proposal-origin-cell { overflow:visible; }
  .proposal-ghost-copy { gap:4px; }
  .proposal-ghost-copy strong { font-size:10px; }
  .proposal-ghost-copy > span:last-child { font-size:9px; }
  .proposal-ghost .btn.small { min-height:30px; padding:3px 6px; font-size:9px; }
}

.group-need-chip{font-weight:700;}


/* v15: overlapping proposed ideas share the planner width instead of stacking */
.calendar td.proposal-origin-cell { overflow:visible; }
.proposal-ghost { transition:left .12s ease,width .12s ease; }


/* v16: put scheduled ideas/needs back into their stacks */
.put-back-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.linked-need-tag { margin-top:5px; display:flex; align-items:center; justify-content:space-between; gap:6px; max-width:100%; }
.linked-need-tag > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.linked-need-tag .put-back-btn { width:19px; height:19px; min-width:19px; font-size:12px; background:rgba(255,255,255,.72); }
@media (max-width:650px){
  .calendar .need-card .card-corner { display:flex; gap:2px; }
  .calendar .need-card { padding-right:72px; }
}

/* v20: full-day needs drop area above the hourly calendar */
.full-day-needs-drop { margin:0 0 8px; padding:10px; border:1.5px dashed var(--line); border-radius:11px; background:rgba(255,255,255,.48); transition:border-color .12s ease, background .12s ease, box-shadow .12s ease; }
.full-day-needs-drop.dragover,.full-day-needs-drop.drop-target,.full-day-needs-drop.tap-target { border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px rgba(47,111,98,.08); }
.full-day-needs-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px; }
.full-day-needs-head > div { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; min-width:0; }
.full-day-drop-label { flex:0 0 auto; font-size:10px; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; }
.full-day-needs-list { display:flex; gap:7px; flex-wrap:wrap; }
.full-day-needs-list .need-card { flex:1 1 220px; min-width:200px; margin:0; }
.full-day-needs-empty { width:100%; margin:0; padding:6px 4px; }
@media (max-width:650px){
  .full-day-needs-head { align-items:flex-start; }
  .full-day-needs-list { display:grid; grid-template-columns:1fr; }
  .full-day-needs-list .need-card { min-width:0; }
  .full-day-drop-label { white-space:nowrap; }
}

/* v22: collision-free activity placement + desktop drag handles */
.drag-card { cursor:default; }
.desktop-draggable { padding-left:36px; }
.drag-handle {
  position:absolute;
  left:6px;
  top:6px;
  z-index:10;
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:7px;
  background:rgba(255,255,255,.94);
  color:var(--muted);
  font-size:16px;
  line-height:1;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
}
.drag-handle:hover { border-color:var(--accent); color:var(--accent); background:white; }
.drag-handle:active { cursor:grabbing; }
.desktop-dragging { opacity:.62; }
.calendar .desktop-draggable { padding-left:31px; }
.calendar .drag-handle { left:4px; top:4px; width:21px; height:21px; font-size:14px; }

@media (pointer:coarse){
  .drag-handle { display:none; }
  .desktop-draggable { padding-left:8px; }
  .calendar .desktop-draggable { padding-left:5px; }
}

/* v23: explicit Join / Skip controls + personal itinerary */
.participation-choice { display:inline-flex; overflow:hidden; border:1px solid var(--line); border-radius:9px; background:white; flex:0 0 auto; }
.participation-action { border:0; border-right:1px solid var(--line); background:white; color:var(--muted); padding:6px 9px; font-size:11px; line-height:1.1; cursor:pointer; }
.participation-action:last-child { border-right:0; }
.participation-action.join.active { background:var(--accent); color:white; font-weight:750; }
.participation-action.skip.active { background:#eee9e1; color:var(--ink); font-weight:750; }
.participation-choice.compact { margin-left:auto; }
.participation-choice.compact .participation-action { padding:4px 6px; font-size:9px; }
.calendar .activity-join-row { justify-content:space-between; }

.my-plan-page { max-width:760px; margin:0 auto; }
.my-plan-page-head { margin-bottom:8px; }
.my-plan-page-head h2 { margin-bottom:3px; }
.my-plan-page-head p { margin:0; }
.my-plan-day-jumps { display:flex; gap:5px; overflow:auto; padding:0 0 10px; position:sticky; top:0; z-index:20; background:var(--bg); }
.my-plan-jump { text-decoration:none; color:inherit; min-width:64px; }
.my-plan-days { display:grid; gap:14px; }
.my-plan-day { scroll-margin-top:68px; }
.my-plan-day-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin:0 0 7px; }
.my-plan-day-head h3 { margin:0 0 2px; font-size:17px; }
.my-plan-timeline { display:grid; gap:6px; }
.my-plan-card { display:grid; grid-template-columns:54px minmax(0,1fr) auto; gap:10px; align-items:start; padding:10px 11px; border:1px solid var(--line); border-radius:11px; background:var(--card); box-shadow:0 4px 16px rgba(30,42,42,.045); }
.my-plan-card.joined { border-left:4px solid var(--accent); }
.my-plan-card.available { background:rgba(255,255,255,.58); box-shadow:none; }
.my-plan-card.skipped { opacity:.62; }
.my-plan-card.has-conflict { border-color:rgba(156,77,68,.58); }
.my-plan-time { font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--ink); padding-top:1px; }
.my-plan-card-main { min-width:0; }
.my-plan-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.my-plan-card-head strong { font-size:14px; }
.my-plan-card-action { display:flex; align-items:flex-start; }
.my-plan-notes { margin-top:5px; font-size:12px; color:var(--ink); }
.my-plan-with { display:flex; gap:4px; align-items:center; flex-wrap:wrap; margin-top:6px; font-size:10px; color:var(--muted); }
.my-plan-others { margin-top:8px; border:1px dashed var(--line); border-radius:10px; background:rgba(255,255,255,.35); }
.my-plan-others > summary { cursor:pointer; padding:9px 11px; color:var(--muted); font-size:12px; font-weight:700; }
.my-plan-others > summary span { display:inline-grid; place-items:center; min-width:20px; height:20px; margin-left:4px; padding:0 5px; border-radius:999px; background:white; border:1px solid var(--line); color:var(--ink); }
.my-plan-other-list { display:grid; gap:6px; padding:0 7px 7px; }
.conflict-tag { background:#f3dfdc; color:var(--bad); border-color:rgba(156,77,68,.28); white-space:nowrap; }
.my-plan-empty { text-align:left; padding:10px 12px; }

@media (max-width:650px){
  .calendar .participation-choice.compact { width:100%; margin-left:0; }
  .calendar .participation-choice.compact .participation-action { flex:1; padding:4px 2px; font-size:8px; }
  .calendar .activity-join-row { align-items:stretch; }
  .my-plan-page { max-width:none; }
  .my-plan-card { grid-template-columns:46px minmax(0,1fr); gap:8px; }
  .my-plan-card-action { grid-column:2; }
  .my-plan-card-action .btn { width:100%; min-height:36px; }
  .my-plan-card-head { flex-direction:column; gap:5px; }
  .my-plan-day-jumps { margin-inline:-3px; }
}

/* v24: show potential personal overlaps before joining */
.my-plan-card.potential-conflict { border-color:rgba(167,109,42,.55); background:#fff8ed; }
.potential-conflict-tag { background:#f6e7d2; color:var(--warn); border-color:rgba(167,109,42,.28); white-space:nowrap; }
.btn.swap-plan-btn { background:var(--warn); color:white; border-color:var(--warn); font-weight:750; }
.btn.swap-plan-btn:hover { filter:brightness(.96); }


/* v26: planner selection preview + frozen calendar headers */
.calendar-wrap { position:relative; isolation:isolate; }

/* Calendar events may overflow their starting half-hour cell. Keep both frozen
   header axes above those overflowing cards while scrolling vertically/horizontally. */
.calendar thead th { z-index:60; background:#f6f3ed; }
.calendar tbody td.time { z-index:50; background:#faf8f2; }
.calendar thead th.time { z-index:70; background:#f6f3ed; }
.calendar thead th { box-shadow:0 1px 0 var(--line); }
.calendar tbody td.time { box-shadow:1px 0 0 var(--line); }
.calendar thead th.time { box-shadow:1px 1px 0 var(--line); }

/* A direct-create drag is previewed only in the collision-free column chosen by
   nextFreePlan(). It must never show green underneath an already planned card. */
.slot.create-selected { position:relative; z-index:1; }
.calendar-event { z-index:10; }
.calendar-event:hover { z-index:12; }
.slot.create-first::after { z-index:20; }

/* When all A/B/C columns are occupied for the selected range, do not leave a
   misleading green selection behind any activity. */
body.calendar-create-blocked .slot.create-selected,
body.calendar-create-blocked .slot.create-first { background:transparent; box-shadow:none; }
body.calendar-create-blocked .slot.create-first::after { display:none; }


/* v27: make overflowing planner activities the interactive surface, not the
   half-hour cells they visually cover. */
.calendar td.activity-origin-cell { position:relative; z-index:30; }
.calendar-event { z-index:40; pointer-events:auto; }
.calendar-event:hover { z-index:42; }
.calendar-event .activity-actions,
.calendar-event .drag-handle,
.calendar-event .participation-choice { position:relative; z-index:44; pointer-events:auto; }

/* The activity's starting table cell is its stacking context. Raising that cell
   keeps the entire overflowing card (and its controls) above later table rows
   without disabling the later slots as real drag/drop targets. */

/* Frozen axes stay above activities without making the rest of the table an
   interaction layer. */
.calendar thead th { z-index:100; }
.calendar tbody td.time { z-index:90; }
.calendar thead th.time { z-index:110; }

/* Direct-create selection never relocates to another plan. Occupied activity
   time is simply not a creation target. */
.slot.activity-occupied-slot.create-selected { background:transparent; box-shadow:none; }
.slot.activity-occupied-slot.create-first::after { display:none; }

/* v29: Calendar-style activity movement + current-time line */
.daybtn.today { position:relative; }
.daybtn.today::after { content:''; position:absolute; top:5px; right:5px; width:6px; height:6px; border-radius:999px; background:var(--bad); }

/* Planner activities use Pointer Events rather than native HTML drag. This keeps
   buttons clickable and lets the event itself follow the 30-minute grid. */
.calendar-event { -webkit-user-drag:none; user-select:none; }
.calendar-event .drag-handle { -webkit-user-drag:none; }
.calendar-event.activity-drag-source { opacity:.18; }
body.activity-pointer-dragging { cursor:grabbing; }
body.activity-pointer-dragging .calendar-event { cursor:grabbing; }

.activity-drag-ghost {
  position:fixed !important;
  z-index:10000 !important;
  margin:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
  box-sizing:border-box;
  opacity:.96;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  transform:none !important;
}
.activity-drag-ghost::after {
  content:attr(data-drag-status);
  position:absolute;
  right:6px;
  bottom:5px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(47,111,98,.94);
  color:white;
  font-size:10px;
  font-weight:750;
  white-space:nowrap;
}
.activity-drag-ghost.invalid { border-color:var(--bad); border-left-color:var(--bad); opacity:.82; }
.activity-drag-ghost.invalid::after { background:var(--bad); }
.slot.activity-drag-target { background:rgba(214,235,228,.6); box-shadow:inset 2px 0 var(--accent), inset -2px 0 var(--accent); }
.slot.activity-drag-invalid { background:rgba(241,223,220,.45); box-shadow:inset 2px 0 var(--bad), inset -2px 0 var(--bad); }

/* Apple Calendar-style current-time marker. It is a visual overlay only and
   never intercepts creation, dragging, or activity controls. */
.current-time-overlay {
  position:absolute;
  z-index:85;
  height:2px;
  background:var(--bad);
  pointer-events:none;
  transform:translateY(-1px);
}
.current-time-dot {
  position:absolute;
  left:-4px;
  top:50%;
  width:8px;
  height:8px;
  margin-top:-4px;
  border-radius:999px;
  background:var(--bad);
}
.current-time-label {
  position:absolute;
  left:5px;
  top:-17px;
  padding:1px 5px;
  border-radius:5px;
  background:var(--bad);
  color:white;
  font-size:10px;
  line-height:14px;
  font-weight:750;
  white-space:nowrap;
}
@media (hover:none), (pointer:coarse){
  .activity-drag-ghost::after { font-size:11px; }
}

/* v30: one calm calendar interaction language for activities, ideas and needs */
@media (hover:hover) and (pointer:fine){
  .drag-card[data-idea],
  .drag-card[data-need],
  .calendar-event[data-activity] { cursor:grab; }
  .drag-card[data-idea]:active,
  .drag-card[data-need]:active,
  .calendar-event[data-activity]:active { cursor:grabbing; }
}

/* The grip is an affordance, not another chunky button. */
.drag-handle {
  width:18px;
  height:24px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#8a908d;
  opacity:.55;
  font-size:15px;
  transition:opacity .12s, background .12s, color .12s;
}
.drag-handle:hover { border:0; background:rgba(47,111,98,.08); color:var(--accent); opacity:1; }
.desktop-draggable { padding-left:29px; }

/* Calendar cards use a real header row: grip | title | actions. This avoids the
   old floating grip/button constellation that made the event look misaligned. */
.calendar-event {
  height:calc(var(--duration-scale, var(--span-slots)) * var(--slot-h) - 4px);
  padding:7px 8px;
  border-radius:8px;
  box-shadow:0 1px 4px rgba(30,42,42,.07);
  background:rgba(255,253,248,.98);
}
.calendar .calendar-event.desktop-draggable { padding-left:8px; }
.activity-head-row {
  display:grid;
  grid-template-columns:18px minmax(0,1fr) auto;
  gap:6px;
  align-items:start;
  min-width:0;
}
.activity-heading { min-width:0; }
.activity-heading .title {
  line-height:1.18;
  overflow:hidden;
  text-overflow:ellipsis;
}
.calendar-event .activity-head-row > .drag-handle {
  position:static;
  width:18px;
  height:24px;
  margin:-1px 0 0 -3px;
  z-index:auto;
}
.calendar-event .activity-actions { gap:2px; }
.calendar-event .activity-actions .icon-btn {
  width:24px;
  height:24px;
  border:0;
  background:transparent;
  color:#78807d;
}
.calendar-event .activity-actions .icon-btn:hover {
  background:#f0ede6;
  color:var(--ink);
}
.calendar-event .activity-join-row {
  padding-left:24px;
  margin-top:5px;
}
.calendar-event .participation-choice.compact {
  border-radius:999px;
  box-shadow:none;
}
.calendar-event .participation-choice.compact .participation-action { padding:4px 8px; }
.calendar-need-event { border-left-color:var(--warn); }
.calendar-need-event.planned { border-left-color:var(--accent); }

/* All planner sources now use one Pointer Events drag preview. Outside the grid
   it follows the pointer; over the grid it snaps to the actual time span. */
.planner-drag-source { opacity:.22 !important; }
body.planner-pointer-dragging { user-select:none; -webkit-user-select:none; cursor:grabbing; }
.planner-drag-ghost {
  position:fixed;
  z-index:10000;
  pointer-events:none;
  overflow:hidden;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:7px 8px;
  border:1px solid rgba(47,111,98,.42);
  border-left:4px solid var(--accent);
  border-radius:8px;
  background:rgba(255,253,248,.96);
  color:var(--ink);
  box-shadow:0 12px 28px rgba(30,42,42,.18);
  opacity:.97;
}
.planner-drag-ghost.need { border-left-color:var(--warn); }
.planner-drag-ghost strong {
  font-size:12px;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.planner-drag-time { font-size:10px; color:var(--muted); font-weight:650; }
.planner-drag-ghost.invalid { border-color:rgba(156,77,68,.6); border-left-color:var(--bad); background:#fff7f5; }
.planner-drag-ghost.floating { min-height:44px; }
.planner-drag-ghost.attach-mode { border-left-color:var(--warn); background:#fff9ef; }
.planner-drag-ghost.full-day-mode { border-left-color:var(--accent); background:#f6fbf8; }
.slot.activity-drag-target {
  background:rgba(214,235,228,.5);
  box-shadow:inset 2px 0 var(--accent), inset -2px 0 var(--accent);
}
.slot.activity-drag-invalid {
  background:rgba(241,223,220,.35);
  box-shadow:inset 2px 0 var(--bad), inset -2px 0 var(--bad);
}

@media (pointer:coarse){
  .calendar-event .activity-head-row { grid-template-columns:minmax(0,1fr) auto; }
  .calendar-event .activity-head-row > .drag-handle { display:none; }
  .calendar-event .activity-join-row { padding-left:0; }
}

@media (max-width:650px){
  .calendar-event { padding:5px; }
  .calendar-event .activity-actions .icon-btn { width:21px; height:21px; }
  .calendar-event .participation-choice.compact .participation-action { padding:4px 5px; }
}