/* Mobility 1 toolkit page */
.m1-quick { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-3); }
.m1-days { position: sticky; top: 64px; z-index: var(--z-raised); background: rgba(245, 240, 251, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-rule); }
.m1-days .container { display: flex; gap: .4rem; overflow-x: auto; padding-top: .6rem; padding-bottom: .6rem; scrollbar-width: none; }
.m1-days a { flex: none; display: flex; flex-direction: column; align-items: center; padding: .35rem .85rem; border-radius: var(--radius-pill);
  background: var(--c-paper-2); border: 1px solid var(--c-rule); color: var(--c-espresso); font-weight: 700; font-size: var(--type-sm); text-decoration: none; line-height: 1.1; }
.m1-days a small { font-weight: 600; font-size: .7rem; color: var(--c-text-mute); }
.m1-days a:hover { border-color: var(--c-terracotta); text-decoration: none; }
.m1-wrap { padding-top: var(--s-4); padding-bottom: var(--s-6); }
.m1-day { margin-bottom: var(--s-5); scroll-margin-top: 140px; }
.m1-day > header h2 { font-size: var(--type-xl); margin: .2em 0 .8em; }
.m1-s { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--s-2); padding: var(--s-2) var(--s-3); margin-bottom: .6rem;
  background: var(--c-paper-2); border: 1px solid var(--c-limestone-3); border-radius: var(--radius-md); scroll-margin-top: 140px; }
.m1-s.m1-target { border-color: var(--c-terracotta); box-shadow: 0 0 0 3px rgba(242, 100, 48, .18); }
.m1-s__time { font-weight: 800; color: var(--c-terracotta); font-size: var(--type-sm); font-variant-numeric: tabular-nums; }
.m1-s__time small { color: var(--c-text-mute); font-weight: 600; }
.m1-s__body h3 { font-family: var(--f-display); font-size: var(--type-lg); margin: 0 0 .25em; }
.m1-s__body > p { margin: 0 0 .4em; color: var(--c-text-2); font-size: var(--type-sm); }
.m1-who { font-size: var(--type-xs) !important; font-weight: 700; color: var(--c-turquoise) !important; }
.m1-mn { font-size: var(--type-xs) !important; }
.m1-s--meal { background: transparent; border-style: dashed; padding-top: .55rem; padding-bottom: .55rem; }
.m1-s--meal .m1-s__time { color: var(--c-text-mute); }
.m1-s--meal .m1-s__body { font-size: var(--type-sm); color: var(--c-text-mute); }
.m1-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .6rem; }
.m1-btn { padding: .6em 1.1em; font-size: var(--type-sm); }
.m1-guide { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; font-size: var(--type-sm); color: var(--c-turquoise);
  padding: .45em .9em; border: 1.5px solid var(--c-turquoise); border-radius: var(--radius-pill); text-decoration: none; }
.m1-guide:hover { background: var(--c-turquoise); color: #fff; text-decoration: none; }
.m1-mats { margin-top: .7rem; border-top: 1px solid var(--c-limestone-3); padding-top: .6rem; }
.m1-mats > summary { cursor: pointer; font-weight: 800; color: var(--c-espresso); display: inline-flex; gap: .5em; align-items: center; list-style: none; }
.m1-mats > summary::before { content: "＋"; color: var(--c-terracotta); font-weight: 800; }
.m1-mats[open] > summary::before { content: "－"; }
.m1-count { background: var(--c-terracotta); color: #fff; border-radius: var(--radius-pill); font-size: .72rem; padding: .1em .55em; }
.m1-hint { font-size: var(--type-xs); color: var(--c-text-mute); margin: .4rem 0 .6rem; }
.m1-mat { border: 1px solid var(--c-limestone-3); border-radius: var(--radius-md); margin: .45rem 0; background: var(--c-paper); }
.m1-mat > summary { cursor: pointer; padding: .65rem .9rem; font-weight: 700; color: var(--c-turquoise); }
.m1-mat__body { padding: 0 .9rem .9rem; font-size: var(--type-sm); overflow-x: auto; }
/* material content (shared with the PDFs) */
.m1-mat__body h2 { font-family: var(--f-display); font-size: var(--type-xl); color: var(--c-turquoise); margin: .2em 0 .4em; }
.m1-mat__body .en { font-size: .7rem; font-weight: 800; letter-spacing: .12em; color: var(--c-terracotta); }
.m1-mat__body .mposter { border: 2px solid var(--c-turquoise); border-radius: var(--radius-md); padding: 1rem 1.1rem; }
.m1-mat__body .mposter .foot { display: none; }
.m1-mat__body .mposter .big { font-size: var(--type-base); }
.m1-mat__body .mcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important; gap: .6rem; }
.m1-mat__body .mcard { border: 1px solid var(--c-limestone-3); border-radius: var(--radius-md); padding: .8rem .9rem; background: #fff; min-height: 0 !important; position: relative; }
.m1-mat__body .mcard .ct { font-size: .68rem; letter-spacing: .14em; font-weight: 800; color: var(--c-terracotta); text-transform: uppercase; }
.m1-mat__body .mcard h4 { font-family: var(--f-display); font-size: var(--type-md); color: var(--c-turquoise); margin: .15em 0 .3em; }
.m1-mat__body .mcard .logo { display: none; }
.m1-mat__body table.t { width: 100%; border-collapse: collapse; font-size: var(--type-xs); margin: .5rem 0; }
.m1-mat__body table.t th { background: var(--c-espresso); color: #fff; text-align: left; padding: .4em .6em; }
.m1-mat__body table.t td { border-top: 1px solid var(--c-limestone-3); padding: .4em .6em; vertical-align: top; height: auto !important; }
.m1-mat__body .tm { font-weight: 800; color: var(--c-terracotta); white-space: nowrap; }
.m1-mat__body .st { font-weight: 700; color: var(--c-turquoise); }
.m1-mat__body .two { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; }
.m1-mat__body .box { border: 1px solid var(--c-limestone-3); border-radius: var(--radius-md); padding: .6rem .8rem; margin: .4rem 0; }
.m1-mat__body .box b.t { display: block; color: var(--c-turquoise); }
.m1-mat__body .lab { font-size: .72rem; font-weight: 800; letter-spacing: .08em; color: var(--c-text-mute); text-transform: uppercase; margin-top: .7rem; }
.m1-mat__body .write { border-bottom: 1px dashed var(--c-rule); height: 1.4rem !important; width: auto !important; }
.m1-mat__body .area { border: 1px dashed var(--c-rule); border-radius: 8px; min-height: 2.6rem !important; margin: .25rem 0 .5rem; }
.m1-mat__body .note { background: #FFF4EF; border-radius: 8px; padding: .5rem .7rem; }
.m1-mat__body ol, .m1-mat__body ul { padding-left: 1.2rem; margin: .3rem 0; }
@media (max-width: 640px) {
  .m1-s { grid-template-columns: 1fr; gap: .2rem; padding: var(--s-2); }
  .m1-days { top: 56px; }
}