/* frame.css — No10 Teletext Frame */

@font-face{
  font-family:"ModeSeven";
  src:url("/assets/modeseven.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --k:#000;
  --w:#fff;
  --b:#0000ff;
  --y:#ffff00;
  --r:#ff0000;
  --g:#00ff00;
  --c:#00ffff;
  --m:#ff00ff;

  --fs:clamp(14px,2.05vw,20px);
  --lh:1.02;
  --ls:0.01em;

  --padX:max(10px,env(safe-area-inset-left));
  --padR:max(10px,env(safe-area-inset-right));
  --padTop:max(6px,env(safe-area-inset-top));
  --padBottom:max(8px,env(safe-area-inset-bottom));
}

*{box-sizing:border-box}

html,body{
  height:100%;
  margin:0;
  background:var(--k);
  color:var(--w);
  overflow:hidden;
  font-family:"ModeSeven",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Courier New",monospace;
  font-size:var(--fs);
  line-height:var(--lh);
  letter-spacing:var(--ls);
  -webkit-font-smoothing:none;
  text-rendering:geometricPrecision;
}

a{color:inherit;text-decoration:none}

.screen{
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--k);
}

.hdr{
  flex:0 0 auto;
  background:var(--k);
  padding:var(--padTop) var(--padR) 4px var(--padX);
}

.statusLine{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:baseline;
  font-size:.92em;
  line-height:1;
  white-space:nowrap;
  margin-bottom:4px;
}

.statusLeft{
  overflow:hidden;
  text-overflow:ellipsis;
}

.statusRight{
  display:inline-flex;
  gap:10px;
  align-items:baseline;
}

.statusTime{color:var(--g)}

.pageJump{
  display:inline-flex;
  gap:8px;
  align-items:baseline;
  white-space:nowrap;
}

.pageLabel{color:var(--w)}

.pageBox{
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  min-width:3.6ch;
  padding:0 6px 1px;
  background:var(--k);
  color:var(--g);
  border:0;
  font-variant-numeric:tabular-nums;
}

.masthead{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:stretch;
}

.boxes{
  display:inline-flex;
  gap:4px;
  align-items:center;
}

.box{
  width:1.55em;
  height:1.55em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:3px solid var(--w);
  color:var(--w);
  background:var(--k);
  font-size:1.25em;
  line-height:1;
}

.tvIcon{
  position:relative;
  width:.95em;
  height:.75em;
  border:3px solid var(--w);
  background:var(--k);
  display:inline-block;
}

.tvIcon::before{
  content:"";
  position:absolute;
  left:3px;
  top:3px;
  right:3px;
  bottom:3px;
  border:3px solid var(--w);
}

.tvIcon::after{
  content:"";
  position:absolute;
  left:50%;
  top:-7px;
  width:3px;
  height:7px;
  background:var(--w);
  transform:translateX(-50%);
  box-shadow:-9px 11px 0 0 var(--w),9px 11px 0 0 var(--w);
}

.mastBar{
  background:var(--b);
  color:var(--y);
  padding:3px 10px 4px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  column-gap:12px;
  min-height:1.9em;
}

.siteName{
  font-size:clamp(22px,3.6vw,36px);
  letter-spacing:.06em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pageName{
  font-size:clamp(16px,2.2vw,22px);
  letter-spacing:.04em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:right;
}

.sectionLine{
  margin-top:4px;
  color:var(--y);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.headlineLine{
  margin-top:1px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:baseline;
  color:var(--w);
  white-space:nowrap;
}

.headlineText{
  overflow:hidden;
  text-overflow:ellipsis;
}

.headlineRef{
  color:var(--y);
  text-align:right;
  min-width:3ch;
}

/* CONTENT */

.content{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  background:var(--k);
  padding:8px var(--padR) 8px var(--padX);
  display:grid;
  align-content:start;
  gap:0;
  position:relative;
}

.content[data-cols="1"]{grid-template-columns:1fr}
.content[data-cols="2"]{grid-template-columns:1fr 1fr;column-gap:22px}
.content[data-cols="3"]{grid-template-columns:1fr 1fr 1fr;column-gap:22px}

.panel{
  background:transparent;
  border:0;
  padding:0;
  overflow:hidden;
  min-width:0;
}

.cat{
  color:var(--y);
  margin:0 0 2px;
}

.menu{
  display:grid;
  gap:0;
  min-width:0;
}

.tlink{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:baseline;
  padding:1px 0 2px;
  background:transparent;
  border:0;
  cursor:pointer;
  color:var(--w);
  white-space:nowrap;
  overflow:hidden;
  font:inherit;
  letter-spacing:inherit;
  text-align:left;
}

.tlink .lbl{
  color:var(--y);
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}

.tlink .num{
  color:var(--w);
  min-width:3ch;
  text-align:right;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tlink:hover,
.tlink:focus{
  outline:none;
  background:var(--w);
  color:var(--k);
}

.tlink:hover .lbl,
.tlink:focus .lbl,
.tlink:hover .num,
.tlink:focus .num{
  color:var(--k);
}

.small{
  color:var(--c);
  margin:6px 0 0;
  overflow:hidden;
}

/* INTERNAL TELETEXT PAGES */

.ttPage{
  display:none;
  min-height:0;
  overflow:hidden;
}

.ttPage.active{
  display:contents;
}

.internalNav{
  position:absolute;
  left:var(--padX);
  right:var(--padR);
  bottom:2px;
  display:flex;
  justify-content:space-between;
  gap:8px;
  pointer-events:none;
  z-index:5;
}

.internalBtn{
  pointer-events:auto;
  color:var(--y);
  background:rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.45);
  padding:2px 8px 3px;
  line-height:1.05;
  font-size:clamp(.75rem,1.9vw,.95rem);
  white-space:nowrap;
}

.internalBtn:hover,
.internalBtn:focus{
  outline:none;
  background:var(--w);
  color:var(--k);
}

/* FOOTER */

.ftr{
  flex:0 0 auto;
  background:var(--k);
  padding:0 var(--padR) var(--padBottom) var(--padX);
}

.ftrBlue{
  background:var(--b);
  margin-left:calc(var(--padX) * -1);
  margin-right:calc(var(--padR) * -1);
  padding:5px var(--padR) 5px var(--padX);
}

.strap{
  display:block;
  background:var(--r);
  color:var(--w);
  padding:2px 8px 3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.fastLinks{
  padding:6px 0 0;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:0;
}

.fastBtn{
  flex:1 1 0;
  background:transparent;
  border:0;
  padding:2px 6px 3px;
  cursor:pointer;
  font:inherit;
  letter-spacing:inherit;
  line-height:1;
  text-align:center;
  color:var(--w);
  white-space:nowrap;
}

.fastLinks .fastBtn:nth-child(1){color:var(--r)}
.fastLinks .fastBtn:nth-child(2){color:var(--g)}
.fastLinks .fastBtn:nth-child(3){color:var(--y)}
.fastLinks .fastBtn:nth-child(4){color:var(--c)}

.fastBtn:hover,
.fastBtn:focus{
  outline:none;
  text-decoration:underline;
}

/* FORMS */

input,
textarea,
select{
  width:100%;
  min-width:0;
  background:var(--k);
  color:var(--g);
  border:1px solid rgba(255,255,255,.35);
  font:inherit;
  letter-spacing:inherit;
  padding:2px 4px;
}

textarea{
  resize:none;
  height:6.5em;
  overflow:hidden;
}

/* RESPONSIVE */

@media (max-width:520px){
  .fastLinks{
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
  }

  .fastBtn{
    flex:0 0 auto;
    padding:2px 10px 3px;
  }
}

@media (orientation:portrait) and (max-width:820px){
  .content{
    row-gap:10px;
  }

  .content[data-cols="2"],
  .content[data-cols="3"]{
    grid-template-columns:1fr!important;
    column-gap:0!important;
  }

  .mastBar{
    column-gap:8px;
  }

  .pageName{
    font-size:clamp(14px,2.5vw,18px);
  }
}

@media (max-height:620px){
  .sectionLine{
    display:none;
  }

  .small{
    display:none;
  }
}