/* A responsive communicator casing around the existing, fully functional menus. */
#collectionPanel.collection-panel{
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--ui-safe-top) + 8px) calc(var(--ui-safe-right) + 10px) calc(var(--ui-safe-bottom) + 8px) calc(var(--ui-safe-left) + 10px);
  background:radial-gradient(ellipse at 50% 35%,#102b3b,#030d18 80%);overflow:hidden;
}
.communicator-device{
  position:relative;display:flex;flex-direction:column;isolation:isolate;min-height:0;
  width:100%;height:100%;max-width:740px;padding:0 8px;
  border:2px solid #6b736f;border-radius:32px;
  background:linear-gradient(120deg,#58635f 0%,#394745 12%,#283935 55%,#495450 100%);
  box-shadow:inset 0 0 0 3px #172f36,inset 0 0 0 5px #68756a55,0 14px 50px #0009;
}
.communicator-hardware{
  order:0;flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;
  height:32px;padding:0 8px;color:#b6c1ad;font:700 8px/1.2 ui-monospace,monospace;letter-spacing:.14em;
}
.device-screw{width:9px;height:9px;flex:none;border-radius:50%;border:1px solid #172c35;background:linear-gradient(135deg,#1b3039 41%,#93a096 44%,#93a096 55%,#1b3039 58%);box-shadow:0 1px 1px #a7b29b40;}
.device-signal{display:flex;align-items:flex-end;gap:3px;height:15px;margin-left:auto;}
.device-signal i{width:4px;height:5px;border-radius:1px;background:#d9b558;}
.device-signal i:nth-child(2){height:8px;background:#78908a;}
.device-signal i:nth-child(3){height:12px;background:#78908a;}
.device-signal b{font-size:19px;line-height:14px;color:#ec6767;margin-left:3px;}
#collectionPanel .collection-head{
  order:1;flex:none;position:relative;gap:8px;padding:14px 13px 12px;margin:0;
  border:1px solid #22596b;border-bottom:1px solid #245164;border-radius:23px 23px 0 0;
  background:radial-gradient(ellipse at 30% 0,#11475b,#071f32 85%);
}
#collectionPanel .collection-head>div{min-width:0;}
#collectionPanel .menu-eyebrow{font:700 8px/1.4 ui-monospace,monospace;letter-spacing:.16em;color:#6bb8b8;margin-bottom:6px;}
#collectionPanel .collection-head h2{color:#b9e9e5;font-size:22px;line-height:1.15;letter-spacing:-.025em;text-shadow:0 0 16px #5be6d018;margin-bottom:5px;}
#collectionPanel .collection-head .muted{color:#80a7b5;font-size:11px;}
#collectionPanel .menu-back{min-height:44px;padding:0 0 7px;color:#80dac8;}
#collectionPanel #closeCollection{flex:none;width:44px;height:44px;min-height:44px;border:1px solid #397b89;border-radius:13px;background:#092d3b;color:#9ed9d5;box-shadow:inset 0 1px 0 #5abeb52b;}
#collectionPanel .storage-tabs,#collectionPanel .menu-body{
  order:2;flex:1;min-height:0;max-width:none;width:100%;margin:0;overflow-y:auto;
  border:1px solid #22596b;border-top:0;border-radius:0 0 23px 23px;
  background:repeating-linear-gradient(0deg,#133e4d12 0px,#133e4d12 1px,transparent 1px,transparent 4px),radial-gradient(ellipse at 50% 0,#0c3547,#041927 90%);
  box-shadow:inset 0 -8px 22px #00122080;scrollbar-color:#2c6a74 #071f2e;
  padding:14px 12px 20px;overscroll-behavior:contain;
}
#collectionPanel .storage-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:10px;}
#collectionPanel .storage-tabs .storage-tab{
  display:flex;flex-direction:column;justify-content:center;gap:7px;min-width:0;min-height:120px;padding:14px 6px;border-radius:17px;
  border:1px solid #28616d;background:linear-gradient(140deg,#103c4e,#082636);color:#aee4df;
  box-shadow:inset 0 1px 0 #80dfd521,0 4px 10px #00111d35;font-size:15px;
}
#collectionPanel .storage-tabs .storage-tab:last-child{grid-column:1/-1;min-height:76px;flex-direction:row;gap:12px;}
#collectionPanel .storage-tab svg{width:32px;height:32px;color:#70cabb;fill:none;}
#collectionPanel .storage-tab small{color:#76a5b3;font:600 10px/1.4 ui-monospace,monospace;}
#collectionPanel .storage-tab:active{transform:scale(.98);background:#174858;}
#collectionPanel .storage-tab.active{border-color:#338172;background:linear-gradient(145deg,#124547,#092b38);}
#collectionPanel .collection-grid .collection-card,#collectionPanel .field-guide-card,#collectionPanel .bag-card,#collectionPanel .settings-card{background:linear-gradient(145deg,#0d3242,#092331);border-color:#275665;box-shadow:none;}
#collectionPanel input:not([type=checkbox]),#collectionPanel select{background:#061f2d;border-color:#285565;color:#bce0e1;}
#collectionPanel .collection-filter{background:#0b2b3b;border-color:#285565;color:#83aeb8;}
#collectionPanel .collection-filter[aria-pressed=true]{background:#174b50;border-color:#498d86;color:#b8e9d9;}
#collectionPanel .companion-summary{background:#0c343c;border-color:#296363;color:#8ccabc;}
.communicator-speaker{order:3;flex:none;height:42px;padding:7px 11px 9px;display:flex;align-items:center;gap:12px;}
.device-indicators{display:flex;align-items:center;gap:4px;}
.device-indicators i{width:6px;height:6px;background:#46c98c;border-radius:50%;border:1px solid #183d35;box-shadow:0 0 5px #44ce7f70;}
.device-indicators i:first-child{width:12px;height:12px;background:#6dd79a;}
.device-indicators i:last-child{background:#359894;box-shadow:none;}
.device-vents{flex:1;display:grid;gap:3px;max-width:120px;margin:0 auto;}
.device-vents i{height:3px;background:#0c222b;border-radius:10px;box-shadow:0 1px 0 #8b988142;}
.device-warning{font:900 20px/1 ui-monospace,monospace;color:#ec7870;text-shadow:0 1px 1px #361d1b;}
@media(max-width:350px){#collectionPanel.collection-panel{padding-left:6px;padding-right:6px;}.communicator-device{padding:0 6px;}#collectionPanel .menu-body,#collectionPanel .storage-tabs{padding-left:9px;padding-right:9px;}#collectionPanel .collection-head h2{font-size:20px;}}
@media(max-height:650px){.communicator-hardware{height:24px;}.communicator-speaker{height:28px;}#collectionPanel .collection-head{padding-top:8px;padding-bottom:8px;}#collectionPanel .storage-tabs .storage-tab{min-height:94px;}#collectionPanel .storage-tabs .storage-tab:last-child{min-height:58px;}}
@media(orientation:landscape) and (max-height:500px){#collectionPanel .storage-tabs{grid-template-columns:repeat(3,minmax(0,1fr));}#collectionPanel .storage-tabs .storage-tab:last-child{grid-column:auto;flex-direction:column;min-height:94px;}#collectionPanel .collection-head{padding:7px 12px;}#collectionPanel .collection-head .muted{display:none;}}

/* Illustrated blank faceplate; real controls occupy only its display aperture. */
.communicator-device{
  max-width:560px;padding:0;border:0;border-radius:22px;
  background:#061c2c url('/assets/ui/communicator-screen-v0.1.139.png') center / 100% 100% no-repeat;
  box-shadow:0 14px 50px #0009;
}
.communicator-hardware{flex:0 0 5.6%;height:auto;min-height:0;visibility:hidden;padding:0;}
.communicator-speaker{flex:0 0 16.7%;height:auto;min-height:0;visibility:hidden;padding:0;}
#collectionPanel .communicator-device>.collection-head{
  width:84%;margin:0 auto;padding:12px 10px 10px;background:none;border:0;border-radius:0;
}
#collectionPanel .communicator-device>.storage-tabs,#collectionPanel .communicator-device>.menu-body{
  width:84%;margin:0 auto;padding:10px 10px 16px;background:none;border:0;border-radius:0;box-shadow:none;
}
#collectionPanel .storage-tabs .storage-tab{
  min-height:112px;border:1px solid #367481;border-radius:15px;
  background:linear-gradient(140deg,#123d4dba,#072334ba);
  box-shadow:inset 0 1px 0 #83dcc52b,0 0 12px #38d7b50a;color:#aee4df;
}
#collectionPanel .storage-tabs .storage-tab.active{border-color:#4c9d90;background:linear-gradient(145deg,#194c4bba,#0b2d3aba);}
#collectionPanel .storage-tabs .storage-tab:active{background:#1d565b;box-shadow:0 0 14px #38d7b52b;}
#profileButton.communicator-storage-orb{
  width:68px;height:80px;min-height:44px;padding:0;overflow:visible;
  background:none!important;border:0!important;border-radius:0;box-shadow:none!important;
}
#profileButton.communicator-storage-orb img{filter:drop-shadow(0 3px 5px #00101da6);}
#profileButton.communicator-storage-orb:focus-visible{outline:2px solid #78cdbb;outline-offset:3px;}
@media(max-width:350px){#collectionPanel .communicator-device>.menu-body,#collectionPanel .communicator-device>.storage-tabs{padding-left:7px;padding-right:7px;}#collectionPanel .collection-head h2{font-size:18px;}}
@media(max-height:650px){#collectionPanel .communicator-device>.collection-head{padding-top:7px;padding-bottom:7px;}#collectionPanel .storage-tabs .storage-tab{min-height:90px;}#collectionPanel .storage-tabs .storage-tab:last-child{min-height:60px;}}