/* Three presentation alternatives; no changes to arcnet.html. */
.concept-menu .header-label{display:flex;align-items:baseline;gap:8px;line-height:1.4}.concept-menu .header-label strong{font-weight:600;color:inherit;white-space:nowrap}.concept-menu .header-divider{color:#a5bbd4}
.modem-tools{display:grid;grid-template-columns:auto 170px;grid-template-rows:38px 17px;align-items:center;gap:4px 18px;flex:none}.awg-connection{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px;white-space:nowrap}.connection-dot{width:6px;height:6px;background:#a8b7c8;border-radius:50%;flex:none}.awg-connection[data-tone=connected]{color:var(--green)}.awg-connection[data-tone=connected] .connection-dot{background:var(--green)}.awg-connection[data-tone=warning]{color:var(--amber)}.awg-connection[data-tone=warning] .connection-dot{background:#c5903c}.reboot-button{display:flex;align-items:center;justify-content:center;gap:9px;height:38px;width:170px;padding:8px 12px;border:1px solid #b6cbe3;border-radius:4px;background:#fff;color:var(--blue);font-size:12px;white-space:nowrap}.reboot-button:hover:not(:disabled){border-color:var(--blue);background:#f1f8ff}.reboot-button[aria-busy=true]{opacity:1;background:#f5faff;cursor:progress}.reboot-button #reboot-symbol{display:flex;align-items:center;justify-content:center;width:18px;height:18px;flex:none}.reboot-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.reboot-feedback{grid-column:1/-1;text-align:right;font-size:10px;line-height:17px;color:var(--muted)}.reboot-feedback[data-tone=warning]{color:var(--amber)}
@media(max-width:760px){.concept-menu .modem-tools{align-self:stretch;grid-template-columns:minmax(0,1fr) 154px;column-gap:10px}.concept-menu .reboot-button{width:154px;font-size:11px}.concept-menu .awg-connection{font-size:10px;white-space:normal}}
.awg-connection .connection-dot{width:12px;height:12px;border:1.5px solid currentColor;position:relative}.awg-connection[data-tone] .connection-dot{background:transparent}.awg-connection[data-tone=connected] .connection-dot::after{content:"";position:absolute;inset:2px;border-radius:50%;background:currentColor}.awg-connection[data-tone=warning] .connection-dot::after{content:"!";position:absolute;inset:0;text-align:center;font-size:8px;font-weight:600;line-height:9px}.awg-connection[data-tone=pending] .connection-dot{border-right-color:transparent;animation:connection-spin 1.2s linear infinite}@keyframes connection-spin{to{transform:rotate(360deg)}}
@media(max-width:760px){.concept.concept-menu .header-inner{flex-wrap:wrap;padding-block:17px 14px;row-gap:12px}.concept-menu .header-label{flex-basis:100%;padding-left:0;border-left:0;font-size:12px;gap:6px;transform:none}}
.concept-3 .header-inner>.profile-trigger{margin-left:auto}.concept-3 .intro-title h1{max-width:none}
.concept .loader-more:empty{visibility:hidden;overflow:hidden}
.concept-menu .loader-menu .loader-service{border-top:1px solid var(--line);border-radius:0;margin-top:4px}
.concept-menu .intro-title h1{max-width:none}.concept-menu .loader-menu{min-width:218px;padding:6px}.concept-menu .loader-menu>button,.concept-menu .loader-menu>a,.concept-menu .loader-menu>.control-wrap>button{display:block;width:100%;min-height:39px;padding:10px 12px;background:none;border:0;border-radius:3px;text-decoration:none;text-align:left;font-size:12px;font-weight:400;line-height:19px;color:var(--navy)}.concept-menu .loader-menu>button:hover,.concept-menu .loader-menu>a:hover{background:#eff6fc;color:var(--blue)}.concept-menu .loader-menu .row-button.remove{color:#a54545;border-top:1px solid var(--line);border-radius:0;margin-top:4px}.concept-menu .concept-modem:hover img{transform:none}
.concept .intro-context{margin-top:9px}.concept .intro{margin:25px 0 24px}
.concept-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:21px}.concept-topbar .demo-notice{margin:0}.concept-nav{display:flex;gap:6px;flex:none}.concept-nav a{font-size:11px;color:var(--muted);padding:8px 10px;text-decoration:none;border:1px solid transparent;border-radius:4px}.concept-nav a[aria-current]{color:var(--blue);border-color:#c9dced;background:#f5faff}.concept-nav a:hover{color:var(--blue)}
.concept-modem{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;gap:0;text-decoration:none;color:var(--muted)}.concept-modem img{display:block;width:182px;height:56px;transition:transform .2s ease}.concept-modem>span{font-size:10px;line-height:16px;letter-spacing:.015em}.concept-modem>span>span{color:var(--blue);margin-left:5px}.concept-modem:hover img{transform:translateX(3px)}.concept-modem:hover{color:var(--blue)}.concept .header-inner>.concept-modem{margin-left:auto;padding:4px 0}
.concept .loader{display:grid;grid-template-columns:minmax(190px,1fr) minmax(230px,1.5fr) auto;align-items:center;gap:24px;height:96px;min-height:96px;padding:16px 18px;border-color:var(--line);border-radius:0;background:#fbfdff}.concept .loader-title{grid-column:auto;grid-row:auto;align-self:center;padding:0;gap:7px}.concept .loader-title h2{font-size:18px}.concept .loader-status{display:flex;align-items:center;gap:7px;height:18px;min-height:18px;font-size:12px;line-height:18px;white-space:nowrap;color:var(--muted)}.concept .loader-status.running{color:var(--green)}.concept .loader-status.warning{color:var(--amber)}.concept .loader-status.pending{color:var(--blue)}.concept .loader-status .hourglass{width:10px;height:14px;vertical-align:middle}.concept .loader-detail{grid-column:auto;grid-row:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;border:0;padding:0}.concept #clock-state{font-size:12px;white-space:nowrap;line-height:18px}.concept .loader-channel-label{font-size:10px}.concept .loader-actions{grid-column:auto;grid-row:auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0;min-width:0;flex-wrap:nowrap;position:relative}.concept .loader-primary{min-width:122px;min-height:40px;padding:9px 16px;font-size:12px}.concept .loader-more{position:relative;width:22px;flex:none}.concept .loader-more summary{display:flex;align-items:center;justify-content:center;list-style:none;cursor:pointer;color:var(--muted);font-size:23px;height:40px;width:22px}.concept .loader-more summary::-webkit-details-marker{display:none}.concept .loader-more summary:hover{color:var(--blue)}.concept .loader-menu{position:absolute;right:0;top:44px;background:white;border:1px solid var(--line);border-radius:5px;padding:7px;box-shadow:0 6px 20px #041b4915;z-index:3;white-space:nowrap}.concept .loader-menu .row-button.remove{min-width:112px;text-decoration:none;text-align:left;color:#a54545}
.concept-2 .loader{grid-template-columns:minmax(160px,1fr) minmax(220px,1.4fr) 166px auto}.concept-2 .loader .concept-modem img{width:166px;height:51px}.concept-2 .loader .concept-modem>span{font-size:9px;line-height:13px}
@media(min-width:761px) and (max-width:1050px){.concept .loader{grid-template-columns:minmax(130px,1fr) minmax(200px,1.5fr) auto;gap:16px;padding-inline:14px}.concept-2 .loader{grid-template-columns:minmax(120px,1fr) minmax(200px,1.4fr) 114px auto;gap:12px}.concept-2 .loader .concept-modem img{width:114px;height:36px}.concept #clock-state{font-size:11px}.concept .loader-primary{min-width:104px;padding-inline:12px}}
@media(max-width:760px){
  .concept .header-inner{flex-wrap:nowrap;gap:8px;min-height:82px;padding-block:9px}.concept .header-inner>.concept-modem{padding:0}.concept .header-inner>.concept-modem img{width:100px;height:32px}.concept .header-inner>.concept-modem>span{font-size:8px;line-height:14px}.concept .intro{margin-top:23px}
  .concept-topbar{align-items:flex-start;flex-direction:column;gap:11px;margin-top:16px}.concept-topbar .demo-notice{font-size:10px}.concept-nav{align-self:flex-end}.concept-nav a{padding:5px 9px;font-size:10px}
  .concept .loader{grid-template-columns:minmax(0,1fr) 152px;grid-template-rows:44px 23px;gap:12px 10px;height:114px;min-height:114px;padding:16px 12px}.concept .loader-title{grid-column:1;grid-row:1}.concept .loader-title h2{font-size:18px}.concept .loader-status{font-size:11px}.concept .loader-actions{grid-column:2;grid-row:1;justify-content:flex-end}.concept .loader-primary{min-width:122px;min-height:40px;font-size:12px}.concept .loader-detail{grid-column:1/-1;grid-row:2;flex-direction:row;align-items:center;justify-content:space-between;gap:7px}.concept #clock-state{font-size:10px}.concept .loader-channel-label{font-size:9px}
  .concept-2 .loader{grid-template-rows:44px 40px;gap:12px 10px;height:136px;min-height:136px}.concept-2 .loader .loader-detail{grid-column:1;grid-row:2;flex-direction:column;align-items:flex-start;gap:2px}.concept-2 .loader .concept-modem{grid-column:2;grid-row:2;justify-self:center}.concept-2 .loader .concept-modem img{width:110px;height:34px}.concept-2 .loader .concept-modem>span{display:none}.concept-2 #clock-state{white-space:normal;max-width:150px;font-size:10px;line-height:14px}
}
@media(max-width:360px){.concept .header-inner{gap:0}.concept .header-inner>.concept-modem img{width:76px;height:26px}.concept .header-inner>.concept-modem>span{font-size:7px;line-height:12px}.concept .loader{padding-inline:10px;grid-template-columns:minmax(0,1fr) 133px;column-gap:5px}.concept .loader-primary{min-width:108px;padding-inline:10px}.concept .loader-more{width:17px}.concept .loader-more summary{width:17px}.concept #clock-state{font-size:9px}.concept .loader-channel-label{font-size:8px}.concept .loader-title h2{font-size:17px}.concept-2 #clock-state{max-width:118px}}
@media(max-width:760px){.concept-nav{gap:2px;flex-wrap:wrap;justify-content:flex-end}.concept-nav a{padding:5px 7px;font-size:9px}.concept-3 .header-inner>.profile-trigger{padding:7px 9px}.concept-3 .header-inner>.profile-trigger svg{display:none}.concept-3 .header-inner>.profile-trigger small{font-size:7px}}
@media(max-width:360px){.concept-3 .header-inner>.profile-trigger{padding-inline:6px;min-width:76px;font-size:11px}.concept-3 .header-inner>.profile-trigger small{font-size:6.5px}}
@media(prefers-reduced-motion:reduce){.concept-modem img{transition:none}.concept-modem:hover img{transform:none}}
/* Approved two-by-two composition from the user's screenshot. */
.concept-menu .loader{grid-template-columns:minmax(0,1fr) 190px;grid-template-rows:44px 44px;gap:12px 24px;height:136px;min-height:136px;padding:16px 18px}.concept-menu .loader-title{grid-column:1;grid-row:1}.concept-menu .loader-actions{grid-column:2;grid-row:1;justify-content:center}.concept-menu .loader-detail{grid-column:1;grid-row:2;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}.concept-menu .loader .concept-modem{grid-column:2;grid-row:2;justify-self:center}.concept-menu .loader .concept-modem img{width:140px;height:43px}.concept-menu .loader .concept-modem>span{display:none}.concept-menu #clock-state{max-width:none;white-space:nowrap;font-size:12px}
@media(max-width:760px){.concept-menu .loader{grid-template-columns:minmax(0,1fr) 152px;column-gap:10px;padding:16px 12px}.concept-menu .loader .concept-modem img{width:110px;height:34px}.concept-menu #clock-state{white-space:normal;font-size:10px;max-width:170px}}
@media(max-width:360px){.concept-menu .loader{grid-template-columns:minmax(0,1fr) 133px;column-gap:5px;padding-inline:10px}.concept-menu #clock-state{font-size:9px;max-width:118px}}
/* Wide view shares the exact component columns; narrow view keeps two rows. */
.concept .loader .loader-primary{height:36px;min-height:36px;min-width:110px;padding:8px 12px;font-size:12px;font-weight:400;line-height:18px;border:1px solid #b6cbe3;border-radius:4px}
@media(min-width:761px){
  .concept-menu .loader{grid-template-columns:minmax(230px,1.45fr) minmax(140px,.8fr) minmax(155px,.85fr) minmax(250px,1.15fr);grid-template-rows:auto;gap:20px;height:112px;min-height:112px;padding:16px 18px}
  .concept-menu .loader-title{grid-column:1;grid-row:1}.concept-menu .loader-detail{grid-column:2;grid-row:1}.concept-menu .loader .concept-modem{grid-column:3;grid-row:1;justify-self:start;align-self:center;width:146px;height:62px}.concept-menu .loader .concept-modem img{width:146px;height:45px}.concept-menu .loader-actions{grid-column:4;grid-row:1;justify-content:flex-end;gap:11px}.concept-menu .loader-more{width:73px}.concept-menu .loader-more summary{width:73px;height:36px}.concept-menu .loader-menu{top:40px}.concept-menu #clock-state{font-size:12px;white-space:normal;line-height:18px}
}
@media(min-width:761px) and (max-width:1100px){.concept-menu .loader{grid-template-columns:minmax(170px,1.2fr) minmax(115px,.8fr) minmax(120px,.8fr) minmax(200px,1.15fr);gap:14px}.concept .loader .loader-primary{min-width:100px;padding:8px}.concept-menu .loader-actions{gap:4px}}
@media(max-width:760px){.concept .loader .loader-primary{min-width:104px;height:40px;min-height:40px;padding:7px;font-size:12px}.concept-menu .loader-actions{gap:12px}}
/* On wide screens the reboot belongs to the title row; mobile keeps its toolbar. */
@media(min-width:1101px){
  .concept-menu main{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px}
  .concept-menu .concept-topbar{display:contents}
  .concept-menu .concept-topbar>.demo-notice{grid-column:1/-1;grid-row:1;margin-top:21px;justify-self:start}
  .concept-menu .modem-tools{grid-column:2;grid-row:2;align-self:center}
  .concept-menu .intro{grid-column:1;grid-row:2}
  .concept-menu main>:not(.concept-topbar):not(.intro){grid-column:1/-1}
}