/* The phone look shared by the app builder preview, the Branding preview and the assignment page's Mobile view.
   It is the reference for the MAUI app (PT-00008): header in the brand colour, pill tabs, white cards, a big Submit.
   Brand colours come in as --brand-* custom properties (Company > Branding). */
.phone, .view-mobile .rec-device { width: 380px; max-width: 100%; background: #10141f; border: 1px solid #3a4459; border-radius: 2.25rem; padding: .75rem; box-shadow: 0 20px 50px rgba(0,0,0,.45); position: relative; }
.phone-notch, .view-mobile .rec-device-notch { width: 90px; height: 6px; border-radius: 3px; background: #2c3446; margin: .25rem auto .6rem; }
.phone-screen { background: #f4f5f8; color: #1d2433; border-radius: 1.6rem; overflow: hidden; display: flex; flex-direction: column; min-height: 620px;
  /* Company branding (Company > Branding); set from the branding document by JS. */
  --brand-primary: #1D2433; --brand-on-primary: #FFFFFF; --brand-accent: #6B5CFF; --brand-on-accent: #FFFFFF; }
.phone-header { background: var(--brand-primary); color: var(--brand-on-primary); padding: .9rem 1rem .75rem; display: flex; align-items: center; gap: .65rem; }
.phone-logo { width: 2.5rem; height: 2.5rem; flex: none; border-radius: .6rem; background: #ffffff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.phone-logo img { max-width: 88%; max-height: 88%; object-fit: contain; }
.phone-logo.d-none + div { padding-left: 0; }
.phone-company { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: inherit; opacity: .8; }
.phone-appname { font-size: 1.15rem; font-weight: 800; color: inherit; line-height: 1.2; }
.phone-tabs-wrap { display: flex; align-items: center; gap: .25rem; background: #ffffff; padding: .4rem .5rem; border-bottom: 1px solid #e3e6ee; }
.phone-tabs { display: flex; gap: .25rem; overflow-x: auto; flex: 1; scrollbar-width: thin; }
.phone-tab { white-space: nowrap; border: 1px solid transparent; background: transparent; color: #5b6478; font-size: .8rem; font-weight: 600; padding: .3rem .65rem; border-radius: 999px; cursor: pointer; }
.phone-tab.active { background: var(--brand-primary); color: var(--brand-on-primary); }
.phone-body { flex: 1; padding: .75rem; display: flex; flex-direction: column; gap: .5rem; min-height: 380px; }
.phone-footer { padding: .75rem; background: #ffffff; border-top: 1px solid #e3e6ee; }
.phone-submit { background: var(--brand-primary); color: var(--brand-on-primary); text-align: center; font-weight: 700; border-radius: .6rem; padding: .6rem; font-size: .9rem; }
.phone-tabs { scrollbar-width: none; }
.phone-tabs::-webkit-scrollbar { display: none; }