/* SlabX Phone Intake v0.1. Layout changes apply only through the phone connection. */
.slabx-phone-panel[hidden] { display: none !important; }
.slabx-phone-panel { margin: 14px 0; padding: 14px; border: 1px solid var(--l, #30435b); border-radius: 12px; background: var(--p2, #162130); }
.slabx-phone-panel h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.35; }
.slabx-phone-guide { margin: 0 0 12px; color: var(--m, #b2c1d0); font-size: 13px; line-height: 1.55; }
.slabx-phone-message { margin: 12px 0 0; padding: 11px 12px; border: 1px solid #318f69; border-radius: 8px; color: #c8f9de; background: #123526; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.slabx-phone-message.is-error, .slabx-phone-error { color: #ffdddd; background: #4a2028; border: 1px solid #a95a68; }
.slabx-phone-error { margin: 16px; padding: 14px; border-radius: 10px; }
.slabx-phone-controls, .slabx-phone-caption { display: none; }
.slabx-phone-file { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; opacity: 0; overflow: hidden; pointer-events: none; }
.slabx-phone-mode .slabx-phone-store { display: none !important; }
.slabx-phone-mode .slabx-phone-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.slabx-phone-mode .slabx-phone-controls .btn { min-height: 44px; font-size: 13px; line-height: 1.3; flex: 1 1 auto; }
.slabx-phone-mode .slabx-phone-controls .slabx-phone-take { flex-basis: 100%; }
.slabx-phone-mode .slabx-phone-caption { display: block; margin: 7px 0 4px; font-size: 12px; color: var(--m, #b2c1d0); }
.slabx-phone-mode #slabx-phone-panel .grid2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 0 !important; }
.slabx-phone-mode #slabx-phone-panel .imgprev { object-fit: contain !important; height: 230px; max-width: 100%; }
.slabx-phone-connected button:disabled { cursor: default; opacity: .58; }
.slabx-phone-connected :focus-visible { outline: 3px solid #89cfff; outline-offset: 3px; }
@media (max-width: 900px) {
  body.slabx-phone-connected { min-width: 0 !important; }
  .slabx-phone-connected .shell { display: block !important; grid-template-columns: minmax(0, 1fr) !important; min-width: 0 !important; width: 100% !important; margin: 0 !important; }
  .slabx-phone-connected aside { position: relative !important; top: auto !important; height: auto !important; min-height: 0 !important; width: 100% !important; padding: 12px !important; }
  .slabx-phone-connected aside .logo { margin: 2px 4px 10px; }
  .slabx-phone-connected nav { display: flex !important; flex-wrap: nowrap !important; gap: 7px; overflow-x: auto; padding-bottom: 6px; }
  .slabx-phone-connected nav button { flex: 0 0 auto; width: auto !important; min-height: 44px; white-space: nowrap; margin: 0; padding: 10px 12px; }
  .slabx-phone-connected main { min-width: 0 !important; width: 100% !important; padding: 12px !important; }
  .slabx-phone-connected .top { flex-wrap: wrap; gap: 10px; }
  .slabx-phone-connected .top h1 { font-size: 25px; overflow-wrap: anywhere; }
  .slabx-phone-connected .card { min-width: 0; padding: 13px; }
  .slabx-phone-connected .fields { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .slabx-phone-connected .grid2, .slabx-phone-connected .grid3, .slabx-phone-connected .grid { grid-template-columns: minmax(0, 1fr) !important; }
  .slabx-phone-connected .cards, .slabx-phone-connected .heat { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .slabx-phone-connected input, .slabx-phone-connected select, .slabx-phone-connected textarea { font-size: 16px; min-height: 44px; min-width: 0; }
  .slabx-phone-connected .btn { min-height: 44px; }
  .slabx-phone-connected .actions { flex-wrap: wrap; }
  .slabx-phone-connected .actions #saveSlabBtn { width: 100%; min-height: 50px; }
  .slabx-phone-connected .login { width: auto; max-width: 430px; margin: 32px 14px; }
  .slabx-phone-connected .slx-graded-ref-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .slabx-phone-connected .slx-graded-ref-head { flex-wrap: wrap; }
  .slabx-phone-connected .slx-graded-ref-item { min-width: 0; }
  .slabx-phone-connected .slx-graded-ref-meta { overflow-wrap: anywhere; }
}
@media (max-width: 520px) {
  .slabx-phone-connected .fields { grid-template-columns: minmax(0, 1fr) !important; }
  .slabx-phone-mode #slabx-phone-panel .grid2 { grid-template-columns: minmax(0, 1fr) !important; }
  .slabx-phone-mode #slabx-phone-panel .imgprev { height: 240px; }
  .slabx-phone-panel { padding: 12px; }
}