/* Official Wellbeing Desk — page-specific pieces. Layout, nav, footer and tokens come from styles.css. */
.desk-tickets { display: grid; gap: 22px; padding-top: 40px; }
.ticket { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--green); border-radius: 16px; padding: 28px; }
.ticket .meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); margin-bottom: 8px; }
.ticket h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin: 0 0 4px; }
.ticket h2 a { color: inherit; }
.ticket h2 a:hover { text-decoration: underline; }
.ticket .office { color: var(--muted); margin: 0 0 6px; }
.label { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700; color: var(--muted); margin: 20px 0 8px; }
.ticket blockquote, .desk-quote { margin: 0; padding: 12px 16px; background: #f1ece3; border-radius: 10px; font-style: italic; }
.reply { padding: 12px 16px; background: #e8efe7; border-radius: 10px; }
ul.actions { margin: 4px 0 0; padding-left: 20px; }
ul.actions li { margin: 3px 0; }
.status, .enrolled { display: inline-block; margin: 16px 6px 0 0; font-size: .8rem; font-weight: 700; border-radius: 999px; padding: 5px 12px; }
.status { color: #fff; background: var(--green); }
.enrolled { color: #3b2105; background: #f4c98d; }
.note { font-size: .85rem; color: var(--muted); margin-top: 10px; }
.thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.thumbs a { display: block; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.thumbs img, figure img { display: block; width: 100%; height: auto; }
.links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.desk-policy { max-width: 760px; }
.desk-policy p { margin: 0 0 12px; }
.desk-policy a { color: var(--green); font-weight: 600; text-decoration: underline; }
.desk-form { max-width: 760px; }
.desk-form label { display: block; font-size: .9rem; font-weight: 600; margin: 16px 0 6px; }
.desk-form select, .desk-form textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.desk-form textarea { min-height: 110px; }
.desk-form button { margin-top: 16px; }
.desk-form button:disabled { opacity: .7; cursor: default; }
#deskReply { display: none; margin-top: 18px; }

/* ticket detail pages */
.desk-detail .panel { max-width: 1100px; margin: 0 auto 22px; padding: 0 24px; scroll-margin-top: 90px; }
.desk-detail .panel > .inner { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.desk-detail .panel h2 { font-size: 1.35rem; margin: 0 0 4px; }
.desk-detail .panel .sub { color: var(--muted); font-size: .9rem; margin: 0 0 18px; max-width: 70ch; }
.letter { border: 1px solid var(--line); border-radius: 10px; padding: 28px 26px; background: #fffdf8; font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; line-height: 1.65; max-width: 760px; }
.letter .lh { text-align: center; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 18px; }
.letter .lh b { display: block; font-size: 1.15rem; letter-spacing: .05em; text-transform: uppercase; }
.letter .lh span { font: .8rem Inter, sans-serif; color: var(--muted); }
.letter .dateline { text-align: right; font-size: .9rem; color: var(--muted); margin: 0 0 14px; }
.letter p { margin: 0 0 12px; }
.letter .sig { margin-top: 18px; }
.letter .sig i { display: block; font-size: 1.4rem; color: #1b2b55; }
.letter .sig small { font: .8rem Inter, sans-serif; color: var(--muted); }
.letter.cg { background: #f6f9f4; }
.letter.cg .lh { border-color: var(--green); }
.letter.cg .lh b { color: var(--green); }
.letter .cc { font: .8rem Inter, sans-serif; color: var(--muted); margin-top: 16px; }
.desk-detail figure { margin: 0 0 20px; }
.desk-detail figure a { display: block; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.desk-detail figcaption { font-size: .9rem; color: var(--muted); margin-top: 8px; }
.desk-detail figcaption b { color: var(--ink); }
.notice { border: 2px solid var(--green); border-radius: 12px; padding: 24px; background: #fbfcf8; max-width: 760px; }
.notice .stamp { display: inline-block; border: 2px solid #9b2c2c; color: #9b2c2c; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; padding: 4px 10px; transform: rotate(-2deg); margin-bottom: 14px; }
.notice ul { margin: 6px 0 12px; padding-left: 20px; }
.notice p { margin: 0 0 10px; }
.notice .fine { font-size: .82rem; color: var(--muted); }
.notice a { color: var(--green); text-decoration: underline; }
.pager { max-width: 1100px; margin: 10px auto 70px; padding: 0 24px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pager a { color: var(--green); font-weight: 600; }
@media (max-width: 700px) {
  .ticket, .desk-detail .panel > .inner { padding: 20px; }
  .letter { padding: 20px 16px; font-size: 1rem; }
}
@media print { .nav, footer, .subnav, .pager, .links { display: none; } }
.desk-detail .figs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .desk-detail .figs { grid-template-columns: 1fr; } }