/* Cranbrook 311 app shell. Loaded after site.css. */
html.app-shell{height:100%;-webkit-tap-highlight-color:transparent}
.app-shell body{min-height:100%;padding-bottom:calc(4.25rem + env(safe-area-inset-bottom));overscroll-behavior-y:contain}

/* Top bar */
.app-bar{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:3rem 1fr 3rem;align-items:center;gap:.25rem;
  background:var(--brand-deep);color:#fff;padding:calc(.35rem + env(safe-area-inset-top)) calc(.5rem + env(safe-area-inset-right)) .35rem calc(.5rem + env(safe-area-inset-left));min-height:3.5rem}
:root[data-theme="dark"] .app-bar{background:#2E0F11}
.app-title{margin:0;text-align:center;font-family:var(--font-display);font-weight:700;font-size:1.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:none}
.app-back,.app-action{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;color:#fff}
.app-back:hover,.app-action:hover{background:rgba(255,255,255,.12)}
.app-back .icon,.app-action .icon{width:1.5rem;height:1.5rem}
.app-mark{height:1.9rem;width:auto;margin-left:.25rem}
.app-offline{background:var(--sun);color:#231F20;font-weight:700;text-align:center;padding:.4rem 1rem;font-size:.95rem}

/* Content */
.app-main{max-width:44rem;margin:0 auto;padding:1rem calc(1rem + env(safe-area-inset-right)) 1.5rem calc(1rem + env(safe-area-inset-left))}
.app-main:focus{outline:none}
.app-h1{font-size:clamp(1.8rem,7vw,2.4rem);margin:.5rem 0 1rem}
.app-sec{margin:1.75rem 0}
.app-sec h2{font-size:1.4rem}
.app-sec .section-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.5rem}
.app-sec .section-head h2{margin:0}
.btn-block{display:flex;width:100%}
.app-card{border:1px solid var(--line);border-radius:var(--radius-m);padding:1rem 1.1rem;background:var(--paper)}

/* Feature pages reuse the site's page head; make it compact and drop breadcrumbs (the app has a back button). */
.app-main .page-head{background:none;border:0;margin:0 -1rem}
.app-main .page-head .wrap{padding:.5rem 1rem 0}
.app-main .page-head h1{font-size:clamp(1.8rem,7vw,2.4rem)}
.app-main .crumbs,.app-main .page-head-slim{display:none}
.app-main .wrap{padding-left:0;padding-right:0}
.app-main .form-wrap{padding-top:.5rem;grid-template-columns:1fr}
.app-main .careers-wrap{padding-top:1rem}
.app-main .profile{grid-template-columns:1fr}
.app-main .council-page{grid-template-columns:1fr}
.app-main .concept-note{font-size:.9rem}

/* Home */
.app-tiles{list-style:none;margin:0 0 1rem;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.app-tiles a{display:flex;flex-direction:column;gap:.25rem;height:100%;padding:.9rem .9rem 1rem;border-radius:var(--radius-m);border:1px solid var(--line);
  background:var(--paper);color:var(--slate);text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.app-tiles a:hover{border-color:var(--brand)}
.app-tiles a:active{transform:scale(.98)}
.app-tiles .icon{width:2rem;height:2rem;color:var(--brand);margin-bottom:.25rem}
.app-tiles li:first-child a{background:var(--brand);color:#fff;border-color:var(--brand)}
.app-tiles li:first-child .icon{color:#fff}
:root[data-theme="dark"] .app-tiles li:first-child a{color:#231F20}
:root[data-theme="dark"] .app-tiles li:first-child .icon{color:#231F20}
.tile-title{font-weight:700;font-size:1.05rem;line-height:1.2}
.tile-desc{font-size:.88rem;color:var(--muted);line-height:1.3}
.app-tiles li:first-child .tile-desc{color:inherit;opacity:.9}
.app-main .alerts{margin:0 0 1rem;border-radius:var(--radius-m);overflow:hidden}
.app-main .alerts .wrap{padding:.75rem 1rem}
.app-main .alert-list{grid-template-columns:1fr}
.app-today{margin:0 0 1rem}
.app-today .today-panel{margin-top:0;grid-template-columns:1fr 1fr}
.app-today .wx-row{grid-template-columns:1fr}
/* Home: City Hall and the Aquatic Centre on the first row, garbage and watering on the second, then the rest */
.app-today .today-panel:has(#home-mine){grid-template-columns:1fr 1fr}
.app-today .today-panel > .today-item:first-child{grid-column:1/-1;order:0!important;display:grid;grid-template-columns:1fr 1fr;column-gap:1.25rem;align-content:start;border-right:0;border-bottom:1px solid var(--line)}
.app-today .today-panel > .today-item:first-child > :not(.fac){grid-column:1}
.app-today .today-panel > .today-item:first-child > .fac{grid-column:2;grid-row:1/span 3;margin:0;padding:0 0 0 1.25rem;border-top:0;border-left:1px solid var(--line)}
.app-today .fac h3{font-size:.95rem}
.app-today .today-mine{grid-column:1/-1;grid-template-columns:1fr 1fr;order:1!important;border-bottom:1px solid var(--line)}
.app-today .today-mine .today-item{border-bottom:0;border-right:0}
.app-today .today-mine .today-item:first-child{border-right:1px solid var(--line)}
.app-today .mine-bar{border-top:1px solid var(--line)}
.app-today .today-panel:has(#home-mine) > .today-item:not(:first-child),.app-today .today-panel:has(#home-mine) > .wx-alert{order:2!important}
.app-today .today-panel:has(#home-mine) > .today-item:not(:first-child){border-bottom:0}
.app-today .today-panel:has(#home-mine) > .today-item:not(:first-child){grid-column:1/-1}
.app-today .today-panel > .today-item:first-child{grid-row:auto}

/* Lists (More, My requests) */
.app-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;background:var(--paper)}
.app-list>li+li{border-top:1px solid var(--line)}
.app-list a,.app-list button.app-row{display:flex;align-items:center;gap:.85rem;min-height:3.25rem;padding:.65rem 1rem;color:var(--slate);text-decoration:none;width:100%;
  font:inherit;background:none;border:0;text-align:left;cursor:pointer}
.app-list a:hover{background:var(--mist)}
.app-list .icon{width:1.4rem;height:1.4rem;color:var(--brand);flex:none}
.app-list a>span{flex:1}
.app-list .chev-r{transform:rotate(-90deg);color:var(--muted);width:1rem;height:1rem}
.app-list .ext::after{display:none}
.app-empty{padding:1rem;color:var(--muted)}
.req-meta{display:block;font-size:.88rem;color:var(--muted)}
.req-status{font-size:.8rem;font-weight:700;padding:.15rem .55rem;border-radius:999px;background:var(--mist);white-space:nowrap}
.prefs-card .prefs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 .75rem}
.prefs-card .prefs>span{font-weight:700;margin-right:.25rem}
.prefs-card .prefs button{color:var(--slate);border-color:var(--line);background:var(--paper)}
.prefs-card .prefs button[aria-pressed="true"]{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}

/* Bottom tab bar */
.tab-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--paper);border-top:1px solid var(--line);
  padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);box-shadow:0 -2px 10px rgba(0,0,0,.06)}
.tab-bar ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(5,1fr);max-width:44rem}
.tab-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;min-height:4rem;padding:.35rem .15rem;
  color:var(--muted);text-decoration:none;font-size:.74rem;font-weight:700;text-align:center;line-height:1.1}
.tab-bar .icon{width:1.6rem;height:1.6rem}
.tab-bar a[aria-current="page"]{color:var(--brand)}
.tab-bar a[aria-current="page"] .icon{stroke-width:2.3}
.tab-bar a:focus-visible{outline-offset:-3px}
:root[data-size="xl"] .tab-bar a span{font-size:.8em}

@media (min-width:48rem){.app-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media print{.app-bar,.tab-bar{display:none}}

/* Publication reader inside the app: fill the space between the top bar and the tab bar */
.app-main:has(> .reader){max-width:none;padding:0}
.app-shell .reader{height:calc(100dvh - 3.5rem - env(safe-area-inset-top) - 4.25rem - env(safe-area-inset-bottom));min-height:24rem}
.app-shell .reader:fullscreen,.app-shell .reader.is-immersive{height:100dvh}
.app-shell .reader-back{display:none}
.app-shell .reader-title{border:0;padding:0}

.app-list-gap{margin-bottom:.75rem}
.app-list .tile-desc{display:block;margin-top:.1rem}
.consent-bar{bottom:calc(4rem + env(safe-area-inset-bottom))}   /* above the tab bar */