/* Work With Me page */
.work { padding-bottom: 0; }
.work-notice { margin: 0 0 32px; padding: 16px 24px; border: 1px solid var(--line); border-left: 2px solid var(--accent-text); border-radius: 8px; background: var(--surface); color: var(--body); }
.work-notice--warn { border-left-color: var(--danger); font-size: 14px; color: var(--muted); }
.work-notice code { font-family: var(--font-mono); font-size: 13px; }

.work-jump { display: flex; flex-wrap: wrap; gap: 8px 32px; padding: 16px 0; margin-bottom: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.work-jump a { font-size: 14px; color: var(--heading); }
.work-jump a:hover { color: var(--accent-text); }
.work-jump .mono { color: var(--muted); margin-right: 8px; font-size: 12px; }

.work-offer { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: start; padding: 64px 0; border-bottom: 1px solid var(--line); }
.work-offer:last-child { border-bottom: 0; }
.work-offer__intro { display: flex; flex-direction: column; gap: 12px; }
.work-offer__intro h2 { font-size: 32px; line-height: 1.2; }
.work-offer__intro p { margin: 0; color: var(--muted); max-width: 46ch; }
.work-offer__intro .work-offer__kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.work-offer__facts { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--muted); }
.work-offer__facts li { padding-left: 16px; position: relative; }
.work-offer__facts li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; border-top: 1px solid var(--accent-text); }

.work-offer__form { min-width: 0; }
.work-offer__form summary { list-style: none; cursor: pointer; gap: 8px; width: auto; display: inline-flex; }
.work-offer__form summary::-webkit-details-marker { display: none; }
.work-offer__form[open] summary { margin-bottom: 24px; border-color: var(--accent-text); color: var(--accent-text); }
.work-offer__form summary .icon { transition: transform 250ms ease-out; }
.work-offer__form[open] summary .icon { transform: rotate(90deg); }

.ty-form { display: flex; flex-direction: column; gap: 24px; padding: 32px; background: var(--surface); border: 1px solid var(--card-border); border-radius: 12px; box-shadow: var(--card-shadow); }
.ty-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ty-form__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ty-form__field--wide { grid-column: 1 / -1; }
.ty-form__field > span, .ty-form__checks legend { font-size: 14px; font-weight: 600; color: var(--heading); padding: 0; }
.ty-form__field em { font-style: normal; font-weight: 400; color: var(--muted); }
.ty-form input[type=text], .ty-form input[type=email], .ty-form select, .ty-form textarea {
  width: 100%; padding: 0 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--heading); font: inherit; font-size: 16px;
}
.ty-form input[type=text], .ty-form input[type=email], .ty-form select { height: 48px; }
.ty-form textarea { padding: 12px 16px; resize: vertical; min-height: 120px; line-height: 1.55; }
.ty-form input:focus-visible, .ty-form select:focus-visible, .ty-form textarea:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; }
.ty-form__checks { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 24px; }
.ty-form__checks legend { width: 100%; margin-bottom: 8px; }
.ty-form__checks label { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: var(--body); cursor: pointer; }
.ty-form__checks input { width: 18px; height: 18px; accent-color: var(--btn-bg); }

.ty-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.ty-form .ty-btn--primary { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 24px; border: 0; border-radius: 8px; background: var(--btn-bg); color: var(--on-btn); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 150ms ease-out; }
.ty-form .ty-btn--primary:hover { background: var(--btn-hover); }
.ty-form .ty-btn--primary:disabled { opacity: 0.6; cursor: default; }
.ty-form__note { margin: 0; flex: 1 1 220px; font-size: 12px; color: var(--muted); }
.ty-form__msg { margin: 0; min-height: 1.4em; font-size: 16px; color: var(--heading); }
.ty-form__msg.is-error { color: var(--danger); }
.ty-form__msg.is-success { color: var(--accent-text); }
.ty-form[hidden] { display: none; }

@media (max-width: 900px) {
  .work-offer { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; }
}
@media (max-width: 600px) {
  .ty-form { padding: 24px 16px; }
  .ty-form__grid { grid-template-columns: 1fr; }
}

.ty-form__pay label { cursor: pointer; }
.ty-bank { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; padding: 16px 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.ty-bank dt { font-size: 14px; color: var(--muted); }
.ty-bank dd { margin: 0; font-family: var(--font-mono); font-size: 16px; color: var(--heading); overflow-wrap: anywhere; }
.ty-form [hidden] { display: none !important; }