* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.4 system-ui, sans-serif; background: #faf6f8; color: #2b2b2b; }
main { max-width: 36rem; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.4rem; }
.bar { display: flex; justify-content: space-between; align-items: center; padding: .6rem 1rem; background: #b4527a; color: #fff; position: relative; }
.brand { color: #fff; text-decoration: none; font-weight: 600; }
.card { background: #fff; padding: 1rem; border-radius: .5rem; box-shadow: 0 1px 3px #0002; }
label { display: block; margin: .6rem 0; }
label.check { display: flex; gap: .5rem; align-items: center; margin: .3rem 0; }
input:not([type=checkbox]), select { display: block; width: 100%; padding: .5rem; font: inherit; margin-top: .2rem; }
button { font: inherit; padding: .5rem 1rem; border: 0; border-radius: .3rem; background: #b4527a; color: #fff; cursor: pointer; }
.nav { display: flex; gap: .5rem; margin-top: 1rem; }
.hint { color: #666; font-size: .9rem; }
.error { color: #a00; }
.steps { color: #666; margin: 0; }

.menu button#menu-btn { background: transparent; font-size: 1.5rem; padding: 0 .4rem; }
#menu-panel { position: absolute; right: .5rem; top: 100%; background: #fff; color: #2b2b2b; border-radius: .4rem; box-shadow: 0 2px 8px #0003; display: flex; flex-direction: column; min-width: 14rem; z-index: 10; }
#menu-panel[hidden] { display: none; }
#menu-panel a, #menu-panel button { color: inherit; background: none; text-align: left; padding: .7rem 1rem; text-decoration: none; border-radius: 0; width: 100%; }
#menu-panel a:hover, #menu-panel button:hover { background: #f3e4eb; }

.now { background: #b4527a; color: #fff; padding: .8rem 1rem; border-radius: .5rem; display: flex; flex-direction: column; margin-bottom: 1rem; }
.now strong { font-size: 1.6rem; }
[hidden] { display: none !important; }
.link-btn { background: none; color: #888; padding: 0; font-size: .9rem; text-decoration: underline; margin-bottom: .6rem; }
.weeks, .items { list-style: none; margin: 0; padding: 0; }
.week { display: grid; grid-template-columns: 5.5rem 1fr; min-height: 2rem; }
.gutter { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; padding: 0 .6rem .4rem 0; border-right: 3px solid #d9b3c6; font-size: .75rem; color: #999; }
.gutter::after { content: ""; position: absolute; right: -7px; top: .35rem; width: .6rem; height: .6rem; border-radius: 50%; background: #d9b3c6; }
.gutter img { width: 2.2rem; height: 2.2rem; }
.content { min-width: 0; padding: 0 0 .6rem 1rem; }
.trimester { font-size: 1.25rem; font-weight: 700; color: #b4527a; margin: .8rem 0 .4rem; }
.item { background: #fff; border-radius: .4rem; padding: .6rem .8rem; margin: 0 0 .6rem; box-shadow: 0 1px 2px #0002; }
.item.birth { background: #fde7ef; font-weight: 600; }
.item.done .title { text-decoration: line-through; color: #888; }
.head { display: flex; gap: .5rem; align-items: center; }
.meta { display: flex; gap: .8rem; align-items: center; font-size: .9rem; color: #666; margin-top: .3rem; }
.meta input { width: auto; margin: 0; padding: .2rem; }
.pencil { background: none; color: #b4527a; padding: .1rem .3rem; }
#timeline:not(.show-past) .past { display: none; }
.foot { text-align: center; font-size: .85rem; padding: 1rem; }
.foot a { color: #888; }
.credits { font-size: .9rem; color: #444; }

.fab { position: fixed; right: 1.2rem; bottom: 1.2rem; width: 3.5rem; height: 3.5rem; border-radius: 50%; font-size: 2rem; line-height: 1; padding: 0; box-shadow: 0 3px 8px #0004; z-index: 20; }
#add-dialog, #calendar-dialog { border: 0; border-radius: .5rem; padding: 1.2rem; width: min(26rem, 92vw); box-shadow: 0 6px 24px #0005; }
#add-dialog::backdrop, #calendar-dialog::backdrop { background: #0005; }
#add-dialog h2, #calendar-dialog h2 { margin: 0 0 .6rem; font-size: 1.2rem; }
#calendar-url { width: 100%; box-sizing: border-box; }
#add-dialog fieldset { border: 0; padding: 0; margin: .6rem 0; }
#add-dialog input[type=radio] { display: inline; width: auto; margin: 0 .3rem 0 0; }
#add-cancel { background: #888; }