/* City Pixels Expansion 4 — Authorized Fan-Fiction Worlds */
.e4-wrap{width:min(1240px,calc(100% - 28px));margin:26px auto 80px}.e4-hero,.e4-section,.e4-card,.e4-form,.e4-reader-card{padding:clamp(20px,3vw,32px)}
.e4-hero{margin-bottom:20px}.e4-hero h1{font-size:clamp(36px,6vw,68px);line-height:1;margin:8px 0 14px;letter-spacing:-.045em}.e4-hero p{max-width:900px;color:var(--muted);font-size:18px}.e4-hard-rule{margin-top:18px;padding:16px 18px;border:1px solid rgba(255,159,67,.6);border-radius:18px;background:rgba(255,159,67,.09);font-weight:800}.e4-hard-rule strong{color:var(--orange)}
.e4-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.e4-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.e4-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.e4-card{border:1px solid var(--line);border-radius:22px;background:rgba(5,10,24,.46);min-width:0}.e4-card h2,.e4-card h3,.e4-section h2,.e4-section h3{margin:4px 0 10px}.e4-card p,.e4-section p{color:var(--muted)}
.e4-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}.e4-actions .btn{min-height:42px}.e4-status{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}.e4-status.active,.e4-status.published,.e4-status.approved{border-color:rgba(114,255,157,.55);color:var(--green)}.e4-status.steward,.e4-status.revision_requested,.e4-status.resubmitted{border-color:rgba(255,159,67,.6);color:var(--orange)}.e4-status.suspended,.e4-status.denied,.e4-status.rejected{border-color:rgba(255,100,124,.65);color:var(--red)}
.e4-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.e4-tab{border:1px solid var(--line);background:rgba(5,10,24,.55);color:var(--ink);padding:10px 14px;border-radius:999px;font-weight:900;cursor:pointer}.e4-tab[aria-selected="true"]{border-color:var(--cyan);box-shadow:0 0 20px rgba(41,231,255,.15)}.e4-tab-panel[hidden]{display:none!important}
.e4-form{border:1px solid var(--line);border-radius:22px;background:rgba(5,10,24,.38)}.e4-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.e4-form-grid .full{grid-column:1/-1}.e4-form label{font-weight:800;color:#dff8ff;min-width:0}.e4-form small{display:block;color:var(--muted);margin-top:5px}.e4-form textarea{min-height:130px;resize:vertical}.e4-form textarea.tall{min-height:230px}.e4-checks{display:grid;gap:10px}.e4-check{display:flex!important;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(7,17,38,.62);font-weight:700!important}.e4-check input{width:auto;margin:4px 0 0;flex:0 0 auto}
.e4-list{display:grid;gap:12px}.e4-list-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:18px;background:rgba(5,10,24,.4);min-width:0}.e4-list-item strong,.e4-list-item span,.e4-list-item small{min-width:0;overflow-wrap:anywhere}.e4-list-item small{display:block;color:var(--muted);margin-top:4px}.e4-list-item .e4-actions{margin-top:0;justify-content:flex-end}
.e4-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}.e4-metric{padding:16px;border:1px solid var(--line);border-radius:18px;background:rgba(5,10,24,.45)}.e4-metric strong{display:block;font-size:28px;color:var(--cyan);overflow-wrap:anywhere}.e4-metric span{color:var(--muted);font-size:12px;text-transform:uppercase;font-weight:900;letter-spacing:.04em}
.e4-message{padding:12px 14px;border:1px solid rgba(114,255,157,.55);border-radius:14px;background:rgba(114,255,157,.08);margin:12px 0}.e4-message.error{border-color:rgba(255,100,124,.7);background:rgba(255,100,124,.09)}.e4-message[hidden]{display:none!important}.e4-muted{color:var(--muted)}.e4-danger{border-color:rgba(255,100,124,.45)!important}.e4-warning{border-color:rgba(255,159,67,.5)!important}.e4-noncanon{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:rgba(255,95,210,.1);border:1px solid rgba(255,95,210,.55);color:#ffd9f5;font-weight:900;font-size:12px;letter-spacing:.045em;text-transform:uppercase}.e4-rule-version{padding:14px;border-left:4px solid var(--cyan);background:rgba(41,231,255,.06);border-radius:14px;margin:12px 0}.e4-prose{white-space:pre-wrap;overflow-wrap:anywhere;color:#e9f8ff}.e4-prose.long{font-size:17px;line-height:1.75}.e4-disclaimer{padding:14px;border:1px solid rgba(212,107,255,.45);border-radius:16px;background:rgba(212,107,255,.08);color:#f5e5ff}.e4-meta{display:flex;gap:8px 14px;flex-wrap:wrap;color:var(--muted);font-size:13px}.e4-meta strong{color:var(--ink)}
.e4-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px}.e4-table{width:100%;border-collapse:collapse;min-width:760px}.e4-table th,.e4-table td{padding:14px;vertical-align:top;text-align:left;border-bottom:1px solid var(--line)}.e4-table th{font-size:12px;text-transform:uppercase;color:var(--yellow)}.e4-table td small{display:block;color:var(--muted)}
.e4-reader-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.e4-reader-card{border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(17,31,73,.75),rgba(5,10,24,.7));min-width:0}.e4-reader-card h2,.e4-reader-card h3{overflow-wrap:anywhere}.e4-reader-card .e4-noncanon{margin-bottom:12px}.e4-reader-card.featured{box-shadow:0 0 0 1px rgba(212,107,255,.35),0 20px 60px rgba(212,107,255,.12)}
.e4-entry-body{padding:clamp(20px,4vw,48px);max-width:900px;margin:0 auto}.e4-entry-body .e4-prose{font-size:18px;line-height:1.8}.e4-owner-note{font-size:13px;color:var(--muted);padding:12px;border:1px dashed var(--line);border-radius:14px}.e4-legal{padding:16px 18px;border:1px solid rgba(255,159,67,.55);background:rgba(255,159,67,.08);border-radius:18px;color:#ffe6ca}.e4-split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:18px;align-items:start}.e4-sticky{position:sticky;top:92px}.e4-empty{padding:22px;text-align:center;border:1px dashed var(--line);border-radius:18px;color:var(--muted)}
@media(max-width:980px){.e4-grid,.e4-grid.two,.e4-grid.four,.e4-reader-grid,.e4-split{grid-template-columns:1fr 1fr}.e4-metrics{grid-template-columns:1fr 1fr}.e4-sticky{position:static}.e4-form-grid{grid-template-columns:1fr}.e4-form-grid .full{grid-column:auto}}
@media(max-width:680px){.e4-wrap{width:min(100% - 20px,1240px);margin-top:14px}.e4-grid,.e4-grid.two,.e4-grid.four,.e4-reader-grid,.e4-split,.e4-metrics{grid-template-columns:1fr}.e4-list-item{grid-template-columns:1fr}.e4-list-item .e4-actions{justify-content:flex-start}.e4-hero,.e4-section,.e4-card,.e4-form,.e4-reader-card{padding:18px}.e4-actions .btn{width:100%}.e4-tabs{display:grid;grid-template-columns:1fr 1fr}.e4-tab{width:100%}.e4-table th,.e4-table td{padding:12px}.e4-entry-body{padding:18px}.e4-entry-body .e4-prose{font-size:16px}}

/* Deliberate vertical separation between top-level Expansion 4 sections. */
.e4-wrap > .e4-split + .e4-section,.e4-wrap > .e4-section + .e4-section{margin-top:20px}
.e4-form label > small{font-weight:600;line-height:1.45}
@media(max-width:680px){.e4-wrap > .e4-split + .e4-section,.e4-wrap > .e4-section + .e4-section{margin-top:16px}}

/* Keep My Fan Participation cards readable when application notes are long. */
#writer-participation .e4-grid.two > div{min-width:0}
#my-applications .e4-list-item,
#my-projects .e4-list-item{
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  gap:14px;
}
#my-applications .e4-list-item .e4-actions,
#my-projects .e4-list-item .e4-actions{
  justify-content:flex-start;
  width:100%;
  margin-top:0;
}
#my-applications .e4-list-item .e4-actions .btn,
#my-projects .e4-list-item .e4-actions .btn{
  flex:0 0 auto;
}
#my-applications .e4-list-item small,
#my-projects .e4-list-item small{
  line-height:1.55;
}
@media(max-width:760px){
  #writer-participation .e4-grid.two{grid-template-columns:1fr}
}

/* Public Authorized World project-card layout. */
/* The public FAN PROJECTS area should use the available panel width.
   With one project, the card expands naturally. With several projects,
   cards form responsive columns without being squeezed into narrow strips. */
#project-list.e4-reader-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 18px;
  align-items: start;
  width: 100%;
}

#project-list .e4-reader-card {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}

#project-list .e4-reader-card h3,
#project-list .e4-reader-card p,
#project-list .e4-reader-card .e4-meta {
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  #project-list.e4-reader-grid {
    grid-template-columns: 1fr;
  }
}