/* Social Calendar - Theodore Roosevelt Presidential Library
   Brand tokens from Theodore-Roosevelt-Presidential-Library/Brand (brand.json).
   Implementation follows trphotos.labs.trlibrary.com so the labs sites read as
   one family. */

/* ---- TRPL brand fonts, self-hosted on trlibrary.com ------------------- */

@font-face { font-family: "Clearface"; font-weight: 400; font-style: normal;
  src: url("https://www.trlibrary.com/themes/custom/trpl/css/clearfacestd-regular.woff2") format("woff2");
  font-display: swap; }
@font-face { font-family: "Clearface"; font-weight: 700; font-style: normal;
  src: url("https://www.trlibrary.com/themes/custom/trpl/css/clearfacestd-bold.woff2") format("woff2");
  font-display: swap; }
@font-face { font-family: "Dharma Gothic E"; font-weight: 700; font-style: normal;
  src: url("https://www.trlibrary.com/themes/custom/trpl/css/dharma_type-dharmagothice-bold.woff2") format("woff2");
  font-display: swap; }
@font-face { font-family: "Frutiger"; font-weight: 400; font-style: normal;
  src: url("https://www.trlibrary.com/themes/custom/trpl/css/frutigerltstd-regular.woff2") format("woff2");
  font-display: swap; }
@font-face { font-family: "Frutiger"; font-weight: 700; font-style: normal;
  src: url("https://www.trlibrary.com/themes/custom/trpl/css/frutigerltstd-bold.woff2") format("woff2");
  font-display: swap; }

:root {
  /* Brand palette - brand.json "colors" */
  --dark-gray:      #25282A;   /* primary text, dominant brand colour */
  --white:          #FFFFFF;
  --sand:           #D1CCBD;   /* backgrounds only, per guidelines */
  --sand-tint:      #F5F2EB;
  --deep-orange:    #E7805D;
  --deep-orange-dk: #D07556;
  --dark-forest:    #1B4532;
  --darker-forest:  #163728;
  --night-sky:      #092A4D;
  --sunset-pink:    #F36079;
  --sunset-yellow:  #F9D635;
  --gray-sky:       #99ADC5;
  --disabled-gray:  #BCBDBE;

  --line:      rgba(37, 40, 42, .12);
  --line-soft: rgba(37, 40, 42, .07);
  --muted:     rgba(37, 40, 42, .62);

  --font-display: "Dharma Gothic E", "Oswald", "Archivo Narrow", "Helvetica Neue", sans-serif;
  --font-body:    "Clearface", "Source Serif 4", "Noto Serif", Georgia, serif;
  --font-caption: "Frutiger", "Inter", system-ui, -apple-system, sans-serif;
  /* Post copy deliberately stays on the platform-native stack: these cards are
     meant to show what the post will look like on X or Instagram, not what it
     would look like in TRPL's own typography. */
  --font-native:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius:    .25rem;
  --shadow:    0 1px 2px rgba(37,40,42,.05);
  --shadow-lg: 0 10px 32px rgba(37,40,42,.20);
}

* { box-sizing: border-box; }

/* An author `display` declaration beats the UA stylesheet's [hidden] rule, so
   .modal and .filters would stay visible despite the attribute. */
[hidden] { display: none !important; }

html, body { margin: 0; }

body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--dark-gray);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; cursor: pointer; }

/* ---------------------------------------------------------------- topbar */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.1rem 2rem;
  background: var(--dark-gray);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 30;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 1.35rem; min-width: 0; }

.wordmark { height: 46px; width: auto; display: block; flex: none; }

.topbar h1 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .015em;
  font-size: 2rem;
  line-height: 1;
  margin: 0 0 .18rem;
  color: var(--white);
}

.brand-sub {
  margin: 0;
  font-family: var(--font-caption);
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--sand);
}

.topbar-actions { display: flex; align-items: center; gap: .6rem; }

.viewswitch {
  display: flex;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius);
  overflow: hidden;
}

.viewswitch button {
  border: 0; background: transparent; color: rgba(255,255,255,.78);
  padding: .42rem 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .045em;
  line-height: 1;
}
.viewswitch button:hover { color: var(--white); background: rgba(255,255,255,.09); }
.viewswitch button.is-active { background: var(--deep-orange); color: var(--dark-gray); }
.viewswitch button.is-active:hover { background: var(--deep-orange-dk); color: var(--dark-gray); }

.btn-ghost {
  border: 1px solid rgba(255,255,255,.28);
  background: transparent;
  color: rgba(255,255,255,.86);
  border-radius: var(--radius);
  padding: .42rem .9rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .045em;
  line-height: 1;
  display: inline-flex; align-items: center; gap: .45rem;
}
.btn-ghost:hover { background: rgba(255,255,255,.09); color: var(--white); }

.pill {
  background: var(--deep-orange); color: var(--dark-gray);
  border-radius: 999px;
  font-family: var(--font-caption); font-weight: 700;
  font-size: .66rem; padding: .05rem .4rem; min-width: 1.1rem;
  text-align: center; letter-spacing: 0;
}

/* --------------------------------------------------------------- filters */

.filters {
  background: var(--sand-tint);
  border-bottom: 1px solid var(--line);
  padding: 1.15rem 2rem 1.3rem;
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(280px, 2.2fr) minmax(180px, 1fr) minmax(150px, .8fr);
  gap: 1.1rem 1.75rem;
}

.filter-block label {
  font-family: var(--font-caption); font-weight: 700;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--dark-forest);
}
.filter-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.filter-search label { display: block; margin-bottom: .5rem; }

.filter-search input {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid rgba(37,40,42,.25);
  border-radius: var(--radius);
  background: var(--white);
  font-family: var(--font-caption);
  font-size: .9rem;
  color: var(--dark-gray);
}
.filter-search input:focus {
  outline: none;
  border-color: var(--dark-forest);
  box-shadow: 0 0 0 2px rgba(27,69,50,.15);
}

.linkish {
  border: 0; background: none; color: var(--dark-forest);
  font-family: var(--font-caption);
  font-size: .74rem; padding: 0 0 0 .55rem; text-decoration: underline;
}
.linkish:hover { color: var(--darker-forest); }

.chiplist { display: flex; flex-wrap: wrap; gap: .35rem; }

.chip {
  border: 1px solid rgba(37,40,42,.18);
  background: var(--white);
  border-radius: var(--radius);
  padding: .26rem .6rem .26rem .45rem;
  font-family: var(--font-caption);
  font-size: .78rem;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: .38rem;
  transition: background .12s, color .12s, border-color .12s;
}
.chip .swatch { width: 9px; height: 9px; border-radius: 50%; flex: none; opacity: .3; }
.chip:hover { border-color: var(--dark-forest); }
.chip.on {
  color: var(--white); background: var(--dark-forest); border-color: var(--dark-forest);
  font-weight: 700;
}
.chip.on .swatch { opacity: 1; box-shadow: 0 0 0 1px rgba(255,255,255,.5); }
.chip .n { opacity: .72; font-variant-numeric: tabular-nums; font-size: .72rem; font-weight: 400; }

/* ------------------------------------------------------------- periodbar */

.periodbar {
  display: flex; align-items: center; gap: .6rem;
  padding: 1.4rem 2rem .75rem;
  max-width: 1560px; margin: 0 auto; width: 100%;
}

.periodbar h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .015em;
  font-size: 1.85rem;
  line-height: 1;
  color: var(--dark-forest);
  margin: 0;
  min-width: 11rem;
}

.btn-nav {
  border: 1px solid rgba(37,40,42,.25); background: var(--white);
  width: 30px; height: 30px; border-radius: var(--radius);
  font-size: 1.05rem; line-height: 1; color: var(--dark-gray);
  display: grid; place-items: center; padding: 0;
}
.btn-nav:hover { border-color: var(--dark-forest); color: var(--dark-forest); }

.periodbar .btn-ghost {
  border-color: rgba(37,40,42,.25); color: var(--dark-gray);
  font-size: .95rem; padding: .34rem .8rem;
}
.periodbar .btn-ghost:hover { background: var(--sand-tint); color: var(--dark-forest); }

.count {
  margin-left: auto;
  font-family: var(--font-caption); font-weight: 700;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted);
}

main { max-width: 1560px; margin: 0 auto; padding: .25rem 2rem 3rem; }

.state { padding: 4rem 1rem; text-align: center; color: var(--muted); }
.state h3 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 1.6rem; color: var(--dark-forest); margin: 0 0 .5rem; line-height: 1;
}
.state code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--sand-tint); padding: .1rem .35rem; border-radius: 3px; font-size: .85em;
}

/* ------------------------------------------------------------ month grid */

.monthgrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  gap: 1px;
}

.dow {
  background: var(--dark-forest);
  color: var(--white);
  padding: .48rem .65rem;
  font-family: var(--font-caption); font-weight: 700;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
}

.day {
  background: var(--white);
  min-height: 126px;
  padding: .42rem .45rem .5rem;
  display: flex; flex-direction: column; gap: .25rem;
}
.day.is-weekend { background: #FCFBF8; }
.day.is-outside { background: var(--sand-tint); }
.day.is-outside .daynum { color: var(--disabled-gray); }

.daynum {
  font-family: var(--font-caption); font-weight: 700;
  font-size: .76rem; color: var(--dark-gray);
  font-variant-numeric: tabular-nums; align-self: flex-start;
}
.day.is-today .daynum {
  background: var(--deep-orange); color: var(--dark-gray);
  border-radius: var(--radius); padding: .05rem .4rem; margin: 0 -.15rem;
}

.evt {
  display: flex; align-items: center; gap: .38rem;
  background: var(--sand-tint);
  border: 0; border-left: 3px solid var(--dark-forest);
  border-radius: 0 3px 3px 0;
  padding: .2rem .32rem;
  text-align: left; width: 100%;
  font-family: var(--font-caption);
  font-size: .73rem; color: var(--dark-gray);
  overflow: hidden;
}
.evt:hover { background: var(--sand); }
.evt .thumb {
  width: 22px; height: 22px; border-radius: 2px; object-fit: cover; flex: none;
  background: var(--sand);
}
.evt .t { font-variant-numeric: tabular-nums; color: var(--muted); flex: none; font-size: .68rem; }
.evt .x { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evt.is-sent { opacity: .55; }
.evt.is-group { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.evt.is-group:hover { background: var(--sand-tint); }

/* Network glyph cluster - one per channel carrying the same story. */
.evt .nets { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.netdot { display: inline-flex; }
.netdot svg { display: block; width: 12px; height: 12px; }
.evt .netmore {
  font-size: .62rem; font-weight: 700; color: var(--muted);
  padding-left: 1px; font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------- grouped post comparison */

.group-head {
  padding: .9rem 1rem .75rem;
  background: var(--dark-gray); color: var(--white);
}
.group-when {
  font-family: var(--font-caption); font-weight: 700;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--sand);
}
.group-count {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.7rem; text-transform: uppercase; letter-spacing: .02em;
  line-height: 1.05; margin-top: .1rem;
}
.group-note {
  font-family: var(--font-caption); font-size: .74rem;
  color: var(--sunset-yellow); margin-top: .3rem;
}

.group-tabs {
  display: flex; flex-wrap: wrap; gap: .3rem;
  padding: .6rem 1rem; background: var(--sand-tint);
  border-bottom: 1px solid var(--line);
}
.gtab {
  display: inline-flex; align-items: center; gap: .3rem;
  border: 1px solid rgba(37,40,42,.18); background: var(--white);
  border-radius: var(--radius); padding: .24rem .55rem;
  font-family: var(--font-caption); font-size: .75rem; color: var(--muted);
}
.gtab:hover { border-color: var(--dark-forest); }
.gtab.on {
  background: var(--dark-forest); border-color: var(--dark-forest);
  color: var(--white); font-weight: 700;
}
.gtab .netdot svg { width: 13px; height: 13px; }

.more {
  border: 0; background: none; color: var(--dark-forest);
  font-family: var(--font-caption); font-weight: 700;
  font-size: .7rem; text-align: left; padding: .05rem .3rem;
  text-transform: uppercase; letter-spacing: .04em;
}
.more:hover { color: var(--darker-forest); text-decoration: underline; }

/* ---------------------------------------------------------------- agenda */

.agenda { display: flex; flex-direction: column; gap: 1.75rem; }

.agenda-day {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.35rem;
  scroll-margin-top: 6rem;   /* clears the sticky header when jumping to today */
}

.agenda-date { position: sticky; top: 5.6rem; align-self: start; padding-top: .3rem; }
.agenda-date .dnum {
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.9rem; line-height: .85; color: var(--dark-forest);
}
.agenda-date .dname {
  font-family: var(--font-caption); font-weight: 700;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-top: .35rem;
}
.agenda-date.is-today .dnum { color: var(--deep-orange); }
.agenda-date .badge {
  display: inline-block; margin-top: .45rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: .95rem; text-transform: uppercase; letter-spacing: .05em;
  background: var(--deep-orange); color: var(--dark-gray);
  padding: .08rem .45rem; border-radius: var(--radius); line-height: 1.25;
}

.agenda-posts {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.1rem; align-items: start;
}

/* ------------------------------------------------------ post preview card */

.post {
  background: var(--white);
  border: 1px solid rgba(37,40,42,.1);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  text-align: left; padding: 0; width: 100%; display: block;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
button.post:hover {
  transform: translateY(-2px);
  border-color: var(--dark-forest);
  box-shadow: 0 6px 16px rgba(37,40,42,.12);
}

.post-meta {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--sand-tint);
  font-family: var(--font-caption);
  font-size: .72rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.post-meta .when {
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--dark-gray);
}
.post-meta .status { margin-left: auto; }

.status-tag {
  font-family: var(--font-caption); font-weight: 700;
  font-size: .63rem; text-transform: uppercase; letter-spacing: .05em;
  padding: .12rem .4rem; border-radius: 3px;
}
.s-SCHEDULED               { background: var(--deep-orange);   color: var(--dark-gray); }
.s-SENT                    { background: var(--dark-forest);   color: var(--white); }
.s-PENDING_APPROVAL        { background: var(--sunset-yellow); color: var(--dark-gray); }
.s-SUBMITTED               { background: var(--gray-sky);      color: var(--dark-gray); }
.s-DRAFT                   { background: var(--sand);          color: var(--dark-gray); }
.s-REJECTED,
.s-SEND_FAILED_PERMANENTLY { background: var(--sunset-pink);   color: var(--dark-gray); }

/* network chrome - deliberately platform-native, not TRPL typography */

.net { padding: .75rem .85rem .85rem; font-family: var(--font-native); }
.net-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem; }
.net-av {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: var(--white);
  font-weight: 700; font-size: .8rem;
}
.net-name { font-weight: 700; font-size: .86rem; line-height: 1.25; }
.net-handle { color: var(--muted); font-size: .75rem; }
.net-icon { margin-left: auto; flex: none; }
.net-icon svg { display: block; width: 17px; height: 17px; }

.net-text {
  font-size: .88rem; line-height: 1.45; white-space: pre-wrap;
  overflow-wrap: anywhere; color: var(--dark-gray);
}
.net-text .tagtok { color: var(--night-sky); }

.net-media { margin-top: .6rem; display: grid; gap: 3px; border-radius: var(--radius); overflow: hidden; }
.net-media.n2 { grid-template-columns: 1fr 1fr; }
.net-media.n3 { grid-template-columns: 1fr 1fr; }
.net-media.n3 > figure:first-child { grid-row: span 2; }
.net-media.n4 { grid-template-columns: 1fr 1fr; }
.net-media figure { margin: 0; position: relative; background: var(--sand-tint); }
.net-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.net-media .play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(37,40,42,.18);
}
.net-media .play span {
  width: 42px; height: 42px; border-radius: 50%; background: rgba(37,40,42,.6);
  display: grid; place-items: center; color: var(--white); font-size: .9rem; padding-left: 3px;
}
.net-media .more-media { background: rgba(37,40,42,.55); }
.net-media .more-media span {
  width: auto; height: auto; padding: .2rem .6rem; border-radius: var(--radius);
  background: rgba(37,40,42,.78); font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 700; letter-spacing: .03em; padding-left: .6rem;
}

/* Modal: every attachment, stacked in order, each labelled n / total. */
.net-media.is-full { grid-template-columns: 1fr; gap: .55rem; border-radius: 0; }
.net-media.is-full figure { border-radius: var(--radius); overflow: hidden; }

.net-media .idx,
.net-media .dur {
  position: absolute;
  background: rgba(37,40,42,.72); color: var(--white);
  font-family: var(--font-caption);
  font-size: .66rem; padding: .08rem .38rem; border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.net-media .idx { right: .4rem; top: .4rem; }
.net-media .dur { right: .4rem; bottom: .4rem; }

/* Instagram leads with the image; Pinterest/TikTok/YouTube read tall. */
.net.ig .net-media { margin: .1rem -.85rem .6rem; border-radius: 0; }
.net.ig .net-media img { aspect-ratio: 1 / 1; }
.net.tall .net-media img { aspect-ratio: 3 / 4; }

.net-tags { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .25rem; }
.tagchip {
  font-family: var(--font-caption);
  font-size: .68rem; background: var(--sand-tint); color: var(--muted);
  border-radius: 3px; padding: .1rem .38rem;
}

/* ----------------------------------------------------------------- modal */

.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1.25rem; }
.modal-scrim { position: absolute; inset: 0; background: rgba(37,40,42,.55); backdrop-filter: blur(2px); }
.modal-panel {
  position: relative; background: var(--white); border-radius: var(--radius);
  max-width: 540px; width: 100%; max-height: 88vh; overflow: auto;
  box-shadow: var(--shadow-lg);
}
.modal-close {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  border: 0; background: rgba(255,255,255,.92); border-radius: var(--radius);
  width: 30px; height: 30px; font-size: 1.2rem; line-height: 1; color: var(--dark-gray);
  box-shadow: 0 1px 4px rgba(37,40,42,.2);
}
.modal-close:hover { background: var(--deep-orange); }
.modal .post { border: 0; box-shadow: none; }
.modal .net-text { font-size: .96rem; }
.modal .net-media img { max-height: 62vh; object-fit: contain; background: var(--dark-gray); }
.modal .net.ig .net-media img,
.modal .net.tall .net-media img { aspect-ratio: auto; }

.modal-extra {
  border-top: 1px solid var(--line-soft); padding: .8rem .95rem;
  font-family: var(--font-caption);
  font-size: .78rem; color: var(--muted);
  display: grid; grid-template-columns: auto 1fr; gap: .32rem .9rem;
}
.modal-extra dt {
  font-weight: 700; color: var(--dark-forest);
  text-transform: uppercase; letter-spacing: .05em; font-size: .7rem;
}
.modal-extra dd { margin: 0; overflow-wrap: anywhere; color: var(--dark-gray); }
.modal-extra a { color: var(--dark-forest); }

/* ---------------------------------------------------------------- footer */

.footer {
  background: var(--dark-gray);
  color: var(--white);
  padding: 1.5rem 2rem;
  font-family: var(--font-caption);
  font-size: .8rem; line-height: 1.55;
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.footer .dot { opacity: .5; }
.footer #freshness { color: var(--sand); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1080px) { .filters { grid-template-columns: 1fr 1fr; } }

@media (max-width: 880px) {
  .topbar { padding: 1rem 1.25rem; }
  .topbar h1 { font-size: 1.55rem; }
  .wordmark { height: 38px; }
  .filters, .periodbar, main, .footer { padding-left: 1.25rem; padding-right: 1.25rem; }
}

@media (max-width: 760px) {
  .filters { grid-template-columns: 1fr; }
  .agenda-day { grid-template-columns: 1fr; gap: .5rem; }
  .agenda-date { position: static; display: flex; align-items: baseline; gap: .6rem; }
  .agenda-date .dnum { font-size: 1.6rem; }
  .agenda-date .dname, .agenda-date .badge { margin-top: 0; }
  .agenda-posts { grid-template-columns: 1fr; }
  .day { min-height: 76px; }
  .evt .x, .evt .thumb { display: none; }
  .periodbar h2 { font-size: 1.35rem; min-width: 0; }
  .count { width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }