/* ══ YOUR OWN JOBS ═════════════════════════════════════════  10 Oct 2026 (rp84) ══
   own-jobs.html: a Plus trade's records of jobs that did not come through
   Hyyryn. The sections, fields, buttons, plates, facts and lists are the
   organisation page's (hyyryn-organisation.css, scoped .og), which are the
   settings page's parts; nothing of theirs is redeclared here. This file holds
   only what that page has no part for:

     the photographs   3:2 tiles with square corners and the photograph
                       covering, as the evidence tiles on the job pages
                       (.ev-shot in the homeowner kit, measured 10 Oct 2026),
                       each with the facts of how it arrived beneath it
     the notes         a dated list; a correction hangs under what it corrects
     the notice        the words a trade gives the customer, set as a letter
     dates and text    the two field types the organisation page never needed

   Values are the kit's tokens, read through the .og scope's own variables. */

.oj .st-f input[type=date], .oj .st-f input[type=search], .oj .st-f input[type=tel] {
  width: 100%; box-sizing: border-box; margin: 0; padding: 12px 18px; font-family: var(--sans, 'Inter', sans-serif); font-size: 15px; line-height: 1.4; color: var(--ink, #1B2638);
  background: #fff; border: 1px solid #D0CCC4; border-radius: 999px; transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.oj .st-f textarea {
  width: 100%; box-sizing: border-box; min-height: 120px; margin: 0; padding: 14px 18px; resize: vertical; font-family: var(--serif, 'Libre Caslon Text', Georgia, serif); font-size: 15px; line-height: 1.6;
  color: var(--ink, #1B2638); background: #fff; border: 1px solid #D0CCC4; border-radius: 14px; transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.oj .st-f input:focus, .oj .st-f textarea:focus { outline: none; border-color: var(--green, #0F5A4F); box-shadow: 0 0 0 3px rgba(15,90,79,.14); }
.oj .st-f textarea[aria-invalid=true] { border-color: var(--danger); }

/* spacing the organisation page did not need */
.oj .oj-gap { margin-top: 18px; }
.oj .oj-tight { margin-top: 12px; }
.oj .oj-flush { margin-top: 0; }
.oj .oj-tick--gap { margin-bottom: 12px; }

/* a stage of photographs: its name, its count, its two ways in */
.oj .oj-stage { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line, #E6E0D0); }
.oj .oj-stage h4 { margin: 0; font-family: var(--sans, 'Inter', sans-serif); font-weight: 500; font-size: 14px; color: var(--navy, #0A1628); }
.oj .oj-stage h4 span { margin-left: 8px; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.oj .oj-stage .og-row { margin-top: 12px; }
.oj .oj-file { position: relative; }
.oj .oj-file input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.oj .oj-file:has(input:focus-visible) { outline: 3px solid var(--gold-soft, #D4A943); outline-offset: 2px; }

/* a tick that is a promise: set apart, never pre-ticked */
.oj .oj-tick { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border: 1px solid #D0CCC4; border-radius: 14px; background: #fff; cursor: pointer;
  font-family: var(--serif, 'Libre Caslon Text', Georgia, serif); font-size: 15px; line-height: 1.5; color: var(--ink, #1B2638); }
.oj .oj-tick input { margin-top: 4px; accent-color: var(--navy, #0A1628); }
.oj .oj-tick:has(input:checked) { border-color: var(--navy, #0A1628); box-shadow: inset 0 0 0 1px var(--navy, #0A1628); }
.oj .oj-tick:has(input:focus-visible) { outline: 3px solid var(--gold-soft, #D4A943); outline-offset: 2px; }

/* the notice, as a letter */
.oj .oj-notice { margin: 0; padding: 20px 22px; border: 1px solid var(--line, #E6E0D0); border-radius: 4px; background: #FFFDF8; white-space: pre-line;
  font-family: var(--serif, 'Libre Caslon Text', Georgia, serif); font-size: 14.5px; line-height: 1.65; color: var(--ink, #1B2638); max-height: 360px; overflow: auto; }
.oj .oj-notice::first-line { font-family: var(--sans, 'Inter', sans-serif); font-weight: 500; color: var(--navy, #0A1628); }

/* one record */
.oj .oj-back { display: inline-block; margin-bottom: 14px; font-family: var(--sans, 'Inter', sans-serif); font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--navy, #0A1628); text-decoration: none; }
.oj .oj-back:hover { text-decoration: underline; text-underline-offset: 4px; }
.oj .oj-part { margin-top: 30px; }
.oj .oj-part > h3 { margin: 0 0 6px; font-family: var(--sans, 'Inter', sans-serif); font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--navy, #0A1628); }
.oj .oj-part > h3 .c { margin-left: 8px; font-weight: 400; letter-spacing: .06em; color: var(--muted); }
.oj .oj-part > .st-hint:first-of-type { margin-top: 0; }

/* the photographs */
.oj .oj-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 16px; margin: 14px 0 0; padding: 0; list-style: none; }
.oj .oj-shot { min-width: 0; }
.oj .oj-shot .ph { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; padding: 0; border: 1px solid var(--line, #E6E0D0); background: var(--cream-2); cursor: zoom-in; }
.oj .oj-shot .ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.oj .oj-shot .ph .ph-note { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; text-align: center; font-family: var(--sans, 'Inter', sans-serif); font-size: 12px; line-height: 1.45; color: var(--muted); }
.oj .oj-shot .ph:focus-visible { outline: 3px solid var(--gold-soft, #D4A943); outline-offset: 2px; }
.oj .oj-shot .cap { margin: 8px 0 0; font-family: var(--serif, 'Libre Caslon Text', Georgia, serif); font-size: 14px; line-height: 1.45; color: var(--ink, #1B2638); }
.oj .oj-shot .how { margin: 6px 0 0; padding: 0; list-style: none; font-family: var(--sans, 'Inter', sans-serif); font-size: 11.5px; line-height: 1.5; color: #6B7280; }
.oj .oj-shot .how li + li { margin-top: 2px; }
.oj .oj-shot .how b { font-weight: 500; color: var(--ink, #1B2638); }
.oj .oj-shot .dl { margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--sans, 'Inter', sans-serif); font-size: 11.5px; color: var(--navy, #0A1628); text-decoration: underline; text-underline-offset: 3px; }

/* the notes */
.oj .oj-notes { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line, #E6E0D0); }
.oj .oj-notes > li { padding: 14px 0; border-bottom: 1px solid var(--line, #E6E0D0); }
.oj .oj-notes .at { font-family: var(--sans, 'Inter', sans-serif); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #6B7280; }
.oj .oj-notes .tx { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--serif, 'Libre Caslon Text', Georgia, serif); font-size: 15px; line-height: 1.6; color: var(--ink, #1B2638); }
.oj .oj-notes .fix { margin-left: 22px; padding-left: 16px; box-shadow: inset 2px 0 0 var(--gold, #83632C); }
.oj .oj-notes .re { margin-top: 8px; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--sans, 'Inter', sans-serif); font-size: 11.5px; color: var(--navy, #0A1628); text-decoration: underline; text-underline-offset: 3px; }

/* a quiet confirmation: what goes, and the reference to type */
.oj .oj-confirm { margin-top: 14px; padding: 16px 18px; border: 1px solid var(--line, #E6E0D0); border-radius: 14px; background: #fff; box-shadow: inset 3px 0 0 var(--danger); }
.oj .oj-confirm p { margin: 0 0 12px; font-family: var(--serif, 'Libre Caslon Text', Georgia, serif); font-size: 14.5px; line-height: 1.6; color: var(--ink, #1B2638); }
.oj .st-btn--stop { background: var(--danger); }
.oj .st-btn--stop:hover { background: var(--danger-ink); }

@media (max-width: 720px) {
  .oj .oj-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .oj .oj-notes .fix { margin-left: 10px; }
}
@media (prefers-reduced-motion: reduce) { .oj .st-f input, .oj .st-f textarea { transition: none; } }

/* ══ THE TAB IN THE TRADE DASHBOARD ═══════════════════════════  11 Oct 2026 (rp91) ══
   Sir: Your own jobs belongs in the tradesperson dashboard. The parts above
   came over unchanged; what changes is the ground. The page's navy head is
   gone, so the counts and the way round the tab sit on the dashboard's cream
   under its tab head (Overview, Money, Jobs): navy figures over tracked muted
   labels, outlined pills, as the head carried them in reverse. */
.oj-tab { display: grid; gap: 34px; margin-top: 6px; background: none; }
.oj-tab [hidden], .oj-tab .og-pick a[hidden] { display: none; }
.oj-tab .oj-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 36px; }
.oj-tab .og-counts { margin: 0; }
.oj-tab .og-counts li { color: var(--muted); }
.oj-tab .og-counts b { color: var(--navy, #0A1628); }
.oj-tab .og-pick { margin: 0; }
.oj-tab .og-pick a { color: var(--navy, #0A1628); box-shadow: inset 0 0 0 1px var(--line-2, #D8CFB8); transition: box-shadow 160ms var(--ease); }
.oj-tab .og-pick a:hover { box-shadow: inset 0 0 0 1px var(--navy, #0A1628); }
.oj-tab .og-pick a:focus-visible { outline: 2px solid var(--gold-soft, #D4A943); outline-offset: 3px; }
.oj-tab .oj-lede { margin: 0; max-width: 66ch; font-family: var(--serif, 'Libre Caslon Text', Georgia, serif); font-size: 15px; line-height: 1.75; color: var(--muted); }
.oj-tab .st-sec { scroll-margin-top: 104px; }
.oj-tab .oj-back { justify-self: start; }
.oj-tab #h-rec:focus { outline: none; }
.oj-tab #h-rec:focus-visible { outline: 2px solid var(--gold-soft, #D4A943); outline-offset: 4px; }
#tab-own { scroll-margin-top: 96px; }
@media (max-width: 720px) {
  .oj-tab { gap: 28px; }
  .oj-tab .oj-top { align-items: flex-start; }
}

/* THE OFFER, on Free with nothing kept (rp91): what a record holds, beside one
   drawn as an example. The example is the record's own parts at a small size,
   on paper, with its label first, so it reads as a picture of the mechanism. */
.oj-tab .oj-offer-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 30px clamp(28px, 4vw, 56px); align-items: start; }
.oj-tab .oj-offer-l { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.oj-tab .oj-offer-l li { position: relative; padding-left: 26px; font-family: var(--serif, 'Libre Caslon Text', Georgia, serif); font-size: 15px; line-height: 1.6; color: var(--ink, #1B2638); }
.oj-tab .oj-offer-l li::before { content: ''; position: absolute; left: 0; top: 7px; width: 12px; height: 7px; border-left: 1.6px solid var(--green, #0F5A4F); border-bottom: 1.6px solid var(--green, #0F5A4F); transform: rotate(-45deg); }
.oj-tab .oj-offer-l b { display: block; margin-bottom: 2px; font-family: var(--sans, 'Inter', sans-serif); font-size: 14px; font-weight: 500; color: var(--navy, #0A1628); }
.oj-tab .oj-spec { margin: 0; padding: 20px 22px 18px; background: #FFFDF8; border: 1px solid var(--line, #E6E0D0); box-shadow: 0 1px 1px rgba(10,22,40,.04), 0 14px 26px -20px rgba(10,22,40,.4); }
.oj-tab .oj-spec figcaption { margin-bottom: 12px; font-family: var(--sans, 'Inter', sans-serif); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold, #83632C); }
.oj-tab .oj-spec-ref { margin: 0; font-family: var(--sans, 'Inter', sans-serif); font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--muted); }
.oj-tab .oj-spec-t { margin: 4px 0 14px; font-family: var(--serif-display, 'Libre Caslon Display', Georgia, serif); font-size: 21px; line-height: 1.25; color: var(--navy, #0A1628); }
.oj-tab .oj-spec-st { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.oj-tab .oj-spec-st li { font-family: var(--sans, 'Inter', sans-serif); font-size: 11.5px; color: var(--muted); }
.oj-tab .oj-spec-st b { display: block; margin-top: 6px; font-weight: 500; color: var(--navy, #0A1628); }
.oj-tab .oj-spec-st .ph { display: block; aspect-ratio: 3 / 2; border: 1px solid var(--line, #E6E0D0);
  background: var(--cream-2, #F3EFE4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A8F78' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='14' rx='2'/%3E%3Ccircle cx='12' cy='13' r='3.6'/%3E%3Cpath d='M8.5 6l1.4-2.4h4.2L15.5 6'/%3E%3C/svg%3E") center / 26px no-repeat; }
.oj-tab .oj-spec-seal { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line, #E6E0D0); font-family: var(--sans, 'Inter', sans-serif); font-size: 12px; line-height: 1.5; color: var(--green, #0F5A4F); }
.oj-tab .oj-spec-keep { margin: 4px 0 0; font-family: var(--sans, 'Inter', sans-serif); font-size: 12px; line-height: 1.5; color: var(--muted); }
.oj-tab .oj-offer-go { margin-top: 26px; }
.oj-tab .oj-offer-go .st-hint { margin: 0; }
@media (max-width: 860px) { .oj-tab .oj-offer-in { grid-template-columns: minmax(0, 1fr); } }