:root{
  --ink: var(--freanki-forest);
  --muted: #53695f;
  --green: var(--freanki-forest);
  --line: #d5d5c9;
  --canvas: var(--freanki-cream);
  --card: #fcf8f1;
  --accent: var(--freanki-honey);
  --sidebar: 290px;
  font-family: var(--freanki-font-body);
  color: var(--ink);
  font-size: 14px
}
*{
  box-sizing: border-box
}
body{
  margin: 0;
  background: var(--canvas)
}
a{
  color: var(--green);
  text-decoration: none
}
a:hover{
  text-decoration: underline
}
button,input{
  font: inherit
}
button,a,input{
  touch-action: manipulation
}
button{
  cursor: pointer
}
button:focus-visible,a:focus-visible,input:focus-visible{
  outline: 3px solid var(--freanki-terracotta);
  outline-offset: 3px
}
.skip-link{
  position: fixed;
  top: -60px;
  z-index: 5;
  padding: 12px;
  background: white
}
.skip-link:focus{
  top: 8px
}
.sidebar{
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  background: #fff;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 33px 23px 20px
}
.brand{
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -.9px
}
.brand:hover{
  text-decoration: none
}
.brand small{
  display: block;
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: 1.35px;
  color: var(--muted);
  font-weight: 600
}
.brand-icon{
  background: var(--green);
  color: white;
  border-radius: 12px;
  padding: 4px 12px 8px;
  font-size: 34px;
  line-height: 1;
  font-weight: 700
}
.brand-icon span{
  color: var(--accent)
}
.nav-label{
  font-size: 14px;
  letter-spacing: 1.6px;
  color: #53695f;
  margin: 52px 12px 17px
}
.nav-item{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 8px;
  margin-bottom: 7px;
  color: #63716a;
  font-weight: 500
}
.nav-item>span{
  font-size: 20px;
  width: 20px;
  text-align: center
}
.nav-item.active{
  color: var(--green);
  background: var(--freanki-sage);
  font-weight: 650
}
.nav-item:hover{
  background: #e7eade;
  text-decoration: none
}
.sidebar-note{
  margin-top: auto;
  padding: 22px 12px;
  font-size: 14px;
  font-weight: 600
}
.sidebar-note p{
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--muted);
  margin-top: 10px
}
.status-dot{
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6e9c65;
  margin-right: 8px
}
.profile{
  display: flex;
  gap: 10px;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  min-width: 0
}
.profile>div{
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere
}
.profile small{
  display: block;
  color: var(--muted);
  font-size: 14px;
  margin-top: 5px
}
.avatar{
  background: var(--freanki-sage);
  border: 1px solid #e0e7d7;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 14px
}
.icon-button{
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 23px;
  padding: 8px
}
.workspace{
  margin-left: var(--sidebar);
  min-height: 100vh;
  display: flex;
  flex-direction: column
}
.topbar{
  height: 74px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 42px;
  font-size: 14px;
  background: #ffffff66
}
.breadcrumb{
  color: var(--muted);
  margin-left: 14px
}
.mobile-logout{
  display: none
}
.private-label{
  color: var(--muted);
  font-size: 14px
}
main{
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
  padding: 42px;
  flex: 1
}
h1,h2,h3,p{
  margin-top: 0
}
h1{
  font-size: clamp(28px,3vw,39px);
  line-height: 1.2;
  letter-spacing: -1.35px;
  font-weight: 650;
  margin-bottom: 15px
}
h2{
  font-size: 18px;
  letter-spacing: -.35px;
  font-weight: 600
}
h3{
  font-size: 16px;
  font-weight: 600
}
.page-heading{
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  margin-bottom: 30px
}
.eyebrow{
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: 650;
  color: var(--muted);
  margin-bottom: 15px
}
.greeting-dot{
  color: var(--freanki-terracotta)
}
.muted{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7
}
.date-card{
  text-align: right;
  white-space: nowrap;
  font-size: 14px
}
.date-card span{
  color: var(--muted);
  display: block;
  margin-bottom: 7px
}
.date-card strong{
  font-size: 14px;
  font-weight: 500
}
.stats-grid{
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 17px;
  margin-bottom: 26px
}
.stat-card{
  padding: 22px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 18px
}
.stat-icon{
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 21px;
  flex-shrink: 0
}
.mint{
  background: var(--freanki-sage);
  color: #427052
}
.amber{
  background: #f0dfbf;
  color: var(--freanki-forest)
}
.lavender{
  background: #e5e9df;
  color: var(--freanki-forest)
}
.stat-card p{
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 10px
}
.stat-card strong{
  font-size: 27px;
  line-height: 1;
  font-weight: 500
}
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px
}
.card-heading{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 22px 25px;
  border-bottom: 1px solid #edf0eb
}
.card-heading h2{
  margin: 0;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 12px
}
.card-heading a{
  font-size: 14px;
  white-space: nowrap
}
.count-pill{
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 14px;
  color: var(--muted)
}
.attention-empty{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 167px;
  padding: 30px
}
.check-circle{
  display: inline-grid;
  place-items: center;
  color: #5f8050;
  background: var(--freanki-sage);
  border: 1px solid #e6edda;
  border-radius: 50%;
  height: 45px;
  width: 45px;
  font-size: 18px;
  flex-shrink: 0
}
.attention-empty h3{
  font-size: 18px;
  margin-bottom: 8px
}
.attention-empty p{
  font-size: 14px;
  color: var(--muted);
  margin: 0
}
.section-heading{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 33px 0 18px;
  gap: 12px
}
.section-heading h2{
  margin: 0;
  font-size: 17px
}
.section-heading span{
  font-size: 14px;
  color: var(--muted)
}
.widget-grid{
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 17px
}
.widget{
  padding: 22px;
  display: flex;
  flex-direction: column
}
.widget-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 24px
}
.module-icon{
  display: grid;
  place-items: center;
  border-radius: 9px;
  width: 36px;
  height: 36px;
  font-size: 22px
}
.foodsharing{
  background: var(--freanki-sage);
  color: var(--freanki-forest)
}
.invoices{
  background: #f1ddd2;
  color: var(--freanki-terracotta)
}
.calendar{
  background: #e5e9df;
  color: var(--freanki-forest)
}
.badge{
  font-size: 14px;
  font-weight: 650;
  border-radius: 5px;
  padding: 5px 7px;
  white-space: nowrap
}
.neutral{
  background: #e8e9dd;
  border: 1px solid #e9ece5;
  color: var(--freanki-forest)
}
.widget h3{
  font-size: 16px;
  margin-bottom: 10px
}
.widget>p{
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 22px;
  flex: 1
}
.widget-bottom{
  padding-top: 17px;
  border-top: 1px solid #edf0eb;
  color: #53695f;
  font-size: 14px;
  line-height: 1.6
}
.outline-dot{
  display: inline-block;
  width: 6px;
  height: 6px;
  border: 1px solid #abb6a1;
  border-radius: 50%;
  margin-right: 5px
}
.foundation-note{
  margin-top: 26px;
  background: var(--freanki-sage);
  border: 1px solid #e3e9db;
  border-radius: 10px;
  padding: 24px;
  display: flex;
  gap: 18px;
  align-items: center
}
.note-symbol{
  color: var(--freanki-forest);
  font-size: 29px
}
.foundation-note h3{
  font-size: 14px;
  margin-bottom: 7px
}
.foundation-note p{
  font-size: 14px;
  color: #53695f;
  line-height: 1.7;
  margin: 0
}
footer{
  display: flex;
  justify-content: space-between;
  padding: 22px 42px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: #53695f;
  gap: 12px
}
.footer-version{
  margin-left: 8px;
  color: #53695f
}
.attention-list{
  padding: 0 25px;
  list-style: none;
  margin: 0
}
.attention-list li{
  display: flex;
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  align-items: start
}
.attention-list li:last-child{
  border: 0
}
.attention-list li>div{
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere
}
.attention-list strong{
  font-size: 14px
}
.attention-list p{
  font-size: 14px;
  margin: 7px 0;
  color: var(--muted)
}
small{
  color: var(--muted);
  font-size: 14px
}
.severity-dot{
  border-radius: 50%;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  flex-shrink: 0
}
.INFO{
  background: #edf2fa;
  color: #536e99
}
.WARNING{
  background: #fbf2da;
  color: var(--freanki-forest)
}
.ERROR,.CRITICAL{
  background: #f2dfd7;
  color: var(--freanki-terracotta)
}
.severity-dot.INFO{
  background: #7298b6
}
.severity-dot.WARNING{
  background: var(--freanki-honey)
}
.severity-dot.ERROR,.severity-dot.CRITICAL{
  background: var(--freanki-terracotta)
}
.button{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  background: var(--freanki-sage);
  border: 1px solid #dbe6d0;
  border-radius: 6px;
  padding: 10px 16px;
  color: #31513c;
  font-size: 14px
}
.button:hover{
  background: #e1ead7;
  text-decoration: none
}
.primary{
  background: var(--green);
  color: white;
  border-color: var(--green)
}
.primary:hover{
  background: #15392f
}
.quiet{
  background: white;
  border-color: var(--line)
}
.full-width{
  width: 100%
}
.login-workspace{
  margin: 0
}
.login-layout{
  max-width: 1050px;
  min-height: calc(100vh - 150px);
  margin: auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 70px
}
.login-intro .large{
  font-size: 50px;
  display: inline-block;
  border-radius: 16px;
  margin-bottom: 36px;
  padding: 8px 17px 14px
}
.login-intro h1{
  font-size: 39px;
  line-height: 1.3
}
.login-intro>p:not(.eyebrow){
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted)
}
.login-detail{
  font-size: 14px;
  color: var(--muted);
  margin-top: 40px
}
.login-card{
  padding: 36px
}
.login-card h2{
  font-size: 23px;
  line-height: 1.35
}
.login-card form{
  margin-top: 30px
}
.login-card label{
  display: block;
  font-size: 14px;
  margin: 20px 0 9px
}
.login-card input{
  width: 100%;
  padding: 12px;
  border: 1px solid #dce3d8;
  border-radius: 6px;
  background: #fcfdfb;
  min-width: 0
}
.login-card .button{
  margin-top: 26px;
  padding: 13px
}
.login-help{
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  margin: 23px 0 0
}
.form-error{
  padding: 12px;
  background: #f2dfd7;
  color: var(--freanki-terracotta);
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.6
}
.tabs{
  display: flex;
  gap: 25px;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--line)
}
.tabs a{
  padding: 12px 0;
  color: var(--muted);
  font-size: 14px
}
.tabs .selected{
  border-bottom: 2px solid var(--green);
  color: var(--green)
}
.notification{
  padding: 25px;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere
}
.notification:last-child{
  border: 0
}
.notification-heading,.notification-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px
}
.notification h2{
  margin: 17px 0 10px;
  font-size: 17px
}
.notification-message{
  white-space: pre-line;
  line-height: 1.7;
  color: var(--muted);
  font-size: 14px
}
.notification-bottom{
  margin-top: 20px
}
.notification-bottom form{
  display: flex;
  gap: 8px
}
.list-empty{
  text-align: center;
  padding: 55px 25px
}
.list-empty h2{
  margin-top: 20px
}
.list-empty .button{
  margin-top: 15px
}
.pagination{
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  padding: 25px;
  font-size: 14px
}
.flash{
  padding: 15px;
  background: var(--freanki-sage);
  margin-bottom: 20px;
  border-radius: 6px
}
@media(min-width:1600px){
  main{
    padding-top: 55px
  }
  .stats-grid{
    margin-bottom: 30px
  }
  .widget{
    min-height: 248px
  }
  .attention-empty{
    min-height: 190px
  }
}
@media(max-width:1100px){
  :root{
    --sidebar: 222px
  }
  .sidebar{
    padding: 28px 16px
  }
  .brand{
    font-size: 20px
  }
  .brand small{
    font-size: 14px
  }
  .topbar{
    padding: 0 26px
  }
  main{
    padding: 30px 26px
  }
  .stat-card{
    padding: 18px 15px;
    gap: 10px
  }
  .stat-icon{
    width: 33px;
    height: 33px
  }
  .widget-grid{
    grid-template-columns: 1fr
  }
  .widget{
    min-height: 170px
  }
  .widget-top{
    margin-bottom: 16px
  }
  .widget>p{
    margin-bottom: 16px
  }
  .widget-bottom{
    padding-top: 13px
  }
  .login-layout{
    gap: 35px
  }
  .login-intro h1{
    font-size: 31px
  }
}
@media(max-width:720px){
  :root{
    --sidebar: 0px
  }
  .sidebar{
    position: static;
    width: 100%;
    padding: 18px 20px;
    border-right: 0;
    border-bottom: 1px solid var(--line)
  }
  .brand small,.nav-label,.sidebar-note,.profile{
    display: none
  }
  .sidebar nav{
    display: flex;
    gap: 8px;
    margin-top: 18px
  }
  .nav-item{
    padding: 9px 12px;
    margin: 0;
    font-size: 14px;
    gap: 8px
  }
  .nav-item>span{
    font-size: 16px
  }
  .topbar{
    height: 55px;
    padding: 0 20px;
    font-size: 14px
  }
  .private-label{
    font-size: 14px
  }
  main{
    padding: 28px 20px
  }
  .page-heading{
    align-items: start;
    gap: 15px;
    flex-direction: column;
    margin-bottom: 24px
  }
  .date-card{
    text-align: left
  }
  .date-card span{
    display: inline;
    margin-right: 7px
  }
  .date-card strong{
    font-size: 14px
  }
  h1{
    font-size: 30px
  }
  .eyebrow{
    font-size: 14px
  }
  .stats-grid{
    gap: 9px
  }
  .stat-card{
    flex-direction: column;
    align-items: start;
    padding: 14px 11px;
    gap: 12px
  }
  .stat-card p{
    font-size: 14px;
    min-height: 27px;
    line-height: 1.5
  }
  .stat-card strong{
    font-size: 24px
  }
  .card-heading{
    padding: 18px
  }
  .card-heading h2{
    font-size: 14px;
    gap: 6px
  }
  .card-heading a{
    font-size: 14px
  }
  .attention-empty{
    padding: 24px 18px;
    gap: 12px;
    justify-content: start
  }
  .attention-empty h3{
    line-height: 1.5;
    font-size: 14px
  }
  .attention-empty p{
    line-height: 1.6;
    font-size: 14px
  }
  .section-heading span{
    font-size: 14px
  }
  .foundation-note{
    align-items: start;
    padding: 20px;
    gap: 12px
  }
  footer{
    padding: 18px 20px;
    font-size: 14px
  }
  .login-layout{
    grid-template-columns: 1fr;
    gap: 25px;
    min-height: 0
  }
  .login-intro h1{
    font-size: 29px
  }
  .login-intro>p:not(.eyebrow),.login-detail{
    display: none
  }
  .login-intro .large{
    font-size: 35px;
    margin-bottom: 25px
  }
  .login-card{
    padding: 25px
  }
  .login-card h2{
    font-size: 20px
  }
  .notification{
    padding: 20px
  }
  .notification-bottom{
    flex-direction: column;
    align-items: start
  }
  .notification-bottom form{
    flex-wrap: wrap
  }
  .attention-list{
    padding: 0 18px
  }
}
@media(prefers-reduced-motion:reduce){
  *{
    scroll-behavior: auto!important
  }
}
@media(max-width:720px){
  .topbar .private-label{
    display: none
  }
  .mobile-logout{
    display: block
  }
}
/* freanki surfaces and type: colors originate in static/brand/brand.css. */
body {
  font-weight: 450;
}
h1, h2, h3, .nav-item, .brand {
  font-weight: 650;
}
p {
  line-height: 1.6;
}
.sidebar {
  background: var(--freanki-forest);
  color: var(--freanki-cream);
}
.sidebar .brand, .sidebar .nav-item, .sidebar .sidebar-note, .sidebar .profile {
  color: var(--freanki-cream);
}
.sidebar .brand small, .sidebar .nav-label, .sidebar .sidebar-note p, .sidebar .profile small {
  color: var(--freanki-sage);
}
.sidebar .nav-item.active, .sidebar .nav-item:hover {
  color: var(--freanki-forest);
  background: var(--freanki-sage);
}
.sidebar .icon-button {
  color: var(--freanki-cream);
}
.brand {
  letter-spacing: -0.5px;
}
.brand small {
  line-height: 1.5;
  letter-spacing: 0.3px;
}
.nav-label {
  letter-spacing: 0.5px;
}
.brand-icon {
  background: var(--freanki-cream);
  color: var(--freanki-forest);
}
.brand-icon span {
  color: var(--freanki-terracotta);
}
.sidebar .profile {
  border-color: #52695f;
}
.sidebar .avatar {
  color: var(--freanki-forest);
  background: var(--freanki-sage);
}
.topbar {
  background: var(--freanki-cream);
}
.date-card strong, .stat-card p, .widget > p, .muted, .attention-empty p, .attention-list p, .notification-message {
  font-size: 18px;
}
.stat-card p {
  line-height: 1.5;
  min-height: 42px;
}
.login-card input {
  background: var(--freanki-cream);
}
.login-intro h1 {
  font-family: var(--freanki-font-accent);
  font-weight: 500;
  font-variation-settings: "opsz" 72, "SOFT" 30, "WONK" 1;
}
.primary {
  background: var(--freanki-terracotta);
  border-color: var(--freanki-terracotta);
  color: var(--freanki-cream);
}
.primary:hover {
  background: #923f2c;
}
.badge {
  white-space: normal;
}
.eyebrow {
  letter-spacing: 1px;
}
.stat-card {
  align-items: flex-start;
}
@media(max-width:720px) {
  .sidebar {
    padding: 18px 20px;
  }
  .sidebar nav {
    flex-wrap: wrap;
  }
  .topbar {
    min-height: 58px;
    height: auto;
  }
  .stat-card p {
    font-size: 14px;
    min-height: 64px;
  }
  .card-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .section-heading {
    align-items: flex-start;
  }
  footer {
    flex-wrap: wrap;
  }
}
body { font-size: 18px; }
.ledger-widget .widget-bottom a { display: block; margin-top: 12px; }
.ledger-totals { margin: 0 0 22px; }
.ledger-totals div { margin-bottom: 14px; }
.ledger-totals dt { font-size: 14px; color: var(--muted); line-height: 1.6; }
.ledger-totals dd { margin: 5px 0 0; font-size: 21px; font-weight: 650; }
.foodsharing-widget .widget-bottom a { display: block; margin-top: 12px; }
.pickup-preview { list-style: none; padding: 0; margin: 0 0 20px; }
.pickup-preview li { display: flex; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.pickup-preview time { min-width: 88px; }
.pickup-preview time strong { display: block; font-size: 23px; }
.pickup-preview time span, .pickup-preview small { display: block; margin-top: 7px; font-size: 14px; color: var(--muted); }
.pickup-preview li > div { min-width: 0; overflow-wrap: anywhere; }
.pickup-preview li > div > strong { font-size: 16px; }
.connection-warning { color: var(--freanki-terracotta); line-height: 1.6; }
.foodsharing-layout { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); gap: 24px; }
.connection-card, .pickup-details { padding: 25px; }
.connection-card { margin-top: 24px; }
.connection-card p, .data-note { font-size: 14px; color: var(--muted); }
.connection-card form { margin-top: 20px; }
.pickup-detail { padding: 22px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.pickup-heading { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; margin-bottom: 18px; }
.pickup-heading time { font-size: 16px; font-weight: 650; }
.pickup-description { white-space: pre-line; }
.foodsavers { font-size: 16px; }
.data-note { margin: 25px 0 0; }
.connect-card { max-width: 650px; }
.checkbox-label { display: flex !important; gap: 12px; align-items: center; line-height: 1.6; }
.checkbox-label input { width: 20px; height: 20px; flex-shrink: 0; }
@media(max-width:1100px) { .foodsharing-layout { grid-template-columns: 1fr; } }
@media(max-width:720px) { .pickup-heading { flex-direction: column; } .pickup-details, .connection-card { padding: 20px; } }

.monitoring-widget { margin: 26px 0; padding: 30px; }
.monitoring-heading, .monitoring-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.monitoring-heading h2 { margin: 5px 0 20px; }
.monitoring-heading h2 a { color: inherit; text-decoration: none; }
.monitoring-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 20px 0; }
.monitoring-summary strong { display: block; font-size: 28px; }
.monitoring-summary span, .monitoring-footer, .monitoring-problems small { color: var(--muted); font-size: 14px; }
.monitoring-counts { display: flex; flex-wrap: wrap; gap: 18px; }
.monitoring-problems { list-style: none; padding: 0; margin: 20px 0; }
.monitoring-problems li { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); }
.monitoring-problems li > div { min-width: 0; overflow-wrap: anywhere; }
.monitoring-problems a, .monitoring-problems a span, .monitoring-problems small { display: block; }
.monitoring-problems a { color: inherit; text-decoration: none; }
.monitoring-problems a:hover { text-decoration: underline; }
.monitoring-problems a span, .monitoring-problems small { margin-top: 6px; }
.monitoring-warning { background: var(--freanki-honey); color: var(--freanki-forest); }
.monitoring-critical { background: var(--freanki-terracotta); color: var(--freanki-cream); }
.monitoring-unknown { background: var(--freanki-sage); color: var(--freanki-forest); }
.monitoring-footer { padding-top: 15px; border-top: 1px solid var(--line); }
@media (max-width: 650px) {
  .monitoring-widget { padding: 22px; }
  .monitoring-summary { grid-template-columns: 1fr; gap: 14px; }
  .monitoring-problems li { flex-direction: column; }
}