/* Communications: the section stylesheet. Every rule in it is scoped under
   #ps-network-concept, for the reason the header of /css/account-app.css gives:
   this page also carries the site's own style.css, and the scope is why the two
   can share it. Loaded after the core's stylesheet, so a rule here at the same
   specificity wins.

   Most of what the section draws is the shared vocabulary (.ps-row, .ps-table,
   .ps-message, .mima-*), already in account-app.css. What is here is the little
   the prototype did not have: an agent id beside an author, a status beside a
   time, the receipts line under a message, the external-content mark on mail
   that came in from outside, the address chips on the channels tab, the
   team's side of the support drawer, and the drawer at phone width. */

/* A thread: the author's agent id sits beside the name, quieter than it. */
#ps-network-concept .ps-message header strong small{font-weight:400;color:#7b8d9c;margin-left:6px;font-size:11px}
#ps-network-concept .ps-message header span{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
#ps-network-concept .ps-message footer .ps-btn.ps-textbtn{min-height:38px;padding:3px 0}
#ps-network-concept .ps-message+.ps-form{margin-top:22px}

/* The inbox filter. Inside .ps-tools the form is a flex item that shrinks to
   its input, so the Filter button wrapped under it; letting the form take the
   row keeps input, button and Clear on one line, as the prototype had them. */
#ps-network-concept .comms-tools .ps-filterform{flex:1 1 auto;min-width:0}
#ps-network-concept .comms-tools .ps-filterform .ps-input{flex:1 1 220px;max-width:420px}

/* The inbox: a thread's row carries its type and unread marks beside the subject. */
#ps-network-concept .ps-row .ps-rowbody h3 .ps-tag{margin-left:6px;vertical-align:1px}
#ps-network-concept .ps-row>.ps-tag{margin-top:6px;flex:none}

/* A message: what the node recorded about it, each on its own quiet line.
   The receipts line is the history in one sentence; the external-content mark
   is the one thing on the page that is a warning rather than a status. */
#ps-network-concept .ps-message.untrusted{border-color:#e9c9a1}
#ps-network-concept .comms-untrusted{display:flex;gap:8px;align-items:center;margin:10px 0 0;padding:8px 11px;background:#fcf2df;color:#8a5a12;border-radius:5px;font-size:12px;font-weight:600}
#ps-network-concept .comms-untrusted svg{width:15px;height:15px;flex:none}
#ps-network-concept .comms-auth,#ps-network-concept .comms-attachments,#ps-network-concept .comms-refs,#ps-network-concept .comms-result,#ps-network-concept .comms-expires,#ps-network-concept .comms-receipts{font-size:12px;color:#5c6f88;margin:8px 0 0;overflow-wrap:anywhere}
#ps-network-concept .comms-result{color:#203750;font-weight:550}
#ps-network-concept .comms-failure{display:block;color:#a13024;font-size:12px;margin-top:6px;overflow-wrap:anywhere}
#ps-network-concept .comms-receipts{border-top:1px solid #e6ecf3;padding-top:8px;margin-top:12px}
#ps-network-concept .ps-message footer{margin-top:10px}
#ps-network-concept .comms-complete{margin:12px 0 0;padding:14px 16px;background:#f5f8fc;border-radius:6px}
#ps-network-concept .comms-help{display:block;color:#5c6f88;font-size:12px;margin:-6px 0 12px}
#ps-network-concept .comms-refs-pick{border:0;padding:0;margin:0 0 14px}
#ps-network-concept .comms-refs-pick legend{font-size:13px;font-weight:600;color:#203750;padding:0;margin-bottom:2px}
#ps-network-concept .comms-refs-pick .ps-check{font-weight:400;color:#203750}
#ps-network-concept .comms-refs-pick small{display:block;color:#5c6f88;font-size:12px;font-weight:400}

/* The channels tab: under each channel's row, what the node holds for it.
   Addresses are chips a person copies, not fields they edit. */
#ps-network-concept .comms-channel-body{padding:0 0 18px 32px}
#ps-network-concept .comms-channel-body .ps-section{padding-top:4px}
#ps-network-concept .comms-email-state{font-size:13px;color:#203750;display:grid;gap:4px;margin:8px 0}
#ps-network-concept .comms-addresses{list-style:none;padding:0;margin:8px 0}
#ps-network-concept .comms-addresses li{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid #eef2f6;font-size:13px}
#ps-network-concept .comms-addresses li:last-child{border-bottom:0}
#ps-network-concept .comms-addresses li>span:first-child{color:#5c6f88;min-width:120px}
#ps-network-concept .comms-addresses .ps-textbtn{min-height:38px}
#ps-network-concept .comms-tier{font-size:14px;color:#203750;margin:6px 0 12px}

/* Mima: the team's replies sit on the left, plainly labelled, and a quick
   guide reads as help text rather than as a message from anybody. */
#ps-network-concept .mima-bubble.team{align-self:flex-start;background:#f4f8fc;border-color:#d9e5f1}
#ps-network-concept .mima-bubble.team>small:first-child{margin:0 0 6px;color:#4b6f8d;font-weight:600}
#ps-network-concept .mima-bubble.guide{background:#fbfcfe}
#ps-network-concept .mima-bubble.guide a{color:#235f98;text-decoration:none;font-weight:600}
#ps-network-concept .mima-bubble.guide a:hover{text-decoration:underline}
#ps-network-concept .mima-topics button:hover{background:#eef4fa}
#ps-network-concept .mima-topics button:disabled{opacity:.6}

/* At phone width the drawer is a sheet from the bottom edge, as the prototype
   had it, rather than a 420px card pinned to a corner it cannot fit in. */
@media(max-width:600px){
  #ps-network-concept dialog.mima-dialog{inset:auto 0 0;width:100%;max-width:100%;height:calc(100dvh - 12px);max-height:calc(100dvh - 12px);border-radius:22px 22px 0 0}
  #ps-network-concept .mima-header{padding:17px 18px 15px}
  #ps-network-concept .mima-composer{padding-bottom:max(17px,env(safe-area-inset-bottom))}
  #ps-network-concept .ps-message footer{gap:16px}
  #ps-network-concept .comms-channel-body{padding-left:0}
  /* The core hides a table's header row in a 1px clip box at this width and
     labels every cell instead; the six headings of the sent and receipts
     tables still laid out side by side inside it, wider than the screen.
     Stacked, they stay in the box, and a screen reader still has them. */
  #ps-network-concept .comms-table .ps-table th{display:block;width:auto}
  #ps-network-concept .comms-addresses li>span:first-child{min-width:0;flex-basis:100%}
}