/* The model picker (model-picker.js): a search field over a rail of providers and the models of the
   one picked. A popover on a desktop, a bottom sheet on a phone. */

.popover.mp-pop { display: flex; flex-direction: column; width: min(650px, calc(100vw - 16px)); height: 468px; padding: 0; overflow: hidden; }
.mp { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* The search field: no box of its own, a hairline under it. */
.mp-search { flex: none; width: 100%; height: 46px; padding: 0 16px; border-bottom: 1px solid var(--border-3); font-size: 15px; line-height: 22px; color: var(--text); }

.mp-body { flex: 1 1 auto; min-height: 0; display: flex; }

/* The rail: one mark per provider, the star for Auto first. */
.mp-rail { flex: none; width: 56px; padding: 8px 0; display: flex; flex-direction: column; align-items: center; gap: 4px; border-right: 1px solid var(--divider); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.mp-rail::-webkit-scrollbar { display: none; }
.mp-rail-btn { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--text-2); }
.mp-rail-btn:hover { background: var(--fill); color: var(--text); }
.mp-rail-btn[aria-selected="true"] { background: var(--fill-hover); color: var(--text); }
.mp-rail-btn:focus-visible { outline-offset: -2px; }
.mp-rail-btn[data-ready="false"] > * { opacity: .4; }

.mp-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* Whose account, and how much of its limit is left. */
.mp-head { flex: none; padding: 12px 16px 10px; border-bottom: 1px solid var(--border-3); }
.mp-pop .mp-title { min-width: 0; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-usage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(36px, auto) minmax(44px, auto); column-gap: 16px; row-gap: 2px; align-items: center; }
.mp-col-head { font-size: 12px; line-height: 16px; color: var(--text-3); white-space: nowrap; }
.mp-account { min-width: 0; font-size: 13px; line-height: 20px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-head > .mp-account { margin-top: 2px; }
.mp-left { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-col { font-size: 13px; line-height: 20px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Seven bars, lit like a battery, in the text's own grey. */
.mp-meter { display: inline-flex; align-items: center; gap: 2px; }
.mp-bar { width: 3px; height: 10px; border-radius: 1.5px; background: var(--border-2); }
.mp-bar[data-on="true"] { background: var(--text-2); }

/* Why a provider is not ready, and the way in. */
.mp-status { display: flex; align-items: center; gap: 10px; min-height: 26px; margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--text-3); }
.mp-status-text { flex: 1 1 auto; min-width: 0; }
.mp-signin { flex: none; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--fill); font-size: 12px; line-height: 16px; color: var(--text); white-space: nowrap; }
.mp-signin:hover { background: var(--fill-hover); }

/* The models. */
/* The gap above the first row is an element, not padding, so a heading that sticks sits flush with the top. */
.mp-list { position: relative; flex: 1 1 auto; min-height: 0; padding: 0 6px 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.mp-list::before { content: ""; display: block; height: 6px; }
.mp-row { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border-radius: 8px; font-size: 15px; line-height: 22px; color: var(--text); white-space: nowrap; }
.mp-row[data-active="true"], .mp-row:focus-visible, .mp-row:active { background: var(--fill); outline: none; }
.mp-row-mark { flex: none; display: grid; place-items: center; width: 16px; height: 16px; color: var(--text-2); }
.mp-row-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mp-row-hint { flex: 0 1 auto; min-width: 0; max-width: 50%; font-size: 13px; line-height: 18px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
.mp-row-check { flex: none; display: grid; color: var(--text); }

.mp-family, .mp-group-head { position: sticky; top: 0; z-index: 1; padding: 10px 10px 4px; background: var(--menu); font-size: 12px; line-height: 16px; color: var(--text-3); }
.mp-group-head { display: flex; align-items: baseline; gap: 8px; font-weight: 500; }
.mp-group-label { flex: none; }
.mp-group-note { min-width: 0; font-weight: 420; color: var(--text-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-desc { padding: 8px 10px 10px; font-size: 13px; line-height: 19px; color: var(--text-2); }
.mp-empty { padding: 14px 10px; font-size: 13px; line-height: 19px; color: var(--text-3); }

/* A phone: a sheet across the bottom, the page dimmed behind it, rows a finger can hit. The sheet
   sits on the keyboard when one is up (--mp-lift, set by the script where the keyboard covers the page). */
@media (max-width: 767px) {
  .popover.mp-pop {
    left: 0 !important;
    top: auto !important;
    bottom: var(--mp-lift, 0px);
    width: 100vw;
    height: min(560px, calc(100vh - var(--mp-lift, 0px) - var(--safe-top) - 24px));
    height: min(560px, calc(100dvh - var(--mp-lift, 0px) - var(--safe-top) - 24px));
    max-height: none !important;
    padding-bottom: var(--safe-bottom);
    border-radius: 12px 12px 0 0;
    box-shadow: var(--shadow-menu), 0 0 0 100vmax var(--overlay);
  }
  .mp-search { height: 52px; font-size: 16px; }
  .mp-rail { padding: 6px 0; gap: 2px; }
  .mp-rail-btn { width: 44px; height: 44px; }
  .mp-head { padding: 12px 12px 10px; }
  .mp-usage { column-gap: 12px; }
  .mp-list { padding: 0 4px 6px; }
  .mp-row { height: 44px; }
  .mp-signin { height: 36px; padding: 0 14px; border-radius: 18px; font-size: 13px; }
}