@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --ss-teal:      #044751;
  --ss-teal-deep: #0F2830;
  --ss-yellow:    #EFFA04;
  --ss-offwhite:  #FDFDFC;
  --ss-sand:      #E4E1D5;
  --ss-ink:       #0F2830;

  --st-draft:     #EFFA04;
  --st-requested: #F0A202;
  --st-confirmed: #4FD89A;
  --st-scheduled: #7FB7C4;
  --st-changed:   #F4A8C7;
  --st-delivered: #9AA7A9;
  --st-canceled:  #E5736B;

  --font: 'Manrope', system-ui, -apple-system, sans-serif;
}

*{ box-sizing:border-box; }
body{
  margin:0; font-family:var(--font); color:var(--ss-offwhite);
  background:var(--ss-teal); -webkit-font-smoothing:antialiased;
}
.hidden{ display:none !important; }

.masthead{
  display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
  padding:1.25rem clamp(1rem,4vw,2.5rem); background:var(--ss-teal-deep);
  border-bottom:2px solid var(--ss-yellow);
}
.brand{ font-weight:800; letter-spacing:.04em; font-size:1.15rem; color:var(--ss-offwhite); }
.brand-a{ color:var(--ss-yellow); }
.masthead-meta{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; }
#activation-name{ font-weight:700; color:var(--ss-yellow); }
.tagline{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; opacity:.7; }

main{ max-width:1100px; margin:0 auto; padding:clamp(1rem,4vw,2.5rem); }

.streams{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2rem; }
.stream{
  flex:1 1 220px; background:rgba(253,253,252,.06); border:1px solid rgba(253,253,252,.12);
  border-radius:10px; padding:.85rem 1rem; display:flex; flex-direction:column; gap:.15rem;
}
.stream .role{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ss-yellow); }
.stream .owner{ font-weight:600; }

.section-title{
  font-size:1.4rem; font-weight:800; margin:0 0 1rem;
  border-left:4px solid var(--ss-yellow); padding-left:.6rem;
}

.cal-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; }
.legend{ display:flex; gap:.75rem; flex-wrap:wrap; font-size:.72rem; opacity:.85; }
.legend span{ display:inline-flex; align-items:center; gap:.35rem; }
.legend i{ width:.7rem; height:.7rem; border-radius:2px; display:inline-block; }

#calendar{
  background:var(--ss-offwhite); color:var(--ss-ink);
  border-radius:12px; padding:1rem; margin-top:.5rem;
}
.fc{ --fc-border-color:#dfe3e1; --fc-today-bg-color:rgba(4,71,81,.06); font-size:.9rem; }
.fc .fc-toolbar-title{ font-weight:800; color:var(--ss-teal-deep); }
.fc .fc-button-primary{
  background:var(--ss-teal-deep); border-color:var(--ss-teal-deep); font-weight:600; text-transform:capitalize;
}
.fc .fc-button-primary:not(:disabled).fc-button-active{ background:var(--ss-teal); border-color:var(--ss-teal); }
.fc-event{ border:none; cursor:pointer; font-weight:600; }
.empty{ opacity:.8; font-style:italic; }

/* Timeline */
.timeline{ display:flex; flex-direction:column; gap:.4rem; }
.tl-row{ display:flex; align-items:center; gap:.75rem; background:rgba(253,253,252,.06); border-radius:8px; padding:.5rem .8rem; }
.tl-due{ font-variant-numeric:tabular-nums; font-size:.8rem; color:var(--ss-yellow); min-width:6.5rem; }
.tl-name{ font-weight:600; }
.tl-team{ margin-left:auto; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; opacity:.7; }

/* Form embed */
.form-embed{ background:var(--ss-offwhite); border-radius:12px; overflow:hidden; }
.form-embed iframe{ width:100%; height:620px; border:0; display:block; }

/* Detail panel */
.panel{ position:fixed; inset:0; background:rgba(15,40,48,.7); display:flex; align-items:center; justify-content:center; padding:1rem; z-index:50; }
.panel-card{
  background:var(--ss-offwhite); color:var(--ss-ink); width:min(520px,100%);
  border-radius:14px; padding:1.5rem; position:relative; max-height:90vh; overflow:auto;
}
.panel-close{ position:absolute; top:.6rem; right:.8rem; background:none; border:none; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--ss-ink); }
.panel-card h3{ margin:.4rem 0 .2rem; font-size:1.35rem; }
.panel-sites{ font-weight:700; color:var(--ss-teal); margin:.1rem 0 1rem; }
.pill{ display:inline-block; font-size:.7rem; font-weight:700; padding:.2rem .55rem; border-radius:999px; color:var(--ss-ink); }
.panel-grid{ display:grid; grid-template-columns:auto 1fr; gap:.35rem .9rem; margin:.5rem 0 1rem; font-size:.9rem; }
.panel-grid dt{ font-weight:700; color:var(--ss-teal); }
.panel-grid dd{ margin:0; }
.panel-desc{ font-size:.9rem; opacity:.9; }
.panel-actions{ display:flex; gap:.6rem; margin:.75rem 0; }
.btn{ font-family:var(--font); font-weight:700; border:none; border-radius:8px; padding:.6rem 1rem; cursor:pointer; font-size:.9rem; }
.btn-approve{ background:var(--st-confirmed); color:var(--ss-teal-deep); flex:1; }
.btn-ghost{ background:transparent; border:1.5px solid var(--ss-teal); color:var(--ss-teal); }
.btn-send{ background:var(--ss-yellow); color:var(--ss-teal-deep); width:100%; margin-top:.4rem; }
.btn[disabled]{ opacity:.5; cursor:default; }
.change-box{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:.6rem; }
.change-box label, .comment-label{ display:flex; flex-direction:column; gap:.25rem; font-size:.82rem; font-weight:600; color:var(--ss-teal); }
.change-box input, .change-box textarea, .comment-label textarea{
  font-family:var(--font); font-size:.9rem; padding:.5rem; border:1px solid #cfd6d3; border-radius:7px; color:var(--ss-ink);
}
.panel-msg{ font-size:.82rem; min-height:1.1em; margin:.5rem 0 0; }
.panel-msg.ok{ color:#2f9e6b; }
.panel-msg.err{ color:#c0483f; }

@media (max-width:640px){
  .masthead-meta{ align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* Calendar hint */
.cal-hint{ font-size:.82rem; opacity:.75; margin:.1rem 0 .6rem; }

/* Create-connection panel extras */
.create-times{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:.6rem; }
.create-times label{ display:flex; flex-direction:column; gap:.25rem; font-size:.82rem; font-weight:600; color:var(--ss-teal); }
.create-times input, .create-times select{
  font-family:var(--font); font-size:.9rem; padding:.5rem; border:1px solid #cfd6d3; border-radius:7px; color:var(--ss-ink); background:#fff;
}
.comment-label input[type="text"]{
  font-family:var(--font); font-size:.9rem; padding:.5rem; border:1px solid #cfd6d3; border-radius:7px; color:var(--ss-ink);
}
.create-note{ font-size:.75rem; opacity:.7; margin:.6rem 0 0; }
.fc .fc-highlight{ background:rgba(4,71,81,.15); }

@media (max-width:640px){
  .create-times{ grid-template-columns:1fr; }
}