/* overtime_calculator — tool-specific design (shift work: charcoal, safety orange, hours meter). Shared: nav, footer, ad script only. */
body[data-tool="overtime_calculator"] {
  --ot-bg: #ECEAE4; --ot-card: #FFFFFF; --ot-ink: #17191C; --ot-ink2: #474C54; --ot-mute: #7C828B; --ot-line: #D9D5CC;
  --ot-char: #1D2024; --ot-char2: #2A2E34; --ot-char3: #3A3F47; --ot-or: #FF6A13; --ot-or2: #E25507; --ot-red: #E5383B; --ot-yel: #FFC72C; --ot-steel: #C5CAD1;
  --ot-cond: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; --ot-sans: Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--ot-bg); color: var(--ot-ink); font-family: var(--ot-sans);
}
body[data-tool="overtime_calculator"] .dt-nav { background: var(--ot-char); border-bottom: 0; }
body[data-tool="overtime_calculator"] .dt-nav .navbar-brand, body[data-tool="overtime_calculator"] .dt-nav .nav-link { color: #fff; }
body[data-tool="overtime_calculator"] .dt-nav .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.dt-bare { display: block; width: 100%; flex: 1; }

.ot-band { position: relative; background: var(--ot-char); color: #fff; padding: 40px 20px 92px; }
.ot-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: repeating-linear-gradient(-45deg, var(--ot-yel) 0 14px, var(--ot-char) 14px 28px); }
.ot-hero { max-width: 1120px; margin: 0 auto; }
.ot-hero h1 { margin: 0; font-family: var(--ot-cond); font-size: 64px; line-height: 1; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; }
.ot-hero p { margin: 12px 0 0; font-size: 19px; color: var(--ot-steel); max-width: 60ch; }
.otx { max-width: 1160px; margin: -64px auto 0; padding: 0 20px 64px; position: relative; }

.ot { display: grid; background: var(--ot-char); grid-template-columns: minmax(0, 1fr) minmax(0, 440px); border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 22px 44px rgba(23,25,28,.16); overflow: hidden; }
.ot-in { background: var(--ot-card); display: flex; flex-direction: column; gap: 16px; padding: 26px 26px 24px; }
.ot-f { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.ot-l { font-family: var(--ot-cond); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ot-ink2); }
.ot-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ot-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.ot-box { display: flex; align-items: center; gap: 6px; border: 2px solid var(--ot-line); border-radius: 6px; padding: 0 12px; background: #fff; }
.ot-box i { font-style: normal; font-weight: 600; color: var(--ot-mute); white-space: nowrap; }
.ot-box input { width: 100%; min-width: 0; border: 0; background: transparent; font-family: var(--ot-cond); font-size: 24px; font-weight: 700; color: var(--ot-ink); padding: 7px 0; outline: none; }
.ot-box input::placeholder { color: #BBB8B0; font-weight: 600; }
.ot-box:focus-within, .ot-in select:focus { border-color: var(--ot-or); box-shadow: 0 0 0 3px rgba(255,106,19,.18); }
.ot-in select { width: 100%; border: 2px solid var(--ot-line); border-radius: 6px; background: #fff; font: inherit; font-size: 16px; font-weight: 600; color: var(--ot-ink); padding: 11px 10px; outline: none; }
.ot-seg { display: flex; border: 2px solid var(--ot-char); border-radius: 6px; overflow: hidden; }
.ot-seg button { flex: 1; border: 0; border-left: 2px solid var(--ot-char); background: #fff; font-family: var(--ot-cond); font-size: 17px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ot-char); padding: 9px 8px; cursor: pointer; white-space: nowrap; }
.ot-seg button:first-child { border-left: 0; }
.ot-seg button[aria-pressed="true"] { background: var(--ot-char); color: var(--ot-yel); }
.ot-seg button:disabled { color: #B3B0A9; cursor: not-allowed; }
.ot-seg button:focus-visible { outline: 3px solid var(--ot-or); outline-offset: -3px; }
body[data-pay="hourly"] .only-sal, body[data-pay="salary"] .only-hr, body[data-mode="day"] .only-week, body[data-mode="week"] .only-day, body[data-period="1"] .only-w2 { display: none; }
body:not([data-pay]) .only-sal, body:not([data-mode]) .only-day, body:not([data-period]) .only-w2 { display: none; }

.ot-week + .ot-week { margin-top: 12px; }
.ot-wl { display: block; margin-bottom: 6px; font-family: var(--ot-cond); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ot-ink2); }
.ot-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ot-day { display: flex; flex-direction: column; align-items: stretch; margin: 0; border: 2px solid var(--ot-line); border-radius: 6px; background: #fff; overflow: hidden; }
.ot-day span { background: #F4F2EE; font-family: var(--ot-cond); font-size: 13px; font-weight: 700; text-align: center; color: var(--ot-ink2); padding: 3px 0; }
.ot-day input { width: 100%; border: 0; text-align: center; font-family: var(--ot-cond); font-size: 22px; font-weight: 700; color: var(--ot-ink); padding: 7px 2px; outline: none; background: transparent; }
.ot-day input::placeholder { color: #CFCBC3; }
.ot-day:focus-within { border-color: var(--ot-or); }
.ot-more { border-top: 2px dashed var(--ot-line); padding-top: 14px; }
.ot-more summary { cursor: pointer; font-family: var(--ot-cond); font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ot-char); list-style: none; }
.ot-more summary::-webkit-details-marker { display: none; }
.ot-more summary::before { content: "+"; display: inline-block; width: 18px; color: var(--ot-or); }
.ot-more[open] summary::before { content: "\2212"; }
.ot-3 .ot-box input { font-size: 20px; }

.ot-res { background: var(--ot-char); color: #fff; padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 18px; }
.ot-big span { display: block; font-family: var(--ot-cond); font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ot-or); }
.ot-big b { display: block; margin-top: 2px; font-family: var(--ot-cond); font-size: 68px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.ot-mrow { display: flex; align-items: center; gap: 10px; }
.ot-mrow + .ot-mrow { margin-top: 12px; }
.ot-mlab { flex: none; width: 52px; font-family: var(--ot-cond); font-size: 14px; font-weight: 700; color: var(--ot-steel); text-transform: uppercase; }
.ot-bar { position: relative; flex: 1; display: flex; height: 26px; margin: 18px 0 16px; background: var(--ot-char3); border-radius: 3px; }
.ot-bar i { display: block; height: 100%; }
.ot-bar i.m-reg { background: var(--ot-steel); border-radius: 3px 0 0 3px; }
.ot-bar i.m-ot { background: var(--ot-or); }
.ot-bar i.m-dt { background: var(--ot-red); }
.ot-40 { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 2px dashed #fff; }
.ot-40 span { position: absolute; top: -18px; left: -9px; font-family: var(--ot-cond); font-size: 13px; font-weight: 700; color: #fff; }
.ot-end { position: absolute; right: 0; bottom: -18px; font-style: normal; font-family: var(--ot-cond); font-size: 12px; color: var(--ot-mute); }
.ot-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--ot-steel); }
.ot-key span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.ot-key .m-reg::before { background: var(--ot-steel); } .ot-key .m-ot::before { background: var(--ot-or); } .ot-key .m-dt::before { background: var(--ot-red); }
.ot-lines { border-top: 1px solid var(--ot-char3); }
.ot-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--ot-char3); font-size: 15px; }
.ot-line span { color: var(--ot-steel); font-weight: 600; }
.ot-line em { font-style: normal; color: var(--ot-mute); font-size: 14px; white-space: nowrap; }
.ot-line b { font-family: var(--ot-cond); font-size: 22px; font-weight: 700; text-align: right; min-width: 92px; font-variant-numeric: tabular-nums; }
.ot-line.o span, .ot-line.o b { color: var(--ot-or); }
.ot-line.d span, .ot-line.d b { color: #FF7A7C; }
.ot-line.sum { border-bottom: 0; }
.ot-line.sum span { color: #fff; }
.ot-rates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ot-rates div { background: var(--ot-char2); border-radius: 6px; padding: 9px 10px; }
.ot-rates dt { font-size: 12px; color: var(--ot-mute); font-weight: 600; }
.ot-rates dd { margin: 2px 0 0; font-family: var(--ot-cond); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ot-qot { border-left: 4px solid var(--ot-yel); background: var(--ot-char2); border-radius: 0 6px 6px 0; padding: 12px 14px; }
.ot-qot span { display: block; font-size: 13px; font-weight: 600; color: var(--ot-steel); }
.ot-qot b { display: block; margin-top: 2px; font-family: var(--ot-cond); font-size: 30px; font-weight: 800; color: var(--ot-yel); font-variant-numeric: tabular-nums; }
.ot-qot small { display: block; font-size: 13px; color: var(--ot-mute); }

.ot-adwrap { margin: 40px 0 8px; }
.ot-article, .ot-faq, .ot-morelinks { max-width: 760px; margin: 0 auto; }
.ot-article { margin-top: 44px; font-size: 17px; line-height: 1.75; color: var(--ot-ink2); }
.ot-article h2, .ot-faq h2, .ot-morelinks h2 { font-family: var(--ot-cond); font-size: 34px; line-height: 1.15; font-weight: 800; letter-spacing: .005em; text-transform: uppercase; color: var(--ot-ink); margin: 52px 0 12px; }
.ot-article h2:first-child { margin-top: 0; }
.ot-article p { margin: 0 0 14px; } .ot-article b { color: var(--ot-ink); } .ot-article a { color: var(--ot-or2); }
.ot-article ul { padding-left: 1.2em; } .ot-article li { margin: 7px 0; }
.ot-eq { margin: 14px 0 16px; padding: 14px 16px; background: var(--ot-char); color: #fff; border-left: 6px solid var(--ot-or); border-radius: 4px; font-family: var(--ot-cond); font-size: 20px; font-weight: 600; line-height: 1.5; letter-spacing: .01em; }
.ot-table { overflow-x: auto; margin: 16px 0; background: #fff; border-radius: 8px; border: 1px solid var(--ot-line); }
.ot-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ot-table th { text-align: left; padding: 10px 12px; background: var(--ot-char); color: #fff; font-family: var(--ot-cond); font-size: 15px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.ot-table td { padding: 9px 12px; border-bottom: 1px solid #EEEBE5; color: var(--ot-ink); font-variant-numeric: tabular-nums; }
.ot-table td:first-child { font-weight: 700; }
.ot-table tbody tr:nth-child(even) td { background: #FAF9F6; }
.ot-table tr:last-child td { border-bottom: 0; }
.ot-src { font-size: 15px; }
.ot-q { border-bottom: 2px solid var(--ot-line); }
.ot-q summary { list-style: none; cursor: pointer; padding: 16px 32px 16px 0; position: relative; font-size: 18px; font-weight: 700; color: var(--ot-ink); }
.ot-q summary::-webkit-details-marker { display: none; }
.ot-q summary::after { content: "+"; position: absolute; right: 4px; top: 11px; font-size: 26px; font-weight: 500; color: var(--ot-or); }
.ot-q[open] summary::after { content: "\2212"; }
.ot-q p { margin: 0 0 18px; font-size: 17px; line-height: 1.7; color: var(--ot-ink2); }
.ot-morelinks > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ot-morelinks a { display: block; text-decoration: none; padding: 14px 16px; border: 2px solid var(--ot-line); border-radius: 8px; background: #fff; color: var(--ot-ink); }
.ot-morelinks a:hover { border-color: var(--ot-or); }
.ot-morelinks b { display: block; font-size: 16px; } .ot-morelinks span { display: block; font-size: 14px; color: var(--ot-mute); margin-top: 2px; }

@media (max-width: 940px) {
  .ot { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ot-band { padding: 26px 16px 78px; }
  .ot-hero h1 { font-size: 46px; } .ot-hero p { font-size: 16px; }
  .otx { padding: 0 12px 48px; margin-top: -58px; }
  .ot-in { padding: 20px 16px; gap: 14px; }
  .ot-res { padding: 22px 16px 18px; }
  .ot-big b { font-size: 54px; }
  .ot-seg button { font-size: 15px; padding: 9px 4px; }
  .ot-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ot-3 .ot-f:last-child { grid-column: 1 / -1; }
  .ot-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ot-line b { font-size: 20px; min-width: 0; }
  .ot-line em { font-size: 13px; }
  .ot-rates dd { font-size: 19px; }
  .ot-table th { white-space: normal; font-size: 14px; }
  .ot-band { padding-bottom: 72px; }
  .ot-article { font-size: 16px; }
  .ot-article h2, .ot-faq h2, .ot-morelinks h2 { font-size: 28px; margin-top: 40px; }
  .ot-morelinks > div { grid-template-columns: minmax(0, 1fr); }
}