/* Mentos web UI – small additions on top of Pico.css */
:root { --mentos-muted: var(--pico-muted-color); }
body > header.container { padding-top: .5rem; padding-bottom: 0; }
header nav ul:first-child li strong a { text-decoration: none; }
nav .person-switcher select { margin: 0; padding: .25rem 2rem .25rem .5rem; height: auto; font-size: .9rem; }
.flash { padding: .6rem 1rem; border-radius: var(--pico-border-radius); background: var(--pico-ins-color); color: #fff; }
.error-box { padding: .6rem 1rem; border-radius: var(--pico-border-radius); background: var(--pico-del-color); color: #fff; }
.temp-password { font-family: monospace; font-size: 1.3rem; letter-spacing: .1rem; }

.icon { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem;
        border-radius: .5rem; background: color-mix(in srgb, var(--pico-primary) 15%, transparent);
        font-size: 1.3rem; flex: none; overflow: hidden; vertical-align: middle; }
.icon img { width: 100%; height: 100%; object-fit: cover; }
.icon.small { width: 1.5rem; height: 1.5rem; font-size: .9rem; border-radius: .35rem; }

.rows { list-style: none; padding: 0; margin: 0; }
.rows > li { display: flex; align-items: center; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--pico-muted-border-color); list-style: none; }
.rows > li .grow { flex: 1; min-width: 0; }
.rows > li .title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.rows > li .sub { font-size: .85rem; color: var(--mentos-muted); }
.rows > li form { margin: 0; }
.rows > li button, .rows > li [role=button] { margin: 0; padding: .3rem .7rem; font-size: .85rem; }
.rows > li input[type=checkbox] { margin: 0; width: 1.5rem; height: 1.5rem; }
.ticked .title { text-decoration: line-through; color: var(--mentos-muted); }
.greyed { opacity: .5; }
.overdue .title, .overdue .deadline { color: var(--pico-del-color); }
.badge { display: inline-block; font-size: .7rem; padding: .05rem .4rem; border-radius: 1rem;
         background: var(--pico-secondary-background); color: var(--pico-secondary-inverse); vertical-align: middle; }
.prio { width: .35rem; align-self: stretch; border-radius: .2rem; flex: none; }
.prio.HIGH { background: #e53935; } .prio.NORMAL { background: #fbc02d; } .prio.LOW { background: #9e9e9e; }
.avatars { display: inline-flex; }
.avatar { display: inline-flex; width: 1.5rem; height: 1.5rem; border-radius: 50%; color: #fff; font-size: .65rem;
          align-items: center; justify-content: center; margin-left: -.3rem; border: 2px solid var(--pico-background-color); }
.section-title { margin: 1.2rem 0 .3rem; font-size: .9rem; text-transform: uppercase; letter-spacing: .05rem; color: var(--mentos-muted); }
.next-alarm { font-size: 1.1rem; }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.chips label { display: inline-flex; align-items: center; gap: .2rem; padding: .2rem .5rem; border: 1px solid var(--pico-muted-border-color);
               border-radius: 1rem; cursor: pointer; margin: 0; }
.chips input { margin: 0; }
.emoji-grid { display: flex; flex-wrap: wrap; gap: .2rem; max-height: 9rem; overflow-y: auto; padding: .3rem;
              border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); }
.emoji-grid label { cursor: pointer; font-size: 1.4rem; padding: .1rem .25rem; border-radius: .3rem; margin: 0; }
.emoji-grid input { display: none; }
.emoji-grid input:checked + span { outline: 2px solid var(--pico-primary); border-radius: .3rem; }
.comment { padding: .5rem 0; border-bottom: 1px solid var(--pico-muted-border-color); }
.comment.system { color: var(--mentos-muted); font-style: italic; font-size: .9rem; }
.comment .meta { font-size: .8rem; color: var(--mentos-muted); }
.inline-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.inline-actions form { margin: 0; }
.inline-actions button, .inline-actions [role=button] { margin: 0; }
#ringing-banner article { border-left: .4rem solid var(--pico-del-color); }
#ringing-banner .buttons { display: flex; flex-wrap: wrap; gap: .4rem; }
#ringing-banner .buttons button { margin: 0; padding: .3rem .8rem; }
.lock { font-size: .9rem; }
table td form { margin: 0; }
footer.container { font-size: .8rem; color: var(--mentos-muted); padding-top: 2rem; }
@media (max-width: 576px) { header nav ul { flex-wrap: wrap; } }

/* logo */
.brand { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.brand-logo { width: 1.6rem; height: 1.6rem; border-radius: 50%; }
.page-logo { display: block; width: 8rem; height: 8rem; margin: 0 auto 1rem; border-radius: 50%; }