/* Colour is kept for what it says: right or wrong, and the rule that decided the answer. */
.trainer { max-width: 1080px; margin: 0 auto; padding: 12px 16px 40px; }
.trainer [hidden] { display: none !important; }

.trainer-title { margin: 0 0 24px; color: var(--kw-text); }
.trainer-title span { color: var(--kw-text-secondary); font-weight: 400; }
.trainer-title span::before { content: '· '; }
/* On a narrow screen every line above the fish costs a part of the game: the heading stays in the
   document for search engines and screen readers, and takes no room. */
@media (max-width: 899px) {
    .trainer-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.trainer-settings { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.trainer-scope { margin: 0; color: var(--kw-text); font-size: 24px; font-weight: 800; line-height: 1.2; }
.trainer-scope-change { padding: 0; border: 0; background: none; color: var(--kw-text-secondary); font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.trainer-count { margin-left: auto; color: var(--kw-text-secondary); font-size: 13px; font-weight: 600; }

/* Wide: the board on the left; the date, the permit and the keepnet in a column on its right. */
.trainer-day { display: grid; grid-template-columns: minmax(0, 1fr) 248px; grid-template-areas: "stage side" "stage keepnet"; grid-template-rows: auto 1fr; gap: 12px; align-items: start; }
.trainer-side { grid-area: side; }
.trainer-stage { grid-area: stage; }
.trainer-keepnet { grid-area: keepnet; }
.trainer-side { display: grid; gap: 10px; }

/* The calendar leaf: the date decides whether a closed season is on. */
.trainer-leaf { display: grid; justify-items: center; overflow: hidden; border: 1px solid var(--kw-border-strong); border-radius: var(--kw-radius-lg); background: var(--kw-bg); box-shadow: var(--kw-shadow-sm); text-align: center; }
.trainer-leaf-weekday { width: 100%; padding: 5px 4px; background: var(--kw-surface-2); color: var(--kw-text); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.trainer-leaf.is-off .trainer-leaf-weekday { color: var(--kw-danger); }
.trainer-leaf-day { padding-top: 4px; font-size: 40px; font-weight: 800; line-height: 1; }
.trainer-leaf-month { padding: 2px 6px 6px; color: var(--kw-text-secondary); font-size: 13px; font-weight: 600; }
.trainer-leaf-off { width: 100%; padding: 4px 6px 6px; border-top: 1px solid var(--kw-border); color: var(--kw-danger); font-size: 11px; font-weight: 600; line-height: 1.3; }

.trainer-permit-button { min-height: 40px; padding: 6px 10px; border: 1px dashed var(--kw-border-strong); border-radius: var(--kw-radius-md); background: var(--kw-surface-1); color: var(--kw-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.trainer-permit-button:hover { border-color: var(--kw-text); }

.trainer-stage { min-width: 0; padding: 10px; border: 1px solid var(--kw-border); border-radius: var(--kw-radius-lg); background: var(--kw-bg); box-shadow: var(--kw-shadow-sm); }
.trainer-catch { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
.trainer-catch h2 { margin: 0; font-size: 20px; line-height: 1.2; }
/* The name is a link to the atlas but keeps the look of the heading it is. */
.trainer-catch h2 a, .trainer-catch h2 a:hover { color: inherit; text-decoration: none; }
.trainer-length { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }

/* The answer as a card over the fish: a hairline of colour on top says right or wrong, the right
   answer is the heading, the reason follows in lighter type. */
.trainer-verdict { margin: 8px 0 0; padding: 12px 16px 14px; border-top: 3px solid var(--kw-success); border-radius: 3px 3px 10px 10px; background: rgba(255, 255, 255, .95); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); color: #1A1D21; }
.trainer-verdict.is-wrong { border-top-color: var(--kw-danger); }
.trainer-verdict strong { display: flex; align-items: center; gap: 8px; font-size: 17px; line-height: 1.3; }
.trainer-verdict-icon { flex: none; width: 20px; height: 20px; }
.trainer-verdict-disc { fill: var(--kw-success); }
.trainer-verdict.is-wrong .trainer-verdict-disc { fill: var(--kw-danger); }
.trainer-verdict-sign { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.trainer-verdict .trainer-next { width: 100%; min-height: 44px; margin: 12px 0 0; padding: 6px 14px; }
.trainer-verdict p { margin: 6px 0 0; color: #3F4650; font-size: 15px; line-height: 1.5; }

/* The board keeps its own light colours: the atlas pictures are painted on white. The fish fills
   the whole board; its name, length and the answer lie over the top, the measuring line over the bottom. */
/* The fish and the ruler keep to the height the board starts with; an answer too long for it makes the board taller under them instead of being cut off. */
.trainer-board { --trainer-board-height: 330px; position: relative; min-height: var(--trainer-board-height); overflow: hidden; border-radius: var(--kw-radius-md); background: #fff; color: #1A1D21; }
.trainer-board-top { position: relative; z-index: 1; padding: 6px 8px 0; }
.trainer-fish { position: absolute; top: 0; right: 0; left: 0; width: 100%; height: var(--trainer-board-height); object-fit: contain; transition: opacity .45s ease, filter .45s ease; }
.trainer-board.is-kept .trainer-fish { opacity: .5; }
.trainer-board.is-released .trainer-fish { opacity: .35; }
.trainer-board.is-out .trainer-fish { filter: grayscale(1); opacity: .55; }

.trainer-ruler { position: absolute; top: var(--trainer-board-height); right: 0; left: 0; transform: translateY(-100%); display: block; width: 100%; height: auto; }
.trainer-calendar { display: block; width: 100%; height: auto; }
.trainer-axis { stroke: #1A1D21; stroke-width: .8; }
.trainer-tick { stroke: #1A1D21; stroke-width: .5; }
.trainer-label { fill: #1A1D21; font: 600 7px var(--kw-font); }
.trainer-marker { fill: #1A1D21; }
.trainer-calendar .trainer-label { fill: var(--kw-text-secondary); }
.trainer-year { fill: var(--kw-surface-2); }
.trainer-closed { fill: rgba(107, 114, 128, .4); }
.trainer-today { stroke: var(--kw-text); stroke-width: 1.6; }

.trainer-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.trainer-option { min-height: 46px; padding: 8px 10px; border: 2px solid var(--kw-border-strong); border-radius: var(--kw-radius-lg); background: var(--kw-bg); color: var(--kw-text); font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; cursor: pointer; }
.trainer-option:hover { border-color: var(--kw-text); background: var(--kw-surface-1); }
.trainer-option:focus-visible, .trainer-next:focus-visible, .trainer-permit-button:focus-visible { outline: 3px solid var(--kw-brand); outline-offset: 2px; }
.trainer-next { width: 100%; min-height: 46px; margin-top: 10px; justify-content: center; font-size: 15px; font-weight: 600; }

.trainer-result { margin-top: 8px; }
/* Two rows of two blocks in a fixed order, so every rule keeps its place from fish to fish. */
.trainer-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.trainer-panel { padding: 6px 10px 4px; border: 1px solid var(--kw-border); border-radius: var(--kw-radius-md); font-size: 13px; }
/* The block that decided the answer is marked by its title alone. */
.trainer-panel.is-decisive strong { color: var(--kw-danger); }
.trainer-panel p { margin: 2px 0 0; }
/* The scales start a little inside their drawing (10 of 320 units); the text of a block starts there too. */
.trainer-panel strong, .trainer-panel p { margin-left: 3.125%; }
.trainer-in-keepnet { font-weight: 600; }
.trainer-keepnet.is-decisive { border-color: var(--kw-danger); }
.trainer-length.is-decisive, .trainer-catch h2.is-decisive { color: var(--kw-danger); }
.trainer-leaf.is-decisive { border-color: var(--kw-danger); box-shadow: 0 0 0 1px var(--kw-danger); }
.trainer-keepnet li.is-counted { border-color: var(--kw-danger); }

.trainer-keepnet { padding: 10px; border: 1px solid var(--kw-border); border-radius: var(--kw-radius-lg); background: var(--kw-surface-1); }
.trainer-keepnet h2 { margin: 0 0 6px; font-size: 15px; }
.trainer-keepnet h2 span { color: var(--kw-text-secondary); font-weight: 500; }
.trainer-keepnet ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.trainer-keepnet li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 3px 8px 3px 3px; border: 1px solid var(--kw-border); border-radius: var(--kw-radius-md); background: var(--kw-bg); font-size: 13px; }
.trainer-keepnet img { width: 48px; height: 30px; border-radius: var(--kw-radius-sm); background: #fff; object-fit: contain; }
.trainer-keepnet-name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.trainer-keepnet-length { color: var(--kw-text-secondary); white-space: nowrap; }
.trainer-keepnet li.is-new { border-color: var(--kw-success); animation: trainer-drop .5s ease; }
.trainer-keepnet-empty { margin: 0; color: var(--kw-text-secondary); font-size: 13px; }
@keyframes trainer-drop { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }

.trainer-summary { max-width: 560px; margin: 0 auto; padding: 20px; border: 1px solid var(--kw-border); border-radius: var(--kw-radius-lg); background: var(--kw-bg); box-shadow: var(--kw-shadow-sm); }
.trainer-summary-kicker { margin: 0; color: var(--kw-text-secondary); font-size: 13px; font-weight: 600; text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.trainer-summary h2 { margin: 4px 0 2px; font-size: 40px; font-weight: 800; line-height: 1; text-align: center; }
.trainer-summary ol { padding-left: 20px; font-size: 14px; line-height: 1.6; }
.trainer-percent { margin: 0 0 12px; color: var(--kw-text-secondary); font-size: 14px; font-weight: 600; text-align: center; }
.trainer-skills { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--kw-border); }
.trainer-skills h3 { margin: 0 0 8px; font-size: 14px; }
.trainer-skills h3 span { color: var(--kw-text-secondary); font-size: 12px; font-weight: 500; }
.trainer-skills ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.trainer-skills li { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) 4.5em; align-items: center; gap: 10px; font-size: 13px; }
.trainer-skill-track { height: 8px; overflow: hidden; border-radius: 4px; background: var(--kw-surface-2); }
.trainer-skill-bar { display: block; height: 100%; border-radius: 4px; background: var(--kw-text-secondary); }
.trainer-skill-count { color: var(--kw-text-secondary); text-align: right; white-space: nowrap; }
.trainer-repeat, .trainer-progress { margin: 8px 0 0; color: var(--kw-text-secondary); font-size: 13px; }
.trainer-retry { padding: 0; border: 0; background: none; color: var(--kw-brand); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.trainer-status { min-height: 1.2em; margin: 4px 0 0; text-align: center; font-size: 13px; color: var(--kw-text-secondary); }
.trainer-about { margin: 32px 0 0; color: var(--kw-text-secondary); font-size: 14px; line-height: 1.6; }
.trainer-about h2 { margin: 0 0 8px; color: var(--kw-text); font-size: 18px; }
.trainer-about p { margin: 0 0 10px; }
.trainer-about strong { color: var(--kw-text); }
.trainer-about a { color: var(--kw-brand); }
.trainer-disclaimer { margin: 12px 0 0; color: var(--kw-text-secondary); font-size: 12px; line-height: 1.55; }

.trainer-permit { margin: auto; width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--kw-border-strong); border-radius: var(--kw-radius-lg); background: var(--kw-bg); color: var(--kw-text); box-shadow: var(--kw-shadow-lg); }
.trainer-permit::backdrop { background: rgba(0, 0, 0, .45); }
.trainer-permit header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 12px; border-bottom: 1px solid var(--kw-border); }
.trainer-permit-kicker { margin: 0; color: var(--kw-text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.trainer-permit h2 { margin: 2px 0 0; font-size: 18px; }
.trainer-permit-close { width: 36px; height: 36px; border: 0; border-radius: var(--kw-radius-md); background: var(--kw-surface-2); color: var(--kw-text); font-size: 22px; line-height: 1; cursor: pointer; }
.trainer-permit-scroll { max-height: 52vh; overflow: auto; padding: 0 16px; }
.trainer-permit table { width: 100%; border-collapse: collapse; font-size: 13px; }
.trainer-permit th, .trainer-permit td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--kw-border); text-align: left; vertical-align: top; }
.trainer-permit thead th { position: sticky; top: 0; background: var(--kw-bg); color: var(--kw-text-secondary); font-size: 12px; }
.trainer-permit td span { display: block; }
.trainer-permit-note { margin: 10px 16px 0; color: var(--kw-text-secondary); font-size: 12px; line-height: 1.5; }
.trainer-permit-note:last-child { margin-bottom: 16px; }

.trainer-chooser-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; max-height: 64vh; overflow: auto; padding: 12px 16px 16px; }
.trainer-chooser-list button { min-height: 40px; padding: 6px 10px; border: 1px solid var(--kw-border); border-radius: var(--kw-radius-md); background: var(--kw-bg); color: var(--kw-text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.trainer-chooser-list button:hover { border-color: var(--kw-brand); }
.trainer-chooser-list button.is-current { border-color: var(--kw-brand); background: var(--kw-brand-light); color: #1A1D21; font-weight: 700; }
.trainer-chooser-national { grid-column: 1 / -1; font-weight: 700; }

@media (max-width: 899px) {
    /* Narrow: the date with the permit under it, the keepnet beside them, the board below - what
       is already in the keepnet has to be seen before the decision. */
    .trainer-day { grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "leaf keepnet" "permit keepnet" "stage stage"; grid-template-rows: auto auto auto; }
    .trainer-side { display: contents; }
    .trainer-leaf { grid-area: leaf; align-self: start; }
    .trainer-permit-button { grid-area: permit; }
    .trainer-permit-label { display: none; }
    .trainer-permit-icon { font-size: 22px; line-height: 1; }
    .trainer-keepnet { align-self: stretch; padding: 6px 8px; }
    .trainer-keepnet h2 { margin-bottom: 4px; font-size: 13px; }
    .trainer-keepnet ul { display: flex; flex-wrap: wrap; gap: 4px; }
    .trainer-keepnet li { grid-template-columns: 36px auto auto; gap: 4px; padding: 2px 6px 2px 2px; font-size: 12px; }
    .trainer-keepnet img { width: 36px; height: 24px; }
    .trainer-leaf-day { font-size: 32px; }
    .trainer-panels { grid-template-columns: minmax(0, 1fr); }
    .trainer-panel-line { min-height: 0; }
    /* Here the blocks are as wide as the board, so the scales of the size and period blocks are pulled
       out over the padding and border to stand exactly under the measuring line. */
    .trainer-scale { width: calc(100% + 22px); max-width: none; margin: 0 -11px; }
    .trainer-panel strong, .trainer-panel p { margin-left: calc(3.125% - 10.3px); }
    .trainer-board { --trainer-board-height: 280px; }
    /* Less room than on a wide screen: the answer card keeps its type and padding small. */
    .trainer-verdict { margin-top: 6px; padding: 7px 12px 8px; }
    .trainer-verdict strong { font-size: 15px; }
    .trainer-verdict p { margin-top: 2px; font-size: 13px; line-height: 1.4; }
    .trainer-verdict .trainer-next { min-height: 40px; margin-top: 8px; }
}

/* A phone: the whole turn has to fit the screen without scrolling. The date becomes one line with
   the permit beside it, the keepnet a row of fish under them, the board lower, the three answers a
   single row. */
@media (max-width: 599px) {
    .trainer-permit th:first-child { min-width: 88px; }
    .trainer-scope { font-size: 20px; }
    .trainer-settings { margin-bottom: 8px; }

    .trainer-day { grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "leaf permit" "keepnet keepnet" "stage stage"; gap: 8px; }
    .trainer-leaf { display: flex; align-items: baseline; gap: 6px; min-height: 40px; padding: 9px 10px; border-radius: var(--kw-radius-md); box-shadow: none; text-align: left; white-space: nowrap; }
    .trainer-leaf-weekday { width: auto; padding: 0; background: none; font-size: 11px; }
    .trainer-leaf-day, .trainer-leaf-month { padding: 0; color: var(--kw-text); font-size: 15px; font-weight: 700; line-height: 1.3; }
    .trainer-leaf-off { flex: 1; min-width: 0; width: auto; padding: 0; overflow: hidden; border-top: 0; text-overflow: ellipsis; }
    .trainer-permit-button { min-height: 40px; padding: 0; }

    .trainer-keepnet { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 5px 8px; }
    .trainer-keepnet h2 { margin: 0; }
    .trainer-keepnet ul { display: contents; }
    .trainer-keepnet li { padding: 1px 6px 1px 1px; }
    .trainer-keepnet img { width: 30px; height: 20px; }
    .trainer-keepnet-empty { font-size: 12px; }

    .trainer-stage { padding: 8px; }
    .trainer-board { --trainer-board-height: 220px; }
    .trainer-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
    .trainer-option { min-height: 52px; padding: 6px 4px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .trainer-fish { transition: none; }
    .trainer-keepnet li.is-new { animation: none; }
}