/* planner-only header/date and collapsible planning drawer.
   Loaded after the existing app styles so the rest of Create23 remains untouched. */

.planner-screen{
  grid-template-rows:auto auto minmax(0,1fr) auto;
}

.topbar{
  display:block;
  min-height:calc(96px + var(--safe-top));
  padding:calc(9px + var(--safe-top)) 14px 7px;
}
.topbar-main{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.topbar .brand-lockup h1{font-size:17px}
.topbar .brand-lockup p{font-size:11px;margin-top:1px}
.topbar .top-actions{flex:0 0 auto}

/* Date/time now lives in the header instead of below the timeline. */
.header-date-time{
  width:auto;
  max-width:100%;
  min-height:31px;
  margin:2px 0 0 49px;
  padding:2px 0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  overflow:hidden;
  border-radius:8px;
  color:#dce5ef;
  white-space:nowrap;
}
.header-date-time:hover{background:rgba(255,255,255,.025)}
.header-date-time:active{background:rgba(255,255,255,.045)}
.header-date-time .date-context-item{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-width:0;
}
.header-date-time .date-context-item svg{
  width:14px;
  height:14px;
  flex:0 0 14px;
  fill:none;
  stroke:#9fb0c3;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.header-date-time strong,
.header-date-time b,
.header-date-time small,
.header-date-time .date-context-value{
  color:#dce5ef;
  font-size:11px;
  line-height:1;
  font-weight:650;
  letter-spacing:0;
}
.header-date-time b{font-size:12px;color:#f7fafc}
.header-date-time small{color:#b8c6d6;font-weight:600}
.header-date-time .header-date-separator{color:#66778b;font-size:9px;flex:0 0 auto}
.header-date-time .mini-clock{
  width:16px;
  height:16px;
  flex:0 0 16px;
  border:1px solid #8ea1b6;
  background:transparent;
  box-shadow:none;
}
.header-date-time .mini-clock::after{
  width:2px;
  height:2px;
  background:var(--c23-green);
}
.header-date-time #clockHand{
  left:calc(50% - .5px);
  top:2px;
  width:1px;
  height:5px;
  background:#e9f3e6;
  transform-origin:50% 5px;
}

/* Always-visible tab strip; detailed content is collapsed by default. */
.top-info-panel{
  height:43px;
  min-height:43px;
  overflow:hidden;
  background:rgba(9,19,33,.985);
  transition:height .28s cubic-bezier(.22,.72,.18,1), min-height .28s cubic-bezier(.22,.72,.18,1);
}
.top-info-panel.is-expanded{
  height:153px;
  min-height:153px;
}
.info-tabs{
  position:relative;
  z-index:6;
  height:42px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)) 38px;
  align-items:stretch;
  border-bottom:1px solid rgba(255,255,255,.075);
}
.info-tab,
.info-panel-toggle{
  position:relative;
  min-width:0;
  border:0;
  background:transparent;
  color:#8292a6;
  cursor:pointer;
}
.info-tab{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0 4px;
  font-size:10px;
  font-weight:650;
}
.info-tab svg{
  width:16px;
  height:16px;
  flex:0 0 16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.info-tab span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.info-tab.active{
  color:#f4f8fb;
}
.info-tab.active svg{color:var(--c23-green)}
.info-tab.active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:3px;
  width:18px;
  height:2px;
  border-radius:999px;
  transform:translateX(-50%);
  background:var(--c23-green);
  box-shadow:0 0 9px rgba(127,244,84,.28);
}
.info-panel-toggle{
  display:grid;
  place-items:center;
  border-left:1px solid rgba(255,255,255,.075);
}
.info-panel-toggle svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:#e9f0f7;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .24s cubic-bezier(.22,.72,.18,1);
}
.top-info-panel.is-expanded .info-panel-toggle svg{transform:rotate(180deg)}

.info-panel-drawer{
  position:relative;
  height:110px;
  overflow:hidden;
  opacity:0;
  transform:translateY(-9px);
  pointer-events:none;
  transition:opacity .18s ease, transform .28s cubic-bezier(.22,.72,.18,1);
}
.top-info-panel.is-expanded .info-panel-drawer{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.info-panel-track{
  height:110px;
  background:linear-gradient(180deg,rgba(13,23,38,.98),rgba(10,19,32,.98));
}
.info-panel-page{
  height:110px;
  padding-top:13px;
  padding-bottom:10px;
}
.info-panel-page.sky-summary{
  padding-top:10px;
  padding-bottom:10px;
}
/* Keep the app's existing carousel logic, but navigation is now driven by the tabs. */
.info-panel-arrow,
.info-panel-dots{display:none!important}
.info-panel-page > header > span{display:none}
.info-panel-page > header strong{
  font-size:9px;
  color:#b7c5d5;
}
.info-panel-page > header button{
  border:1px solid rgba(170,124,255,.22);
  background:rgba(170,124,255,.08);
}

/* Timeline ends at the graph; the old weekday/time/date row is intentionally gone. */
.timeline-card{padding-bottom:8px}

@media (max-width:380px){
  .topbar{min-height:calc(92px + var(--safe-top));padding-left:10px;padding-right:10px}
  .header-date-time{margin-left:46px;gap:6px}
  .header-date-time strong,
  .header-date-time b,
  .header-date-time small,
  .header-date-time .date-context-value{font-size:10px}
  .header-date-time .date-context-item svg{display:none}
  .header-date-time .mini-clock{display:none}
  .info-tabs{grid-template-columns:repeat(4,minmax(0,1fr)) 34px}
  .info-tab{font-size:9px;gap:3px}
  .info-tab svg{width:14px;height:14px;flex-basis:14px}
  .top-info-panel.is-expanded{height:149px;min-height:149px}
  .info-panel-drawer,.info-panel-track,.info-panel-page{height:106px}
}

@media (orientation:landscape) and (max-height:650px){
  .topbar{
    grid-column:1/3;
    min-height:calc(80px + var(--safe-top));
    padding-top:calc(5px + var(--safe-top));
    padding-bottom:5px;
  }
  .topbar-main{min-height:42px}
  .header-date-time{margin-top:0;min-height:25px}
  .top-info-panel{
    grid-column:2;
    grid-row:2;
    height:42px;
    min-height:42px;
  }
  .top-info-panel.is-expanded{height:146px;min-height:146px}
  .info-panel-drawer,.info-panel-track,.info-panel-page{height:104px}
  .info-tabs{height:41px}
}

@media (prefers-reduced-motion:reduce){
  .top-info-panel,
  .info-panel-drawer,
  .info-panel-toggle svg{transition:none!important}
}