/* City of Ughville
   One 780px page: sidebar | main. Under 720px the sidebar becomes the
   directory board and everything stacks. Web-safe colors only. */

:root {
  --pink: #FF0066;
  --green: #99CC33;
  --grey: #C0C0C0;
  --grey-hi: #E0E0E0;
  --paper: #FFFFFF;
  --ink: #000000;
  --link: #0000CC;
  --muted: #666666;
  --below: #FFCCCC;
  --band: #E0E0E0;
  --team: #99CC33;
  --team-ink: #000000;
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: Verdana, Geneva, Tahoma, sans-serif;
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  padding: 16px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px));
}
a { color: var(--link); }
a:focus-visible { outline: 2px dotted var(--ink); outline-offset: 2px; }
table { font-size: inherit; font-family: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; margin: 0; }
h1 { font-size: 22px; }
h2 { font-size: 16px; margin-bottom: 6px; }

/* the page */
.page {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  border: 2px outset var(--grey);
  background: var(--paper);
}
.main {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.headerline { font-size: 12px; color: var(--muted); margin: -10px 0 0; }

/* sidebar */
.side {
  background: var(--green);
  border-right: 2px outset var(--green);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sealimg { display: block; margin: 0 auto; width: 96px; height: 96px; }
.sealimg.sm { margin: 0; width: 40px; height: 40px; }
.cityname { font-family: var(--serif); font-weight: 700; font-size: 15px; text-align: center; margin-bottom: 4px; }
.dept {
  display: block;
  background: var(--grey);
  border: 2px outset var(--grey-hi);
  padding: 5px 7px;
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  line-height: 1.35;
}
.dept b { display: block; font-weight: 700; }
.dept u { color: var(--link); }
.dept[aria-current] { background: var(--pink); border-style: inset; border-color: var(--pink); color: var(--paper); }
.dept[aria-current] u { color: var(--paper); text-decoration: none; }

/* directory board (phones) */
.board { display: none; }

/* footer */
footer {
  grid-column: 1 / -1;
  border-top: 3px groove var(--grey);
  margin: 0 12px;
  padding: 12px 0 14px;
  text-align: center;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
footer p { margin: 0; max-width: 460px; }
.counter { display: inline-flex; gap: 2px; background: var(--ink); padding: 3px; border: 2px inset var(--grey); }
.counter img { display: block; width: 15px; height: 20px; }
.best { color: var(--muted); }

@media (max-width: 720px) {
  body { padding-top: 10px; padding-bottom: 10px; }
  .page { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .board {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--green);
    border-bottom: 2px outset var(--green);
    padding: 8px;
  }
  .board .strip { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--ink); }
  .board .cityname { margin: 0; text-align: left; }
  .board .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .board .grid .dept:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* public notices */
.notice { width: 100%; border: 2px outset var(--grey); border-collapse: separate; border-spacing: 2px; background: var(--grey); }
.notice th { background: var(--pink); color: var(--paper); border: 1px inset var(--grey); padding: 6px 10px; text-align: left; font-family: var(--serif); font-size: 15px; }
.notice th span { float: right; font-family: var(--sans); font-weight: 400; font-size: 11px; padding-top: 3px; }
.notice td { background: var(--paper); border: 1px inset var(--grey); padding: 10px 12px; }
.notice td.more { font-size: 11px; text-align: right; padding: 4px 12px; }

/* stat tables */
table.stats { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.stats th, .stats td { border: 1px solid var(--ink); padding: 3px 6px; }
.stats th { background: var(--team); color: var(--team-ink); text-align: left; }
.stats th a { color: var(--team-ink); }
.stats .n { text-align: right; }
.stats tr.below td { background: var(--below); }
.stats tr.line td { border: 0; padding: 5px 0 2px; text-align: center; font-size: 11px; }
.stats tr.line hr { border: 0; border-top: 3px groove var(--grey); margin: 0 0 2px; }
.foot { font-size: 11px; margin: 6px 0 0; }

/* City Hall */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 14px; }
.col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.date { font-family: var(--serif); font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.game + .game { margin-top: 8px; }
.game .pts { width: 52px; }
.game .w { font-weight: 700; }
.game .link { text-align: right; font-size: 11px; }
.rail { align-items: center; text-align: center; font-size: 11px; }
.rail img { display: block; width: 180px; max-width: 100%; height: auto; margin: 0 auto 6px; }
.biz { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
.biz th { background: var(--green); border: 1px solid var(--ink); padding: 4px 8px; font-family: var(--serif); font-size: 13px; text-align: left; }
.biz td { border: 1px solid var(--ink); padding: 6px 8px; line-height: 1.8; }
.biz ul { list-style: none; margin: 0 0 4px; padding: 0; }
.biz .grp { font-weight: 700; }
.sq { display: inline-block; width: 8px; height: 8px; border: 1px solid var(--ink); background: var(--ink); margin-right: 5px; vertical-align: 0; }

/* team colors */
.sq.sav { background: #FFCC00; }
.sq.pa { background: #FF0066; }
.sq.tex { background: #3366CC; }
.sq.lbc { background: #33CCCC; }
.sq.ff { background: #FF3333; }
.sq.ind { background: #993333; }

@media (max-width: 720px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .col { display: contents; }
  .pop { order: 1; }
  .stand { order: 2; }
  .res { order: 3; }
  .links { order: 4; }
  .plaque { order: 5; }
}

/* team colors: a page or a block in a team's color */
.t-sav { --team: #FFCC00; --team-ink: #000000; }
.t-pa { --team: #FF0066; --team-ink: #000000; }
.t-tex { --team: #3366CC; --team-ink: #FFFFFF; }
.t-lbc { --team: #33CCCC; --team-ink: #000000; }
.t-ff { --team: #FF3333; --team-ink: #000000; }
.t-ind { --team: #993333; --team-ink: #FFFFFF; }
.t-green { --team: #99CC33; --team-ink: #000000; }
.side, .board, footer { --team: #99CC33; --team-ink: #000000; }
.bg-sav { background: #FFCC00; }
.bg-pa { background: #FF0066; }
.bg-tex { background: #3366CC; color: #FFFFFF; }
.bg-lbc { background: #33CCCC; }
.bg-ff { background: #FF3333; }
.bg-ind { background: #993333; color: #FFFFFF; }

/* Dept. of Statistics */
.crumb { font-size: 11px; margin: 0; }
.headerline.below-h1 { margin: 4px 0 0; }
.crumb + .headerline { margin: 0; }
h2 small, h1 small { font-family: var(--sans); font-weight: 400; font-size: 12px; }
.jump { font-size: 12px; margin: 0; }
.teamhead { width: 100%; border: 2px outset var(--grey); border-collapse: separate; border-spacing: 2px; background: var(--grey); }
.teamhead th { background: var(--team); color: var(--team-ink); border: 1px inset var(--grey); padding: 6px 10px; text-align: left; font-family: var(--serif); font-size: 22px; }
.teamhead th h1 { font-size: inherit; }
.teamhead td { background: var(--paper); border: 1px inset var(--grey); padding: 6px 10px; }
.gamehead th { background: var(--green); color: var(--ink); }
.wrap { overflow-x: auto; }
.stats th, .stats td { white-space: nowrap; }
.stats tr.grp td { background: var(--band); font-weight: 700; }
.note { font-size: 11px; margin: 6px 0 0; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.stack h2 { margin-bottom: 0; }
h2.gap { margin-top: 6px; }
.muted { color: var(--muted); }

.roster td, .roster th { text-align: right; }
.roster td:first-child, .roster th:first-child { text-align: left; position: sticky; left: 0; background: var(--paper); }
.roster th:first-child { background: var(--team); }
.roster td.pos, .roster th.pos { text-align: left; }

/* game page */
.wrap .ls td, .wrap .ls th { text-align: center; padding: 3px 4px; }
.ls td:first-child, .ls th:first-child { text-align: left; }
.ls th { background: var(--band); color: var(--ink); }
.ls .pts { border-left: 3px double var(--ink); font-weight: 700; }
.ls .won { font-weight: 700; }
.team-block { display: flex; flex-direction: column; gap: 8px; }
.team-block h2 { margin-bottom: 0; }
.roles, .field { font-size: 11px; margin: 0; }
.box td, .box th { text-align: right; }
.box td:first-child, .box th:first-child { text-align: left; position: sticky; left: 0; background: var(--paper); }
.box th:first-child { background: var(--team); }
.box td.p, .box th.p { text-align: left; }
.box tr.t td { font-weight: 700; background: var(--band); }
.short { display: none; }
.notes td { white-space: normal; vertical-align: top; }
.notes td.who { width: 30%; }

/* player page */
.gl td, .gl th, .sp td, .sp th, .pr td, .pr th, .sl td, .sl th { text-align: right; }
.stats .l { text-align: left; }
.stats tr.m td { background: var(--band); font-weight: 700; text-align: left; }

/* leaders */
.boards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.board-t td.link { text-align: right; font-size: 11px; }
.board-t th { white-space: normal; }
.list tr.unq td, .list tr.unq td a { color: #999999; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.cols3 { columns: 3 160px; column-gap: 16px; }

@media (max-width: 720px) {
  .main { padding: 10px 8px; }
  .teamhead th { font-size: 19px; }
  .wrap .fit td, .wrap .fit th { white-space: normal; padding: 3px 4px; }
  .page .full { display: none; }
  .page .short { display: inline; }
  .box .season { display: none; }
  .wrap .box td, .wrap .box th, .wrap .ls td, .wrap .ls th { padding: 3px 2px; font-size: 11px; }
  .wrap .box td:first-child, .wrap .box td.p { white-space: normal; }
  .roles .full, .field .full, .notes .full { display: inline; }
  .wrap .gl td, .wrap .gl th, .wrap .sp td, .wrap .sp th, .wrap .pr td, .wrap .pr th, .wrap .sl td, .wrap .sl th { padding: 3px 3px; font-size: 11px; white-space: normal; }
  .wrap .gl td, .wrap .gl th { padding: 3px 2px; }
  .boards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .wrap .gl td, .wrap .gl th { padding: 3px 1px; }
}

/* flex children may shrink so wide tables scroll inside their own box */
.main > *, .stack > *, .team-block > *, .col > * { min-width: 0; }
@media (max-width: 380px) {
  .wrap .fit td, .wrap .fit th { padding: 3px 3px; }
}

/* Bureau of Metrics */
.scoreboard .ing { width: 46%; }
svg.bar { display: block; width: 100%; height: 14px; border: 2px inset var(--grey); background: var(--paper); box-sizing: border-box; }
.fill-team { fill: var(--team); }
.barcol { width: 45%; }
.key { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; }
.sw { display: inline-block; width: 10px; height: 10px; border: 1px solid var(--ink); margin-right: 5px; vertical-align: -1px; }
.c-003366 { background: #003366; }
.c-669966 { background: #669966; }
.c-CC9933 { background: #CC9933; }
.c-996699 { background: #996699; }
.c-999999 { background: #999999; }
.c-CC6600 { background: #CC6600; }
.c-336666 { background: #336666; }
.c-666699 { background: #666699; }
.question { font-family: var(--serif); font-size: 19px; margin: 2px 0 4px; }
.question.small { font-size: 15px; margin: 0 0 6px; }
.calc { font-family: "Courier New", Courier, monospace; background: var(--band); border: 1px inset var(--grey); padding: 6px 8px; margin: 6px 0 0; }
p.body { margin: 0; max-width: 62ch; }
.wraptext { white-space: normal !important; }
.chartbox { border: 2px outset var(--grey); background: var(--grey); padding: 6px; }
.chart { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; }
.charttitle { font-family: var(--serif); font-weight: 700; font-size: 15px; text-align: center; margin: 0 0 4px; }
.legend { list-style: none; margin: 6px 0 0; padding: 6px 8px; background: var(--paper); border: 1px solid var(--ink); display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; }
.ln { display: inline-block; width: 20px; height: 3px; margin-right: 6px; vertical-align: 3px; }
.l-sav { background: #CC9900; }
.l-pa { background: #99CC33; }
.l-tex { background: #3366CC; }
.l-lbc { background: #33CCCC; }
.l-ff { background: #FF3333; }
.l-ind { background: #993333; }
details summary { color: var(--link); text-decoration: underline; cursor: pointer; font-size: 12px; margin-top: 8px; }
details .wrap { margin-top: 6px; }
@media (max-width: 720px) {
  .wrap .scoreboard td, .wrap .scoreboard th { white-space: normal; padding: 3px 4px; }
}

/* City Code */
.jumpbox { font-size: 12px; line-height: 1.9; border: 2px outset var(--grey); background: var(--band); padding: 6px 10px; }
.jumpbox b { margin-right: 4px; }
.index p { margin: 0 0 4px; font-size: 12px; line-height: 1.7; }
.index b { display: inline-block; width: 16px; }
.chapter { display: flex; flex-direction: column; gap: 10px; }
.chapter h2 { font-size: 18px; border-bottom: 3px groove var(--grey); padding-bottom: 2px; margin: 0; }
.chapter h3 { font-family: var(--serif); font-size: 15px; margin: 4px 0 0; }
.intro { margin: 0; font-size: 12px; max-width: 62ch; }
.entry { border: 1px solid var(--ink); background: var(--paper); scroll-margin-top: 8px; }
.entry:target { background: #FFFFCC; }
.entry .hd { background: var(--green); border-bottom: 1px solid var(--ink); padding: 5px 8px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.entry .hd b { font-family: var(--serif); font-size: 15px; }
.entry .for { font-size: 11px; }
.entry .bd { padding: 6px 8px; line-height: 1.55; }
.entry .bd p { margin: 0; max-width: 62ch; }
.entry dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; margin: 6px 0 0; font-size: 11px; }
.entry dt { font-weight: 700; }
.entry dd { margin: 0; }
.entry .bd p.top { font-size: 11px; text-align: right; margin-top: 4px; max-width: none; }

/* Gift Shop */
.shelf, .sec { display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 8px; }
.shelf h2, .sec h2 { font-size: 18px; border-bottom: 3px groove var(--grey); padding-bottom: 2px; margin: 0; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.card { border: 2px outset var(--grey); background: var(--paper); display: flex; flex-direction: column; min-width: 0; }
.card img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-bottom: 1px solid var(--ink); }
.card .tx { padding: 6px 7px 8px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.card h3 { font-size: 13px; text-wrap: balance; }
.card p { margin: 0; font-size: 11px; line-height: 1.45; flex: 1; }
.shopbtn { align-self: flex-start; background: var(--grey); border: 2px outset var(--grey-hi); padding: 2px 14px; font-weight: 700; font-size: 11px; color: var(--ink); text-decoration: none; }
.shopbtn:active { border-style: inset; }
.construction { border: 1px dashed var(--ink); background: #FFFFCC; padding: 8px; font-size: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.construction b { font-family: Impact, "Arial Black", sans-serif; font-weight: 400; font-size: 15px; letter-spacing: 1px; background: #FFCC00; border: 2px solid var(--ink); padding: 2px 8px; }
@media (max-width: 720px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* Office of Public Information */
.sec p { margin: 0; max-width: 62ch; line-height: 1.6; }
.sec h3 { font-size: 15px; margin: 4px 0 0; }
.sec p.note { font-size: 11px; }
.samples { margin: 0; padding-left: 20px; line-height: 1.6; max-width: 62ch; }
.samples li { margin-bottom: 6px; }
.email { font-family: "Courier New", Courier, monospace; font-size: 14px; font-weight: 700; background: var(--band); border: 1px inset var(--grey); padding: 4px 8px; display: inline-block; user-select: all; overflow-wrap: anywhere; }
.sealrow { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.bigseal { flex: none; width: 160px; height: 160px; }
.sealtext { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.sec .motto { font-family: var(--serif); font-size: 18px; font-weight: 700; letter-spacing: 1px; }

/* kWAR */
.stats.kwar td.k { font-weight: 700; }
ol.steps { margin: 6px 0; padding-left: 22px; max-width: 62ch; }
ol.steps li { margin-bottom: 4px; }
#what p.body + p.body, #what ol + p.body { margin-top: 8px; }

/* Dept. of Tourism */
.tix td { white-space: normal; vertical-align: top; }
.tour .park { font-size: 11px; color: var(--muted); }
.tour .sq { margin-left: 0; }
.tix .nw, .tix td.nw { white-space: nowrap; }