@import url("/prototype.css?v=20261005-proto8");

:root{
  --bg:#edf6ef;
  --panel:#edf6ef;
  --line:#2b3940;
  --cyan:#4f8f65;
  --amber:#f2b632;
  --green:#69e59a;
  --red:#ff6b6b;
  --text:#344f3d;
  --muted:#687982;
}

*{
  box-sizing:border-box;
}

html{
  background:var(--bg);
}

body{
  margin:0;
  background:
    radial-gradient(
      circle at top,
      #edf6ef 0,
      #edf6ef 42%
    );
  color:var(--text);
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
}

.dn-wrap{
  width:min(
    1120px,
    calc(100% - 32px)
  );
  margin:auto;
}


/* header */

.dn-header{
  border-bottom:
    1px solid #cbded0;
  background:#edf6ef;
}

.dn-header-inner{
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.dn-header strong{
  display:block;
  font-size:13px;
  letter-spacing:.13em;
}

.dn-header small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:8px;
  letter-spacing:.14em;
}

.dn-header-inner>span{
  color:#52646d;
  font-size:9px;
  letter-spacing:.16em;
}


/* hero */

.dn-breadcrumb{
  margin:16px 0 10px;
  color:#52616a;
  font-size:8px;
}

.dn-hero{
  position:relative;
  padding:26px 24px 22px;
  border:1px solid #cbded0;
  background:
    linear-gradient(
      135deg,
      #dceee1,
      transparent 42%
    ),
    #edf6ef;
}

.dn-hero:after{
  content:"PROTOTYPE";
  position:absolute;
  right:13px;
  top:11px;
  color:#596a72;
  font-size:8px;
  letter-spacing:.16em;
}

.dn-eyebrow{
  margin-bottom:6px;
  color:var(--cyan);
  font-size:8px;
  letter-spacing:.16em;
}

.dn-hero h1{
  margin:0;
  font-size:36px;
  letter-spacing:.04em;
}

.dn-hero p{
  margin:9px 0 0;
  color:#4f8561;
  font-size:11px;
}


/* chassis */

.dn-instrument{
  display:flex;
  margin-top:9px;
  border:1px solid #cbded0;
  background:#edf6ef;
}

.dn-instrument span{
  display:flex;
  align-items:center;
  min-height:34px;
  padding:7px 13px;
  border-right:
    1px solid #cbded0;
  color:#31543e;
  font-size:8px;
  letter-spacing:.11em;
}

.dn-instrument b{
  margin-left:7px;
  color:#344f3d;
}

.dn-instrument .dn-online{
  margin-left:auto;
  border-right:0;
  color:var(--green);
}

.dn-online i{
  width:7px;
  height:7px;
  margin-right:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:
    none;
}

.dn-strip{
  margin-top:6px;
  padding:5px 9px;
  border:1px solid #cbded0;
  background:
    repeating-linear-gradient(
      -45deg,
      #dceee1 0,
      #dceee1 9px,
      transparent 9px,
      transparent 18px
    ),
    #edf6ef;
  color:#4f8561;
  font-size:8px;
  letter-spacing:.12em;
}


/* console */

.dn-console{
  margin-top:11px;
  padding:19px;
  border:1px solid #cbded0;
  background:#edf6ef;
  box-shadow:
    none;
}

.dn-form label{
  display:block;
  margin-bottom:7px;
  color:#6c7d85;
  font-size:8px;
  letter-spacing:.14em;
}

.dn-input-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
}

.dn-input-row input{
  min-width:0;
  height:46px;
  padding:0 14px;
  border:1px solid #cbded0;
  outline:none;
  background:#edf6ef;
  color:#344f3d;
  font:inherit;
  font-size:16px;
}

.dn-input-row input:focus{
  border-color:var(--cyan);
}

.dn-input-row button{
  min-height:46px;
  padding:0 18px;
  border:1px solid #cbded0;
  background:#edf6ef;
  color:var(--amber);
  font:inherit;
  font-size:10px;
  font-weight:700;
  cursor:pointer;
}

.dn-input-row button:disabled{
  opacity:.45;
  cursor:wait;
}

.dn-form-message{
  margin-top:7px;
  color:#617078;
  font-size:8px;
}


/* resolver nodes */

.dn-nodes{
  display:grid;
  grid-template-columns:
    repeat(5,1fr);
  gap:6px;
  margin-top:20px;
}

.dn-node{
  position:relative;
  min-width:0;
  min-height:78px;
  padding:11px 9px;
  border:1px solid #cbded0;
  background:#edf6ef;
}

.dn-node i{
  position:absolute;
  right:9px;
  top:10px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#edf6ef;
}

.dn-node>span{
  color:#526169;
  font-size:7px;
}

.dn-node b{
  display:block;
  margin-top:10px;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:11px;
}

.dn-node small{
  display:block;
  margin-top:5px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#65747b;
  font-size:7px;
}

.dn-node.running{
  border-color:#cbded0;
}

.dn-node.running i{
  background:var(--cyan);
  box-shadow:
    none;
  animation:
    dnPulse .5s infinite alternate;
}

.dn-node.ok i{
  background:var(--green);
  box-shadow:
    none;
}

.dn-node.warn i{
  background:var(--amber);
}

.dn-node.error i{
  background:var(--red);
}


/* assessment */

.dn-assessment{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:13px;
  padding:16px;
  border:1px solid #cbded0;
  background:#edf6ef;
}

.dn-assessment small{
  display:block;
  color:#65767e;
  font-size:7px;
}

.dn-assessment strong{
  display:block;
  margin-top:5px;
  font-size:24px;
}

.dn-assessment>span{
  color:#65757c;
  font-size:9px;
}

.dn-assessment.all_matched{
  border-color:#cbded0;
}

.dn-assessment.all_matched strong{
  color:var(--green);
  text-shadow:
    none;
}

.dn-assessment.propagating strong{
  color:var(--amber);
}

.dn-assessment.mismatch strong{
  color:var(--red);
}

.dn-assessment.running strong{
  color:var(--cyan);
}


/* record indicators */

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

.dn-record-status div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:36px;
  padding:7px 9px;
  border:1px solid #cbded0;
  background:#edf6ef;
}

.dn-record-status span{
  color:#4f8561;
  font-size:9px;
  font-weight:700;
}

.dn-record-status b{
  color:#596970;
  font-size:7px;
}

.dn-record-status .matched b{
  color:var(--green);
}

.dn-record-status .propagating b{
  color:var(--amber);
}

.dn-record-status .mismatch b{
  color:var(--red);
}


/* results */

.dn-results{
  display:grid;
  grid-template-columns:
    .75fr 1.65fr;
  gap:9px;
  margin-top:10px;
}

.dn-panel{
  min-width:0;
  border:1px solid #cbded0;
  background:#edf6ef;
}

.dn-panel header{
  display:flex;
  justify-content:space-between;
  padding:9px 11px;
  border-bottom:
    1px solid #cbded0;
  background:#edf6ef;
}

.dn-panel header span{
  color:#526169;
  font-size:7px;
}

.dn-panel header b{
  color:#afbec4;
  font-size:9px;
}

.dn-data{
  padding:10px 12px;
}

.dn-row{
  display:grid;
  grid-template-columns:
    100px 1fr;
  gap:8px;
  padding:7px 0;
  border-bottom:
    1px solid #cbded0;
}

.dn-row:last-child{
  border-bottom:0;
}

.dn-row span{
  color:#607078;
  font-size:8px;
}

.dn-row b{
  min-width:0;
  overflow-wrap:anywhere;
  color:#344f3d;
  font-size:9px;
  font-weight:500;
  text-align:right;
}


/* matrix */

.dn-matrix-wrap{
  overflow:auto;
}

.dn-matrix{
  width:100%;
  min-width:690px;
  border-collapse:collapse;
}

.dn-matrix th,
.dn-matrix td{
  padding:9px;
  border-right:
    1px solid #cbded0;
  border-bottom:
    1px solid #cbded0;
  vertical-align:top;
  font-size:8px;
}

.dn-matrix th{
  color:#60717a;
  background:#edf6ef;
  text-align:left;
}

.dn-matrix td{
  color:#31543e;
}

.dn-matrix td:first-child{
  width:130px;
}

.dn-matrix td b{
  display:block;
  color:#344f3d;
  font-size:9px;
}

.dn-matrix td small{
  display:block;
  margin-top:3px;
  color:#5f7078;
  font-size:7px;
}

.dn-matrix .auth-row{
  background:
    #dceee1;
}


/* notice */

.dn-notice{
  margin-top:9px;
  padding:11px 13px;
  border:1px solid #cbded0;
  background:#edf6ef;
}

.dn-notice b{
  color:#60717a;
  font-size:8px;
}

.dn-notice p{
  margin:6px 0 0;
  color:#31543e;
  font-size:8px;
  line-height:1.6;
}

.empty{
  margin:13px 0;
  color:#4e5c63;
  font-size:9px;
  text-align:center;
}

.empty.scanning{
  color:var(--cyan);
}

.dn-footer{
  padding:22px 0 30px;
  color:#435158;
  font-size:7px;
  text-align:center;
}

@keyframes dnPulse{
  from{opacity:.3}
  to{opacity:1}
}


/* mobile */

@media(max-width:700px){

  .dn-wrap{
    width:
      min(
        calc(100% - 20px),
        1120px
      );
  }

  .dn-header-inner{
    min-height:48px;
  }

  .dn-header strong{
    font-size:10px;
  }

  .dn-header small{
    font-size:6px;
  }

  .dn-breadcrumb{
    margin:9px 0 6px;
    font-size:6px;
  }

  .dn-hero{
    padding:14px 13px 12px;
  }

  .dn-hero h1{
    font-size:25px;
  }

  .dn-hero p{
    margin-top:5px;
    font-size:8px;
  }

  .dn-instrument{
    display:grid;
    grid-template-columns:
      1fr auto;
    margin-top:6px;
  }

  .dn-instrument span{
    min-height:25px;
    padding:4px 8px;
    font-size:6px;
  }

  .dn-instrument span:nth-child(2),
  .dn-instrument span:nth-child(3){
    display:none;
  }

  .dn-instrument .dn-online{
    margin:0;
  }

  .dn-strip{
    margin-top:5px;
    padding:4px 7px;
    font-size:6px;
  }

  .dn-console{
    margin-top:7px;
    padding:13px 10px;
  }

  .dn-input-row{
    grid-template-columns:1fr;
  }

  .dn-input-row input{
    height:42px;
    font-size:14px;
  }

  .dn-input-row button{
    min-height:39px;
  }

  .dn-nodes{
    grid-template-columns:
      1fr 1fr;
    margin-top:12px;
  }

  .dn-node{
    min-height:62px;
    padding:8px;
  }

  .dn-node.authoritative{
    grid-column:1 / -1;
  }

  .dn-assessment{
    padding:11px;
  }

  .dn-assessment strong{
    font-size:18px;
  }

  .dn-assessment>span{
    max-width:45%;
    overflow-wrap:anywhere;
    text-align:right;
  }

  .dn-record-status{
    grid-template-columns:
      1fr 1fr;
  }

  .dn-results{
    grid-template-columns:1fr;
    gap:7px;
    margin-top:7px;
  }

  .dn-row{
    grid-template-columns:
      82px 1fr;
  }
}



/* ==========================================================
   DNS NO RECORD STATE v0.3
   ========================================================== */

.dn-record-status .no_record{
  border-color:#cbded0;
  background:#edf6ef;
}

.dn-record-status .no_record span{
  color:#6d7d84;
}

.dn-record-status .no_record b{
  color:#31543e;
}