/* style.css — CompIT AS TUI landing */

:where(*, *::before, *::after){border-radius:0 !important;box-sizing:border-box}

:root{
  --blue:#0033cc;
  --dialog:#d7d7d7;
  --border:#000;
  --inner:#efefef;
  --shadow:#000;
  --title-red:#b00000;
  --prompt-blue:#2b47bb;
  --select-red:#b00000;
  --select-fg:#fff;
  --text:#111;
  --mono:ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono",monospace
}

html,body{height:100%;margin:0}
body{background:var(--blue)!important;color:var(--text);font:16px/1.45 var(--mono)}

.shell{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:28px;
}

.dialog-wrap{position:relative;width:600px}
.shadow{
  position:absolute; inset:0;
  background:var(--shadow);
  transform:translate(10px,12px);
  z-index:0
}
.dialog{
  position:relative; width:600px; min-height:360px;
  background:var(--dialog); border:2px solid var(--border); z-index:1
}
.dialog::after{content:"";position:absolute;inset:6px;border:1px solid var(--inner);pointer-events:none}

.titlebar{position:relative;margin:8px 12px 0;text-align:center;color:var(--title-red);font-weight:700}
.titlebar h1{display:inline-block;margin:0;padding:0 8px;font-size:1rem;background:var(--dialog)}
.titlebar .tab-left,.titlebar .tab-right{position:absolute;top:0;color:var(--border)}
.titlebar .tab-left{left:8px}.titlebar .tab-right{right:8px}

.content{padding:12px 18px 10px;color:var(--text)}
.prompt{margin:6px 0 12px;color:var(--prompt-blue);font-weight:700}

.menu{list-style:none;margin:0;padding:0}
.item{
  padding:6px 10px; display:flex; align-items:center; gap:.3rem;
  white-space:nowrap; color:var(--text); background:transparent; cursor:pointer
}
.tick{display:inline-block;width:2.6rem;font-weight:700;color:#000;flex-shrink:0}
.spacer{height:12px}

.menu .item:hover,
.menu .item:focus-within{background:var(--select-red);color:var(--select-fg)}
.menu .item:hover .tick,
.menu .item:focus-within .tick{color:var(--select-fg)}

.item.contact .contact-link{
  display:inline-flex;align-items:center;gap:.3rem;
  width:100%;padding:6px 10px;margin:-6px -10px;
  color:inherit;text-decoration:none
}
.item.contact .contact-link:hover,
.item.contact .contact-link:focus{text-decoration:none}

.okline{text-align:right;margin-top:14px;color:#000;font-weight:700;padding-right:6px}
.border{position:absolute;inset:0;border:2px solid var(--border);pointer-events:none}

.links{width:600px;text-align:center;color:#fff;font:14px/1.4 var(--mono)}
.links .foot-link{color:#fff;text-decoration:none}
.links .foot-link:hover{text-decoration:underline}
.links .sep{opacity:.9;margin:0 .35rem}

.label-full{display:inline !important}
.label-short{display:none !important}
@media (max-width:480px){
  .label-full{display:none !important}
  .label-short{display:inline !important}
  .links{font-size:13px}
  .links .sep{margin:0 .25rem}
}
@media (min-width:481px){
  .label-full{display:inline !important}
  .label-short{display:none !important}
}

/* --------- modals --------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:9990}
.modal{
  position:fixed; inset:0;
  display:grid; place-items:center;
  padding:4vw; z-index:10000
}
.modal[hidden],.modal-backdrop[hidden]{display:none!important}

.modal-dialog{
  position:relative;
  width:min(520px,92vw); max-width:92vw;
  max-height:calc(100vh - 8vw);
  background:var(--dialog);
  border:2px solid var(--border);
  z-index:1;
  display:flex; flex-direction:column
}
.modal-dialog .modal-shadow{
  position:absolute; inset:0;
  background:#000;
  transform:translate(8px,9px);
  z-index:0
}
.modal-dialog::after{content:"";position:absolute;inset:6px;border:1px solid var(--inner);pointer-events:none}

.modal-titlebar{
  position:sticky; top:0; z-index:2;
  background:var(--dialog);
  margin:8px 12px 0; text-align:center; color:var(--title-red); font-weight:700
}
.modal-titlebar h2{display:inline-block;margin:0;padding:0 8px;font-size:1rem;background:var(--dialog)}
.modal-titlebar .tab-left,.modal-titlebar .tab-right{position:absolute;top:0;color:var(--border)}
.modal-titlebar .tab-left{left:8px}.modal-titlebar .tab-right{right:8px}

.modal-content{
  padding:12px 18px 10px;color:var(--text);
  overflow:auto; -webkit-overflow-scrolling:touch;
  flex:1 1 auto; position:relative; z-index:1
}
.modal-content .prompt{margin:6px 0 12px;color:var(--prompt-blue);font-weight:700}

.btn-ok{
  align-self:flex-end; margin:6px 18px 14px 0;
  background:var(--dialog); border:0; color:var(--text);
  font:inherit; font-weight:700; padding:2px 8px; cursor:pointer
}
.btn-ok:hover,.btn-ok:focus{background:var(--select-red);color:var(--select-fg)}

@media (max-width:680px){
  .dialog-wrap{width:92vw}
  .dialog{width:92vw;min-height:calc(92vw * 0.6)}
  .links{width:92vw}
}