/* automated-messages.css -- session 386: Settings > Messaging > All automated messages, in the Settings design of sessions 377 and 380
   (settings-users.css's cards, pills, switch and table). Every rule starts :where(#page) .mhd (as cleanup-screens.css, session 381: deploy's
   style check allows .mhd to start rules in one stylesheet only) and every class starts am-, so nothing else changes. */
:where(#page) .mhd .am-modes{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; padding:14px 20px 18px }
:where(#page) .mhd .am-mode{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; padding:10px 12px; border:1px solid #edf0f2; border-radius:10px }
:where(#page) .mhd .am-lk{ color:#1d6e77; text-decoration:underline }
:where(#page) .mhd .am-cards{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px }
:where(#page) .mhd .am-card{ display:flex; flex-direction:column }
:where(#page) .mhd .am-card.am-over{ box-shadow:0 0 0 2px #f5a65b, 0 4px 14px rgba(14,54,59,.08) }
:where(#page) .mhd .am-big{ font-size:28px; font-weight:800; color:#16181a; padding:14px 20px 4px; letter-spacing:-0.02em }
:where(#page) .mhd .am-line{ padding:4px 20px; font-size:14px; color:#4d545a; line-height:1.45 }
:where(#page) .mhd .am-warn{ margin:10px 20px 16px; padding:10px 12px; border-radius:10px; background:#ffe8d6; color:#9a4a0e; font-size:13.5px; line-height:1.45 }
:where(#page) .mhd .am-ok{ margin:10px 20px 16px; padding:8px 12px; border-radius:10px; background:#e2f4ee; color:#08513f; font-size:13.5px; align-self:flex-start }
:where(#page) .mhd .am-strip{ padding:12px 20px 16px; border-bottom:1px solid #edf0f2 }
:where(#page) .mhd .am-strip:last-child{ border-bottom:0 }
:where(#page) .mhd .am-sl{ font-size:14px; color:#16181a; margin-bottom:8px }
:where(#page) .mhd .am-bars{ position:relative; display:grid; grid-template-columns:repeat(24, minmax(0, 1fr)); gap:3px; height:96px; align-items:end; border-bottom:1px solid #c9d0d4 }
:where(#page) .mhd .am-bar{ position:relative; height:100%; display:flex; align-items:flex-end }
:where(#page) .mhd .am-bar span{ display:block; width:100%; background:#1d6e77; border-radius:3px 3px 0 0; min-height:0 }
:where(#page) .mhd .am-bar.am-hot span{ background:#f08a24 }
:where(#page) .mhd .am-bar i{ position:absolute; left:0; right:0; top:-2px; text-align:center; font-style:normal; font-size:11px; font-weight:700; color:#16181a }
:where(#page) .mhd .am-cap{ position:absolute; left:0; right:0; border-top:2px dashed #f08a24; z-index:1; pointer-events:none }
:where(#page) .mhd .am-ticks{ display:flex; justify-content:space-between; font-size:11.5px; color:#6b747b; margin-top:4px }
:where(#page) .mhd .am-filter{ gap:12px }
:where(#page) .mhd .am-f{ display:flex; align-items:center; gap:6px }
:where(#page) .mhd .am-q{ flex:1 1 220px }
:where(#page) .mhd .am-inp{ height:38px; border:1px solid #c9d0d4; border-radius:10px; padding:0 12px; font-family:inherit; font-size:15px; color:#16181a; background:#fff; width:100%; min-width:0 }
:where(#page) .mhd .am-inp:focus-visible, :where(#page) .mhd .am-filter .d-sel:focus-visible{ outline:2px solid #1d6e77; outline-offset:1px }
:where(#page) .mhd .am-tbl{ min-width:960px }
:where(#page) .mhd .am-tbl td[data-k="Message"]{ min-width:250px }
:where(#page) .mhd .am-tbl td[data-k="Tomorrow"]{ min-width:150px }
:where(#page) .mhd .am-tbl th{ white-space:normal; vertical-align:bottom }
:where(#page) .mhd .am-tbl td[data-k="How"]{ max-width:190px }
:where(#page) .mhd .am-tbl th.c, :where(#page) .mhd .am-tbl td.c{ width:84px }
:where(#page) .mhd .am-tbl td{ vertical-align:top }
:where(#page) .mhd .am-nm{ font-weight:700; color:#16181a; font-size:14.5px }
:where(#page) .mhd .am-tr{ font-size:12.5px; color:#6b747b; margin-top:3px; max-width:360px }
:where(#page) .mhd .am-sw{ display:flex; align-items:center; gap:8px }
:where(#page) .mhd .am-sw .d-sw:focus-visible{ outline:2px solid #144d54; outline-offset:2px }
:where(#page) .mhd .am-confirm{ margin-top:8px; max-width:280px }
:where(#page) .mhd .am-now{ font-weight:700; color:#08513f }
:where(#page) .mhd .am-now.am-held{ color:#9a4a0e }
:where(#page) .mhd .am-dash{ color:#9aa2a8 }
:where(#page) .mhd .am-fixed{ font-size:13.5px }
:where(#page) .mhd .am-set{ display:inline-block; margin-top:6px; font-size:13px; font-weight:600 }
:where(#page) .mhd .am-notes{ padding:12px 20px 16px; display:flex; flex-direction:column; gap:8px; font-size:14px; color:#4d545a }
@media (max-width: 1100px){ :where(#page) .mhd .am-cards{ grid-template-columns:minmax(0, 1fr) } }
@media (max-width: 760px){
  :where(#page) .mhd .am-modes{ grid-template-columns:repeat(2, minmax(0, 1fr)); padding:12px 14px 14px }
  :where(#page) .mhd .am-tbl{ min-width:0 }
  :where(#page) .mhd .am-tbl thead{ display:none }
  :where(#page) .mhd .am-tbl, :where(#page) .mhd .am-tbl tbody, :where(#page) .mhd .am-tbl tr, :where(#page) .mhd .am-tbl td{ display:block; width:auto }
  :where(#page) .mhd .am-tbl tr{ border-bottom:1px solid #dfe3e6; padding:10px 0; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); column-gap:4px }
  :where(#page) .mhd .am-tbl td{ border-bottom:0; padding:4px 16px; text-align:left; min-width:0 }
  :where(#page) .mhd .am-tbl td[data-k="Message"], :where(#page) .mhd .am-tbl td[data-k="Its switch"]{ grid-column:1 / -1; min-width:0 }
  :where(#page) .mhd .am-tbl td.c{ text-align:left }
  :where(#page) .mhd .am-tbl td[data-k]:not([data-k="Message"])::before{ content:attr(data-k); display:block; font-size:11.5px; font-weight:600; color:#6b747b }
  :where(#page) .mhd .am-tr{ max-width:none }
  :where(#page) .mhd .am-bars{ gap:1px; height:80px }
  :where(#page) .mhd .am-bar i{ font-size:9px }
}