:root {
--chrome: #C0C0C0;
--chrome-mid:#DFDFDF;
--chrome-dark:#808080;
--chrome-deep:#404040;
--paper: #F5F5F5;
--ink:#000;
--link:#0000CC;
--link-visited:#551A8B;
--accent:#008080;
--ok:#00CC33;
--warn:#CC9900;
--err:#CC3333;
}
/* 90s-style tiling background */
html, body { height: 100% }
body {
    margin: 0;
    color: var(--ink);
    background: repeating-linear-gradient(135deg, #ECECEC 0 10px, #F6F6F6 10px 20px);
    font: 14px/1.4 Verdana, Geneva, Arial, Helvetica, sans-serif;
}
a { color: var(--ink); text-decoration: none !important; }
a:visited { color: var(--ink) }
a:hover { text-decoration: none }
/* Centered 800-era frame */
.wrap {
    max-width: 860px;
    min-width: 740px;
    margin: 24px auto;
    padding: 6px;
    background: var(--chrome);
    border: 2px solid var(--chrome-dark);
    box-shadow: 0 0 0 2px var(--chrome-mid) inset, 0 0 0 4px #FFF inset;
}
/* Top title bar */
.titlebar {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding: 6px 8px;
    background: linear-gradient(#E6E6E6, #C9C9C9);
    border: 2px solid;
    border-color: #FFF var(--chrome-dark) var(--chrome-dark) #FFF;
    margin-bottom: 6px;
    gap: 8px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    letter-spacing: 0.5px;
}
	.brand img {float:center; margin:0px;width:76px;}
.moniker { font-size: 8px; color: #000; text-transform: uppercase; line-height: 10px;}
.moniker a { text-decoration: none; color: black;}
.contacts { font-size: 12px; text-align: right; }
.contacts a { text-decoration: none; border-bottom: 1px dotted #333 }
.contacts a:hover { border-bottom-color: transparent }
/* Header mast */
.mast {
    border: 2px solid;
    border-color: #FFF var(--chrome-dark) var(--chrome-dark) #FFF;
    background: repeating-linear-gradient(180deg, #DCDCDC 0 2px, #D7D7D7 2px 4px);
    padding: 2px 14px;
    margin-bottom: 2px;
}
.mast h1 { margin: 0; font-size: 23px; letter-spacing: 0.2px; text-shadow: 1px 1px #FFF; }
.mast .sub { margin-top: 2px; font-size: 12px; color: #222; text-align: center; }
.mast .subalt { margin-top: 2px; font-size: 12px; color: #222; text-align: center; }
/* Faux LED strip + ticker */
.statusbar {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 2px solid;
    border-color: #FFF var(--chrome-dark) var(--chrome-dark) #FFF;
    padding: 4px 6px;
    background: #D7D7D7;
    margin-bottom: 6px;
}
/* CSS — Starlink link LEDs */
/* Base LED look */
.leds { display: flex; gap: 8px; align-items: center; padding-right: 10px; border-right: 2px solid var(--chrome-dark); }
.led {
  width: 12px; height: 12px; border-radius: 50%;
  box-shadow: 0 0 0 1px #404040 inset, 0 0 4px rgba(0,0,0,.35);
  background: #999; /* default */
}
.led-wrap { display:flex; align-items:center; gap:6px; font-size:11px; color:#000 }

/* Color scale (best → worst): blue > green > yellow > orange > red */
.led.blue   { background: #1E90FF; }
.led.green  { background: #00C853; }
.led.yellow { background: #FFC400; }
.led.orange { background: #FF6D00; }
.led.red    { background: #D50000; }

/* Animation scale (best steady → worst fast blink) */
@keyframes fade-slow  { 0%,100% { filter: brightness(1.0) } 50% { filter: brightness(1.25) } }
@keyframes fade-fast  { 0%,100% { filter: brightness(1.0) } 50% { filter: brightness(1.4) } }
@keyframes blink-slow { 0%,49% { opacity: 1 } 50%,100% { opacity: .35 } }
@keyframes blink-fast { 0%,49% { opacity: 1 } 50%,100% { opacity: .15 } }

/* Intensity mapping (set by PHP as classes on .led) */
.anim-steady     { animation: none }
.anim-fade-slow  { animation: fade-slow 3.0s ease-in-out infinite }
.anim-fade-fast  { animation: fade-fast 1.6s ease-in-out infinite }
.anim-blink      { animation: blink-slow 1.2s steps(1) infinite }
.anim-blink-fast { animation: blink-fast 0.7s steps(1) infinite }

/* Tiny percentage text */
.led-percent { font-family: "Lucida Console", Monaco, monospace;line-height: 10px; font-size: 10px; }
.right { text-align: right; }
.left { text-align: left; }
.center { text-align: center; }
.ticker {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    border-left: 2px solid var(--chrome-dark);
    border-right: 2px solid var(--chrome-dark);
    padding-left: 8px;
    font-size: 14px;
    white-space: nowrap;
    color: #000;
    text-decoration: none;
    position: relative;
	letter-spacing: 0.25px;
}
.ticker a { text-decoration: none; font-weight: bold; color: black; }
.ticker-track { display: flex; flex-wrap: nowrap; white-space: nowrap; will-change: transform; }
.ticker-seg { display: inline-block; white-space: nowrap; }
.ticker-seg a { color: inherit; text-decoration: none; }
.sep { margin: 0 0.6em; }
/* Two-column body (nav + main) */
.body {
    display: grid;
    grid-template-columns: 172px 1fr;
    gap: 6px;
}
/* Side nav */
.side {
    border: 2px solid;
    border-color: #FFF var(--chrome-dark) var(--chrome-dark) #FFF;
    background: #DCDCDC;
    padding: 8px;
}
.navhead {
    font-weight: bold;
    margin-bottom: 6px;
    font-size: 12px;
    color: #000;
    background: #EAEAEA;
    padding: 4px 6px;
    border: 2px solid;
    border-color: #FFF var(--chrome-dark) var(--chrome-dark) #FFF;
}
.navtitle {
    font-weight: bold;
    margin-bottom: 4px;
    font-size: 12px;
    color: #000;
    background: #EAEAEA;
    padding: 2px 2px;
	text-align: center;
    border: 2px solid;
    border-color: #FFF var(--chrome-dark) var(--chrome-dark) #FFF;
}
.nav a {
    display: block;
    background: #CFCFCF;
    color: #000;
    text-decoration: none;
    padding: 4px 6px;
    margin: 4px 0;
    border: 2px solid;
    border-color: #FFF var(--chrome-deep) var(--chrome-deep) #FFF;
    font-size: 12px;
    letter-spacing: .2px;
}
.nav a:hover { background: #E6E6E6; }
.nav a.active {
    background: #BFBFBF;
    outline: 1px dashed var(--chrome-deep);
    outline-offset: -4px;
}
.dial {
    margin-top: 8px;
    padding: 6px;
    border: 2px solid;
    border-color: #FFF var(--chrome-dark) var(--chrome-dark) #FFF;
    background: #E8E8E8;
    font-size: 11px;
}
.proj {
    margin-top: 1px;
    padding: 1px;
    border: 2px solid;
    border-color: #FFF var(--chrome-dark) var(--chrome-dark) #FFF;
    background: #E8E8E8;
    font-size: 11px;
}
.dial .row { display: flex; justify-content: space-between; }
.proj .row { display: flex; align-items: flex-start; }
.proj .row .l { flex: 0 0 84px; /* tight to content or set a fixed width e.g., 120px */ margin-right: 8px; }
.proj .row .r { flex: 1 1 auto; min-width: 0; }
.rowtop { text-align: center; font-size: 12px; }
.dial .val { font-family: "Lucida Console", Monaco, monospace; }
/* Main panel */
.main {
    border: 2px solid;
    border-color: #FFF var(--chrome-dark) var(--chrome-dark) #FFF;
    background: #E2E2E2;
    padding: 10px;
    min-height: 340px;
}
.hero {
    border: 2px solid;
    border-color: #FFF var(--chrome-dark) var(--chrome-dark) #FFF;
    background: #F3F3F3;
    padding: 10px;
    min-height: 93%;
}
.hero .line1 {
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 12px;
    color: #000;
    white-space: pre;
    overflow: auto;
}
.hero .tag { margin-top: 6px; font-size: 13px; color: #111; }
/* Grid of routes (big 90s buttons) */
.routes {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    text-align: center;
}
.route {
    text-decoration: none;
    color: #000;
    background: #D8D8D8;
    border: 2px solid;
    border-color: #FFF var(--chrome-deep) var(--chrome-deep) #FFF;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 24px;
}
.route:hover { background: #EAEAEA }
.rname { font-weight: bold; letter-spacing: .3px; text-transform: uppercase; font-size: 14px; }
.rdesc { font-size: 12px; color: #111; }
.cname { font-weight: bold; letter-spacing: .2px; text-transform: uppercase; font-size: 10px; }
.cdesc { font-size: 10px; color: #111; }

/* Footer */
.foot {
    margin-top: 6px;
    padding: 8px;
    background: linear-gradient(#DCDCDC, #C7C7C7);
    border: 2px solid;
    border-color: #FFF var(--chrome-dark) var(--chrome-dark) #FFF;
    font-size: 11px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.foot .addr { white-space: nowrap }
.foot .small { color: #111 }

/* Appointment grid */
.appt-top {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 2px;
}
.appt-field { display: inline-flex; align-items: center; gap: 6px; }
.appt-i {
    font-family: inherit; font-size: 11px;
    padding: 2px 4px; min-width: 60px;
    border: 1px solid var(--chrome-dark); background: #FFF; color: #000;
}

.appt-strip {
    margin-top: 6px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.day-card {
    background: #E3E3E3;
    border: 2px solid; border-color: #FFF var(--chrome-deep) var(--chrome-deep) #FFF;
    padding: 4px;
    display: flex; flex-direction: column;
    min-height: 92px;
}

.day-head { margin-bottom: 4px; }
.day-head .eng { font-size: 10px; font-weight: bold; color:#000; line-height: 1.2; }
.day-head .heb { font-size: 10px; font-weight: bold; color:#111; line-height: 1.2; }

.slots {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 20px;
    gap: 3px;
}
.slots input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.slots label {
    display: inline-block; text-align: center;
    font-size: 9px; line-height: 18px;
    background: #D8D8D8; color: #000;
    border: 2px solid; border-color: #FFF var(--chrome-deep) var(--chrome-deep) #FFF;
    cursor: pointer; user-select: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slots input[type="radio"]:checked + label {
    background: #C0E6CC;
    box-shadow: inset 0 0 0 2px var(--ok);
}
.slots input[disabled] + label {
    color: var(--warn);
    border-color: #FFF var(--warn) var(--warn) #FFF;
    background: #FFF7E6;
    cursor: not-allowed;
}
.slots input.slot-sabbath[disabled] + label,
.slots input.slot-worship[disabled] + label {
    color: var(--err);
    border-color: #FFF var(--err) var(--err) #FFF;
    background: #F8E6E6;
}
.slots input.slot-holiday[disabled] + label {
    color: var(--err);
    border-color: #FFF var(--err) var(--err) #FFF;
    background: #F4D9D9;
}

.contact-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 2px 0;
}
.contact-row a { text-decoration: none; border-bottom: 1px dotted #333; }
.contact-row a:hover { border-bottom-color: transparent; }

.appt-summary {
    font-size: 11px;
    color: #111;
}
.appt-status {
    font-size: 11px;
    color: #111;
}
.appt-status.ok { color: var(--ok); }
.appt-status.err { color: var(--err); }

.dial.appt-top { margin-top: 2px; }
.impact{
    font-size: 14px !important;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
	text-align: right;}
hr {
    border: 0;
    border-top: 1px solid var(--chrome-dark);
    margin: 8px 0;
}
	

/* Compact header/text tweaks (scoped) */
    .navhead { font-size: 11px; padding: 3px 6px; margin-bottom: 4px; }
    .tag { font-size: 11px; line-height: 1.25; }
    hr { margin: 6px 0; }

    /* Price grid */
    .price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
    @media (max-width: 520px) { .price-grid { grid-template-columns: 1fr; } }

    .pcard {
      background:#D8D8D8; border:2px solid; border-color:#FFF var(--chrome-deep) var(--chrome-deep) #FFF;
      padding:6px; font-size:10px; line-height:1.2; text-align:left;
    }
    .pname { font-weight:bold; font-size:11px; margin-bottom:3px; }

    /* Badge row */
    .pcost {
      display:flex; align-items:center; flex-wrap:wrap; gap:4px;
      margin-bottom:4px;
    }
    .badge {
      display:inline-block; font-weight:bold; padding:1px 6px; border:1px solid var(--chrome-dark);
      background:#EDEDED; color:#000; font-size:10px; line-height:1.2;
    }
    .badge.price { background:#F4F4F4; }
    .badge.pdf { background:#FFF7E6; }
    .badge.calc { background:#F4D9D9; }
    .badge.takeoff { background:#EAF4EA; }
    .badge.cuts { background:#E6ECF9; }
    .badge.bom { background:#EDEBF7; }
    .badge.sketch { background:#F9F2E6; }
    .badge.notes { background:#F2F2F2; }
    .badge.dwg { background:#E6F4F9; }

    .pdesc { color:#111; }


    /* Computing flair (scoped) */
     .comp-hero {
      position: relative;
      border: 2px solid; border-color:#FFF var(--chrome-dark) var(--chrome-dark) #FFF;
      background: linear-gradient(180deg,#0b0b0b 0%, #161616 100%);
      padding:10px; margin-bottom:8px; overflow:hidden;
    }
     .comp-hero::after{
      content:""; position:absolute; inset:0;
      background: linear-gradient(180deg, transparent 0%, rgba(0,255,180,.06) 50%, transparent 100%);
      mix-blend-mode: screen; animation: compScan 4s linear infinite;
    }
    @keyframes compScan { 0%{transform:translateY(-100%)} 100%{transform:translateY(100%)} }
     .comp-title { font-family:"Lucida Console",Monaco,monospace; color:#A6FFEA; font-size:12px; letter-spacing:.3px; }
     .comp-sub { color:#8EE; font-size:10px; margin-top:4px; }
     .comp-badges { margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; }
     .comp-chip {
      font-size:10px; color:#FFF; padding:2px 6px; border:1px solid #2aa; background:rgba(0,180,180,.1);
      box-shadow: inset 0 0 0 1px rgba(0,255,255,.08);
    }
     .comp-chip-sm {
      font-size:10px; color:#000; padding:2px 6px; border:1px solid #2aa; background:rgba(0,180,180,.1);
      box-shadow: inset 0 0 0 1px rgba(0,255,255,.08);
    }
    /* Extra badge tints for computing */
     .badge.code  { background:#e8fbff }
     .badge.api   { background:#eef7ff }
     .badge.ci    { background:#f0f5ff }
     .badge.bench { background:#fff3e6 }
     .badge.ship  { background:#eaf7ea }
     .badge.nda   { background:#f8e6f6 }
@media (max-width: 520px) {
    .contact-row { flex-direction: column; align-items: flex-start; }
}

/* small screens */
@media (max-width: 780px) {
  .wrap { min-width: auto; margin: 8px }
  .body { grid-template-columns: 1fr }
  .routes { grid-template-columns: 1fr 1fr }
}
@media (max-width: 520px) {
  .routes { grid-template-columns: 1fr }
  .contacts { display: none }
}