.topbar-tools{display:flex;align-items:center;gap:18px}.planner-link,.planner-back{color:inherit;font-size:12px;text-decoration:none;border-bottom:1px solid currentColor}.planner-container{width:min(760px,calc(100% - 48px));margin:auto}.planner-hero{padding:78px 0 55px}.planner-hero h1{font-size:46px;line-height:1.2;letter-spacing:-.08em;margin:0}.planner-hero p:last-child{color:#60615a;margin-top:20px}.weekly-planner{background:#fff;border:1px solid var(--line);box-shadow:5px 5px 0 var(--mint);padding:25px}.planner-toolbar{display:flex;align-items:center;gap:10px;padding-bottom:21px}.planner-toolbar h2{font-size:19px;letter-spacing:-.06em;margin:0 8px}.planner-toolbar button{border:1px solid var(--line);background:#fff;color:var(--ink);width:34px;height:34px;cursor:pointer}.planner-toolbar button:hover{background:var(--ink);color:#fff}.planner-toolbar button:last-child{margin-left:auto;width:auto;padding:0 13px;font-size:12px}.days{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--line)}.day{min-width:0;min-height:210px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.day-head{padding:11px 10px;border-bottom:1px solid var(--line);font-size:12px;font-weight:700}.day-head time{display:block;font:12px var(--mono);color:#777870;margin-top:3px}.day.today .day-head{background:var(--yellow)}.day textarea{display:block;width:100%;height:155px;border:0;resize:none;padding:12px 10px;background:transparent;color:var(--ink);font:13px/1.7 var(--sans);outline:none}.planner-tip{text-align:center;color:#777870;font-size:12px;margin:29px 0 70px}@media(max-width:620px){.topbar-tools{gap:8px}.today-date{display:none}.planner-container{width:calc(100% - 32px)}.planner-hero{padding:57px 0 42px}.planner-hero h1{font-size:35px}.weekly-planner{padding:17px 10px;box-shadow:4px 4px 0 var(--mint)}.planner-toolbar{padding-bottom:15px}.planner-toolbar h2{font-size:16px;margin:0 3px}.days{grid-template-columns:1fr}.day{display:grid;grid-template-columns:76px 1fr;min-height:105px}.day-head{border-bottom:0;border-right:1px solid var(--line)}.day textarea{height:104px;padding:10px}}
.day-content{min-height:155px;padding:10px}.day-placeholder{color:#aaa;font-size:12px}.planner-entry{border-left:3px solid var(--mint);padding:5px 7px;margin-bottom:8px;font-size:12px;line-height:1.45}.planner-color-0{border-left-color:var(--mint)}.planner-color-1{border-left-color:var(--yellow)}.planner-color-2{border-left-color:#cfe7f3}.planner-color-3{border-left-color:#f4beb2}.planner-color-4{border-left-color:#ddd0ef}.planner-entry span{display:block;color:#777870;font-size:11px}.planner-entry p{margin:3px 0 0;color:#66675f;word-break:break-word}
.inline-planner{padding:10px 0 76px}.inline-planner .planner-hero{padding:0 0 26px}.inline-planner .planner-hero h2{font-size:28px;line-height:1.3;letter-spacing:-.07em;margin:0}.inline-planner .planner-hero p:last-child{margin:10px 0 0}

/* Give the seven columns enough room for longer notes on larger screens. */
.planner-container{width:min(1120px,calc(100% - 48px))}
.days{grid-template-columns:repeat(7,minmax(0,1fr))}
.planner-entry,.planner-entry span,.planner-entry p{overflow-wrap:anywhere}
@media(max-width:620px){.planner-container{width:calc(100% - 32px)}}

/* Keep the intro narrow while letting only the weekly grid use the wider canvas. */
.planner-container{width:min(760px,calc(100% - 48px))}
.weekly-planner{width:min(1120px,calc(100vw - 48px));margin-left:50%;transform:translateX(-50%)}
@media(max-width:620px){.weekly-planner{width:100%;margin-left:0;transform:none}}

/* On small screens, keep each weekday as a full-width vertical section. */
@media(max-width:620px){
  .days{grid-template-columns:1fr}
  .day{display:block;min-height:0}
  .day-head{border-right:0;border-bottom:1px solid var(--line)}
  .day-content{min-height:155px}
}

/* Keep week navigation clear of the date-range text. */
.planner-toolbar{display:grid;grid-template-columns:auto 44px 44px auto minmax(0,1fr)}
.planner-toolbar h2{grid-column:4;margin:0 0 0 6px;text-align:left}
.planner-toolbar button:first-child{grid-column:2;grid-row:1}
.planner-toolbar button:nth-of-type(2){grid-column:3;grid-row:1}
.planner-toolbar button:last-child{grid-column:1;grid-row:1}
.planner-toolbar button{width:44px;height:44px}
.planner-toolbar button:last-child{width:auto}
@media(max-width:620px){
  .planner-toolbar{grid-template-columns:auto 40px 40px auto minmax(0,1fr);gap:6px}
  .planner-toolbar button{width:40px;height:40px}
}