/* Credits: 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.

   The core's stylesheet already carries the prototype's bill-* classes; what is
   here is the part of the billing area it did not draw (the congestion example
   on the Priority tab) and the few pieces this section adds: the accrual line
   on the wallet, the ending date and cancel control on the current tier, and
   the history rows being links to their receipts. */

/* The wallet's accrual line sits between "Ready for..." and the actions. */
#ps-network-concept .bill-wallet>p.bill-accrual{display:flex;align-items:flex-start;gap:6px;margin:-8px 0 18px;font-size:12px;color:#6b7c8e}
#ps-network-concept .bill-accrual svg{width:14px;height:14px;flex:none;margin-top:3px;color:#d26b27}

/* The congestion example: a labelled local example, from the prototype. */
#ps-network-concept .bill-load-demo{border:1px solid #dce5ee;border-radius:14px;padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
#ps-network-concept .bill-load-demo h3{font-size:15px;margin:0 0 7px}
#ps-network-concept .bill-load-demo p{font-size:12px;line-height:1.6;color:#718497;margin:0}
#ps-network-concept .bill-load-demo label,#ps-network-concept .bill-history-head label{font-size:11px;color:#63798b;min-width:0}
#ps-network-concept .bill-load-demo select{width:100%;margin-top:6px}
#ps-network-concept .bill-load-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;border-top:1px solid #e4eaf0;padding-top:20px}
#ps-network-concept .bill-load-grid>div{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:12px}

/* The current tier's card: when it is ending, the date and a way to keep it;
   otherwise the way to end it. Both sit under "Current priority". */
#ps-network-concept .bill-plan-end{display:block;text-align:center;font-size:11px;color:#8c4e24;margin:-6px 0 10px}
#ps-network-concept .bill-plan .bill-plan-cancel{margin-top:6px;font-size:11px;min-height:38px;color:#5c748a}

/* The review pages: a "you are on this tier" line where the button would be. */
#ps-network-concept .bill-checkout>.bill-current{width:100%;min-height:48px;border:1px solid #e9dbc9;border-radius:8px;background:#fff}
#ps-network-concept .bill-checkout>.ps-btn:disabled{opacity:.55;cursor:not-allowed}

/* A history row's title is the link to its receipt; it reads as a heading. */
#ps-network-concept .bill-history h3 .bill-entry{color:inherit;text-decoration:none}
#ps-network-concept .bill-history h3 .bill-entry:hover{text-decoration:underline}

/* The three worked examples on Top up are plain rows. */
#ps-network-concept .bill-examples .ps-row{padding:14px 0}

@media(max-width:850px){
  #ps-network-concept .bill-load-demo{grid-template-columns:1fr;padding:18px}
  #ps-network-concept .bill-load-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  #ps-network-concept .bill-wallet>p.bill-accrual{margin-top:-4px}
}