/* ---------- THE PAGE AN ACCOUNT READS AND EDITS ITSELF ON ---------- */

/* Every colour here is one the palette already declares, per theme. Nothing on this page introduces
   a value of its own : a colour written outside the palette is one nobody measures for legibility,
   and this page is almost entirely sentences.

   There is no screen-width rule anywhere in this file either. Every media query on this site lives in
   one place, so a width written here would be a second place a layout changes and the two would come
   to disagree without anything saying so. */


/* ---------- the name and the address, which are read and not edited ---------- */

.profile-identity {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    text-align: left;
}

/* Label above value rather than beside it. The address is the longer of the two and is the one thing
   on this page somebody may genuinely need to read character by character, so it gets the whole width
   of the card instead of whatever is left over next to a label. */
.profile-identity-row {
    display: grid;
    gap: 2px;
}

.profile-identity-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted-dark);
}
body.light-mode .profile-identity-label { color: var(--muted-light); }

/* Broken anywhere it has to be, because an address has no spaces in it and one long enough would
   otherwise push the card wider than the window on a phone. */
.profile-identity-value {
    color: var(--text-dark);
    overflow-wrap: anywhere;
}
body.light-mode .profile-identity-value { color: var(--text-light); }

/* The sentence saying those two cannot be changed belongs to them, so it starts where they start.
   Without this rule it is centred, and not by accident : a card on this site paints its own
   paragraphs in a rule naming a class and an element, which outweighs the shared form rule this
   paragraph asks for however late that file is loaded. Two classes outweigh that rather than tying
   with it, which is what makes this hold whatever order the files are loaded in. */
.profile-identity .form-help {
    text-align: left;
}


/* ---------- the square a picture of an account is drawn in ---------- */

/* One shape wherever a picture of an account appears on this site : a square, with square corners.
   No circle and no rounded corners - decided once so that the topbar, this page and a list of
   comments cannot each answer it differently.

   The frame carries the size and the picture inside it fills that size, rather than the size being
   written on the picture itself : what is stored is already a square, and a frame that holds its shape
   whatever is inside it is what keeps the rest of the page from moving while a picture loads or when
   there is none to load at all. */
.profile-picture-area {
    display: grid;
    justify-items: center;
    margin-top: 20px;
}

/* Nothing gets out of the square, which is what `overflow` is doing here rather than tidiness : a
   picture that failed to load is drawn by the browser as its own description, and a description is
   text that is as long as it is. Clipped, a picture that is not there is an empty square ; unclipped,
   it is a sentence lying across the form underneath. */
.profile-picture-frame {
    width: 128px;
    height: 128px;
    border: 1px solid var(--border-dark);
    overflow: hidden;
}
body.light-mode .profile-picture-frame { border-color: var(--border-light); }

/* Cover rather than contain, so a square picture fills the square exactly and anything that somehow
   is not square is cropped rather than drawn with bars around it. */
.profile-picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Exactly one of the two is drawn, and which one is decided by the class this site puts on the
   document for its light theme. Written as a pair rather than as one rule and an override, so neither
   theme depends on the other having been read first. */
.profile-picture-on-light { display: none; }
body.light-mode .profile-picture-on-dark { display: none; }
body.light-mode .profile-picture-on-light { display: block; }


/* ---------- the file that has just been chosen, drawn before it is sent ---------- */

/* The preview is drawn in the same square as everything else, so what somebody sees before pressing
   send is the same shape, the same size and the same crop as what will be stored.

   Which of the pictures inside the frame is drawn stays a decision of this file : the script writes one
   class onto the frame and these three rules answer it. A script that assigned the declaration itself
   would outrank every rule here, including any a narrower screen might want to write.

   The element is named as well as the class, which puts these two above the pair of theme rules above
   at equal class count rather than leaving the outcome to which file was loaded last. */
.profile-picture-preview { display: none; }
.profile-picture-frame-previewing img.profile-picture { display: none; }
.profile-picture-frame-previewing img.profile-picture-preview { display: block; }


/* ---------- the two forms, the way back to the default, and the way out ---------- */

/* Everything about the boxes themselves comes from the shared form rules. What this page adds is the
   room between the square, the two forms and the step that removes a picture. */
.profile-identity + .profile-picture-area { margin-top: 24px; }
.profile-picture-area + .form { margin-top: 24px; }
.profile-picture-removal { margin-top: 16px; }
.profile-picture-removal + .form { margin-top: 24px; }

/* The last thing on the page, held away from the details form above it by more room than anything else
   here is given and by a line, because it is the one step on this page that nothing can put back. The
   sentence an administrator reads in its place sits in the same position, so the page has no gap where
   everybody else has a control. */
.profile-account-closure,
.profile-account-closure-refused { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border-dark); }
body.light-mode .profile-account-closure,
body.light-mode .profile-account-closure-refused { border-top-color: var(--border-light); }

/* The control that opens a confirmation, at the size every other control this site offers a finger
   is drawn at. `min-height` and not `height`, so a sentence long enough to wrap is free to make it
   taller rather than being drawn outside it.

   The two confirmations of this page are drawn by the same rules rather than by two copies of them :
   they are one kind of thing - a fold that asks before something is taken away - and a second set of
   declarations is the set that stops matching the first the day either is adjusted. */
.profile-picture-removal-summary,
.profile-account-closure-summary {
    min-height: 44px;
    padding: 12px 0;
    cursor: pointer;
    color: var(--muted-dark);
}
body.light-mode .profile-picture-removal-summary,
body.light-mode .profile-account-closure-summary { color: var(--muted-light); }

/* The panel behind it, drawn as a panel rather than as loose text so that what is inside reads as the
   consequence of having opened it. Its border is the pair the palette already declares ; nothing here
   introduces a colour of its own. */
.profile-picture-removal-form,
.profile-account-closure-form {
    display: grid;
    gap: 8px;
    justify-items: start;
    padding: 12px;
    border: 1px solid var(--border-dark);
}
body.light-mode .profile-picture-removal-form,
body.light-mode .profile-account-closure-form { border-color: var(--border-light); }

/* The button that actually takes something away is not inside a form row, so it takes neither the full
   width nor the tap height those rows give. It is given the second of the two here, because these are
   the two presses on this page that cannot be undone. */
.profile-picture-removal-form .form-button,
.profile-account-closure-form .form-button { min-height: 44px; }

/* The password box inside the closure panel is in a form row, and a row inside a grid whose items are
   packed to the start would otherwise be drawn only as wide as the label. */
.profile-account-closure-form .form-row { width: 100%; }

/* ---------- THE COUNTRY SUGGESTION PANEL ---------- */

/* The box is wrapped so the panel has the box's own width and position to hang from. Without this the
   panel would hang from the row, whose last child is the refusal line, and open below it. */
.country-box-anchor { position: relative; }

/* Drawn over the page rather than pushing it down : an in-flow panel moves the refusal line, the save
   button and everything under them on every keystroke, which is worse on a handset than on a desktop
   because that is where the panel is most used. The number is small on purpose - it has to win against
   the page and lose to the drawer, which the phone stylesheet opens at 1200 over a layer at 900. */
.country-suggestion-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 10;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border-dark);
    border-radius: 10px;
    background: var(--surface-dark);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
body.light-mode .country-suggestion-panel {
    border-color: var(--border-light);
    background: var(--surface-light);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* At the size every other control this site offers a finger is drawn at. `min-height` and not `height`,
   so one of the long inverted names is free to wrap and make its row taller rather than being drawn
   outside it. */
.country-suggestion {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    color: var(--text-dark);
    /* Carried by every row and coloured only on the highlighted one, so the text of a list does not
       shift sideways as the highlight moves down it. */
    border-left: 3px solid transparent;
}
body.light-mode .country-suggestion { color: var(--text-light); }

.country-suggestion + .country-suggestion { border-top: 1px solid var(--border-dark); }
body.light-mode .country-suggestion + .country-suggestion { border-top-color: var(--border-light); }

/* One highlight for the pointer and the keyboard both, so what a hover shows and what an arrow key
   selects are never two different things on the same list.

   The accent is the edge and not the fill, and that is a constraint rather than a preference : this
   palette's accent has never been a surface, and the contrast rule classifies a colour by what the
   stylesheets do with it - so filling a row with the accent makes it one, and then every text colour
   of the theme has to clear 4.5 to 1 against it. Measured : all fourteen fail, the best at 3.65. The
   fill is therefore a colour that is already a surface here, and the accent does the work at the edge
   where its own contrast is nobody's reading floor. */
.country-suggestion:hover,
.country-suggestion-active {
    background: var(--bg-dark);
    border-left-color: var(--accent);
    font-weight: 700;
}
body.light-mode .country-suggestion:hover,
body.light-mode .country-suggestion-active {
    background: var(--bg-light);
    border-left-color: var(--accent-light);
}